Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
dc9d544e
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3594
Star
108
Fork
920
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
120
列表
看板
标记
里程碑
合并请求
108
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
120
Issue
120
列表
看板
标记
里程碑
合并请求
108
合并请求
108
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
dc9d544e
编写于
9月 08, 2023
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
x
上级
bf7f91f7
变更
9
隐藏空白更改
内联
并排
Showing
9 changed file
with
65 addition
and
37 deletion
+65
-37
docs/collocation/main.md
docs/collocation/main.md
+3
-1
docs/collocation/pages.md
docs/collocation/pages.md
+1
-1
docs/component/README.md
docs/component/README.md
+6
-21
docs/plugin/uts-component.md
docs/plugin/uts-component.md
+1
-1
docs/tutorial/platform.md
docs/tutorial/platform.md
+6
-4
docs/uni-app-x/_sidebar.md
docs/uni-app-x/_sidebar.md
+2
-1
docs/uni-app-x/api/readme.md
docs/uni-app-x/api/readme.md
+13
-0
docs/uni-app-x/component/readme.md
docs/uni-app-x/component/readme.md
+33
-0
docs/uni-app-x/vue/readme.md
docs/uni-app-x/vue/readme.md
+0
-8
未找到文件。
docs/collocation/main.md
浏览文件 @
dc9d544e
...
...
@@ -41,7 +41,7 @@ export function createApp() {
}
```
> uni-app x 的
app.uvue
> uni-app x 的
main.uts
```
ts
import
App
from
'
./App
'
...
...
@@ -58,6 +58,8 @@ export function createApp() {
}
```
一般情况下,使用easycom比全局组件更常用,easycom按需应用更节省资源。
## 代码时序
开发者写的代码,在应用启动时,按如下时序加载:
...
...
docs/collocation/pages.md
浏览文件 @
dc9d544e
...
...
@@ -975,7 +975,7 @@ h5 平台下拉刷新动画,只有 circle 类型。
-
考虑到编译速度,直接在
`pages.json`
内修改
`easycom`
不会触发重新编译,需要改动页面内容触发。
-
`easycom`
只处理vue组件,不处理小程序专用组件(如微信的wxml格式组件)。不处理后缀为.nvue的组件。因为nvue页面引入的组件也是.vue组件。可以参考uni ui,使用vue后缀,同时兼容nvue页面。
-
`nvue`
页面里引用
`.vue`
后缀的组件,会按照nvue方式使用原生渲染,其中不支持的css会被忽略掉。这种情况同样支持
`easycom`
。
-
`vue`
与
`uvue`
组件优先级,
[
详见
](
https://zh.uniapp.dcloud.io/component/
#priority
)
。
-
`vue`
与
`uvue`
组件优先级,
[
详见
](
/uni-app-x/component/readme.md
#priority
)
。
## tabBar
...
...
docs/component/README.md
浏览文件 @
dc9d544e
...
...
@@ -19,7 +19,8 @@
下面是一个基本组件的实例,在一个vue页面的根
`<view>`
组件下插入一个
`<button>`
组件。给这个组件的内容区写上文字“按钮”,同时给这个组件设置了一个属性“size”,并且“size”属性的值设为了“mini”。
> 注:按照[vue单文件组件规范](https://cn.vuejs.org/v2/guide/single-file-components.html),每个vue文件的根节点必须为 `<template>`,且这个 `<template>` 下只能且必须有一个根 `<view>` 组件。
> 注:按照[vue单文件组件规范](https://cn.vuejs.org/v2/guide/single-file-components.html),每个vue文件的根节点必须为 `<template>`。
> vue2下,这个 `<template>` 下只能且必须有一个根 `<view>` 组件。vue3不限制。
```
html
<template>
...
...
@@ -71,11 +72,11 @@
除了上述公共属性,还有一类特殊属性以
`v-`
开头,称之为vue指令,如v-if、v-else、v-for、v-model。详见
[
vue指令
](
/tutorial/vue-api?id=%e6%a8%a1%e6%9d%bf%e6%8c%87%e4%bb%a4
)
#### 在组件中使用
js
变量
#### 在组件中使用
script的data
变量
组件中可以使用script的data中定义的
js
变量,但组件的属性中使用和内容区使用的用法不一样。
组件中可以使用script的data中定义的变量,但组件的属性中使用和内容区使用的用法不一样。
-
在内容区使用时,使用两个花括号来包裹,如下面的
`buttonText`
-
在
text
内容区使用时,使用两个花括号来包裹,如下面的
`buttonText`
-
在属性值中使用时,属性名的前面要加冒号前缀
下面的button组件示例,等价于上一个的示例。只不过静态内容改成动态js。
...
...
@@ -304,7 +305,7 @@ uni-app支持的组件分为vue组件和小程序自定义组件。
接下来一一讲解。
### easycom组件规范
### easycom组件规范
@easycom
> `HBuilderX 2.5.5`起支持
...
...
@@ -428,19 +429,3 @@ datacom组件是一种数据驱动的、可云端一体的组件。
### 扩展组件(uni-ui)@uniui
详见:
[
uni-ui介绍
](
/component/uniui/uni-ui.md
)
### vue 与 uvue 组件优先级 @priority
组件开发过程中,存在未明确指定组件后缀名的情况,例如:
1.
使用
[
easycom
](
https://uniapp.dcloud.net.cn/collocation/pages.html#easycom
)
时。
2.
在
`import`
语句中未指定后缀名时,例如:
`import PageHead from '@/components/page-head';`
。
此时
`vue`
组件和
`uvue`
组件的优先级如下:
-
在
`uni-app x`
中,优先使用
`uvue`
组件,如果不存在
`uvue`
组件,则使用
`vue`
组件。
-
在
`uni-app`
中,只支持使用
`vue`
组件。
**更多组件**
除了基础组件、uni-ui,插件市场还有更多扩展组件、模板,包括前端组件和原生扩展组件,具体见
[
插件市场
](
https://ext.dcloud.net.cn/
)
。
关于其他vue的web组件库、小程序组件库是否能在uni-app中使用的问题,参考
[
https://ask.dcloud.net.cn/article/35489
](
https://ask.dcloud.net.cn/article/35489
)
docs/plugin/uts-component.md
浏览文件 @
dc9d544e
...
...
@@ -2,7 +2,7 @@
> 需HBuilderX 3.6.18 及之后版本
> app平台目前
仅支持n
vue
> app平台目前
支持nvue/uvue,暂不支持
vue
UTS组件,是UTS插件的一个分支。UTS插件提供了原生API的扩展,而UTS组件提供了原生UI组件的开发模式。
...
...
docs/tutorial/platform.md
浏览文件 @
dc9d544e
...
...
@@ -191,13 +191,13 @@ uni-app 已将常用的组件、API封装到框架中,开发者按照 uni-app
json的条件编译,如不同平台的key名称相同,cli项目下开发者自己安装的校验器会报错,需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器,无需在意此问题,HBuilderX的语法校验器为此优化过。
### static 目录的条件编译
### static 目录的条件编译
@static
在不同平台,引用的静态资源可能也存在差异,通过 static 的条件编译可以解决此问题,static 目录下新建不同平台的专有目录,
|目录名称|说明|
|:-:|:-:|
|app
-plus
|App|
|app|App|
|h5|H5|
|mp-weixin|微信小程序|
|mp-alipay|支付宝小程序|
...
...
@@ -231,11 +231,13 @@ json的条件编译,如不同平台的key名称相同,cli项目下开发者
**注意**
-
`platforms`
目录下只支持放置页面文件(即页面vue文件),如果需要对其他资源条件编译,建议使用
[
static 目录的条件编译
](
https://uniapp.dcloud.net.cn/tutorial/platform.html#static-%E7%9B%AE%E5%BD%95%E7%9A%84%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91
)
。
-
`platforms`
目录下只支持放置页面文件(即页面vue文件),如果需要对其他资源条件编译,建议使用
[
static 目录的条件编译
](
#static
)
。
### uts 的条件编译@UTS
对于
`APP-ANDROID`
和
`APP-IOS`
两个平台,在uni-app项目中,仅uts文件中支持(通常是uts插件里使用);在uni-app x项目中,只要是条件编译支持的文件,均可以使用。
对于
`APP-ANDROID`
和
`APP-IOS`
两个平台,
-
在uni-app项目中,仅uts文件中支持(通常是uts插件里使用)
-
在uni-app x项目中,只要是条件编译支持的文件,均可以使用
<pre
v-pre=
""
data-lang=
"javascript"
><code
class=
"lang-javascript code"
><span
class=
"token comment"
>
//
<span
style=
"color:#859900;"
>
#ifdef
</span><b
style=
"color:#268BD2"
>
%PLATFORM%
</b></span>
平台特有的API实现
...
...
docs/uni-app-x/_sidebar.md
浏览文件 @
dc9d544e
...
...
@@ -21,6 +21,7 @@
*
[
组件
](
/tutorial/vue3-components.md
)
*
[
API
](
/tutorial/vue3-api.md
)
*
组件
*
[
概述
](
component/readme.md
)
*
[
公共属性和事件
](
component/common.md
)
*
[
view
](
component/view.md
)
*
[
scroll-view
](
component/scroll-view.md
)
...
...
@@ -42,8 +43,8 @@
*
[
video
](
component/video.md
)
*
[
web-view
](
component/web-view.md
)
*
[
animation-view
](
component/animation-view.md
)
*
[
vue 与 uvue 组件优先级
](
/component/README.md#priority
)
*
API
*
[
概述
](
api/readme.md
)
*
全局
*
[
getApp
](
api/getApp.md
)
*
[
getCurrentPages
](
api/getCurrentPages.md
)
...
...
docs/uni-app-x/api.md
→
docs/uni-app-x/api
/readme
.md
浏览文件 @
dc9d544e
# API概述
uni-app x支持的API包括:
uni-app x项目的uts代码中可以使用很多API。包括:
-
uts的api
[
详见
](
/uts/buildin-object-api/global.md
)
-
全局api,前面不需要加
`uni.`
。如
`getApp`
-
uni.xxx的内置api。见左侧
-
uniCloud.xxx的内置api。见左侧
-
Dom的api
[
详见
](
dom/README.md
)
-
原生API
*
由于uts可以直接调用Android和iOS的API,所以os和三方sdk的能力都可以在uts中调用。
-
dom的api
[
详见
](
dom/README.md
)
-
vue的api
[
详见
](
/tutorial/vue3-api.md
)
-
原生api
*
由于uts可以直接调用Android和iOS的api,所以os和三方sdk的能力都可以在uts中调用。
*
一般原生能力建议封装为
[
uni_modules
](
/plugin/uni_modules.md
)
形式的
[
uts插件
](
/plugin/uts-plugin.md
)
。
\ No newline at end of file
docs/uni-app-x/component/readme.md
0 → 100644
浏览文件 @
dc9d544e
# uvue组件概述
uni-app x支持vue组件,不支持小程序wxml组件。
支持
[
easycom
](
/component/README.md#easycom
)
。
uvue的组件,可以使用前端技术编写,也可以使用原生技术编写。
-
前端技术即新建一个vue或uvue文件,按vue组件规范编写代码。
-
原生的uts组件插件,指把原生的、需要在界面上显示的组件,编写uts代码,通过uni_modules插件的方式集成到uni-app项目中。比如
*
lottie组件,使用uts调用原生的lottie sdk来开发组件,再引入页面中。
[
详见
](
https://ext.dcloud.net.cn/plugin?name=uni-animation-view
)
*
video组件,其实官方的video,也是用uts组件插件实现的
之所以称之为
`uts组件插件`
,是相对于另一个分类
`uts api插件`
。
uts组件插件的开发教程,
[
详见
](
/plugin/uts-component.md
)
## vue 与 uvue 不同文件后缀的优先级 @priority
新建组件时,默认组件的后缀名为.vue。而不是.uvue。
.vue里面写uvue的语法,可以正常被.uvue页面引用和编译。
.vue里写条件编译,可以制作同时满足uni-app和uni-app x的组件。
但是uni-app x也支持.uvue文件的组件。
当你手动import或easycom手动配置规则,可以指定文件名后缀。比如
`import PageHead from '@/components/page-head.uvue'`
但如果未明确指定组件后缀名的情况,且同一个组件目录下即存在.vue文件、又存在.uvue文件,
此时
`vue`
组件和
`uvue`
组件的优先级如下:
-
在
`uni-app x`
中,优先使用
`uvue`
组件,如果不存在
`uvue`
组件,则使用
`vue`
组件。
-
在
`uni-app`
中,只支持使用
`vue`
组件。
docs/uni-app-x/vue/readme.md
浏览文件 @
dc9d544e
...
...
@@ -5,11 +5,3 @@ uni-app x的vue语法,是按vue3规范实现的,但一期uvue不支持setup
目前也不支持vue插件,比如pinia、vuex、i18n、router。简单的状态管理可以参考文档
[
全局变量和状态管理
](
tutorial/store.md
)
还有一些支持差异,在左侧文档点开后搜索“uni-app x”可见。
-
组件使用注意
默认组件的后缀名为.vue。而不是.uvue。
.vue里面写uvue的语法,可以正常被.uvue页面引用和编译。
如果使用.uvue的组件,则需要手动import,包括easycom也必须配规则才能识别。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录