提交 a3abe078 编写于 作者: D DCloud_LXH

chore: 调整文档结构

上级 ccb3ca7d
......@@ -32,6 +32,9 @@
|push|推送|
<!-- UNIAPPAPIJSON.getProvider.param -->
**success 返回参数说明**
|参数名|类型|说明|
......
# uni.pageScrollTo(OBJECT)
## uni.pageScrollTo(OBJECT)
将页面滚动到目标位置。可以指定滚动到具体的scrollTop数值,也可以指定滚动到某个元素的位置
......
### 组件使用的入门教程
## 组件使用的入门教程
- 组件是视图层的基本组成单元。
- 组件是一个单独且可复用的功能模块的封装。
......@@ -32,7 +32,7 @@
通过了解[button组件](/component/button)的文档,我们知道上述代码将在页面中绘制一个按钮,按钮显示的文字是“按钮”,按钮的大小是小尺寸的。
#### 组件的属性类型
### 组件的属性类型
组件的属性,有多种类型:
......@@ -56,7 +56,7 @@
</template>
```
#### 公共属性列表
### 公共属性列表
每个组件都有各自定义的属性,但所有uni-app的组件,都有如下属性:
......@@ -72,7 +72,7 @@
除了上述公共属性,还有一类特殊属性以`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)
#### 在组件中使用script的data变量
### 在组件中使用script的data变量
组件中可以使用script的data中定义的变量,但组件的属性中使用和内容区使用的用法不一样。
......@@ -99,7 +99,7 @@
</script>
```
#### 组件的事件
### 组件的事件
每个组件都有“事件”。事件就是在指定的条件下触发某个js方法。
......@@ -131,7 +131,7 @@
```
### 基础组件
## 基础组件
uni-app的组件,分为基础组件和扩展组件。
......@@ -159,7 +159,7 @@ uni-app为开发者提供了一系列基础组件,类似HTML里的基础标签
```
#### 基础组件列表
### 基础组件列表
基础组件分为以下十几大类:
......@@ -263,7 +263,7 @@ uni-app为开发者提供了一系列基础组件,类似HTML里的基础标签
在小程序平台和nvue平台,还有一些专有组件,比如open-data,详见左侧导航
### 扩展组件的意义
## 扩展组件的意义
虽然所有的业务需求都可以通过基础组件满足,但仅有基础组件是低效的,实际开发中会有很多封装的组件。
......@@ -287,7 +287,7 @@ uni-app为开发者提供了一系列基础组件,类似HTML里的基础标签
- 代码更加方便组织和管理,并且扩展性也更强,便于多人协同开发。
- 组件化开发能大幅度提高应用开发效率、测试性、复用性等。
### 组件的类别
## 组件的类别
uni-app支持的组件分为vue组件和小程序自定义组件。
......@@ -305,7 +305,7 @@ uni-app支持的组件分为vue组件和小程序自定义组件。
接下来一一讲解。
### easycom组件规范@easycom
## easycom组件规范@easycom
> `HBuilderX 2.5.5`起支持
......@@ -365,7 +365,7 @@ uni-app支持的组件分为vue组件和小程序自定义组件。
</script>
```
### uni_module规范
## uni_module规范
uni_module其实不止服务于组件,它可以服务于组件、js库、页面、项目等所有DCloud插件市场所支持的种类。
......@@ -377,7 +377,7 @@ uni_module还支持云端一体的插件。
uni_module有详细的专项文档,请另行查阅[uni_module规范](/plugin/uni_modules.md)
### uniCloud组件
## uniCloud组件
uniCloud是DCloud提供的、配套uni-app的云开发服务。
......@@ -389,9 +389,9 @@ uni-app的基础组件中,有一个特殊基础组件是:`<unicloud-db>`组
除了内置的数据库组件,在uni-ui扩展库里还有uniCloud的文件选择和上传组件,参考:[uni-file-picker](https://ext.dcloud.net.cn/plugin?id=4079)
### 原生组件和原生插件
## 原生组件和原生插件
#### 基础组件里的原生组件
### 基础组件里的原生组件
uni-app的基础组件里,有一批原生组件,如video、map...
......@@ -403,7 +403,7 @@ uni-app的基础组件里,有一批原生组件,如video、map...
相关文档详见:[uni-app内置原生组件说明](/component/native-component)
#### uni-app的App端原生插件
### uni-app的App端原生插件
uni-app的App端支持原生插件,这类插件使用iOS或Android原生语言编写,封装成插件,供其他开发者使用js来调用。
......@@ -413,7 +413,7 @@ uni-app的App端支持原生插件,这类插件使用iOS或Android原生语言
相关文档详见:[uni-app原生插件开发](https://nativesupport.dcloud.net.cn/NativePlugin/README)
### datacom
## datacom
datacom组件是一种数据驱动的、可云端一体的组件。
......@@ -421,11 +421,11 @@ datacom组件是一种数据驱动的、可云端一体的组件。
相关文档详见:[datacom组件](/component/datacom)
### 如何封装组件
## 如何封装组件
封装组件涉及的知识点较多,相关文档详见:[vue组件详解](https://uniapp.dcloud.io/vue-components)
### 扩展组件(uni-ui)@uniui
## 扩展组件(uni-ui)@uniui
详见: [uni-ui介绍](/component/uniui/uni-ui.md)
#### animation-view
### animation-view
Lottie动画组件,动画资源参考[Lottie官方链接](https://airbnb.design/lottie/)
......
# button
## button
按钮。
......
### 组件的概念
## 组件的概念
组件是现代开发的重要里程碑。组件重构了分工模型,让大量的轮子出现,让开发者可以拿来轮子直接用,大幅提升了整个产业的效率。
uni-app是有[内置组件](https://uniapp.dcloud.io/component/README)的。这和web开发不一样。
......@@ -12,7 +12,7 @@ uni-app的[插件市场](https://ext.dcloud.net.cn/),有很多扩展组件,
有些开发者喜欢成套的组件,但注意成套扩展组件也不可能覆盖所有需求,很多场景还是需要单独下载专业组件。
### 扩展组件的选择
## 扩展组件的选择
众多扩展组件如何选择?我们首先要搞清楚组件的分类。
组件分2大类:1、vue组件(文件后缀为vue);2、小程序自定义组件(文件后缀为wxml或其他小程序平台特有后缀名称)
......@@ -45,7 +45,7 @@ vant的web版操作了dom,所以只能用于web端;而vant weapp是微信小
- nvue支持:如果开发App,可能会涉及到nvue原生渲染页面,这种渲染方式支持的css有限,此时就要甄别组件是否兼容nvue。
再来看看各种成套UI的优劣分析
#### uni ui
### uni ui
DCloud官方出了一套扩展组件,即[uni-ui](https://uniapp.dcloud.io/component/uniui/uni-ui)
这些扩展组件支持单个组件从插件市场下载,也支持[npm引入](https://ext.dcloud.net.cn/plugin?id=55)uni ui,当然更方便的是在HBuilderX新建项目时直接选择`uni ui项目模板`
uni ui有如下优势:
......@@ -65,7 +65,7 @@ uni ui有如下优势:
![](https://ask.dcloud.net.cn/uploads/article/20200424/dc948a41cd85a418e84cde325c055a75.jpg)
![](http://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni-ui-snippet.jpg)
#### 插件市场更多组件
### 插件市场更多组件
插件市场,[https://ext.dcloud.net.cn](https://ext.dcloud.net.cn),有各种玲琅满目的组件、模板。
其中成套的全端兼容ui库包括:
- [uViewUI](https://www.uviewui.com):整合了非常多组件,功能丰富、文档清晰,但不支持nvue(2.x已支持nvue)
......@@ -77,11 +77,11 @@ uni ui有如下优势:
### 其他
## 其他
- 如果你仍坚持使用微信小程序的自定义组件ui,插件市场也有很多vant weapp版的集成示例[https://ext.dcloud.net.cn/search?q=vant](https://ext.dcloud.net.cn/search?q=vant)。同时要注意,小程序自定义组件的性能不如vue组件。
- 如果你的nvue文件使用weex编译模式,也支持weex ui。三方商业ui库有graceUI weex版。但weex编译模式属于被淘汰技术,不再提供技术支持,nvue开发请使用uni-app编译模式。
综上,官方对组件的使用建议是:
1. 首先使用内置组件
2. 然后使用uni ui扩展组件
3. 其他需求依靠插件市场其他组件灵活补充
\ No newline at end of file
3. 其他需求依靠插件市场其他组件灵活补充
#### custom-tab-bar
### custom-tab-bar
自定义tabBar组件。
......
### 什么是datacom
## 什么是datacom
`datacom`,全称是`data components`,数据驱动的组件。
......@@ -95,7 +95,7 @@
图例:
![](https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/f5c64490-2994-11eb-a554-03adfa49bb37_0.jpg)
### 什么是datacom组件规范
## 什么是datacom组件规范
显然,datacom组件不是只有一个`<uni-data-checkbox>`,radio、check、select、picker、segement、tree...还有很多组件都可以成为datacom组件,变成类似`<uni-data-picker>`
......@@ -105,7 +105,7 @@
详细的“datacom组件规范”见后文。
### datacom对于开发者的好处
## datacom对于开发者的好处
datacom组件,对服务器数据规范、前端组件的数据输入和输出规范,做了定义。它提升了产业的标准化程度、细化了分工,提升了效率。
......@@ -126,14 +126,14 @@ datacom组件,对服务器数据规范、前端组件的数据输入和输出
5. 额外的,开发者将可以在插件市场找到多个城市选择组件,它们都符合`datacom组件规范`,可能有的是全屏选择、有的是底部半屏选择,有的顶部有搜索框、有的右侧有索引字母....不管什么样的城市选择组件,你都可以随便的换,反正它们都符合一个数据规范。
### datacom组件规范
## datacom组件规范
1. 命名以 -data- 为中间分隔符,前面为组件库名称,后面是组件功能表达
2. 组件可以通过属性赋值,绑定一个 data 数据。可以是本地的localdata,也可以直接指定uniCloud云数据库的查询结果。详见下文的《数据绑定规范》
3. data数据是一组候选json数据。数据可以是平铺的数组,也可以是嵌套的树形结构。详见下文的《数据结构规范》
4. 符合 `<uni-forms>` 组件的表单校验规范
#### 数据结构规范
### 数据结构规范
datacom组件接受的数据结构,包含了“数组”和“树”两种数据结构规范。
......@@ -253,7 +253,7 @@ data数据是可遍历嵌套的数据集合。数组中每条数据如下基本k
</script>
```
#### 数据绑定规范
### 数据绑定规范
`datacom组件 `的data,可以来自页面本地,即localdata;也可以直接指定uniCloud的云数据库查询结果,即指定collection表名、field字段名、where条件,这些写法与`unicloud-db组件`的写法相同,如果localdata和collection同时存在,优先使用localdata。
......@@ -284,9 +284,9 @@ collection表名、field字段名、where条件的写法,详见[clientDB组件
datacom组件规范还要求支持绑定 value,且支持双向绑定,即:支持`v-model`指令。这同时也是为了uni-forms的表单校验。
#### 组件属性规范
### 组件属性规范
##### 分步查询属性规范
#### 分步查询属性规范
`datacom组件`的data来自uniCloud的云数据库或cdn等云端,且数据量较大时,我们通常可以选择分步查询来优化用户体验,如以下场景:
......@@ -303,7 +303,7 @@ datacom组件规范还要求支持绑定 value,且支持双向绑定,即:
|parent-field |String | |"树"结构的父字段名称。常用于树,picker,参考:`uni-data-picker` |
|@stepsearch |EventHandle| |分步查询数据时触发。可用于自定义分步查询数据,参考:`uni-data-picker` |
##### 弹出类属性规范
#### 弹出类属性规范
`datacom组件`为弹出类组件,设计了以下组件属性、事件:
......@@ -314,12 +314,12 @@ datacom组件规范还要求支持绑定 value,且支持双向绑定,即:
|@popupclosed |EventHandle| |组件弹出关闭时触发。参考:`uni-data-picker`|
### datacom的局限
## datacom的局限
- 与基础代码相比,datacom用起来简单,但封装一层后导致其灵活性不如基础组件。如有个性化逻辑则有可能需要改组件源码。
- datacom覆盖范围主要是选择类组件。按钮类、输入类组件并不适合做成datacom。
### 有哪些组件可做成datacom
## 有哪些组件可做成datacom
选择类组件很多,基本逻辑都是在指定的数据范围内,选择其中的一个或多个。
......@@ -352,7 +352,7 @@ datacom组件规范还要求支持绑定 value,且支持双向绑定,即:
欢迎开发者们开发这些`datacom组件`。插件市场提供了[datacom组件专区](https://ext.dcloud.net.cn/search?&q=DataCom&type=UpdatedDate),给予更高的显示权重。
### 使用mixinDatacom快速开发datacom@mixindatacom
## 使用mixinDatacom快速开发datacom@mixindatacom
> 版本要求:HBuilderX 3.1.0+
......@@ -362,7 +362,7 @@ datacom组件规范还要求支持绑定 value,且支持双向绑定,即:
mixin是vue的技术,不熟悉的可以点此了解[vue官网的mixin文档](https://cn.vuejs.org/v2/api/#Vue-mixin)
#### 语法手册
### 语法手册
`uniCloud.mixinDatacom` 的props
......@@ -410,7 +410,7 @@ mixin是vue的技术,不熟悉的可以点此了解[vue官网的mixin文档](h
|mixinDatacomEasyGet |加载数据,包含 `mixinDatacomLoading``mixinDatacomHasMore``mixinDatacomErrorMessage` 逻辑 |
|onMixinDatacomPropsChange |属性发生变化时触发|
#### 使用方法
### 使用方法
使用 `uniCloud.mixinDatacom` 开发 `datacom` 组件需要以下步骤
......@@ -571,7 +571,7 @@ mixin是vue的技术,不熟悉的可以点此了解[vue官网的mixin文档](h
```
#### `uniCloud.mixinDatacom` 源码 @mixinDatacomsource
### `uniCloud.mixinDatacom` 源码 @mixinDatacomsource
为方便开发者理解mixinDatacom的工作原理,这里贴出mixinDatacom的源码:
uni-app-x 3.99+ 开始支持
......@@ -1139,4 +1139,4 @@ export const mixinDatacom = defineMixin({
}
})
```
:::
\ No newline at end of file
:::
# editor 组件
## editor 组件
富文本编辑器,可以对图片、文字格式进行编辑和混排。
......
#### 原生组件说明
### 原生组件说明
小程序和App的vue页面,主体是webview渲染的。为了提升性能,小程序和App的vue页面下部分ui元素,比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。
......@@ -24,7 +24,7 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
* [ad](/component/ad) (仅app、微信小程序、百度小程序、抖音小程序、QQ小程序支持)
#### 混合渲染模式下原生组件的使用限制
### 混合渲染模式下原生组件的使用限制
由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制:
......@@ -40,7 +40,7 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
* 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域。
* 在小程序端真机上,原生组件会遮挡 vConsole 弹出的调试面板。
#### 其他原生界面元素
### 其他原生界面元素
除了原生组件外,uni-app在非H5端还有其他原生界面元素,清单如下:
* 原生navigationBar和tabbar(pages.json里配置的)。
* web-view组件虽然不是原生的,但这个组件相当于一个原生webview覆盖在页面上,并且小程序上web-view组件是强制全屏的,无法在上面覆盖前端元素
......@@ -49,7 +49,7 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
注意:app的nvue页面里的组件虽然不涉及map、video等原生组件的层级遮挡问题,但pages.json中配置的原生tabbar、原生navigationBar,一样是nvue里的组件也无法遮挡的。
#### vue页面层级覆盖解决方案
### vue页面层级覆盖解决方案
为了解决webview渲染中原生组件层级最高的限制,uni-app提供了 [cover-view](/component/cover-view)[cover-image](/component/cover-view?id=cover-image) 组件,让其覆盖在原生组件上。
......@@ -94,14 +94,14 @@ subNVue的层级高于前端元素,但多个subNVue以及Webview,它们之
当然每个subNVue和webview,都支持Style参数配置,其中有一个zindex属性,可以调节它们的层级。
#### App的nvue页面层级问题
### App的nvue页面层级问题
nvue页面全部都是原生组件,互相之间没有层级问题。
但如果在pages.json里注册了原生导航栏和tabbar,nvue里的界面元素默认也无法覆盖这些,也需要plus.nativeObj.view或subNVue。
如果仅开发App,不跨端,不愿涉及层级问题,也可以不使用pages.json里的原生导航栏和tabbar,nvue页面不需要这些来强化性能。
#### Android系统主题字体对原生组件渲染的影响
### Android系统主题字体对原生组件渲染的影响
在Android手机上,调整系统主题字体,所有原生渲染的控件的字体都会变化,而webview渲染的字体则不一定会变化,有的rom的系统webview会跟随变,有的不会变。
......
#### official-account
### official-account
微信公众号关注组件。当用户扫小程序码打开小程序时,开发者可在小程序内配置公众号关注组件,方便用户快捷关注公众号,可嵌套在原生组件内。
......
# scroll-view
## scroll-view
可滚动视图区域。用于区域滚动。
......
# text组件
## text组件
文本组件。用于包裹文本内容。
......
### component
## component
渲染一个“元组件”为动态组件。依 `is` 的值,来决定哪个组件被渲染。[详见](https://v2.cn.vuejs.org/v2/api/#component)
......@@ -14,7 +14,7 @@
### template
## template
`uni-app` 支持在 `template` 模板中嵌套 `<template/>``<block/>`,用来进行 [条件渲染](/tutorial/vue-basics.md#condition)[列表渲染](/tutorial/vue-basics.md#listrendering)
......@@ -69,7 +69,7 @@
### transition
## transition
`<transition>` 元素作为单个元素/组件的过渡效果。`<transition>` 只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。[详见](https://v2.cn.vuejs.org/v2/api/#transition)
......@@ -83,7 +83,7 @@
### transition-group
## transition-group
`<transition-group>` 元素作为多个元素/组件的过渡效果。`<transition-group>` 渲染一个真实的 DOM 元素。默认渲染 `<span>`,可以通过 tag attribute 配置哪个元素应该被渲染。[详见](https://v2.cn.vuejs.org/v2/api/#transition-group)
......@@ -98,7 +98,7 @@
### keep-alive
## keep-alive
`<keep-alive>` 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 `<transition>` 相似,`<keep-alive>` 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。[详见](https://v2.cn.vuejs.org/v2/api/#keep-alive)
......@@ -111,7 +111,7 @@
### slot
## slot
`<slot>` 元素作为组件模板之中的内容分发插槽。`<slot>` 元素自身将被替换。[插槽](https://uniapp.dcloud.io/vue-components?id=%e6%8f%92%e6%a7%bd)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册