@@ -50,7 +50,7 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
开源中国: 中文开源技术交流社区,提供最新的开源软件资讯。
@@ -145,6 +145,8 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
**极志愿:**专业高考志愿填报。**
多端获客典型案例,1个月获得400万用户**,[详见报道](https://mp.weixin.qq.com/s?__biz=MzU3NTU5NDc0NA==&mid=2247491214&idx=1&sn=7e334d079146d9e31cea407f45bd8624&chksm=fd219719ca561e0f9a85b30017618eaf9551b46cdd6ecdf856bc4e47aee4ca93767fcf23147f&mpshare=1&scene=1&srcid=0713VwAOIuRllzMB6syoQssb&key=15a2b72b2464b4fe73325967f733ac332583d5db37f1812c63613c083a8f5921bca2ada2140d45e07657b062dc451f27cc48fe4fd298f6456f300895a90bd471480afdc2c8dc5a45254fb1dc48d3b79a&ascene=1&uin=MTkzNjMxMzU%3D&devicetype=Windows+10&version=62060833&lang=zh_CN&pass_ticket=xW6dPp%2F565g5S8hl1lz%2F8FLQBEzW6KUHyyqyHPdT2nk%3D)。体验方式:[App、微信小程序、百度小程序、H5 官网地址](https://www.jizhy.com/home/)
+**中华英才网:** 百度小程序搜索“中华英才网”
+
**联想集团官方小程序:** 微信小程序搜索 “联想集团”
**张亮麻辣烫:** 百度小程序搜索 “张亮麻辣烫”
@@ -161,16 +163,20 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
**浙江ETC:**微信小程序搜索 “浙江ETC”、支付宝小程序搜索 “浙江ETC”、[H5](https://issue.zjetc.cn/)
+**中国银联云闪付:** App部分页面使用uni-app制作
+
**拉卡拉收款宝:** App部分页面使用uni-app制作
**香橙:** 餐馆SaaS服务,手机点餐、下单、排队叫号、营销推广。[官网](http://ivcvc.com)
-**波比英语课堂:**幼儿英语启蒙神器培养国际宝宝。[App、小程序通用链接](//m3w.cn/bbyykt)
+**围棋战场:**围棋对弈,游戏类的小程序(非小游戏)。[微信小程序码](https://user-images.githubusercontent.com/16237216/65005363-327a9f80-d932-11e9-9be6-68cdbcdfdbf1.png)
-**课呱呱:**在线学习好工作。[App、小程序、H5通用链接](//m3w.cn/__uni__b19209a)
+**波比英语课堂:**幼儿英语启蒙神器培养国际宝宝。[App、小程序通用链接](http://m3w.cn/bbyykt)
**桂聘:** 广西区域招聘,随时随地找工作,[Android和iOS](http://www.guipin.com/jihui/)
+**课呱呱:**在线学习好工作。[App、小程序、H5通用链接](http://m3w.cn/__uni__b19209a)
+
**阿拉运:** 物流行业app,nvue案例,[iOS和Android下载页](http://mb.ialayun.com/)
**财金宝:** 多端理财记账工具,[iOS](https://itunes.apple.com/cn/app/%E8%B4%A2%E9%87%91%E5%AE%9D-%E8%AE%B0%E8%B4%A6%E7%90%86%E8%B4%A2%E8%B5%84%E4%BA%A7%E7%AE%A1%E5%AE%B6/id1275489865?mt=8)、[Android](https://android.myapp.com/myapp/detail.htm?apkName=me.caijinbao.jlm)、微信小程序、支付宝小程序搜索“财金宝”
@@ -439,6 +445,24 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
**垃圾分类帮帮团:** [微信小程序码地址](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/ljfl.png)
+**FUNSOLE:**Funsole疯收是一个专业的球鞋交易平台。[App和小程序通用链接](https://m3w.cn/funsole)
+
+**自由职业助手:**[微信小程序码](https://user-images.githubusercontent.com/34791472/60387434-b6608080-9ad5-11e9-8d5d-bc9f91e740ce.jpg)
+
+**拾阅草堂:**网络小说。[微信小程序码](https://user-images.githubusercontent.com/12842804/61346867-371ccc00-a88d-11e9-8386-18e27677869c.png)
+
+**千家找房:**二手房、新房买卖租赁平台。各大应用商城搜索“千家找房”下载APP、[H5](https://m.allqj.com)、[微信小程序二维码](https://user-images.githubusercontent.com/31872878/62843602-a3081e00-bced-11e9-8a2d-3f997be6cacf.png)
+
+**坤典智慧农场:**体验农村种植、养殖的生活,足不出户就可以租地种植自己的蔬菜了,养殖鸡鸭牛羊,通过视频远程查看。[iOS码](https://user-images.githubusercontent.com/29654065/63156422-3cfdfc80-c047-11e9-8c41-23d298279466.jpg)、[Android码](https://user-images.githubusercontent.com/29654065/63156422-3cfdfc80-c047-11e9-8c41-23d298279466.jpg)、[微信小程序码](https://user-images.githubusercontent.com/29654065/63156422-3cfdfc80-c047-11e9-8c41-23d298279466.jpg)、[H5码](https://user-images.githubusercontent.com/29654065/63156422-3cfdfc80-c047-11e9-8c41-23d298279466.jpg)
+
+**指动全城:**一个为宝宝选择好产品的线上渠道。[App和小程序通用链接](https://m3w.cn/__uni__6020544)
+
+**极客修:**专门修手机的小程序。微信、支付宝搜索 极客修 小程序
+
+**小米手环4自定义表盘软件:** [Android](https://www.coolapk.com/apk/tech.pingx.watchface)、[H5](http://watchface.pingx.tech/h5/)
+
+**斗豆侠:**购物App。[iOS](https://apps.apple.com/cn/app/id1395120441)、[Android](https://obs.myhwclouds.com/vipbean/xgyx_guns/APK/yq.apk)
+
#### 更多小程序案例(可在微信小程序中搜索)@wx-more
diff --git a/docs/collocation/App.md b/docs/collocation/App.md
new file mode 100644
index 0000000000000000000000000000000000000000..520d2c36e79ee78353e90995fc457b09449ec4e9
--- /dev/null
+++ b/docs/collocation/App.md
@@ -0,0 +1,69 @@
+`App.vue`是我们的主组件,所有页面都是在`App.vue`下进行切换的,是页面入口文件。
+
+在这个文件里,你可以初始化一些通用的组件,调用一些应用生命周期函数。
+
+应用生命周期仅可在`App.vue`中监听,在其它页面监听无效。
+### 应用生命周期
+
+`uni-app` 支持如下应用生命周期函数:
+
+|函数名 |说明 |
+|:- |:- |
+|onLaunch |当`uni-app` 初始化完成时触发(全局只触发一次) |
+|onShow |当 `uni-app` 启动,或从后台进入前台显示 |
+|onHide |当 `uni-app` 从前台进入后台 |
+|onUniNViewMessage|对 `nvue` 页面发送的数据进行监听,可参考 [nvue 向 vue 通讯](/use-weex?id=nvue-向-vue-通讯) |
+
+在`App.vue`文件里使用生命周期函数,如下:
+
+```html
+
+```
+
+**注意**
+- **应用生命周期仅可在`App.vue`中监听,在其它页面监听无效**。
+- onlaunch里进行页面跳转,如遇白屏报错,请参考[https://ask.dcloud.net.cn/article/35942](https://ask.dcloud.net.cn/article/35942)
+- `App.vue` 不能写模板
+
+### globalData
+小程序有globalData机制,这套机制在uni-app里也可以使用,全端通用。
+
+**以下是 App.vue 中定义globalData的相关配置:**
+
+```html
+
+```
+
+js中操作globalData的方式如下:
+`getApp().globalData.text = 'test'`
+
+如果需要把globalData的数据绑定到页面上,可在页面的onShow页面生命周期里进行变量重赋值。HBuilderX 2.0.3起,nvue页面在`uni-app`编译模式下,也支持onShow。
+
+weex编译模式中使用globalData的话,由于weex生命周期不支持onShow,但熟悉5+的话,可利用监听webview的addEventListener show事件实现onShow效果,或者直接使用weex生命周期中的beforeCreate。
+
+### 全局样式
+在`App.vue`中,可以一些定义全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.vue中。
+
+**例如:**
+
+现在有个页面背景是深色在vue页面中,可能会发生新窗体刚开始动画时是灰白色背景,动画结束时才变为深色背景,造成闪屏。这种情况就可以使用全局样式来解决。
+- 造成这种现象的原因是因为webview的背景生效太慢。此时可将样式写在 `App.vue` 里,来加速页面样式的渲染速度。因为`App.vue` 里面的样式是全局样式,每次新开页面会优先加载 `App.vue` 里面的样式,然后加载普通 vue 页面的样式去覆盖`App.vue` 里面的样式。
+- 另外nvue页面不存在此问题,也可以更改为nvue页面。
diff --git a/docs/collocation/_sidebar.md b/docs/collocation/_sidebar.md
index d2318a6a80fb67fbad50533a3cdfd85b9ee7ec61..962a950af95695eb1522007a3525b2ade9fc99a3 100644
--- a/docs/collocation/_sidebar.md
+++ b/docs/collocation/_sidebar.md
@@ -4,10 +4,12 @@
* [package.json](collocation/package.md)
* [vue-config.js](collocation/vue-config.md)
* [uni.scss](collocation/uni-scss.md)
+ * [App.vue](collocation/App.md)
+ * [main.js](collocation/main.md)
* 框架接口
* [日志打印](collocation/frame/log.md)
* [定时器](collocation/frame/timer.md)
- * [生命周期](collocation/frame/lifetime.md)
+ * [生命周期](collocation/frame/lifecycle.md)
* [页面](collocation/frame/window.md)
* [页面通讯](collocation/frame/communication.md)
diff --git a/docs/collocation/frame/lifetime.md b/docs/collocation/frame/lifecycle.md
similarity index 68%
rename from docs/collocation/frame/lifetime.md
rename to docs/collocation/frame/lifecycle.md
index c9041f87533239854f6f8bbca7b46b234ddc14b8..f7fc4b563ad9002ba85659125f9f02d70bb51179 100644
--- a/docs/collocation/frame/lifetime.md
+++ b/docs/collocation/frame/lifecycle.md
@@ -1,107 +1,147 @@
-### 应用生命周期
-
-``uni-app`` 支持如下应用生命周期函数:
-
-|函数名|说明|
-|:-|:-|
-|onLaunch|当``uni-app`` 初始化完成时触发(全局只触发一次)|
-|onShow|当 ``uni-app`` 启动,或从后台进入前台显示|
-|onHide|当 ``uni-app`` 从前台进入后台|
-|onUniNViewMessage|对 ``nvue`` 页面发送的数据进行监听,可参考 [nvue 向 vue 通讯](/use-weex?id=nvue-向-vue-通讯)|
-
-**注意**
-
-- 应用生命周期仅可在``App.vue``中监听,在其它页面监听无效。
-- onlaunch里进行页面跳转,如遇白屏报错,请参考[https://ask.dcloud.net.cn/article/35942](https://ask.dcloud.net.cn/article/35942)
-
-### 页面生命周期
-
-``uni-app`` 支持如下页面生命周期函数:
-
-|函数名|说明|平台差异说明|最低版本|
-|:-|:-|:-|:-|
-|onLoad|监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考[示例](/api/router?id=navigateto)|||
-|onShow|监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面|||
-|onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发|||
-|onHide|监听页面隐藏|||
+### 应用生命周期
+
+``uni-app`` 支持如下应用生命周期函数:
+
+|函数名|说明|
+|:-|:-|
+|onLaunch|当``uni-app`` 初始化完成时触发(全局只触发一次)|
+|onShow|当 ``uni-app`` 启动,或从后台进入前台显示|
+|onHide|当 ``uni-app`` 从前台进入后台|
+|onUniNViewMessage|对 ``nvue`` 页面发送的数据进行监听,可参考 [nvue 向 vue 通讯](/use-weex?id=nvue-向-vue-通讯)|
+
+**注意**
+
+- 应用生命周期仅可在``App.vue``中监听,在其它页面监听无效。
+
+**示例代码**
+```html
+
+```
+
+### 页面生命周期
+
+``uni-app`` 支持如下页面生命周期函数:
+
+|函数名|说明|平台差异说明|最低版本|
+|:-|:-|:-|:-|
+|onLoad|监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考[示例](/api/router?id=navigateto)|||
+|onShow|监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面|||
+|onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发|||
+|onHide|监听页面隐藏|||
|onUnload|监听页面卸载|||
-|onResize|监听窗口尺寸变化|5+App、微信小程序||
-|onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)|||
-|onReachBottom|页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项|||
-|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、5+App(自定义组件模式)||
-|onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、头条小程序、支付宝小程序||
-|onPageScroll|监听页面滚动,参数为Object|||
-|onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|5+ App、H5||
-|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|5+App、H5||
-|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|5+App、H5|1.6.0|
-|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|5+App、H5|1.6.0|
-|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|5+App、H5|1.6.0|
-
-``onReachBottom``使用注意
-可在pages.json里定义具体页面底部的触发距离[onReachBottomDistance](/collocation/pages),比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。
-
-如使用scroll-view导致页面没有滚动,则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档
-
-
-``onPageScroll`` (监听滚动、滚动监听、滚动事件)参数说明:
-
-|属性|类型|说明|
-|---|---|---|
-|scrollTop|Number|页面在垂直方向已滚动的距离(单位px)|
-
-**注意**
-- `onPageScroll`里不要写交互复杂的js,比如频繁修改页面。因为这个生命周期是在渲染层触发的,js是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿。
-
-``onTabItemTap`` 参数说明:
-
-|属性|类型|说明|
-|---|---|---|
-|index|String|被点击tabItem的序号,从0开始|
-|pagePath|String|被点击tabItem的页面路径|
-|text|String|被点击tabItem的按钮文字|
-
-**注意**
-- onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。
-- 如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用[plus.nativeObj.view](http://www.html5plus.org/doc/zh_cn/nativeobj.html)放一个区块盖住原先的tabitem,并拦截点击事件。
-- onTabItemTap在App端,从HBuilderX 1.9 的自定义组件编译模式开始支持。
-
-``onNavigationBarButtonTap`` 参数说明:
-
-|属性|类型|说明|
-|---|---|---|
-|index|Number|原生标题栏按钮数组的下标|
-
-`onBackPress` 回调参数对象说明:
-
-|属性|类型|说明|
-|---|---|---|
-|from|String|触发返回行为的来源:'backbutton'——左上角导航栏按钮及安卓返回键;'navigateBack'——uni.navigateBack() 方法。|
-```javascript
-export default {
- data() {
- return {};
- },
- onBackPress(options) {
- console.log('from:' + options.from)
- }
-}
-```
-
-### 组件生命周期
-
-``uni-app`` 组件支持如下页面生命周期函数:
-
-|函数名|说明|平台差异说明|最低版本|
-|:-|:-|:-|:-|
-|beforeCreate|在实例初始化之后被调用。[详见](https://cn.vuejs.org/v2/api/#beforeCreate)|||
-|created|在实例创建完成后被立即调用。[详见](https://cn.vuejs.org/v2/api/#created)|||
-|beforeMount|在挂载开始之前被调用。[详见](https://cn.vuejs.org/v2/api/#beforeMount)|||
-|mounted|挂载到实例上去之后调用。[详见](https://cn.vuejs.org/v2/api/#mounted) 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用```$nextTick```[Vue官方文档](https://cn.vuejs.org/v2/api/#Vue-nextTick)|||
+|onResize|监听窗口尺寸变化|App、微信小程序||
+|onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)|||
+|onReachBottom|页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项|||
+|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、App(自定义组件模式)||
+|onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、头条小程序、支付宝小程序||
+|onPageScroll|监听页面滚动,参数为Object|nvue暂不支持||
+|onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|App、H5||
+|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|app、H5||
+|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|App、H5|1.6.0|
+|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|App、H5|1.6.0|
+|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|App、H5|1.6.0|
+
+``onReachBottom``使用注意
+可在pages.json里定义具体页面底部的触发距离[onReachBottomDistance](/collocation/pages),比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。
+
+如使用scroll-view导致页面没有滚动,则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档
+
+
+``onPageScroll`` (监听滚动、滚动监听、滚动事件)参数说明:
+
+|属性|类型|说明|
+|---|---|---|
+|scrollTop|Number|页面在垂直方向已滚动的距离(单位px)|
+
+**注意**
+- `onPageScroll`里不要写交互复杂的js,比如频繁修改页面。因为这个生命周期是在渲染层触发的,在非h5端,js是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿。
+- 如果想实现滚动时标题栏透明渐变,在App和H5下,可在pages.json中配置titleNView下的type为transparent,[参考](https://uniapp.dcloud.io/collocation/pages?id=app-titlenview)。
+- 如果需要滚动吸顶固定某些元素,推荐使用css的粘性布局,参考[插件市场](https://ext.dcloud.net.cn/plugin?id=715)。插件市场也有其他js实现的吸顶插件,但性能不佳,需要时可自行搜索。
+- 在App、微信小程序、H5中,也可以使用wxs监听滚动,[参考](https://uniapp.dcloud.io/frame?id=wxs);在app-nvue中,可以使用bindingx监听滚动,[参考](https://uniapp.dcloud.io/use-weex?id=nvue-%e9%87%8c%e4%bd%bf%e7%94%a8-bindingx)。
+
+```js
+onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替
+ console.log("滚动距离为:" + e.scrollTop);
+},
+```
+
+``onTabItemTap`` 返回的json对象说明:
+
+|属性|类型|说明|
+|---|---|---|
+|index|String|被点击tabItem的序号,从0开始|
+|pagePath|String|被点击tabItem的页面路径|
+|text|String|被点击tabItem的按钮文字|
+
+**注意**
+- onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。
+- 如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用[plus.nativeObj.view](http://www.html5plus.org/doc/zh_cn/nativeobj.html)放一个区块盖住原先的tabitem,并拦截点击事件。
+
+```js
+onTabItemTap : function(e) {
+ console.log(e);
+ // e的返回格式为json对象: {"index":0,"text":"首页","pagePath":"pages/index/index.html"}
+},
+```
+
+``onNavigationBarButtonTap`` 参数说明:
+
+|属性|类型|说明|
+|---|---|---|
+|index|Number|原生标题栏按钮数组的下标|
+
+```js
+onNavigationBarButtonTap : function (e) {
+ console.log(e);
+ // e的返回格式为json对象:{"text":"测试","index":0}
+}
+```
+
+`onBackPress` 回调参数对象说明:
+
+|属性|类型|说明|
+|---|---|---|
+|from|String|触发返回行为的来源:'backbutton'——左上角导航栏按钮及安卓返回键;'navigateBack'——uni.navigateBack() 方法。|
+```javascript
+export default {
+ data() {
+ return {};
+ },
+ onBackPress(options) {
+ console.log('from:' + options.from)
+ }
+}
+```
+
+**注意**
+
+- nvue 页面weex编译模式支持的生命周期同weex,具体参考:[weex生命周期介绍](/use-weex?id=生命周期)。
+
+### 组件生命周期
+
+``uni-app`` 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:
+
+|函数名|说明|平台差异说明|最低版本|
+|:-|:-|:-|:-|
+|beforeCreate|在实例初始化之后被调用。[详见](https://cn.vuejs.org/v2/api/#beforeCreate)|||
+|created|在实例创建完成后被立即调用。[详见](https://cn.vuejs.org/v2/api/#created)|||
+|beforeMount|在挂载开始之前被调用。[详见](https://cn.vuejs.org/v2/api/#beforeMount)|||
+|mounted|挂载到实例上去之后调用。[详见](https://cn.vuejs.org/v2/api/#mounted) 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用```$nextTick```[Vue官方文档](https://cn.vuejs.org/v2/api/#Vue-nextTick)|||
|beforeUpdate|数据更新时调用,发生在虚拟 DOM 打补丁之前。[详见](https://cn.vuejs.org/v2/api/#beforeUpdate)|仅H5平台支持||
-|updated|由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。[详见](https://cn.vuejs.org/v2/api/#updated)|仅H5平台支持||
-|beforeDestroy|实例销毁之前调用。在这一步,实例仍然完全可用。[详见](https://cn.vuejs.org/v2/api/#beforeDestroy)|||
-|destroyed|Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。[详见](https://cn.vuejs.org/v2/api/#destroyed)|||
-
-**注意**
-
-- nvue 页面支持的生命周期参考:[nvue 生命周期介绍](/use-weex?id=生命周期)。
\ No newline at end of file
+|updated|由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。[详见](https://cn.vuejs.org/v2/api/#updated)|仅H5平台支持||
+|beforeDestroy|实例销毁之前调用。在这一步,实例仍然完全可用。[详见](https://cn.vuejs.org/v2/api/#beforeDestroy)|||
+|destroyed|Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。[详见](https://cn.vuejs.org/v2/api/#destroyed)|||
+
diff --git a/docs/collocation/main.md b/docs/collocation/main.md
new file mode 100644
index 0000000000000000000000000000000000000000..f07d9f3d0df431914efc76fa9309d119a6bd2b0e
--- /dev/null
+++ b/docs/collocation/main.md
@@ -0,0 +1,24 @@
+`main.js`是我们的入口文件,主要作用是初始化`vue`实例并使用需要的插件。
+
+首先引入了`Vue`库和`App.vue`,创建了一个`vue`实例,并且挂载`vue`实例。
+```
+import Vue from 'vue'
+import App from './App'
+import pageHead from './components/page-head.vue' //引用page-head组件
+
+Vue.config.productionTip = false
+Vue.component('page-head', pageHead) //全局注册page-head组件
+App.mpType = 'app'
+
+const app = new Vue({
+ ...App
+})
+app.$mount() //挂载Vue实例
+```
+也可以引用`vuex`,使用`Vue.use`引用插件,使用`Vue.prototype`添加全局变量,使用`Vue.component`注册全局组件。
+
+不过无法使用`vue-router`,路由须在`pages.json`中进行配置。
+
+
+**注意**
+- nvue 暂不支持在 main.js 注册全局组件
diff --git a/docs/collocation/manifest.md b/docs/collocation/manifest.md
index 3155a8bb72ecfa7fde8e10c5eb04d330e164eb3a..6b0ba1d97dc40fedf5f13d615530943b4baf9f63 100644
--- a/docs/collocation/manifest.md
+++ b/docs/collocation/manifest.md
@@ -296,7 +296,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
|resizable|Boolean|在iPad上小程序是否支持屏幕旋转,默认关闭|
|navigateToMiniProgramAppIdList|Array|需要跳转的小程序列表,[详见](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html)|
|permission|Object|微信小程序接口权限相关设置,比如申请位置权限必须填此处[详见](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html)|
-|workers|String|Worker 代码放置的目录,**HBuilderX 2.0.0+ Alpha** 支持。 [详见](https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html)|
+|workers|String|Worker 代码放置的目录。 [详见](https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html)|
#### setting
@@ -321,6 +321,8 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
|:-|:-|:-|
|appid|String|百度小程序的 AppID,登录 [https://smartprogram.baidu.com/docs/introduction/enter_application/](https://smartprogram.baidu.com/docs/introduction/enter_application/) 申请|
|usingComponents|Boolean| 是否启用自定义组件模式,`v2.0+`,默认为false,[编译模式区别详情](https://ask.dcloud.net.cn/article/35843)|
+|requiredBackgroundModes|Array|小程序需要在后台使用的能力,目前支持背景音频播放,"requiredBackgroundModes": ["audio"],[详见](https://smartprogram.baidu.com/docs/develop/tutorial/process/#requiredBackgroundModes) |
+|prefetches|Array|预请求的所有url的列表,[详见](https://smartprogram.baidu.com/docs/develop/tutorial/process/#prefetches) |
### mp-toutiao
@@ -329,6 +331,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
|appid|String|头条小程序的 AppID,登录 [https://developer.toutiao.com/](https://developer.toutiao.com/) 申请|
|setting|Object|头条小程序项目设置,参考[头条小程序项目设置](/collocation/manifest?id=mp-toutiao-setting)|
|usingComponents|Boolean| 是否启用自定义组件模式,`v2.0+`,默认为false,[编译模式区别详情](https://ask.dcloud.net.cn/article/35843)|
+|navigateToMiniProgramAppIdList |Array|需要跳转的小程序列表,[详见](https://developer.toutiao.com/docs/framework/globalSetting.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE) |
#### 头条小程序项目设置@mp-toutiao-setting
@@ -341,10 +344,16 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
### mp-qq
-|属性|类型|说明|
-|:-|:-|:-|
-|appid|String|qq 小程序的 AppID,登录 [https://q.qq.com](https://q.qq.com) 申请|
-|usingComponents|Boolean| 是否启用自定义组件模式,`v2.0+`,默认为false,[编译模式区别详情](https://ask.dcloud.net.cn/article/35843)。mp-qq只支持自定义组件模式|
+|属性 |类型 |说明 |
+|:- |:- |:- |
+|appid |String |qq 小程序的 AppID,登录 [https://q.qq.com](https://q.qq.com) 申请 |
+|requiredBackgroundModes |Array |小程序需要在后台使用的能力,目前支持背景音频播放,"requiredBackgroundModes": ["audio"],[详见](https://q.qq.com/wiki/develop/miniprogram/frame/dispose.html#requiredbackgroundmodes) |
+|navigateToMiniProgramAppIdList |Array |需要跳转的小程序列表,[详见](https://q.qq.com/wiki/develop/miniprogram/frame/dispose.html#navigatetominiprogramappidlist) |
+|permission |Object |小程序接口权限相关设置,比如申请位置权限必须填此处[详见](https://q.qq.com/wiki/develop/miniprogram/frame/dispose.html#permission) |
+|workers |String |Worker 代码放置的目录。 [详见](https://q.qq.com/wiki/develop/miniprogram/frame/dispose.html#workers) |
+|groupIdList |String Array |需要打开群资料卡的群号列表,详见button的open-type |
+
+mp-qq只支持自定义组件模式,不存在usingComponents配置
### 完整 manifest.json
@@ -482,8 +491,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
"share": {
// 微信分享
"weixin": {
- "appid": "",
- "appsecret": ""
+ "appid": ""
},
// 新浪微博分享
"sina": {
@@ -491,15 +499,9 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
"appsecret": "",
"redirect_uri": ""
},
- // 分享到QQ好友
+ // 分享到QQ
"qq": {
"appid": ""
- },
- // 腾讯微博分享
- "tencent": {
- "appkey": "",
- "appsecret": "",
- "redirect_uri": ""
}
},
"statics": {
@@ -512,6 +514,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
}
}
},
+ // 屏幕方向
"orientation": [
"portrait-primary",
"landscape-primary",
@@ -634,7 +637,8 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
"softinput": {
"navBar": "auto", //是否显示iOS软键盘上的“完成”导航条
"mode": "adjustResize|adjustPan" //软键盘弹出模式,
- }
+ },
+ "popGesture": "none" //iOS上是否支持屏幕左边滑动关闭当前页面。默认是可关闭。设为none则不响应左滑动画。
},
// 快应用特有配置
"quickapp": {},
diff --git a/docs/collocation/pages.md b/docs/collocation/pages.md
index 26d822da1665225ef3ca336a1c04b65a9d25e885..9d66c783a62ae65371b52053270ec6290962e2a8 100644
--- a/docs/collocation/pages.md
+++ b/docs/collocation/pages.md
@@ -75,7 +75,7 @@
用于设置应用的状态栏、导航条、标题、窗口背景色等。
|属性|类型|默认值|描述|平台差异说明|
-|:-|:-|:-|:-||
+|:-|:-|:-|:-|:-|
|navigationBarBackgroundColor|HexColor|#F7F7F7|导航栏背景颜色(同状态栏背景色)|APP与H5为#F7F7F7,小程序平台请参考相应小程序文档||
|navigationBarTextStyle|String|white|导航栏标题颜色及状态栏前景颜色,仅支持 black/white||
|navigationBarTitleText|String||导航栏标题文字内容||
@@ -84,8 +84,11 @@
|backgroundTextStyle|String|dark|下拉 loading 的样式,仅支持 dark / light|微信小程序|
|enablePullDownRefresh|Boolean|false|是否开启下拉刷新,详见[页面生命周期](/use?id=页面生命周期)。||
|onReachBottomDistance|Number|50|页面上拉触底事件触发时距页面底部距离,单位只支持px,详见[页面生命周期](/use?id=页面生命周期)||
-|backgroundColorTop|HexColor|#ffffff|顶部窗口的背景色。|仅 iOS 平台|
-|backgroundColorBottom|HexColor|#ffffff|底部窗口的背景色。|仅 iOS 平台|
+|backgroundColorTop|HexColor|#ffffff|顶部窗口的背景色(bounce回弹区域)|仅 iOS 平台|
+|backgroundColorBottom|HexColor|#ffffff|底部窗口的背景色(bounce回弹区域)|仅 iOS 平台|
+|titleImage|String||导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址|支付宝小程序、H5、APP|
+|transparentTitle|String|none|导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明|支付宝小程序、H5、APP|
+|titlePenetrate|String|NO|导航栏点击穿透|支付宝小程序、H5|
|pageOrientation|String|portrait|屏幕旋转设置,仅支持 auto / portrait 详见 [响应显示区域变化](https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html)|微信小程序|
|animationType|String|pop-in|窗口显示的动画效果,详见:[窗口动画](api/router?id=animation)|App|
|animationDuration|Number|300|窗口显示动画的持续时间,单位为 ms|App|
@@ -98,6 +101,13 @@
|mp-qq|Object||设置编译到 mp-qq 平台的特定样式|QQ小程序|
|usingComponents|Object| |引用小程序组件,参考 [小程序组件](/frame?id=小程序组件支持)|微信小程序、App|
+
+**注意**
+
+- 支付宝小程序使用`titleImage`时必须使用`https`的图片链接地址,需要真机调试才能看到效果,支付宝开发者工具内无效果
+- `globalStyle`中设置的`titleImage`也会覆盖掉`pages`->`style`内的设置文字标题
+- navigationBarTextStyle 在iOS13上可能会错乱,此问题后续版本会修复
+
# pages
`uni-app` 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下:
@@ -165,8 +175,11 @@
|backgroundTextStyle|String|dark|下拉 loading 的样式,仅支持 dark/light||
|enablePullDownRefresh|Boolean|false|是否开启下拉刷新,详见[页面生命周期](/use?id=页面生命周期)。||
|onReachBottomDistance|Number|50|页面上拉触底事件触发时距页面底部距离,单位只支持px,详见[页面生命周期](/use?id=页面生命周期)||
-|backgroundColorTop|HexColor|#ffffff|顶部窗口的背景色。|仅 iOS 平台|
-|backgroundColorBottom|HexColor|#ffffff|底部窗口的背景色。|仅 iOS 平台|
+|backgroundColorTop|HexColor|#ffffff|顶部窗口的背景色(bounce回弹区域)|仅 iOS 平台|
+|backgroundColorBottom|HexColor|#ffffff|底部窗口的背景色(bounce回弹区域)|仅 iOS 平台|
+|titleImage|String||导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址|支付宝小程序、H5|
+|transparentTitle|String|none|导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明|支付宝小程序、H5、APP|
+|titlePenetrate|String|NO|导航栏点击穿透|支付宝小程序、H5|
|app-plus|Object||设置编译到 App 平台的特定样式,配置项参考下方 [app-plus](/collocation/pages?id=app-plus)|App|
|h5|Object||设置编译到 H5 平台的特定样式,配置项参考下方 [H5](/collocation/pages?id=h5)|H5|
|mp-alipay|Object||设置编译到 mp-alipay 平台的特定样式,配置项参考下方 [MP-ALIPAY](/collocation/pages?id=mp-alipay)|支付宝小程序|
@@ -193,6 +206,10 @@
```
+**注意**
+
+- 支付宝小程序使用`titleImage`时必须使用`https`的图片链接地址,需要真机调试才能看到效果,支付宝开发者工具内无效果
+
### 自定义导航栏使用注意@customnav
当navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,此时要注意几个问题:
- 非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量[--status-bar-height](/frame?id=css%e5%8f%98%e9%87%8f),如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。
@@ -236,7 +253,8 @@
|titleNView|Object||导航栏 ,详见:[导航栏](/collocation/pages?id=app-titleNView)|App、H5|
|subNVues|Object||原生子窗体,详见:[原生子窗体](/collocation/pages?id=app-subNVues)|App 1.9.10+|
|bounce|String||页面回弹效果,设置为 "none" 时关闭效果。|App(nvue Android暂无bounce效果)|
-|softinputNavBar|String||iOS软键盘上完成工具栏的显示模式,设置为 "none" 时关闭工具栏。|仅ios生效|
+|softinputNavBar|String|auto|iOS软键盘上完成工具栏的显示模式,设置为 "none" 时关闭工具栏。|仅ios生效|
+|softinputMode|String|adjustPan|软键盘弹出模式,支持 adjustResize、adjustPan 两种模式|App|
|pullToRefresh|Object||下拉刷新|App|
|scrollIndicator|String||滚动条显示策略,设置为 "none" 时不显示滚动条。|App|
|animationType|String|pop-in|窗口显示的动画效果,详见:[窗口动画](api/router?id=animation)。|App|
@@ -245,15 +263,15 @@
- `.nvue` 页面仅支持 `titleNView` 配置,其它配置项暂不支持
#### 导航栏@app-titleNView
-|属性|类型|默认值|描述|最低版本|
+|属性|类型|默认值|描述|版本兼容性|
|:-|:-|:-|:-|:-|
-|backgroundColor|String|#F7F7F7|背景颜色,颜色值格式为"#RRGGBB"。||
-|buttons|Array||自定义按钮,详见 [buttons](/collocation/pages?id=app-titlenview-buttons)||
+|backgroundColor|String|#F7F7F7|背景颜色,颜色值格式为"#RRGGBB"。在使用半透明标题栏时,也可以设置rgba格式||
+|buttons|Array||自定义按钮,详见 [buttons](/collocation/pages?id=app-titlenview-buttons)|纯nvue即render:native时暂不支持|
|titleColor|String|#000000|标题文字颜色||
|titleOverflow|String|ellipsis|标题文字超出显示区域时处理方式。"clip"-超出显示区域时内容裁剪;"ellipsis"-超出显示区域时尾部显示省略标记(...)。||
|titleText|String||标题文字内容||
|titleSize|String||标题文字字体大小||
-|type|String|default|导航栏样式。"default"-默认样式;"transparent"-透明渐变。||
+|type|String|default|导航栏样式。"default"-默认样式;"transparent"-滚动透明渐变;"float"-悬浮导航栏。||
|tags|Array||原生 View 增强,详见:[5+ View 控件](http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewDrawTagStyles)||
|searchInput|Object||原生导航栏上的搜索框配置,详见:[searchInput](/collocation/pages?id=app-titlenview-searchinput)|1.6.0|
@@ -261,8 +279,8 @@
- 每个页面均支持通过配置 `titleNView:false` 来禁用原生导航栏。一旦禁用原生导航,请注意阅读[自定义导航注意事项](/collocation/pages?id=customnav)。
- `titleNView` 不能设置 `autoBackButton`、`homeButton`等属性
-- `titleNView` 的 `type` 值为 `transparent` 时,导航栏为透明渐变导航栏
-- 在 `titleNView` 配置 `buttons` 后,监听按钮的点击事件,vue 页面参考:[onNavigationBarButtonTap](/frame?id=页面生命周期)、nvue 页面参考:[uni.onNavigationBarButtonTap](/use-weex?id=onnavigationbarbuttontap)
+- `titleNView` 的 `type` 值为 `transparent` 时,导航栏为滚动透明渐变导航栏,默认只有button,滚动后标题栏底色和title文字会渐变出现; `type` 为 `float` 时,导航栏为悬浮标题栏,此时页面内容上顶到了屏幕顶部,包括状态栏,但导航栏悬浮盖在页面上方,一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。
+- 在 `titleNView` 配置 `buttons` 后,监听按钮的点击事件,vue 页面及 nvue 的uni-app编译模式参考:[onNavigationBarButtonTap](/frame?id=页面生命周期)、nvue 的weex编译模式参考:[uni.onNavigationBarButtonTap](/use-weex?id=onnavigationbarbuttontap)
- 在 `titleNView` 配置 `searchInput` 后,相关的事件监听参考:[onNavigationBarSearchInputChanged 等](/frame?id=页面生命周期)
- App下原生导航栏的按钮如果使用字体图标,注意检查字体库的名字(font-family)是否使用了默认的 iconfont,这个名字是保留字,不能作为外部引入的字体库的名字,需要调整为自定义的名称,否则无法显示。
- 想了解各种导航栏的开发方法,请详读[导航栏开发指南](https://ask.dcloud.net.cn/article/34921)
@@ -387,10 +405,12 @@ searchInput的点击输入框onNavigationBarSearchInputClicked、文本变化onN
#### 原生子窗体@app-subNVues
-`subNVues` 是 vue 页面的原生子窗体。用于解决 vue 页面中的层级覆盖和原生界面灵活自定义用的。
+`subNVues` 是 vue 页面的原生子窗体。用于解决App中 vue 页面中的层级覆盖和原生界面灵活自定义用的。
它不是全屏页面,也不是组件,就是一个原生子窗体。它是一个 nvue 页面,使用 weex 引擎渲染,提供了比 cover-view、plus.nativeObj.view 更强大的原生排版能力,方便自定义原生导航或覆盖原生地图、视频等。请详读[subNVues 开发指南](http://ask.dcloud.net.cn/article/35948)
+`subNVue` 也可以在 nvue 页面中使用。但目前在纯nvue下(render为native)还不支持。
+
|属性|类型|描述|
|:- |:- |:-|
|id|String| subNVue 原生子窗体的标识 |
@@ -603,18 +623,18 @@ h5 平台下拉刷新动画,只有 circle 类型。
|属性|类型|默认值|描述|
|:-|:-|:-|:-|
|allowsBounceVertical|String|YES|是否允许向下拉拽。支持 YES / NO|
+|titleImage|String||导航栏图片地址(替换当前文字标题),内必须使用https的图片链接地址|
|transparentTitle|String|none|导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明|
-|titlePenetrate|String|NO|导航栏点击穿透|
-|showTitleLoading|String|NO|是否进入时显示导航栏的 loading。支持 YES / NO|
-|titleImage|String||导航栏图片地址(替换当前标题),必须为https的图片链接地址|
-|backgroundImageUrl|String||下拉露出显示的背景图链接|
-|backgroundImageColor|HexColor||下拉露出显示的背景图底色|
-|gestureBack|String|NO|iOS 用,是否支持手势返回。支持 YES / NO|
+|titlePenetrate|String|NO|导航栏点击穿透|
+|showTitleLoading|String|NO|是否进入时显示导航栏的 loading。支持 YES / NO|
+|backgroundImageUrl|String||下拉露出显示的背景图链接|
+|backgroundImageColor|HexColor||下拉露出显示的背景图底色|
+|gestureBack|String|NO|iOS 用,是否支持手势返回。支持 YES / NO|
|enableScrollBar|String|YES|Android 用,是否显示 WebView 滚动条。支持 YES / NO|
**注意事项**
-- ```titleImage```仅支持https地址,设置了```titleImage```会是页面```title```失效
+- ```titleImage```仅支持https地址,设置了```titleImage```会替换页面文字标题
- ```backgroundImageUrl```支持网络地址和本地地址,尽量使用绝对地址
- 部分配置可能会只在真机运行的时候生效,支付宝未来应该会改善
@@ -631,7 +651,7 @@ h5 平台下拉刷新动画,只有 circle 类型。
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
- tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)
- tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。
-- 顶部的 tabbar 目前仅微信小程序上支持,需要用到顶部选项卡的话,参考 hello uni-app->模板->顶部选项卡。
+- 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡,可参考 hello uni-app->模板->顶部选项卡。
**属性说明:**
@@ -658,14 +678,15 @@ h5 平台下拉刷新动画,只有 circle 类型。
- tabbar 的 item 点击事件见[页面生命周期的onTabItemTap](https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)。
- 代码跳转到tabbar页面,api只能使用[uni.switchTab](https://uniapp.dcloud.io/api/router?id=switchtab),不能使用uni.navigateTo、uni.redirectTo;使用navigator组件跳转时必须设置[open-type="switchTab"](https://uniapp.dcloud.io/component/navigator)
- tabbar 在H5端是div模拟的,属于前端屏幕窗口的一部分,如果要使用bottom居底定位方式,应该使用css变量`--window-bottom`,比如悬浮在tabbar上方10px的按钮,样式如下`bottom: calc(var(--window-bottom) + 10px)`
+- tabbar 的默认高度,在不同平台不一样。[详见](https://uniapp.dcloud.io/frame?id=%e5%9b%ba%e5%ae%9a%e5%80%bc)
- 中间带+号的tabbar模板例子,[参考](https://ext.dcloud.net.cn/plugin?id=98)。可跨端,但+号不凸起。
-- 如需 tabbar 中间凸起,App端可使用plus.nativeObj.view,[参考](https://ask.dcloud.net.cn/article/35036)。H5端可使用view自绘。
-- 如果不使用原生tabbar,在前端自己实现tabbar,在小程序和App端的性能体验不如原生tabbar。如果是多页方式,底部tabbar会在切换时闪一下,如果是单页方式,承载复杂页面内容会有性能问题。[插件市场](https://ext.dcloud.net.cn/search?q=tabbar)搜索tabbar有不少类似例子。
-- App端使用nvue,可以不用这里的tabbar,自己做tabbar,没有性能体验问题。
-- Android App上弹出键盘顶起tabbar的问题。如果是搜索框,建议点击后新开页面搜索(hello uni-app有例子);也可以动态隐藏tabbar;也可以配置 manifest.json 中 app-plus->softinput->mode 设置为 adjustPan,注意仅打包后生效。[详见manifest配置](https://uniapp.dcloud.io/collocation/manifest?id=%E5%AE%8C%E6%95%B4-manifestjson)
-- 原生的tabbar只有一个且在首页。二级页的tab,或者用前端实现,或者App端使用nvue。
+- 如需 tabbar 中间凸起,可自定义tabbar,插件市场有例子,如colorUI等。但注意前端tabbar的性能不如原生tabbar,如果是多页方式,底部tabbar会在切换时闪执行转场动画,如果是单页方式,承载复杂页面内容会有性能问题。[插件市场](https://ext.dcloud.net.cn/search?q=tabbar)搜索tabbar有不少类似例子。
+- App端若使用nvue,自定义tabbar,没有性能体验问题。
+- 纯nvue项目(manifest里renderer为native),目前使用pages.json里的tabbar反而影响性能,建议使用前端自己实现单页面的tabbar。后续会解决这个bug。
+- Android App上弹出键盘顶起tabbar的问题。升级到HBuilderX 2.2后不再存在。
+- 原生的tabbar只有一个且在首页。二级页如需的tab,前端自己实现。
- 如果是需要先登录、后进入tab页面,不需要把登陆页设为首页,首页仍然是tabbar页,可参考HBuilderX新建uni-app项目时的登陆模板
-- 前端弹出遮罩层挡不住tabbar的问题,跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view做弹出和遮罩,可参考这个[底部原生图标分享菜单例子](https://ext.dcloud.net.cn/plugin?id=69)
+- 前端弹出遮罩层挡不住tabbar的问题,跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩,可参考这个[底部原生图标分享菜单例子](https://ext.dcloud.net.cn/plugin?id=69)
- 微信小程序模拟器1.02.1904090版有bug,在缩放模拟器页面百分比后,tabbar点击多次后就会卡死。真机无碍,使用时注意。[详见](https://developers.weixin.qq.com/community/develop/doc/0002e6e6bf0d602d8c783e10756400)
**代码示例**
diff --git a/docs/component/ad.md b/docs/component/ad.md
index 342c42676a89ef6950956aa5d485f5a40686cc11..ab5981d4d70a30e8e6c4dad50f41f8a72d89431b 100644
--- a/docs/component/ad.md
+++ b/docs/component/ad.md
@@ -1,12 +1,12 @@
#### ad
-Banner 广告。
+广告组件
广告能力在不同小程序端实现不同,使用时需注意用[条件编译](https://uniapp.dcloud.io/platform)调用不同平台的代码。
+- App平台:无需编码,在打包App时可直接勾选广告位,[详见](https://dcloud.io/dad.html)
- 微信小程序:[规范文档](https://developers.weixin.qq.com/miniprogram/dev/component/ad.html)
- 百度小程序:[规范文档](https://smartprogram.baidu.com/docs/develop/component/ad/)
- 支付宝小程序:不支持此能力
- 头条小程序:仅小游戏可用,小程序不可用,不适用于uni-app
- QQ小程序:[规范文档](https://q.qq.com/wiki/develop/miniprogram/component/open-ability/ad.html)
-- App平台:无需编码,在打包App时可直接勾选广告位,[详见](https://dcloud.io/dad.html)
diff --git a/docs/component/audio.md b/docs/component/audio.md
index 6795f7ec01e59d0848fe9d3220419f74a5c33114..0e1616530fb1c83702fefe5db4f06c5fedaf2200 100644
--- a/docs/component/audio.md
+++ b/docs/component/audio.md
@@ -37,7 +37,7 @@ app-nvue也不支持此组件。
|3|解码错误|
|4|不合适资源|
-**示例:**
+**示例:** [查看示例](https://uniapp.dcloud.io/h5/pages/component/audio/audio)
```html
diff --git a/docs/component/button.md b/docs/component/button.md
index b81fab6dc487d2a6b660bf2100e481888263683f..b3996ffc5065f0db0e9561537a34738a45e452ad 100644
--- a/docs/component/button.md
+++ b/docs/component/button.md
@@ -15,10 +15,15 @@
|open-type|String||开放能力|||
|hover-class|String|button-hover|指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果|||
|hover-start-time|Number|20|按住后多久出现点击态,单位毫秒|||
-|hover-stay-time|Number|70|手指松开后点击态保留时间,单位毫秒|||
-|@getuserinfo|Handler||用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfo|open-type="getUserInfo"|微信小程序|
-
-- **注1:``button-hover`` 默认为 ``{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}``**
+|hover-stay-time|Number|70|手指松开后点击态保留时间,单位毫秒|||
+|@getphonenumber|Handler||获取用户手机号回调|open-type="getPhoneNumber"|微信小程序|
+|@getuserinfo|Handler||用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfo|open-type="getUserInfo"|微信小程序|
+|@error|Handler||当使用开放能力时,发生错误的回调|open-type="launchApp"|微信小程序|
+|@opensetting|Handler||在打开授权设置页并关闭后回调|open-type="openSetting"|微信小程序|
+|@launchapp|Handler||打开 APP 成功的回调|open-type="launchApp"|微信小程序|
+
+- **注1:``button-hover`` 默认为 ``{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}``**
+- ```open-type="launchApp"```时需要调起的APP接入微信OpenSDK[详见](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html)
**size 有效值**
@@ -46,27 +51,26 @@
|值|说明|平台差异说明|
|:-|:-|:-|
-|feedback|打开“意见反馈”页面,用户可提交反馈内容并上传日志|5+App、微信小程序|
-|share|触发用户转发|微信小程序、百度小程序、支付宝小程序、头条小程序|
-|getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息|微信小程序、百度小程序|
-| contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |微信小程序|
-| getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、头条小程序 |
-| launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数|微信小程序|
-| openSetting | 打开授权设置页 |微信小程序、百度小程序|
-| getAuthorize | 支持小程序授权 | 支付宝小程序 |
-| contactShare | 分享到通讯录好友 | 支付宝小程序 |
-| lifestyle | 关注生活号 | 支付宝小程序 |
-
-
+|feedback|打开“意见反馈”页面,用户可提交反馈内容并上传日志|App、微信小程序、QQ小程序|
+|share|触发用户转发|微信小程序、百度小程序、支付宝小程序、头条小程序、QQ小程序|
+|getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息|微信小程序、百度小程序、QQ小程序|
+|contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |微信小程序、百度小程序|
+|getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、头条小程序 |
+|launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数|[微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html)、[QQ小程序](https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_app.html)|
+|openSetting | 打开授权设置页 |微信小程序、百度小程序|
+|getAuthorize | 支持小程序授权 | 支付宝小程序 |
+|contactShare | 分享到通讯录好友 | 支付宝小程序 |
+|lifestyle | 关注生活号 | 支付宝小程序 |
+|openGroupProfile|呼起QQ群资料卡页面,可以通过group-id属性设定需要打开的群资料卡的群号,同时manifest中必须配置groupIdList|QQ小程序基础库1.4.7版本+|
**注意**
-- 在小程序中,开发者可以登录 [小程序管理后台](https://mp.weixin.qq.com/) 后进入左侧菜单“客服反馈”页面获取反馈内容。
+- 在小程序中,开发者可以登录 [微信小程序管理后台](https://mp.weixin.qq.com/) 、[QQ小程序后台](https://q.qq.com/#/)后,进入菜单“客服反馈”页面获取反馈内容。
- 在 App 中,开发者登录 [DCloud开发者中心](https://dev.dcloud.net.cn/) 后点击应用名称,进入左侧菜单“用户反馈”页面获取反馈内容。
- 点击 share 分享按钮时会触发 [onShareAppMessage](/api/plugins/share)
- 支付宝小程序平台,获取用户手机号时,建议先通过条件编译的方式,调用支付宝原生API,[参考](https://docs.alipay.com/mini/api/getphonenumber)
-**示例**
+**示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/button/button)
```html
diff --git a/docs/component/camera.md b/docs/component/camera.md
index bf0e8bb22011b7b8635ce094643cd0acb41d83c1..5610b9a40f370e67a8efc8f3e911465de72e414c 100644
--- a/docs/component/camera.md
+++ b/docs/component/camera.md
@@ -29,7 +29,7 @@
* camera 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
* 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
* 同一页面只能插入一个 camera 组件。
-* 相关API:[reateCameraContext](/api/media/camera-context)
+* 相关API:[createCameraContext](/api/media/camera-context)
**代码示例**
diff --git a/docs/component/canvas.md b/docs/component/canvas.md
index f17b533d4969f127d4331746f92a386c521e32a4..7e4f61d5387d94890624bff30208a937e80cca00 100644
--- a/docs/component/canvas.md
+++ b/docs/component/canvas.md
@@ -20,7 +20,7 @@
* canvas 标签默认宽度 300px、高度 225px,动态修改 canvas 大小后需要重新绘制。
* 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。
* canvas 在微信小程序、百度小程序、QQ小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,参考 [native-component](/component/native-component)。
-* canvas 在App端 vue 页面不是原生组件,目前App端 nvue 还不支持 canvas 组件。
+* canvas 在App端 vue 页面不是原生组件。App-nvue下如需使用canvas,暂未封装为uni API,可参考[文档](https://github.com/dcloudio/NvueCanvasDemo)使用。
**示例:**
diff --git a/docs/component/checkbox.md b/docs/component/checkbox.md
index 440044ef2bafd1235346d38f664500aaca91ffe9..61f7a32934b72fa5f0c7f3a0080e644a362bb11c 100644
--- a/docs/component/checkbox.md
+++ b/docs/component/checkbox.md
@@ -19,7 +19,7 @@
|checked|Boolean|false|当前是否选中,可用来设置默认选中|
|color|Color||checkbox的颜色,同css的color|
-**示例**
+**示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/checkbox/checkbox)
```html
diff --git a/docs/component/cover-view.md b/docs/component/cover-view.md
index 7cca802f9f051804b6aaa77f0cc592a9ad386c02..83ddd7e12a68f6e8f12ab5f2cf5d1cfba7cd0708 100644
--- a/docs/component/cover-view.md
+++ b/docs/component/cover-view.md
@@ -52,7 +52,7 @@
- 支付宝小程序中 `cover-view` 不支持嵌套。
-**示例**
+**示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/cover-view/cover-view)
```html
diff --git a/docs/component/form.md b/docs/component/form.md
index 1f4efb882e6a0a485c4a9e3b2dbcc4930f3b64ee..1d60bf3aa39d00613f870f06517b700ca62ab066 100644
--- a/docs/component/form.md
+++ b/docs/component/form.md
@@ -11,12 +11,12 @@
|@submit|EventHandle|携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''},report-submit 为 true 时才会返回 formId||
|@reset|EventHandle|表单重置时会触发 reset 事件| |
-**示例**
+**示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/form/form)
```html
-
+
@@ -55,46 +55,44 @@
-
-
+
+
+
+
+
+
```
-```javascript
-export default {
- data() {
- return {
- pickerHidden: true,
- chosen: ''
- }
- },
- methods: {
- pickerConfirm: function(e) {
- this.pickerHidden = true
- this.chosen = e.target.value
- },
- pickerCancel: function(e) {
- this.pickerHidden = true
- },
- pickerShow: function(e) {
- this.pickerHidden = false
- },
- formSubmit: function(e) {
- console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
- },
- formReset: function(e) {
- console.log('清空数据')
- this.chosen = ''
- }
- }
-}
-```
-
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/form.png?t=201857)
**tips**
-- [插件市场](http://ext.dcloud.net.cn/search?q=%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C)有表单校验插件
\ No newline at end of file
+- [插件市场](http://ext.dcloud.net.cn/search?q=%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C)有表单校验插件
diff --git a/docs/component/image.md b/docs/component/image.md
index 0a815aeb09087a4a917b23d5d21aeec5926ef27c..dd0402516ecdeef87428722a53b381045f42097f 100644
--- a/docs/component/image.md
+++ b/docs/component/image.md
@@ -12,10 +12,11 @@
**Tips**
-- `` 组件默认宽度 300px、高度 225px;
+- `` 组件默认宽度 300px、高度 225px;`app-nvue平台,暂时默认为屏幕宽度`
- `src` 仅支持相对路径、绝对路径,支持 base64 码;
- 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 `image{will-change: transform}` ,可优化此问题。
- 自定义组件里面使用 ``时,若 `src` 使用相对路径可能出现路径查找失败的情况,故建议使用绝对路径。
+- webp格式的图片,app-vue下,iOS不支持,Android支持;app-nvue下,iOS和Android均支持。app-vue下也支持gif。
**mode 有效值:**
@@ -37,7 +38,7 @@ mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
|裁剪|bottom left|不缩放图片,只显示图片的左下边区域|
|裁剪|bottom right|不缩放图片,只显示图片的右下边区域|
-**示例:**
+**示例:** [查看示例](https://uniapp.dcloud.io/h5/pages/component/image/image)
```html
diff --git a/docs/component/input.md b/docs/component/input.md
index 83aefadeb6b98e0b00470b2ba85c8819ff7f8465..169cd417fa3788e1da34a0400ba8227f93d7b051 100644
--- a/docs/component/input.md
+++ b/docs/component/input.md
@@ -67,25 +67,13 @@ App平台的nvue页面,如果是uni-app编译模式,直接使用此属性设
#### App平台iOS端软键盘上方横条去除方案
App平台在iOS上,webview中的软键盘弹出时,默认在软键盘上方有一个横条,显示着:上一项、下一项和完成等按钮。如不想显示这个横条,可以配置softinputNavBar: 'none'
-- 如需要整个App配置,则在manifest中配置
-```json
- "app-plus": {
- "softinput": {
- "navBar": "none" // 是否显示软键盘上的导航条
- }
- }
-```
-- 如需要单个页面配置,则在pages.json中配置
+配置方式,在 pages.json 中配置 style
+
```json
- {
- "path": "pages/component/input/input",
- "style": {
- "app-plus":{
- "softinputNavBar":"none"
- }
- }
- }
+"app-plus": {
+ "softinputNavBar": "none"
+}
```
- 如需使用js动态设置softinputNavBar
@@ -131,7 +119,7 @@ App端开发聊天类应用时,目前推荐改为adjustResize模式。在hello
- 原生输入框在iOS上不会有软键盘上方的横条
- 原生输入框一样受配置的`adjustPan|adjustResize`模式影响
-**input示例**
+**input示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/input/input)
```html
diff --git a/docs/component/label.md b/docs/component/label.md
index 98080870402e8296764717892412bf8302b6b540..cae2c3ae225a6458e9ce9fdd3e53da61b2b2141e 100644
--- a/docs/component/label.md
+++ b/docs/component/label.md
@@ -15,7 +15,7 @@ for优先级高于内部控件,内部有多个控件的时候默认触发第
**注:**
- app-nvue平台 暂不支持for属性
-**示例**
+**示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/label/label)
```html
diff --git a/docs/component/list.md b/docs/component/list.md
index e0b365f73e23ea5b85ac227b3bb152a178f30659..39cc1df090767f7728a14dec059e067ce4fbc913 100644
--- a/docs/component/list.md
+++ b/docs/component/list.md
@@ -27,6 +27,7 @@ app端nvue专用组件。在app-nvue下,如果是长列表,使用list组件
> **注意**
> - 不允许相同方向的 `` 或者 `` 互相嵌套,换句话说就是嵌套的 `` / `` 必须是不同的方向。
> - `` 需要显式的设置其宽高,可使用 position: absolute; 定位或 width、height 设置其宽高值。
+> - list是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
#### 子组件
`` 的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。
diff --git a/docs/component/live-pusher.md b/docs/component/live-pusher.md
index 3f567183db4138607a49879d0e8714c5e1bc720e..a729188cfed921562f2ade4c7b1412ff6fa9b1a1 100644
--- a/docs/component/live-pusher.md
+++ b/docs/component/live-pusher.md
@@ -1,14 +1,127 @@
-#### live-pusher
+#### live-pusher
+
+实时音视频录制,也称直播推流。
+
+**平台差异说明**
-实时音视频录制,也称直播推流。
+|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
+|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+|√(仅nvue)|x|√|x|x|x|x|
-目前只有App和微信小程序支持。
+如app平台的vue页面需要支持直播推流,需编写条件编译代码,使用 `plus.video.LivePusher`,[业务指南](https://ask.dcloud.net.cn/article/13416)、[规范文档](http://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusher)
-- 微信小程序:[规范文档](https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html)
-- App平台:nvue文件下也支持live-pusher组件,API与微信相同。如果是vue文件,则需要单独编写条件编译代码,使用plus.video.LivePusher,[业务指南](https://ask.dcloud.net.cn/article/13416)、[规范文档](http://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusher)
+使用nvue做直播,比使用vue的优势有:
+1. nvue可一套代码直接编译到App和微信
+2. nvue的cover-view比vue的cover-view更强大,在视频上绘制元素更容易。如果只考虑App端的话,不用cover-view,任意组件都可以覆盖live-pusher组件,因为nvue没有层级问题。
+3. 若需要视频内嵌在swiper里上下滑动(类抖音、映客首页模式),App端只有nvue才能实现
+当然nvue相比vue的坏处是css写法受限,如果只开发微信小程序,不考虑App,那么使用vue页面也是一样的。
+**参数说明**
+
+设置live-pusher组件的推流地址,推流视频模式等。
+
+属性|类型 |默认值|必填|说明
:--|:--|:--|:--|:--|
+url|string| |是|推流地址,支持RTMP协议。
+mode |string| |否|推流视频模式,可取值:SD(标清), HD(高清), FHD(超清)。
+muted|Boolean|false|否|是否静音。
+enable-camera|Boolean|true|否|开启摄像头。
+auto-focus|Boolean|true|否|自动聚集。
+beauty|Number|0|否|美颜,取值范围 0-9(iOS取值范围为1) ,0 表示关闭。
+whiteness|Number|0|否|美白,取值范围 0-9(iOS取值范围为1) ,0 表示关闭。
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```javascript
+
+```
+
+相关api:[uni.createLivePusherContext](/api/media/live-pusher-context?id=createLivePusherContext)
+
+
+
**注意**
-* live-pusher 是原生组件,在小程序端层级高于前端组件,请勿在 scroll-view、swiper、picker-view、movable-view 中使用,需使用cover-view覆盖。在App端的nvue文件中,live-pusher没有这类限制。
+* live-pusher 是原生组件,在小程序端层级高于前端组件,需使用cover-view覆盖。在低版本微信中,live-pusher无法内嵌于 scroll-view、swiper、picker-view、movable-view 中。在App端的nvue文件中,live-pusher没有这类限制。
* App平台:使用 `` 组件,打包 App 时必须勾选 manifest.json->App 模块权限配置->LivePusher(直播推流) 模块。
diff --git a/docs/component/map.md b/docs/component/map.md
index 15e60a640cd4d767baf935c531b3ff42d38be5a0..f536722afbbfecd158d07d7c2353e4e1e0eade87 100644
--- a/docs/component/map.md
+++ b/docs/component/map.md
@@ -21,7 +21,7 @@
|controls|Array||控件||
|include-points|Array||缩放视野以包含所有给定的坐标点|App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序|
|show-location|Boolean||显示带有方向的当前定位点|微信小程序、H5、百度小程序、支付宝小程序|
-|@markertap|EventHandle||点击标记点时触发|App平台需要指定 marker 对象属性 id|
+|@markertap|EventHandle||点击标记点时触发|App-nvue暂不支持, App平台需要指定 marker 对象属性 id|
|@callouttap|EventHandle||点击标记点对应的气泡时触发||
|@controltap|EventHandle||点击控件时触发||
|@regionchange|EventHandle||视野发生变化时触发|微信小程序、H5、百度小程序、支付宝小程序|
@@ -62,7 +62,7 @@
|borderRadius|callout边框圆角|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|bgColor|背景色|String|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|padding|文本边缘留白|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
-|display|'BYCLICK':点击显示; 'ALWAYS':常显|String|微信小程序、H5、百度小程序|
+|display|'BYCLICK':点击显示; 'ALWAYS':常显|String|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|textAlign|文本对齐方式。有效值: left, right, center|String|App-nvue 2.1.5+、微信小程序、百度小程序|
**marker 上的标签 label**
@@ -131,7 +131,7 @@
地图组件的经纬度必填,如果不填经纬度则默认值是北京的经纬度。
-**示例**
+**示例** [查看示例](https://uniapp.dcloud.io/h5/pages/component/map/map)
```html
@@ -174,16 +174,16 @@ map 组件相关操作的 JS API:[uni.createMapContext](api/location/map?id=cr
**注意事项**
-- 小程序和 App的vue文件 中,`