提交 cebb0376 编写于 作者: Q qiang

Merge branch 'master' into feat-native-tab-bar

...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<img src="https://img-cdn-qiniu.dcloud.net.cn/uni-app-qr-all.jpg"/> <img src="https://img-cdn-qiniu.dcloud.net.cn/uni-app-qr-all.jpg"/>
*注: Appstore、百度、头条平台不能提交简单demo,故iOS、百度小程序、头条小程序版补充了一些其他功能。* *注: 某些平台不能提交简单demo,补充了一些其他功能。*
## 快速开始 ## 快速开始
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
即使不跨端,```uni-app```同时也是更好的小程序开发框架。详见[评测](https://ask.dcloud.net.cn/article/35947) 即使不跨端,```uni-app```同时也是更好的小程序开发框架。详见[评测](https://ask.dcloud.net.cn/article/35947)
`DCloud`公司拥有340万开发者用户,旗下```uni-app```有5万+案例、600+插件、50+微信/qq群、更高的百度指数,可以放心选择。 `DCloud`公司拥有350万开发者用户,旗下```uni-app```有5万+案例、600+插件、50+微信/qq群、更高的百度指数,可以放心选择。
<div class="quick"> <div class="quick">
<h3 id="快速体验"><a href="/README?id=%e5%bf%ab%e9%80%9f%e4%bd%93%e9%aa%8c" data-id="快速体验" class="anchor"><span>快速体验</span></a></h3> <h3 id="快速体验"><a href="/README?id=%e5%bf%ab%e9%80%9f%e4%bd%93%e9%aa%8c" data-id="快速体验" class="anchor"><span>快速体验</span></a></h3>
...@@ -41,19 +41,19 @@ ...@@ -41,19 +41,19 @@
</a> </a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"> <div class="barcode-img-box">
<img src="http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/mp-toutiao.png" width="160"/> <img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/mp-toutiao.png" width="160"/>
</div> </div>
<b>头条小程序版</b> <b>头条小程序版</b>
</a> </a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"> <div class="barcode-img-box">
<img src="http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qq.png" width="160"/> <img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qq.png" width="160"/>
</div> </div>
<b>QQ小程序版</b> <b>QQ小程序版</b>
</a> </a>
</div> </div>
<p> <p>
<em>注:Appstore、百度、头条平台不能提交简单demo,故补充了一些其他功能。</em></br> <em>注:某些平台不能提交简单demo,故补充了一些其他功能;hello uni-app示例代码可从[github](https://github.com/dcloudio/hello-uniapp)获取</em></br>
</p> </p>
</div> </div>
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
* [从其他项目转uni-app](translate.md) * [从其他项目转uni-app](translate.md)
* [选型评估指南](select.md) * [选型评估指南](select.md)
* [常见问题](faq.md) * [常见问题](faq.md)
* [更新日志](//uniapp.dcloud.io/release) * [更新日志](release.md)
<!-- * [更新日志](//update.dcloud.net.cn/hbuilderx/changelog/2.1.1.20190716.html) --> <!-- * [更新日志](//update.dcloud.net.cn/hbuilderx/changelog/2.1.1.20190716.html) -->
<!-- <li><a id="update-hock" href="javascript:;" target="__blank">更新日志</a></li> --> <!-- <li><a id="update-hock" href="javascript:;" target="__blank">更新日志</a></li> -->
<li class="show-sponsor-in-phone show-last"><a href="//ext.dcloud.net.cn/" target="__blank">插件市场</a></li> <li class="show-sponsor-in-phone show-last"><a href="//ext.dcloud.net.cn/" target="__blank">插件市场</a></li>
......
框架提供丰富的 API,可以方便的调起客户端提供的能力,如获取用户信息,本地存储,支付功能等 `uni-app`的js API由标准ECMAScript的js API 和 uni 扩展 API 这两部分组成
JS API命名与小程序相同。各端受自身限制,可能某些API无法使用,具体见每个API的兼容性说明。 标准ecmascript的API非常多,本文档没有必要列全,仅以console、settimeout为例做简要说明。扩展 API 命名与小程序相同。
## 标准js和浏览器js的区别
`uni-app`的js代码,h5端运行于浏览器中。非h5端,Android平台运行在v8引擎中,iOS平台运行在iOS自带的jscore引擎中。
非H5端,虽然不支持window、document、navigator等浏览器的js API,但也支持标准ECMAScript。
开发者不要把浏览器里的js等价于标准js。
ECMAScript由Ecma国际管理,是基础js语法。浏览器基于标准js扩充了window、document等js API;Node.js基于标准js扩充了fs等模块;小程序也基于标准js扩展了各种wx.xx、my.xx、swan.xx的API。
所以uni-app的非H5端,一样支持标准js,支持if、for等语法,支持字符串、数组、时间等变量及各种处理方法。仅仅是不支持浏览器专用对象。
## 各端特色API调用
除了uni-app框架内置的跨端API,各端自己的特色API也可通过[条件编译](https://uniapp.dcloud.io/platform)自由使用。 除了uni-app框架内置的跨端API,各端自己的特色API也可通过[条件编译](https://uniapp.dcloud.io/platform)自由使用。
各端特色API规范参考各端的开发文档。其中App端的JS API参考[html5plus.org](https://www.html5plus.org/doc/h5p.html);uni-app也支持通过扩展原生插件来丰富App端的开发能力,具体参考[插件开发文档](http://ask.dcloud.net.cn/article/35408) 各端特色API规范参考各端的开发文档。其中App端的JS API参考[html5plus.org](https://www.html5plus.org/doc/h5p.html);uni-app也支持通过扩展原生插件来丰富App端的开发能力,具体参考[插件开发文档](http://ask.dcloud.net.cn/article/35408)
各平台的API新增,不需要uni-app升级,开发者就可以直接使用。
## 说明 ## 说明
- uni.on 开头的 API 是监听某个事件发生的 API 接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。 - uni.on 开头的 API 是监听某个事件发生的 API 接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
......
* 基础 * 基础
* [日志打印](api/log.md) * [日志打印](api/log.md)
* [定时器](api/timer.md)
* [uni.base64ToArrayBuffer](api/base64ToArrayBuffer?id=base64toarraybuffer) * [uni.base64ToArrayBuffer](api/base64ToArrayBuffer?id=base64toarraybuffer)
* [uni.arrayBufferToBase64](api/arrayBufferToBase64?id=arraybuffertobase64) * [uni.arrayBufferToBase64](api/arrayBufferToBase64?id=arraybuffertobase64)
* [定时器](api/timer.md) * [生命周期](api/lifecycle.md)
* [生命周期](api/lifetime.md)
* 网络 * 网络
* [发起请求](api/request/request.md) * [发起请求](api/request/request.md)
* [上传、下载](api/request/network-file.md) * [上传、下载](api/request/network-file.md)
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
* [电量](api/system/batteryInfo.md) * [电量](api/system/batteryInfo.md)
* [NFC](api/system/nfc.md) * [NFC](api/system/nfc.md)
* [设备方向](api/system/deviceMotion.md) * [设备方向](api/system/deviceMotion.md)
* [Worker](api/worder.md) * [Worker](api/worker.md)
* 键盘 * 键盘
* [uni.hideKeyboard](/api/key?id=hidekeyboard) * [uni.hideKeyboard](/api/key?id=hidekeyboard)
* [uni.onKeyboardHeightChange](/api/key?id=onkeyboardheightchange) * [uni.onKeyboardHeightChange](/api/key?id=onkeyboardheightchange)
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|x|x| |√|x|√|x|x|x|
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|x|x| |√|x|√|x|x|x|
......
...@@ -2,9 +2,11 @@ ...@@ -2,9 +2,11 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|x|√| |√|√|√|√|√|√|√|
App-nvue下如需使用canvas,暂未封装为uni API,可参考[文档](https://github.com/dcloudio/NvueCanvasDemo)使用。
### CanvasContext.fillStyle string ### CanvasContext.fillStyle string
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√| |√|x|√|√|√|√|√|
**注意:saveFile 会把临时文件移动,因此调用成功后传入的 tempFilePath 将不可用。** **注意:saveFile 会把临时文件移动,因此调用成功后传入的 tempFilePath 将不可用。**
...@@ -45,9 +45,9 @@ uni.chooseImage({ ...@@ -45,9 +45,9 @@ uni.chooseImage({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√| |√|x|√|√|√|√|√|
**OBJECT 参数说明:** **OBJECT 参数说明:**
...@@ -87,9 +87,9 @@ uni.getSavedFileList({ ...@@ -87,9 +87,9 @@ uni.getSavedFileList({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|x| |√|x|√|√|√|x|√|
**OBJECT 参数说明:** **OBJECT 参数说明:**
...@@ -125,9 +125,9 @@ uni.getSavedFileInfo({ ...@@ -125,9 +125,9 @@ uni.getSavedFileInfo({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√| |√|x|√|√|√|√|√|
**OBJECT 参数说明:** **OBJECT 参数说明:**
...@@ -160,9 +160,9 @@ uni.getSavedFileList({ ...@@ -160,9 +160,9 @@ uni.getSavedFileList({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√| |√|x|√|√|√|√|√|
**OBJECT 参数说明:** **OBJECT 参数说明:**
...@@ -187,9 +187,9 @@ uni.getSavedFileList({ ...@@ -187,9 +187,9 @@ uni.getSavedFileList({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|x| |√|x|√|√|√|√|√|
**OBJECT 参数说明:** **OBJECT 参数说明:**
......
...@@ -3,4 +3,6 @@ ...@@ -3,4 +3,6 @@
获取全局唯一的文件管理器 获取全局唯一的文件管理器
仅微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.getFileSystemManager.html) - 微信小程序平台,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.getFileSystemManager.html)
\ No newline at end of file - 头条小程序平台,[规范详情](https://developer.toutiao.com/docs/api/getFileSystemManager.html)
- QQ小程序平台,[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/file/qq.getFileSystemManager.html)
\ No newline at end of file
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|x|√|√| |√|√|√|√|x|√|√|
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|HBuilderX 2.2.3+|x|基础库2.7+|x|x|x|√| |HBuilderX 2.2.3+|x|基础库2.7+|x|x|x|√|
......
...@@ -25,17 +25,17 @@ ...@@ -25,17 +25,17 @@
|onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发||| |onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发|||
|onHide|监听页面隐藏||| |onHide|监听页面隐藏|||
|onUnload|监听页面卸载||| |onUnload|监听页面卸载|||
|onResize|监听窗口尺寸变化|5+App、微信小程序|| |onResize|监听窗口尺寸变化|App、微信小程序||
|onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)||| |onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)|||
|onReachBottom|页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发||| |onReachBottom|页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发|||
|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、5+App(自定义组件模式)|| |onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、App(自定义组件模式)||
|onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、头条小程序、支付宝小程序|| |onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、头条小程序、支付宝小程序||
|onPageScroll|监听页面滚动,参数为Object||| |onPageScroll|监听页面滚动,参数为Object|||
|onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|5+ App、H5|| |onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|App、H5||
|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|5+App、H5|| |onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](https://ask.dcloud.net.cn/article/35120)|App、H5||
|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|5+App、H5|1.6.0| |onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|App、H5|1.6.0|
|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|5+App、H5|1.6.0| |onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|App、H5|1.6.0|
|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|5+App、H5|1.6.0| |onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|App、H5|1.6.0|
``onPageScroll`` 参数说明: ``onPageScroll`` 参数说明:
...@@ -80,4 +80,4 @@ export default { ...@@ -80,4 +80,4 @@ export default {
**注意** **注意**
- nvue 页面支持的生命周期参考:[nvue 生命周期介绍](/use-weex?id=生命周期) - nvue 页面的weex编译模式支持的生命周期,[参考](/use-weex?id=生命周期)
### uni.getLocation(OBJECT) ### uni.getLocation(OBJECT)
获取当前的地理位置、速度。 获取当前的地理位置、速度。
在微信小程序中,当用户离开应用后,此接口无法调用;当用户点击“显示在聊天顶部”时,此接口可继续调用。 在微信小程序中,当用户离开应用后,此接口无法调用,除非申请后台持续定位权限;当用户点击“显示在聊天顶部”时,此接口可继续调用。
**OBJECT 参数说明** **OBJECT 参数说明**
...@@ -57,10 +57,11 @@ uni.getLocation({ ...@@ -57,10 +57,11 @@ uni.getLocation({
- H5:在较新的手机浏览器上,H5 端获取定位信息,要求部署在 **https** 服务上,本地预览(localhost)仍然可以使用 http 协议。 - H5:在较新的手机浏览器上,H5 端获取定位信息,要求部署在 **https** 服务上,本地预览(localhost)仍然可以使用 http 协议。
- H5:无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候,位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败。 - H5:无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候,位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败。
- H5:微信公众号可使用微信js sdk,[详见](https://ask.dcloud.net.cn/article/35380) - H5:微信公众号可使用微信js sdk,[详见](https://ask.dcloud.net.cn/article/35380)
- App:Android由于谷歌服务被墙,想在国产手机上正常定位,需要向高德等三方服务商申请SDK资质,获取AppKey。云打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。离线打包自行在原生工程中配置。 - App:Android由于谷歌服务被墙,想在国产手机上正常定位,需要向高德等三方服务商申请SDK资质,获取AppKey。云打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。离线打包自行在原生工程中配置。注意包名和appkey信息必须匹配。
- App:``<map>`` 组件默认为国测局坐标gcj02,调用 ``uni.getLocation`` 返回结果传递给 ``<map>`` 组件时,需指定 type 为 gcj02。 - App:``<map>`` 组件默认为国测局坐标gcj02,调用 ``uni.getLocation`` 返回结果传递给 ``<map>`` 组件时,需指定 type 为 gcj02。
- App:持续定位方案:iOS端可以申请持续定位权限,[参考](https://ask.dcloud.net.cn/article/12569)。Android如果进程被杀,代码无法执行。可以使用[unipush](https://ask.dcloud.net.cn/article/35622),通过服务器激活App,执行透传消息,让App启动然后采集位置。Android上,即使自己写原生插件做后台进程,也很容易被杀,unipush是更合适的方案 - App:持续定位方案:iOS端可以申请持续定位权限,[参考](https://ask.dcloud.net.cn/article/12569)。Android如果进程被杀,代码无法执行。可以使用[unipush](https://ask.dcloud.net.cn/article/35622),通过服务器激活App,执行透传消息,让App启动然后采集位置。Android上,即使自己写原生插件做后台进程,也很容易被杀,unipush是更合适的方案
- 小程序:api默认不返回详细地址中文描述。需要中文地址有2种方式:1、使用高德地图小程序sdk,在app和微信上都可以获得中文地址,[参考](http://ask.dcloud.net.cn/article/35070)。2、只考虑app,使用``plus.geolocation``也可以获取中文地址 - 小程序:api默认不返回详细地址中文描述。需要中文地址有2种方式:1、使用高德地图小程序sdk,在app和微信上都可以获得中文地址,[参考](http://ask.dcloud.net.cn/article/35070)。2、只考虑app,使用``plus.geolocation``也可以获取中文地址
- 可以通过用户授权API来判断用户是否给应用授予定位权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
### uni.chooseLocation(OBJECT) ### uni.chooseLocation(OBJECT)
打开地图选择位置。 打开地图选择位置。
...@@ -69,7 +70,7 @@ uni.getLocation({ ...@@ -69,7 +70,7 @@ uni.getLocation({
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|x| |√|√|√|√|√||x|
**OBJECT 参数说明** **OBJECT 参数说明**
......
### uni.createMapContext(mapId,this) ### uni.createMapContext(mapId,this)
创建并返回 map 上下文 ``mapContext`` 对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内 ``<map>`` 组件。 创建并返回 map 上下文 ``mapContext`` 对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内 ``<map>`` 组件。
**注意:uni.createMapContext(mapId, this)**
- app-nvue 平台 2.2.5+ 支持 uni.createMapContext(mapId, this)
- app-nvue 平台 2.2.5- 需要同时设置组件属性id和ref ``<map id="map1" ref="map1"></map>``,或者直接使用 ref,例如 ``this.$refs.map1``
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
...@@ -17,11 +22,11 @@ mapContext ...@@ -17,11 +22,11 @@ mapContext
|:-|:-|:-|:-|:-| |:-|:-|:-|:-|:-|
|getCenterLocation|OBJECT|获取当前地图中心的经纬度,返回的是 gcj02 坐标系,可以用于 [uni.openLocation](api/location/location?id=getlocation)||| |getCenterLocation|OBJECT|获取当前地图中心的经纬度,返回的是 gcj02 坐标系,可以用于 [uni.openLocation](api/location/location?id=getlocation)|||
|moveToLocation||将地图中心移动到当前定位点,需要配合map组件的show-location使用||| |moveToLocation||将地图中心移动到当前定位点,需要配合map组件的show-location使用|||
|translateMarker|OBJECT|平移marker,带动画|App-nvue 2.1.5+、微信小程序带动画|| |translateMarker|OBJECT|平移marker,带动画|app-nvue 2.1.5+、微信小程序带动画||
|includePoints|OBJECT|缩放视野展示所有经纬度|App-nvue 2.1.5+|| |includePoints|OBJECT|缩放视野展示所有经纬度|app-nvue 2.1.5+||
|getRegion|OBJECT|获取当前地图的视野范围||| |getRegion|OBJECT|获取当前地图的视野范围|||
|getScale|OBJECT|获取当前地图的缩放级别||| |getScale|OBJECT|获取当前地图的缩放级别|||
|$getAppMap||获取原生地图对象 [plus.maps.Map](https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map)|5+App自定义组件模式|1.9.3| |$getAppMap||获取原生地图对象 [plus.maps.Map](https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map)|app-vue自定义组件模式|1.9.3|
`$getAppMap()` 注意事项: `$getAppMap()` 注意事项:
...@@ -72,10 +77,36 @@ mapContext ...@@ -72,10 +77,36 @@ mapContext
|fail|Function|否|接口调用失败的回调函数| |fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| |complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
## mapSearch 模块(module) #### reverseGeocode(Object,callback) > 反向地理编码
##### Object 属性|类型 |默认值|必填|说明 :--|:--|:--|:--|:--| point|Object| |是|{latitude: 纬度, longitude: 经度}
##### callback 返回 Object 参数说明
属性|类型 |说明 :--|:--|:--| type|String|"success" 表示成功, "fail" 表示失败 code|Number| 成功返回 0,失败返回相应 code 码
message|String|失败描述
address|String|查询后地址 (成功时返回)
#### poiSearchNearBy(Object,callback); > 周边检索 ##### Object 属性|类型 |默认值|必填|说明 :--|:--|:--|:--|:--| point|Object| |是|检索的中心点坐标 {latitude: 纬度, longitude: 经度}
key|String| | 是|搜索关键字 radius|Number|3000|否|检索的半径,单位为米 index|Number|1|否|要获取检索结果的页号索引 ##### callback 返回 Object 参数说明
属性|类型 |说明 :--|:--|:--|
type|String|"success" 表示成功, "fail" 表示失败 code|Number| 成功返回 0,失败返回相应 code 码
message|String|失败描述
totalNumber|Number|返回的POI数目
currentNumber|Number|当前页POI数目
pageNumber|Number|页数
pageIndex|Number|当前页号索引
poiList|Array.&lt;poiObject&gt;|POI信息数组
##### poiObject
属性|类型 |说明 :--|:--|:--|
location|Object|{latitude: 纬度, longitude: 经度}
name|String|名称
type|String|类型
distance|Number|距离(单位米)
address|String|地址
**Tips** **Tips**
- 如果想在App端实现更多地图功能,可通过`$getAppMap()`获取原生地图对象`plus.maps.Map`,然后参考[文档](https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map)实现更多功能 - App端使用map,nvue比vue更强大
- H5 端获取定位信息,需要部署在 **https** 服务上,本地预览(localhost)仍然可以使用 http 协议。 - H5 端获取定位信息,需要部署在 **https** 服务上,本地预览(localhost)仍然可以使用 http 协议。
- 无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候,位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败。 - 无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候,位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败。
- App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质,获取AppKey,打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。 - App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质,获取AppKey,打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。
......
...@@ -17,4 +17,4 @@ ...@@ -17,4 +17,4 @@
- 不同平台对于 console 方法的支持存在差异,建议在开发过程中只使用文档中提到的方法。 - 不同平台对于 console 方法的支持存在差异,建议在开发过程中只使用文档中提到的方法。
- HBuilderX中有2个重要的代码块,敲`clog`:可直接输出`console.log()`;敲`clogv`:可输出`console.log(": " + );`,并且出现双光标,方便把变量名称和值同时打印出来。 - HBuilderX中有2个重要的代码块,敲`clog`:可直接输出`console.log()`;敲`clogv`:可输出`console.log(": " + );`,并且出现双光标,方便把变量名称和值同时打印出来。
- HBuilderX 1.9.7 以上的自定义组件模式,支持打印对象信息到控制台。老版本可使用`clogj`代码块将json对象转为字符串打印出来。 - HBuilderX 1.9.7 以上的自定义组件模式,在App端支持打印对象信息到控制台。老版本可使用`clogj`代码块将json对象转为字符串打印出来。
\ No newline at end of file
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|√| |√|√|√|x|√|√|√|
**innerAudioContext 对象的属性列表** **innerAudioContext 对象的属性列表**
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|√|x| |√|x|√|x|√|√|√|
**backgroundAudioManager 对象的属性列表** **backgroundAudioManager 对象的属性列表**
...@@ -64,6 +64,7 @@ bgAudioMannager.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp ...@@ -64,6 +64,7 @@ bgAudioMannager.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp
``` ```
Tips: **注意**
因为背景音频播放耗费手机电量,所以平台都有管控,需在manifest中填写申请。
* ios应用背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 ``"UIBackgroundModes":["audio"]`` 才能保证音乐可以后台播放(打包成ipa生效)。 - ios App平台,背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 ``"UIBackgroundModes":["audio"]`` 才能保证音乐可以后台播放(打包成ipa生效)
\ No newline at end of file - 小程序平台,需在manifest.json 对应的小程序节点下,填写"requiredBackgroundModes": ["audio"]。发布小程序时平台会审核
\ No newline at end of file
### uni.createCameraContext() ### uni.createCameraContext()
创建并返回 camera 上下文 cameraContext 对象。 创建并返回 camera 组件的上下文 cameraContext 对象。
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|√|
本API为 camera 组件配套的js API,与 camera 组件的平台兼容性相同,可实现非全屏摄像头。App端可通过[plus.camera](https://www.html5plus.org/doc/zh_cn/camera.html)实现全屏摄像头。
**cameraContext 对象的方法列表** **cameraContext 对象的方法列表**
...@@ -45,3 +47,4 @@ ...@@ -45,3 +47,4 @@
- App下实现OCR等证件识别等需求,可在插件市场获取原生插件,[https://ext.dcloud.net.cn/plugin?id=135](https://ext.dcloud.net.cn/plugin?id=135) - App下实现OCR等证件识别等需求,可在插件市场获取原生插件,[https://ext.dcloud.net.cn/plugin?id=135](https://ext.dcloud.net.cn/plugin?id=135)
- 微信小程序下实现OCR等证件识别等需求,插件市场也有封装,搜索 [ocr](https://ext.dcloud.net.cn/search?q=ocr) 可见。 - 微信小程序下实现OCR等证件识别等需求,插件市场也有封装,搜索 [ocr](https://ext.dcloud.net.cn/search?q=ocr) 可见。
- 可以通过用户授权API来判断用户是否给应用授予摄像头的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
## editorContext ## editorContext
editorContext 实例,可通过 [uni.createSelectorQuery](/api/ui/nodes-info?id=createselectorquery) 获取。 editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery](/api/ui/nodes-info?id=createselectorquery) 获取。
`editorContext` 通过 `id` 跟一个 [`<editor>`](/component/editor) 组件绑定,操作对应的 [`<editor>`](/component/editor) 组件。 `editorContext` 通过 `id` 跟一个 [`<editor>`](/component/editor) 组件绑定,操作对应的 [`<editor>`](/component/editor) 组件。
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|x|x| |√|x|√|x|x|x|x|
## editorContext.format(name, value) ## editorContext.format(name, value)
...@@ -86,7 +86,7 @@ editorContext 实例,可通过 [uni.createSelectorQuery](/api/ui/nodes-info?id ...@@ -86,7 +86,7 @@ editorContext 实例,可通过 [uni.createSelectorQuery](/api/ui/nodes-info?id
| fail | Function | | 否 | 接口调用失败的回调函数 | | fail | Function | | 否 | 接口调用失败的回调函数 |
| complete | Function | | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) | | complete | Function | | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
# editorContext.setContents(OBJECT) ## editorContext.setContents(OBJECT)
初始化编辑器内容,hmlt和delta同时存在时仅delta生效 初始化编辑器内容,hmlt和delta同时存在时仅delta生效
......
...@@ -19,6 +19,7 @@ App端如需要更丰富的相机拍照API(如直接调用前置摄像头) ...@@ -19,6 +19,7 @@ App端如需要更丰富的相机拍照API(如直接调用前置摄像头)
**Tips** **Tips**
- count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。 - count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。
- 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
**注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 [uni.saveFile](api/file/file?id=savefile),在应用下次启动时才能访问得到。** **注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 [uni.saveFile](api/file/file?id=savefile),在应用下次启动时才能访问得到。**
...@@ -210,6 +211,10 @@ uni.chooseImage({ ...@@ -210,6 +211,10 @@ uni.chooseImage({
|:-|:-|:-| |:-|:-|:-|
|errMsg|String|调用结果| |errMsg|String|调用结果|
**注意**
- 可以通过用户授权API来判断用户是否给应用授予相册的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
**示例代码:** **示例代码:**
```javascript ```javascript
...@@ -235,7 +240,7 @@ uni.chooseImage({ ...@@ -235,7 +240,7 @@ uni.chooseImage({
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序 |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|
|1.9.7+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|√|√|x|x| |1.9.7+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|√|√|x||
**OBJECT 参数说明** **OBJECT 参数说明**
...@@ -268,11 +273,11 @@ uni.compressImage({ ...@@ -268,11 +273,11 @@ uni.compressImage({
# wx.chooseMessageFile(OBJECT) # wx.chooseMessageFile(OBJECT)
客户端会话选择文件。 微信聊天会话中选择文件。
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|x|x| |x|x|√|x|x|x|
### uni.createLivePlayerContext(livePlayerId, this) ### uni.createLivePlayerContext(livePlayerId, this)
创建 live-player 上下文 livePlayerContext 对象。 创建 live-player 上下文 livePlayerContext 对象。注意是直播的播放而不是推流。
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|见下|x|√|x|√|x| |见下|x|√|x|√|x|√|
App平台的直播,不使用此API,而使用`plus.video.createLivePusher`[详见](https://ask.dcloud.net.cn/article/13416) App平台的直播播放,不使用此API,而直接使用video的API。
**参数说明** **参数说明**
...@@ -44,3 +44,99 @@ App平台的直播,不使用此API,而使用`plus.video.createLivePusher`, ...@@ -44,3 +44,99 @@ App平台的直播,不使用此API,而使用`plus.video.createLivePusher`,
|success|Function|否|接口调用成功的回调函数| |success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数| |fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| |complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.createLivePusherContext(livePusherId, this)
创建 live-pusher 上下文 livePusherContext 对象。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|见下|x|√|x|x|x|x|
- app-nvue 平台 2.2.5(alpha)+ 支持 uni.createLivePusherContext(livePusherId, this)
- app-nvue 平台 2.2.5(alpha)- 需要同时设置组件属性id和ref ``<live-pusher id="livepusher1" ref="livepusher1"></live-pusher>``,或者直接使用 ref,例如 ``this.$refs.livepusher1``
- app-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组件
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 表示关闭。
#### API #### start(callback)
> 开始推流
##### callback 返回 Object 参数说明
属性|类型 |说明 :--|:--|:--|
type | String | "success" 表示成功, "fail" 表示失败 #### pause(callback) > 暂停推流
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### resume(callback) > 恢复推流
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### stop(callback) > 停止推流
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### switchCamera(callback) > 切换前后摄像头
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### snapshot(callback) > 快照
##### callback 返回 Object 参数说明
##### 成功时的回调 参数|类型 |说明 :--|:--|:--| type|string|"success" 表示成功, "fail" 表示失败
code|Number| 对应code码
message|object|{width:"快照图片宽度",height:"快照图片高度",tempImagePath:"快照图片路径"}。
##### 失败的回调 参数|类型 |说明 :--|:--|:--| type|string|"fail" 表示失败
code|Number|
message|object|
#### startPreview(callback) > 开启摄像头预览
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### stopPreview(callback) > 关闭摄像头预览
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### 事件
#### statechange
> 状态变化事件 ##### 返回参数(detail)的详细说明 参数|类型|说明 :--|:--|:--|
code|Number|
message|string|
#### netstatus
> 网络状态通知事件 ##### 安卓 返回参数(detail)的详细说明 键名|说明 :--|:--|
videoBitrate | 当前视频编/码器输出的比特率,单位 kbps
audioBitrate | 当前音频编/码器输出的比特率,单位 kbps
videoFPS | 当前视频帧率
videoGOP | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长,单位 s
netSpeed | 当前的发送/接收速度
netJitter | 网络抖动情况,抖动越大,网络越不稳定
videoWidth | 视频画面的宽度
videoHeight | 视频画面的高度
##### iOS 返回参数(detail)的详细说明 参数|类型 |说明 :--|:--|:--|
code|Number| code码
message|string| 具体的网络状态信息
#### error > 渲染错误事件 ##### 返回参数(detail)的详细说明 参数|类型 |说明 :--|:--|:--|
errCode|Number|
errMsg|string|
......
### uni.createLivePusherContext(livePusherId, this)
创建 live-pusher 上下文 livePusherContext 对象。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|见下|x|√|x|x|x|
**参数说明**
设置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 表示关闭。
**注意:**
- app-nvue 平台 2.2.5(alpha)+ 支持 uni.createLivePusherContext(livePusherId, this)
- app-nvue 平台 2.2.5(alpha)- 需要同时设置组件属性id和ref ``<live-pusher id="livepusher1" ref="livepusher1"></live-pusher>``,或者直接使用 ref,例如 ``this.$refs.livepusher1``
### API #### start(callback)
> 开始推流
##### callback 返回 Object 参数说明
属性|类型 |说明 :--|:--|:--|
type | String | "success" 表示成功, "fail" 表示失败 #### pause(callback) > 暂停推流
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### resume(callback) > 恢复推流
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### stop(callback) > 停止推流
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### switchCamera(callback) > 切换前后摄像头
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### snapshot(callback) > 快照
##### callback 返回 Object 参数说明
##### 成功时的回调 参数|类型 |说明 :--|:--|:--| type|string|"success" 表示成功, "fail" 表示失败
code|Number| 对应code码
message|object|{width:"快照图片宽度",height:"快照图片高度",tempImagePath:"快照图片路径"}。
##### 失败的回调 参数|类型 |说明 :--|:--|:--| type|string|"fail" 表示失败
code|Number|
message|object|
#### startPreview(callback) > 开启摄像头预览
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### stopPreview(callback) > 关闭摄像头预览
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
### 事件
#### statechange
> 状态变化事件 ##### 返回参数(detail)的详细说明 参数|类型|说明 :--|:--|:--|
code|Number|
message|string|
#### netstatus
> 网络状态通知事件 ##### 安卓 返回参数(detail)的详细说明 键名|说明 :--|:--|
videoBitrate | 当前视频编/码器输出的比特率,单位 kbps
audioBitrate | 当前音频编/码器输出的比特率,单位 kbps
videoFPS | 当前视频帧率
videoGOP | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长,单位 s
netSpeed | 当前的发送/接收速度
netJitter | 网络抖动情况,抖动越大,网络越不稳定
videoWidth | 视频画面的宽度
videoHeight | 视频画面的高度
##### iOS 返回参数(detail)的详细说明 参数|类型 |说明 :--|:--|:--|
code|Number| code码
message|string| 具体的网络状态信息
#### error > 渲染错误事件 ##### 返回参数(detail)的详细说明 参数|类型 |说明 :--|:--|:--|
errCode|Number|
errMsg|string|
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|√|√| |√|x|√|x|√|√|√|
**recorderManager 对象的方法列表** **recorderManager 对象的方法列表**
...@@ -66,6 +66,10 @@ ...@@ -66,6 +66,10 @@
|:-|:-|:-| |:-|:-|:-|
|errMsg|String|错误信息| |errMsg|String|错误信息|
**注意**
- 可以通过用户授权API来判断用户是否给应用授予麦克风的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
**示例** **示例**
```html ```html
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|√| |√|√|√|x|√|√|√|
**videoContext 对象的方法列表** **videoContext 对象的方法列表**
...@@ -22,6 +22,9 @@ ...@@ -22,6 +22,9 @@
|showStatusBar|无|显示状态栏,仅在iOS全屏下有效| |showStatusBar|无|显示状态栏,仅在iOS全屏下有效|
|hideStatusBar|无|隐藏状态栏,仅在iOS全屏下有效| |hideStatusBar|无|隐藏状态栏,仅在iOS全屏下有效|
**注意:**
- app-nvue 平台 2.2.5(alpha)+ 支持 uni.createVideoContext(videoId, this)
- app-nvue 平台 2.2.5(alpha)- 需要同时设置组件属性id和ref ``<video id="video1" ref="video1"></video>``,或者直接使用 ref,例如 ``this.$refs.video1``
**示例** **示例**
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√| |√|√|√|√|√|√|√|
**OBJECT 参数说明** **OBJECT 参数说明**
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
**注意:** **注意:**
* 文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 [uni.saveFile](api/file/file?id=savefile),在应用下次启动时才能访问得到。 * 文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 [uni.saveFile](api/file/file?id=savefile),在应用下次启动时才能访问得到。
* camera 部分 Android 手机下由于系统 ROM 不支持无法生效,打开拍摄界面后可操作切换 * camera 部分 Android 手机下由于系统 ROM 不支持无法生效,打开拍摄界面后可操作切换
* 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
* App下如需进一步压缩视频大小,可以在插件市场搜索[视频压缩](http://ext.dcloud.net.cn/search?q=%E8%A7%86%E9%A2%91%E5%8E%8B%E7%BC%A9)插件 * App下如需进一步压缩视频大小,可以在插件市场搜索[视频压缩](http://ext.dcloud.net.cn/search?q=%E8%A7%86%E9%A2%91%E5%8E%8B%E7%BC%A9)插件
**示例** **示例**
...@@ -70,9 +71,9 @@ export default { ...@@ -70,9 +71,9 @@ export default {
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|√|√| |√|x|√|x|√|√|√|
**OBJECT 参数说明** **OBJECT 参数说明**
...@@ -89,6 +90,10 @@ export default { ...@@ -89,6 +90,10 @@ export default {
|:-|:-|:-| |:-|:-|:-|
|errMsg|String|调用结果| |errMsg|String|调用结果|
**注意**
- 可以通过用户授权API来判断用户是否给应用授予相册写入权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
**示例** **示例**
```html ```html
......
#### 广告 #### 广告
仅微信小程序平台、App平台支持 广告API
微信小程序平台实现参考:[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.createRewardedVideoAd.html) 广告能力在不同小程序端实现不同,使用时需注意用[条件编译](https://uniapp.dcloud.io/platform)调用不同平台的代码。
App平台实现参考:[DCloud广告联盟](http://ask.dcloud.net.cn/article/13084) - App平台:无需编码,在打包App时可直接勾选广告位,[详见](https://dcloud.io/dad.html)
\ No newline at end of file - 微信小程序:[规范文档](https://developers.weixin.qq.com/miniprogram/dev/api/wx.createRewardedVideoAd.html)
- 百度小程序:有组件但无API
- 支付宝小程序:不支持此能力
- 头条小程序:仅小游戏可用,小程序不可用,不适用于uni-app
- QQ小程序:[规范文档](https://q.qq.com/wiki/develop/miniprogram/API/ad/qq.createRewardedVideoAd.html)
\ No newline at end of file
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
##### 微信小程序 ##### 微信小程序
支持指纹和人脸识别两部分,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.startSoterAuthentication.html) 支持指纹和人脸识别两部分,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.startSoterAuthentication.html)
如果使用腾讯云的SDK,可参考[网友分享](https://segmentfault.com/a/1190000020102601)
##### App平台 ##### App平台
- 指纹:html5plus已经内置指纹API,[规范详情](http://www.html5plus.org/doc/zh_cn/fingerprint.html)。在插件市场有一个封装好的微信和App的指纹识别插件:[https://ext.dcloud.net.cn/plugin?id=358](https://ext.dcloud.net.cn/plugin?id=358) - 指纹:html5plus已经内置指纹API,[规范详情](http://www.html5plus.org/doc/zh_cn/fingerprint.html)。在插件市场有一个封装好的微信和App的指纹识别插件:[https://ext.dcloud.net.cn/plugin?id=358](https://ext.dcloud.net.cn/plugin?id=358)
- 人脸识别:app引擎未内置,需要安装原生插件,详见[插件市场人脸识别插件](https://ext.dcloud.net.cn/search?q=%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB) - 人脸识别:app引擎未内置,需要安装原生插件,详见[插件市场人脸识别插件](https://ext.dcloud.net.cn/search?q=%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB)
......
...@@ -4,10 +4,12 @@ ...@@ -4,10 +4,12 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|√| |x|x|√|x|√|√|√|
注意:App平台的授权判断方式,另见:[https://ext.dcloud.net.cn/plugin?id=594](https://ext.dcloud.net.cn/plugin?id=594)
**OBJECT 参数说明** **OBJECT 参数说明**
|参数|类型|必填|说明| |参数|类型|必填|说明|
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√| |x|x|√|x|√|√|x|
**OBJECT参数说明** **OBJECT参数说明**
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√| |x|x|√|x|√|√|x|
**OBJECT参数说明** **OBJECT参数说明**
...@@ -45,9 +45,9 @@ if (uni.getExtConfig) { ...@@ -45,9 +45,9 @@ if (uni.getExtConfig) {
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√| |x|x|√|x|√|√|x|
**返回值(Object)** **返回值(Object)**
......
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|√|
**返回值** **返回值**
......
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|x|
**OBJECT参数说明** **OBJECT参数说明**
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
**平台差异说明** **平台差异说明**
|App|H5|[微信小程序](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html)|[支付宝小程序](https://docs.alipay.com/mini/api/zwi8gx)|[百度小程序](https://smartprogram.baidu.com/docs/develop/api/open_smartprogram/#swan-navigateToSmartProgram/)|[头条小程序](https://developer.toutiao.com/docs/open/navigateToMiniProgram.html)|[QQ小程序](https://q.qq.com/wiki/develop/miniprogram/API/open_port/port_change.html#qq-navigatetominiprogram)| |App|H5|[微信小程序](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html)|[支付宝小程序](https://docs.alipay.com/mini/api/open-miniprogram)|[百度小程序](https://smartprogram.baidu.com/docs/develop/api/open_smartprogram/#swan-navigateToSmartProgram/)|[头条小程序](https://developer.toutiao.com/docs/open/navigateToMiniProgram.html)|[QQ小程序](https://q.qq.com/wiki/develop/miniprogram/API/open_port/port_change.html#qq-navigatetominiprogram)|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x(见下)|x|√|√|√|√(1.15.0+)|√| |x(见下)|x|√|√|√|√(1.15.0+)|√|
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|√|
**OBJECT说明** **OBJECT说明**
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|x|
**请求地址** **请求地址**
...@@ -66,9 +66,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templateadd?access_tok ...@@ -66,9 +66,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templateadd?access_tok
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|x|
**请求地址** **请求地址**
``` ```
...@@ -120,9 +120,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templatedel?access_tok ...@@ -120,9 +120,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templatedel?access_tok
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|x|
**请求地址** **请求地址**
...@@ -229,9 +229,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/libraryget?access_toke ...@@ -229,9 +229,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/libraryget?access_toke
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|x|
**请求地址** **请求地址**
...@@ -318,9 +318,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/librarylist?access_tok ...@@ -318,9 +318,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/librarylist?access_tok
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|x|
**请求地址** **请求地址**
...@@ -416,9 +416,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templatelist?access_to ...@@ -416,9 +416,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templatelist?access_to
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|x|
**请求地址** **请求地址**
...@@ -549,9 +549,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templatedel?access_tok ...@@ -549,9 +549,9 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templatedel?access_tok
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|x|√|x|x| |x|x|x|√|x|x|x|
**请求地址** **请求地址**
......
...@@ -8,9 +8,9 @@ App的更新不使用本API,另见文档: ...@@ -8,9 +8,9 @@ App的更新不使用本API,另见文档:
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√| |x|x|√|√|√|√|√|
**updateManager 对象的方法列表:** **updateManager 对象的方法列表:**
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√| |√|x|√|√|√|√|√|
H5平台登陆注意事项: H5平台登陆注意事项:
- 微信内嵌浏览器运行H5版时,可通过js sdk实现微信登陆,需要引入一个单独的js,[详见](https://ask.dcloud.net.cn/article/35380) - 微信内嵌浏览器运行H5版时,可通过js sdk实现微信登陆,需要引入一个单独的js,[详见](https://ask.dcloud.net.cn/article/35380)
...@@ -56,9 +56,9 @@ uni.login({ ...@@ -56,9 +56,9 @@ uni.login({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√| |x|x|√|x|√|√|√|
|属性|类型|必填|说明| |属性|类型|必填|说明|
|:-|:-|:-|:-| |:-|:-|:-|:-|
...@@ -73,9 +73,9 @@ uni.login({ ...@@ -73,9 +73,9 @@ uni.login({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√| |√|x|√|√|√|√|√|
**注意:** 微信小程序端,在用户未授权过的情况下调用此接口,不会出现授权弹窗,会直接进入 fail 回调(详见[《微信小程序公告》](https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01))。在用户已授权的情况下调用此接口,可成功获取用户信息。 **注意:** 微信小程序端,在用户未授权过的情况下调用此接口,不会出现授权弹窗,会直接进入 fail 回调(详见[《微信小程序公告》](https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01))。在用户已授权的情况下调用此接口,可成功获取用户信息。
......
...@@ -11,9 +11,9 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在 ...@@ -11,9 +11,9 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|[说明](/api/plugins/payment?id=h5-payment)|√|√|√|√| |√|[说明](/api/plugins/payment?id=h5-payment)|√|√|√|√|√|
**OBJECT 参数说明** **OBJECT 参数说明**
...@@ -113,6 +113,9 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在 ...@@ -113,6 +113,9 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在
- Q:App端如何集成其他支付SDK - Q:App端如何集成其他支付SDK
- A:使用原生插件方式,可以集成如paypal或三方聚合支付sdk,原生插件开发文档见[https://ask.dcloud.net.cn/article/35428](https://ask.dcloud.net.cn/article/35428)。开发之前可以先去[插件市场](https://ext.dcloud.net.cn/)看下有没有做好的。 - A:使用原生插件方式,可以集成如paypal或三方聚合支付sdk,原生插件开发文档见[https://ask.dcloud.net.cn/article/35428](https://ask.dcloud.net.cn/article/35428)。开发之前可以先去[插件市场](https://ext.dcloud.net.cn/)看下有没有做好的。
- Q:Appstore审核报PGPay SDK不允许上架的问题
- A:数字类产品(比如购买会员等不需要配送实物的商品),Apple规定必须使用苹果IAP应用内支付,给Apple分成30%。打包的时候不要勾选微信或支付宝等其他支付方式。如果你提交的包里包含了微信支付宝等支付的sdk,即使没使用,Appstore也会认为你有隐藏方式,以后会绕过iap,不给Apple分成,因此拒绝你的App上线。云打包时,manifest里选上支付模块,但sdk配置里去掉微信支付和支付宝支付。很多开发者的Android版是包含微信和支付宝支付的,此时注意分开判断。
**示例** **示例**
App 支付 App 支付
......
### uni.getProvider(OBJECT) ### uni.getProvider(OBJECT)
获取服务供应商。 获取服务供应商。仅App平台支持。
在App平台,可用的服务商,是打包环境中配置的服务商,与手机端安装了什么app没有关系。 在App平台,可用的服务商,是打包环境中配置的服务商,与手机端安装了什么app没有关系。
......
...@@ -7,6 +7,10 @@ ...@@ -7,6 +7,10 @@
uni push 推送的开发API文档:[https://www.html5plus.org/doc/zh_cn/push.html](https://www.html5plus.org/doc/zh_cn/push.html) uni push 推送的开发API文档:[https://www.html5plus.org/doc/zh_cn/push.html](https://www.html5plus.org/doc/zh_cn/push.html)
插件市场有很多推送相关的插件,包括检查应用是否被授予推送权限([参考](https://ext.dcloud.net.cn/plugin?id=594))、开启关闭推送服务([参考](https://ext.dcloud.net.cn/plugin?id=727))、自定义iOS推送铃声([参考](https://ext.dcloud.net.cn/plugin?id=690)
插件市场也提供了其他三方推送方案,但注意unipush是推送成功率更高的解决方案,并且免费使用,更推荐使用。
- 小程序平台 - 小程序平台
小程序平台的类似概念叫做`模板消息` 小程序平台的类似概念叫做`模板消息`
......
...@@ -188,6 +188,7 @@ uni.share({ ...@@ -188,6 +188,7 @@ uni.share({
```javascript ```javascript
uni.share({ uni.share({
provider: 'weixin', provider: 'weixin',
scene: "WXSceneSession",
type: 5, type: 5,
imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png', imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png',
title: '欢迎体验uniapp', title: '欢迎体验uniapp',
......
#### voice #### voice
video包括语言识别和语音朗读两部分。 voice 包括语言识别和语音朗读两部分。
仅百度小程序平台、App平台支持,各平台开发方式暂未统一,使用时需注意用[条件编译](https://uniapp.dcloud.io/platform)调用不同平台的代码。 仅百度小程序平台、App平台支持,各平台开发方式暂未统一,使用时需注意用[条件编译](https://uniapp.dcloud.io/platform)调用不同平台的代码。
......
#### mDNS 服务 #### mDNS 服务
仅微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.stopLocalServiceDiscovery.html) - 微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.stopLocalServiceDiscovery.html)
- App端可在插件市场搜索相关插件[mDNS](https://ext.dcloud.net.cn/search?q=mdns)
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
|method|String|否|GET|有效值详见下方说明|| |method|String|否|GET|有效值详见下方说明||
|dataType|String|否|json |如果设为 json,会尝试对返回的数据做一次 JSON.parse|| |dataType|String|否|json |如果设为 json,会尝试对返回的数据做一次 JSON.parse||
|responseType|String|否|text |设置响应的数据类型。合法值:text、arraybuffer|5+App和支付宝小程序不支持| |responseType|String|否|text |设置响应的数据类型。合法值:text、arraybuffer|5+App和支付宝小程序不支持|
|sslVerify|Boolean|否|true|验证 ssl 证书|仅5+App安卓端支持(HBuilderX 2.3.3+)|
|success|Function|否||收到开发者服务成功返回的回调函数|| |success|Function|否||收到开发者服务成功返回的回调函数||
|fail|Function|否||接口调用失败的回调函数|| |fail|Function|否||接口调用失败的回调函数||
|complete|Function|否||接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;| |complete|Function|否||接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
...@@ -120,3 +121,8 @@ requestTask.abort(); ...@@ -120,3 +121,8 @@ requestTask.abort();
- 低版本手机自身不支持 ipv6,如果服务器仅允许 ipv6,会导致老手机无法正常运行或访问速度非常慢 - 低版本手机自身不支持 ipv6,如果服务器仅允许 ipv6,会导致老手机无法正常运行或访问速度非常慢
- localhost、127.0.0.1等服务器地址,只能在电脑端运行,手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络 - localhost、127.0.0.1等服务器地址,只能在电脑端运行,手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络
- debug 模式,安卓端暂时无法获取响应头,url中含有非法字符(如未编码为%20的空格)时会请求失败 - debug 模式,安卓端暂时无法获取响应头,url中含有非法字符(如未编码为%20的空格)时会请求失败
- iOS App第一次安装启动后,会弹出是否允许联网的询问框,在用户点击同意前,调用联网API会失败。请注意判断这种情况。比如官方提供的新闻模板示例(HBuilderX新建项目可选择),会判断如果无法联网,则提供一个错误页,提示用户设置网络及下拉刷新重试。
- 良好体验的App,还会判断当前是否处于飞行模式([参考](https://ext.dcloud.net.cn/plugin?id=594))、是wifi还是3G([参考](https://uniapp.dcloud.io/api/system/network)
- 部分安卓设备,真机运行或debug模式下的网络,低于release模式很多。
- 使用一些比较小众的证书机构(如:CFCA OV OCA)签发的 ssl 证书在安卓设备请求会失败,因为这些机构的根证书不在系统内置根证书库,可以更换其他常见机构签发的证书(如:Let's Encrypt),或者配置 sslVerify 为 false 关闭 ssl 证书验证(不推荐)。
- 单次网络请求数据量建议控制在50K以下(仅指json数据,不含图片),过多数据应分页获取,以提升应用体验。
...@@ -50,8 +50,12 @@ var socketTask = uni.connectSocket({ ...@@ -50,8 +50,12 @@ var socketTask = uni.connectSocket({
**注意事项** **注意事项**
- 网络请求的 ``超时时间`` 可以统一在 ``manifest.json`` 中配置 [networkTimeout](/collocation/manifest?id=networktimeout) - 网络请求的 ``超时时间`` 可以统一在 ``manifest.json`` 中配置 [networkTimeout](/collocation/manifest?id=networktimeout)
- App目前不支持 ``ArrayBuffer`` 类型的数据收发。可以使用 [plus-websocket](https://ext.dcloud.net.cn/plugin?id=647) 插件替代。 - App平台,2.2.6以下的版本,不支持 ``ArrayBuffer`` 类型的数据收发。老版本不愿升级也可以使用 [plus-websocket插件](https://ext.dcloud.net.cn/plugin?id=647) 插件替代。
- 自定义组件模式下所有 `vue` 页面只能使用一个 `websocket` 连接。可以使用 [plus-websocket](https://ext.dcloud.net.cn/plugin?id=647) 插件替代。 - App平台自定义组件模式下,以及支付宝小程序下,所有 `vue` 页面只能使用一个 `websocket` 连接。App下可以使用 [plus-websocket](https://ext.dcloud.net.cn/plugin?id=647) 插件替代实现多链接。App平台,2.2.6+起支持多个socket链接,数量没有限制。
- 微信小程序平台1.7.0 及以上版本,最多可以同时存在5个WebSocket 连接。老版本只支持一个socket连接
- 百度小程序平台自基础库版本 1.9.4 及以后支持多个socket连接。老版本只支持一个socket连接
- QQ小程序平台最多支持同时存在5个socket链接
### uni.onSocketOpen(CALLBACK) ### uni.onSocketOpen(CALLBACK)
监听WebSocket连接打开事件。 监听WebSocket连接打开事件。
......
...@@ -176,8 +176,13 @@ Tips: ...@@ -176,8 +176,13 @@ Tips:
* 页面底部的 ``tabBar`` 由页面决定,即只要是定义为 ``tabBar`` 的页面,底部都有 ``tabBar`` * 页面底部的 ``tabBar`` 由页面决定,即只要是定义为 ``tabBar`` 的页面,底部都有 ``tabBar``
* 不能在 ```App.vue``` 里面进行页面跳转。 * 不能在 ```App.vue``` 里面进行页面跳转。
**参考事项**
- 页面路由拦截和管理,插件市场有很多封装好的工具类,搜索[路由](https://ext.dcloud.net.cn/search?q=%E8%B7%AF%E7%94%B1)
#### 窗口动画@animation #### 窗口动画@animation
> 本API仅App支持。小程序自身不支持自定义动画。H5的窗体动画可使用常规单页动画处理方案,见[H5下单页动画示例](https://ext.dcloud.net.cn/plugin?id=659&tdsourcetag=s_pctim_aiomsg) > 本API仅App支持。小程序自身不支持自定义动画。H5的窗体动画可使用常规单页动画处理方案,见[H5下单页动画示例](https://ext.dcloud.net.cn/plugin?id=659&tdsourcetag=s_pctim_aiomsg)
窗口的显示/关闭动画效果,支持在 API、组件、pages.json 中配置,优先级为:`API = 组件 > pages.json` 窗口的显示/关闭动画效果,支持在 API、组件、pages.json 中配置,优先级为:`API = 组件 > pages.json`
...@@ -228,10 +233,10 @@ pages.json 中配置的是窗口显示的动画 ...@@ -228,10 +233,10 @@ pages.json 中配置的是窗口显示的动画
|slide-in-left|slide-out-left|新窗体从左侧进入| |slide-in-left|slide-out-left|新窗体从左侧进入|
|slide-in-top|slide-out-top|新窗体从顶部进入| |slide-in-top|slide-out-top|新窗体从顶部进入|
|slide-in-bottom|slide-out-bottom|新窗体从底部进入| |slide-in-bottom|slide-out-bottom|新窗体从底部进入|
|pop-in|pop-out|新窗体从左侧进入,且老窗体被挤压而出|
|fade-in|fade-out|新窗体从透明到不透明逐渐显示| |fade-in|fade-out|新窗体从透明到不透明逐渐显示|
|zoom-out|zoom-in|新窗体从小到大缩放显示| |zoom-out|zoom-in|新窗体从小到大缩放显示|
|zoom-fade-out|zoom-fade-in|新窗体从小到大逐渐放大并且从透明到不透明逐渐显示| |zoom-fade-out|zoom-fade-in|新窗体从小到大逐渐放大并且从透明到不透明逐渐显示|
|pop-in|pop-out|新窗体从左侧进入,且老窗体被挤压而出|
|none|none|无动画| |none|none|无动画|
详细的窗口动画说明,请参考: 详细的窗口动画说明,请参考:
...@@ -239,5 +244,7 @@ pages.json 中配置的是窗口显示的动画 ...@@ -239,5 +244,7 @@ pages.json 中配置的是窗口显示的动画
- 窗口显示的动画:[AnimationTypeShow](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeShow) - 窗口显示的动画:[AnimationTypeShow](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeShow)
- 窗口关闭的动画:[AnimationTypeClose](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeClose) - 窗口关闭的动画:[AnimationTypeClose](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeClose)
**参考事项** **注意**
- 页面路由拦截和管理,插件市场有很多封装好的工具类,搜索[路由](https://ext.dcloud.net.cn/search?q=%E8%B7%AF%E7%94%B1) - 纯nvue项目(render为native),窗体动画默认进入动画为popin,返回为pop-out。如果想修改动画类型,只能通过uni.navigateTo API修改,在组件或pages.json里配置动画类型无效
- 非纯nvue项目,App端窗体动画,默认进入动画为slider-in-right,默认返回动画为pop-out
...@@ -6,3 +6,5 @@ ...@@ -6,3 +6,5 @@
- 百度小程序平台:[规范详情](https://smartprogram.baidu.com/docs/develop/api/device_battery/#swan-getBatteryInfo/) - 百度小程序平台:[规范详情](https://smartprogram.baidu.com/docs/develop/api/device_battery/#swan-getBatteryInfo/)
- 支付宝小程序平台:[规范详情](https://docs.alipay.com/mini/api/nrnziy) - 支付宝小程序平台:[规范详情](https://docs.alipay.com/mini/api/nrnziy)
- QQ小程序平台:[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/equipment/ibeacon_battery.html) - QQ小程序平台:[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/equipment/ibeacon_battery.html)
- App平台:使用 Native.js,[参考](https://ask.dcloud.net.cn/article/992)
- H5平台:使用 navigator.battery API
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|x|√| |x|x|√|√|√||√|
**CALLBACK返回参数:** **CALLBACK返回参数:**
......
...@@ -5,7 +5,7 @@ App平台提供了更多通讯录相关API,包括读取联系人,详见:[h ...@@ -5,7 +5,7 @@ App平台提供了更多通讯录相关API,包括读取联系人,详见:[h
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|x|x| |√|x|√|√|√|x|x|
...@@ -78,5 +78,5 @@ uni.addPhoneContact({ ...@@ -78,5 +78,5 @@ uni.addPhoneContact({
**注意** **注意**
- 手机OS对通讯录访问有严格的权限限制和要求。在小程序中使用时,需注意微信等小程序载体本身已经获得了手机端的授权许可。 - 手机OS对通讯录访问有严格的权限限制和要求。在小程序中使用时,需注意微信等小程序载体本身已经获得了手机端的授权许可。App端获取通讯录相关权限,参考[https://ext.dcloud.net.cn/plugin?id=594](https://ext.dcloud.net.cn/plugin?id=594)
- 打包App时,云打包则需要在manifest中配置权限和模块,离线打包需自行在原生工程中配置。 - 打包App时,云打包则需要在manifest中配置权限和模块,离线打包需自行在原生工程中配置。
...@@ -2,4 +2,4 @@ ...@@ -2,4 +2,4 @@
仅微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/device/motion/wx.startDeviceMotionListening.html) 仅微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/device/motion/wx.startDeviceMotionListening.html)
在App平台,也可以通过监听窗体大小变化onResize来实现此类需求。[详见](https://uniapp.dcloud.io/collocation/frame/lifetime?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f) 在App平台,也可以通过监听窗体大小变化onResize来实现此类需求。[详见](https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f)
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|HBuilderX 2.0.4+|√|√|√|√| |√|HBuilderX 2.0.4+|√|√|√|√|√|
**注意:** **注意:**
- export 方法每次调用后会清掉之前的动画操作 - export 方法每次调用后会清掉之前的动画操作
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|√|
**参数说明** **参数说明**
...@@ -35,9 +35,9 @@ uni.setBackgroundColor({ ...@@ -35,9 +35,9 @@ uni.setBackgroundColor({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x| |x|x|√|x|√|x|√|
**参数说明** **参数说明**
......
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|1.9.0+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|基础库 2.1.0+|x|x|x| |1.9.0+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|基础库 2.1.0+|x|x|x|x|
**参数说明** **参数说明**
......
...@@ -4,10 +4,28 @@ ...@@ -4,10 +4,28 @@
坐标信息以屏幕左上角为原点。 坐标信息以屏幕左上角为原点。
各平台开发方式暂未统一,使用时需注意用[条件编译](https://uniapp.dcloud.io/platform)调用不同平台的代码。 **平台差异说明**
|5+App |H5 |微信小程序 |支付宝小程序 |百度小程序 |头条小程序 |QQ小程序 |
|:-: |:-:|:-: |:-: |:-: |:-: |:-: |
|x |x |√ |x |√ |√ |√ |
**返回值说明**
|属性 |类型 |说明 |
|width |number |宽度,单位:px |
|height |number |高度,单位:px |
|top |number |上边界坐标,单位:px |
|right |number |右边界坐标,单位:px |
|bottom |number |下边界坐标,单位:px |
|left |number |左边界坐标,单位:px |
**示例**
```javascript
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
```
**注意**
- 微信小程序:[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.getMenuButtonBoundingClientRect.html)
- 百度小程序:[规范详情](https://smartprogram.baidu.com/docs/develop/api/menu_info/)
- 支付宝小程序:其逻辑与微信小程序不同,它提供了菜单点击后按钮的自定义功能,可以选择显示那些系统按钮,[规范详情](https://docs.alipay.com/mini/api/optionmenuitem) - 支付宝小程序:其逻辑与微信小程序不同,它提供了菜单点击后按钮的自定义功能,可以选择显示那些系统按钮,[规范详情](https://docs.alipay.com/mini/api/optionmenuitem)
- 头条小程序:[规范详情](https://developer.toutiao.com/docs/game/ui/menu/tt.getMenuButtonBoundingClientRect.html)
- QQ小程序:[规范详情](https://q.qq.com/wiki/develop/game/API/interface/menu.html#qq-getmenubuttonboundingclientrect)
...@@ -26,9 +26,9 @@ uni.setNavigationBarTitle({ ...@@ -26,9 +26,9 @@ uni.setNavigationBarTitle({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x| |√|√|√|√|√|x|√|
**OBJECT参数说明** **OBJECT参数说明**
...@@ -82,9 +82,11 @@ uni.setNavigationBarColor({ ...@@ -82,9 +82,11 @@ uni.setNavigationBarColor({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|√|√|√|√|x| |x|√|√|√|√|x|√|
App平台调用此API时会在屏幕中间悬浮显示loading
**OBJECT参数说明** **OBJECT参数说明**
...@@ -106,9 +108,11 @@ uni.showNavigationBarLoading() ...@@ -106,9 +108,11 @@ uni.showNavigationBarLoading()
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|√|√|√|√|x| |x|√|√|√|√|x|√|
App平台调用此API时会关闭屏幕中间悬浮显示的loading
**OBJECT参数说明** **OBJECT参数说明**
......
...@@ -108,9 +108,9 @@ query.select('#id').boundingClientRect(data => { ...@@ -108,9 +108,9 @@ query.select('#id').boundingClientRect(data => {
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|x|x| |√|x|√|x|x|x|√|
**callback 返回参数** **callback 返回参数**
...@@ -142,3 +142,51 @@ view.boundingClientRect(data => { ...@@ -142,3 +142,51 @@ view.boundingClientRect(data => {
console.log("节点离页面顶部的距离为" + data.top); console.log("节点离页面顶部的距离为" + data.top);
}).exec(); }).exec();
``` ```
**注意**
- nvue 暂不支持 uni.createSelectorQuery,暂时使用下面的方案
```
<template>
<view class="wrapper">
<view ref="box" class="box">
<text class="info">Width: {{size.width}}</text>
<text class="info">Height: {{size.height}}</text>
<text class="info">Top: {{size.top}}</text>
<text class="info">Bottom: {{size.bottom}}</text>
<text class="info">Left: {{size.left}}</text>
<text class="info">Right: {{size.right}}</text>
</view>
</view>
</template>
<script>
// 注意平台差异
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
// #endif
export default {
data () {
return {
size: {
width: 0,
height: 0,
top: 0,
bottom: 0,
left: 0,
right: 0
}
}
},
onReady () {
const result = dom.getComponentRect(this.$refs.box, option => {
console.log('getComponentRect:', option)
this.size = option.size
})
console.log('return value:', result)
console.log('viewport:', dom.getComponentRect('viewport'))
}
}
</script>
```
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
### FAQ ### FAQ
Q:如何暂时禁用掉下拉刷新,待需要的时候再重新开启? Q:如何暂时禁用掉下拉刷新,待需要的时候再重新开启?
A:`5+App` 平台下可以处理此类场景,详细参考:[uni-app 中实现动态禁用/开启下拉刷新](https://ask.dcloud.net.cn/article/35134) A:`App` 平台下可以处理此类场景,详细参考:[uni-app 中实现动态禁用/开启下拉刷新](https://ask.dcloud.net.cn/article/35134)
Q:自定义title如何让下拉刷新在title之下 Q:自定义title如何让下拉刷新在title之下
A:App和H5端使用circle方式的下拉刷新,设offset在title高度之下。hello uni-app的模板-导航栏中有示例。小程序端无法实现,除非放弃原生下拉刷新,自己模拟下拉刷新,插件市场有类似插件,但性能不如原生下拉刷新。 A:App和H5端使用circle方式的下拉刷新,设offset在title高度之下。hello uni-app的模板-导航栏中有示例。小程序端无法实现,除非放弃原生下拉刷新,自己模拟下拉刷新,插件市场有类似插件,但性能不如原生下拉刷新。
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x| |√|√|√|√|√|x|√|
**OBJECT参数说明:** **OBJECT参数说明:**
...@@ -37,9 +37,9 @@ uni.setTabBarItem({ ...@@ -37,9 +37,9 @@ uni.setTabBarItem({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x| |√|√|√|√|√|x|√|
**OBJECT参数说明:** **OBJECT参数说明:**
...@@ -70,9 +70,9 @@ uni.setTabBarStyle({ ...@@ -70,9 +70,9 @@ uni.setTabBarStyle({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x| |√|√|√|√|√|x|√|
**OBJECT参数说明:** **OBJECT参数说明:**
...@@ -89,9 +89,9 @@ uni.setTabBarStyle({ ...@@ -89,9 +89,9 @@ uni.setTabBarStyle({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x| |√|√|√|√|√|x|√|
**OBJECT参数说明:** **OBJECT参数说明:**
...@@ -107,9 +107,9 @@ uni.setTabBarStyle({ ...@@ -107,9 +107,9 @@ uni.setTabBarStyle({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x| |√|√|√|√|√|x|√|
**OBJECT参数说明:** **OBJECT参数说明:**
...@@ -135,9 +135,9 @@ uni.setTabBarBadge({ ...@@ -135,9 +135,9 @@ uni.setTabBarBadge({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x| |√|√|√|√|√|x|√|
**OBJECT参数说明:** **OBJECT参数说明:**
...@@ -153,9 +153,9 @@ uni.setTabBarBadge({ ...@@ -153,9 +153,9 @@ uni.setTabBarBadge({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x| |√|√|√|√|√|x|√|
**OBJECT参数说明:** **OBJECT参数说明:**
...@@ -171,9 +171,9 @@ uni.setTabBarBadge({ ...@@ -171,9 +171,9 @@ uni.setTabBarBadge({
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x| |√|√|√|√|√|x|√|
**OBJECT参数说明:** **OBJECT参数说明:**
......
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序 |支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序 |支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(nvue不支持)|√|√|x|x|x| |√(nvue不支持)|√|√|x|x|x|√|
**CALLBACK 参数说明** **CALLBACK 参数说明**
......
#### Worker
仅微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/worker/wx.createWorker.html)
\ No newline at end of file
#### Worker
目前需分平台编写
- 微信小程序:[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/worker/wx.createWorker.html)
- 头条小程序:[规范详情](https://developer.toutiao.com/docs/game/worker/tt.createWorker.html)
- QQ小程序:[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/worker/worker.html)
\ No newline at end of file
uni-app编译到App时,使用了DCloud的5+App引擎,该引擎跨iOS和Android,拥有众多案例,上线4年来产生几十万个App,有2亿手机用户在使用基于5+引擎开发的应用。详见[https://dcloud.io/case/](https://dcloud.io/case/) 如特别关心App端案例,注意uni-app编译到App时,使用了DCloud的5+App引擎,拥有众多案例(包括中国邮政、中国工商、湖北银行、360等),有2亿手机用户在使用基于5+引擎开发的应用。详见[https://dcloud.io/case/](https://dcloud.io/case/)
uni-app已经有几十万开发者,创建了几十万个项目,是开发者数量和案例最丰富的多端开发框架。 uni-app已经有几十万开发者,是开发者数量和案例最丰富的多端开发框架。
我们相信还有更多优秀案例,没有被我们采集到,欢迎大家到[项目案例征集](//github.com/dcloudio/uni-app/issues/6)提交。 我们相信还有更多优秀案例,没有被我们采集到,欢迎大家到[项目案例征集](https://github.com/dcloudio/uni-app/issues/6)提交。
### 官方示例 ### 官方示例
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style"><b>Hello uni-app:</b></a>演示uni-app框架的组件、接口、模板,可以使用手机扫描下方App码下载iOS、Android原生安装包,也可以使用微信扫描小程序码,体验uni-app的小程序版本。本项目源码在HBuilderX中新建项目可获得 <a href="//m3w.cn/uniapp" target="_blank" class="clear-style"><b>Hello uni-app:</b></a>演示uni-app框架的组件、接口、模板,可以使用手机扫描下方App码下载iOS、Android原生安装包,也可以使用微信扫描小程序码,体验uni-app的小程序版本。本项目源码可在HBuilderX中新建项目获得,也可从[github](https://github.com/dcloudio/hello-uniapp)上获取
<div style="display:flex;justify-content: space-around;"> <div style="display:flex;justify-content: space-around;">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/app_download.png" width="200"/> <img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/app_download.png" width="200"/>
...@@ -50,7 +50,7 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者 ...@@ -50,7 +50,7 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
<a href="https://www.oschina.net/" target="_blank" class="clear-style"><b>开源中国:</b></a> 中文开源技术交流社区,提供最新的开源软件资讯。 <a href="https://www.oschina.net/" target="_blank" class="clear-style"><b>开源中国:</b></a> 中文开源技术交流社区,提供最新的开源软件资讯。
<div style="display:flex;justify-content: space-around;"> <div style="display:flex;justify-content: space-around;">
<a href="javascript:;" target="_blank" class="clear-style barcode-view"> <a href="javascript:;" target="_blank" class="clear-style barcode-view">
<img src="http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/oschina_weixin.jpg" width="200"/> <img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/oschina_weixin.jpg" width="200"/>
<span style="margin-top:15px;">微信小程序码</span> <span style="margin-top:15px;">微信小程序码</span>
</a> </a>
<a href="javascript:;" target="_blank" class="clear-style barcode-view"> <a href="javascript:;" target="_blank" class="clear-style barcode-view">
...@@ -98,11 +98,11 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者 ...@@ -98,11 +98,11 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
<span style="margin-top:15px;">百度小程序码</span> <span style="margin-top:15px;">百度小程序码</span>
</a> </a>
<a href="https://www.cyb520.com/" target="_blank" class="clear-style barcode-view"> <a href="https://www.cyb520.com/" target="_blank" class="clear-style barcode-view">
<img src="https://img.cyb520.com/faceImg/2019/08/17/130C1F3F-2E93-A55D-D6B2-074BEBE1902F.png/a120" width="200"/> <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/cyb-qq.jpg" width="200"/>
<span style="margin-top:15px;">QQ小程序码</span> <span style="margin-top:15px;">QQ小程序码</span>
</a> </a>
<a href="https://www.cyb520.com/" target="_blank" class="clear-style barcode-view"> <a href="https://www.cyb520.com/" target="_blank" class="clear-style barcode-view">
<img src="https://img.cyb520.com/faceImg/2019/08/17/404C2595-2B08-D471-1317-6D5375F195C5.png/a120" width="200"/> <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/cyb-toutiao.png" width="200"/>
<span style="margin-top:15px;">头条/抖音小程序码</span> <span style="margin-top:15px;">头条/抖音小程序码</span>
</a> </a>
</div> </div>
...@@ -145,6 +145,8 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者 ...@@ -145,6 +145,8 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
**极志愿:**专业高考志愿填报。**<span style="color:#42b983">多端获客典型案例,1个月获得400万用户</span>**[详见报道](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/) **极志愿:**专业高考志愿填报。**<span style="color:#42b983">多端获客典型案例,1个月获得400万用户</span>**[详见报道](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已经有几十万开发者,创建了几十万个项目,是开发者 ...@@ -161,16 +163,20 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
**浙江ETC:**微信小程序搜索 “浙江ETC”、支付宝小程序搜索 “浙江ETC”、[H5](https://issue.zjetc.cn/) **浙江ETC:**微信小程序搜索 “浙江ETC”、支付宝小程序搜索 “浙江ETC”、[H5](https://issue.zjetc.cn/)
**中国银联云闪付:** App部分页面使用uni-app制作
**拉卡拉收款宝:** App部分页面使用uni-app制作 **拉卡拉收款宝:** App部分页面使用uni-app制作
**香橙:** 餐馆SaaS服务,手机点餐、下单、排队叫号、营销推广。[官网](http://ivcvc.com) **香橙:** 餐馆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/) **桂聘:** 广西区域招聘,随时随地找工作,[Android和iOS](http://www.guipin.com/jihui/)
**课呱呱:**在线学习好工作。[App、小程序、H5通用链接](http://m3w.cn/__uni__b19209a)
**阿拉运:** 物流行业app,nvue案例,[iOS和Android下载页](http://mb.ialayun.com/) **阿拉运:** 物流行业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)、微信小程序、支付宝小程序搜索“财金宝” **财金宝:** 多端理财记账工具,[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已经有几十万开发者,创建了几十万个项目,是开发者 ...@@ -439,6 +445,24 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
**垃圾分类帮帮团:** [微信小程序码地址](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/ljfl.png) **垃圾分类帮帮团:** [微信小程序码地址](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 #### 更多小程序案例(可在微信小程序中搜索)@wx-more
......
`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
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
```
**注意**
- **应用生命周期仅可在`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
<script>
export default {
globalData: {
text: 'text'
}
}
</script>
```
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页面。
...@@ -4,10 +4,12 @@ ...@@ -4,10 +4,12 @@
* [package.json](collocation/package.md) * [package.json](collocation/package.md)
* [vue-config.js](collocation/vue-config.md) * [vue-config.js](collocation/vue-config.md)
* [uni.scss](collocation/uni-scss.md) * [uni.scss](collocation/uni-scss.md)
* [App.vue](collocation/App.md)
* [main.js](collocation/main.md)
* 框架接口 * 框架接口
* [日志打印](collocation/frame/log.md) * [日志打印](collocation/frame/log.md)
* [定时器](collocation/frame/timer.md) * [定时器](collocation/frame/timer.md)
* [生命周期](collocation/frame/lifetime.md) * [生命周期](collocation/frame/lifecycle.md)
* [页面](collocation/frame/window.md) * [页面](collocation/frame/window.md)
* [页面通讯](collocation/frame/communication.md) * [页面通讯](collocation/frame/communication.md)
<li></li> <li></li>
......
...@@ -12,7 +12,24 @@ ...@@ -12,7 +12,24 @@
**注意** **注意**
- 应用生命周期仅可在``App.vue``中监听,在其它页面监听无效。 - 应用生命周期仅可在``App.vue``中监听,在其它页面监听无效。
- onlaunch里进行页面跳转,如遇白屏报错,请参考[https://ask.dcloud.net.cn/article/35942](https://ask.dcloud.net.cn/article/35942)
**示例代码**
```html
<script>
// 只能在App.vue里监听应用的生命周期
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
```
### 页面生命周期 ### 页面生命周期
...@@ -25,17 +42,17 @@ ...@@ -25,17 +42,17 @@
|onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发||| |onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发|||
|onHide|监听页面隐藏||| |onHide|监听页面隐藏|||
|onUnload|监听页面卸载||| |onUnload|监听页面卸载|||
|onResize|监听窗口尺寸变化|5+App、微信小程序|| |onResize|监听窗口尺寸变化|App、微信小程序||
|onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)||| |onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)|||
|onReachBottom|页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项||| |onReachBottom|页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项|||
|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、5+App(自定义组件模式)|| |onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、App(自定义组件模式)||
|onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、头条小程序、支付宝小程序|| |onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、头条小程序、支付宝小程序||
|onPageScroll|监听页面滚动,参数为Object||| |onPageScroll|监听页面滚动,参数为Object|nvue暂不支持||
|onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|5+ App、H5|| |onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|App、H5||
|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|5+App、H5|| |onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|app、H5||
|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|5+App、H5|1.6.0| |onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|App、H5|1.6.0|
|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|5+App、H5|1.6.0| |onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|App、H5|1.6.0|
|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|5+App、H5|1.6.0| |onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|App、H5|1.6.0|
``onReachBottom``使用注意 ``onReachBottom``使用注意
可在pages.json里定义具体页面底部的触发距离[onReachBottomDistance](/collocation/pages),比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。 可在pages.json里定义具体页面底部的触发距离[onReachBottomDistance](/collocation/pages),比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。
...@@ -50,9 +67,18 @@ ...@@ -50,9 +67,18 @@
|scrollTop|Number|页面在垂直方向已滚动的距离(单位px)| |scrollTop|Number|页面在垂直方向已滚动的距离(单位px)|
**注意** **注意**
- `onPageScroll`里不要写交互复杂的js,比如频繁修改页面。因为这个生命周期是在渲染层触发的,js是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿。 - `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`` 参数说明: ``onTabItemTap`` 返回的json对象说明:
|属性|类型|说明| |属性|类型|说明|
|---|---|---| |---|---|---|
...@@ -63,7 +89,13 @@ ...@@ -63,7 +89,13 @@
**注意** **注意**
- onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。 - onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。
- 如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用[plus.nativeObj.view](http://www.html5plus.org/doc/zh_cn/nativeobj.html)放一个区块盖住原先的tabitem,并拦截点击事件。 - 如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用[plus.nativeObj.view](http://www.html5plus.org/doc/zh_cn/nativeobj.html)放一个区块盖住原先的tabitem,并拦截点击事件。
- onTabItemTap在App端,从HBuilderX 1.9 的自定义组件编译模式开始支持。
```js
onTabItemTap : function(e) {
console.log(e);
// e的返回格式为json对象: {"index":0,"text":"首页","pagePath":"pages/index/index.html"}
},
```
``onNavigationBarButtonTap`` 参数说明: ``onNavigationBarButtonTap`` 参数说明:
...@@ -71,6 +103,13 @@ ...@@ -71,6 +103,13 @@
|---|---|---| |---|---|---|
|index|Number|原生标题栏按钮数组的下标| |index|Number|原生标题栏按钮数组的下标|
```js
onNavigationBarButtonTap : function (e) {
console.log(e);
// e的返回格式为json对象:{"text":"测试","index":0}
}
```
`onBackPress` 回调参数对象说明: `onBackPress` 回调参数对象说明:
|属性|类型|说明| |属性|类型|说明|
...@@ -87,9 +126,13 @@ export default { ...@@ -87,9 +126,13 @@ export default {
} }
``` ```
**注意**
- nvue 页面weex编译模式支持的生命周期同weex,具体参考:[weex生命周期介绍](/use-weex?id=生命周期)
### 组件生命周期 ### 组件生命周期
``uni-app`` 组件支持如下页面生命周期函数: ``uni-app`` 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:
|函数名|说明|平台差异说明|最低版本| |函数名|说明|平台差异说明|最低版本|
|:-|:-|:-|:-| |:-|:-|:-|:-|
...@@ -102,6 +145,3 @@ export default { ...@@ -102,6 +145,3 @@ export default {
|beforeDestroy|实例销毁之前调用。在这一步,实例仍然完全可用。[详见](https://cn.vuejs.org/v2/api/#beforeDestroy)||| |beforeDestroy|实例销毁之前调用。在这一步,实例仍然完全可用。[详见](https://cn.vuejs.org/v2/api/#beforeDestroy)|||
|destroyed|Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。[详见](https://cn.vuejs.org/v2/api/#destroyed)||| |destroyed|Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。[详见](https://cn.vuejs.org/v2/api/#destroyed)|||
**注意**
- nvue 页面支持的生命周期参考:[nvue 生命周期介绍](/use-weex?id=生命周期)
\ No newline at end of file
`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 注册全局组件
...@@ -296,7 +296,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http ...@@ -296,7 +296,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
|resizable|Boolean|在iPad上小程序是否支持屏幕旋转,默认关闭| |resizable|Boolean|在iPad上小程序是否支持屏幕旋转,默认关闭|
|navigateToMiniProgramAppIdList|Array|需要跳转的小程序列表,[详见](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html)| |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)| |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 #### setting
...@@ -321,6 +321,8 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http ...@@ -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/) 申请| |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)| |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 ### mp-toutiao
...@@ -329,6 +331,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http ...@@ -329,6 +331,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
|appid|String|头条小程序的 AppID,登录 [https://developer.toutiao.com/](https://developer.toutiao.com/) 申请| |appid|String|头条小程序的 AppID,登录 [https://developer.toutiao.com/](https://developer.toutiao.com/) 申请|
|setting|Object|头条小程序项目设置,参考[头条小程序项目设置](/collocation/manifest?id=mp-toutiao-setting)| |setting|Object|头条小程序项目设置,参考[头条小程序项目设置](/collocation/manifest?id=mp-toutiao-setting)|
|usingComponents|Boolean| 是否启用自定义组件模式,`v2.0+`,默认为false,[编译模式区别详情](https://ask.dcloud.net.cn/article/35843)| |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 #### 头条小程序项目设置@mp-toutiao-setting
...@@ -341,10 +344,16 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http ...@@ -341,10 +344,16 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
### mp-qq ### mp-qq
|属性|类型|说明| |属性 |类型 |说明 |
|:-|:-|:-| |:- |:- |:- |
|appid|String|qq 小程序的 AppID,登录 [https://q.qq.com](https://q.qq.com) 申请| |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只支持自定义组件模式| |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 ### 完整 manifest.json
...@@ -482,8 +491,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http ...@@ -482,8 +491,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
"share": { "share": {
// 微信分享 // 微信分享
"weixin": { "weixin": {
"appid": "", "appid": ""
"appsecret": ""
}, },
// 新浪微博分享 // 新浪微博分享
"sina": { "sina": {
...@@ -491,15 +499,9 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http ...@@ -491,15 +499,9 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
"appsecret": "", "appsecret": "",
"redirect_uri": "" "redirect_uri": ""
}, },
// 分享到QQ好友 // 分享到QQ
"qq": { "qq": {
"appid": "" "appid": ""
},
// 腾讯微博分享
"tencent": {
"appkey": "",
"appsecret": "",
"redirect_uri": ""
} }
}, },
"statics": { "statics": {
...@@ -512,6 +514,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http ...@@ -512,6 +514,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
} }
} }
}, },
// 屏幕方向
"orientation": [ "orientation": [
"portrait-primary", "portrait-primary",
"landscape-primary", "landscape-primary",
...@@ -634,7 +637,8 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http ...@@ -634,7 +637,8 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
"softinput": { "softinput": {
"navBar": "auto", //是否显示iOS软键盘上的“完成”导航条 "navBar": "auto", //是否显示iOS软键盘上的“完成”导航条
"mode": "adjustResize|adjustPan" //软键盘弹出模式, "mode": "adjustResize|adjustPan" //软键盘弹出模式,
} },
"popGesture": "none" //iOS上是否支持屏幕左边滑动关闭当前页面。默认是可关闭。设为none则不响应左滑动画。
}, },
// 快应用特有配置 // 快应用特有配置
"quickapp": {}, "quickapp": {},
......
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
用于设置应用的状态栏、导航条、标题、窗口背景色等。 用于设置应用的状态栏、导航条、标题、窗口背景色等。
|属性|类型|默认值|描述|平台差异说明| |属性|类型|默认值|描述|平台差异说明|
|:-|:-|:-|:-|| |:-|:-|:-|:-|:-|
|navigationBarBackgroundColor|HexColor|#F7F7F7|导航栏背景颜色(同状态栏背景色)|APP与H5为#F7F7F7,小程序平台请参考相应小程序文档|| |navigationBarBackgroundColor|HexColor|#F7F7F7|导航栏背景颜色(同状态栏背景色)|APP与H5为#F7F7F7,小程序平台请参考相应小程序文档||
|navigationBarTextStyle|String|white|导航栏标题颜色及状态栏前景颜色,仅支持 black/white|| |navigationBarTextStyle|String|white|导航栏标题颜色及状态栏前景颜色,仅支持 black/white||
|navigationBarTitleText|String||导航栏标题文字内容|| |navigationBarTitleText|String||导航栏标题文字内容||
...@@ -84,8 +84,11 @@ ...@@ -84,8 +84,11 @@
|backgroundTextStyle|String|dark|下拉 loading 的样式,仅支持 dark / light|微信小程序| |backgroundTextStyle|String|dark|下拉 loading 的样式,仅支持 dark / light|微信小程序|
|enablePullDownRefresh|Boolean|false|是否开启下拉刷新,详见[页面生命周期](/use?id=页面生命周期)。|| |enablePullDownRefresh|Boolean|false|是否开启下拉刷新,详见[页面生命周期](/use?id=页面生命周期)。||
|onReachBottomDistance|Number|50|页面上拉触底事件触发时距页面底部距离,单位只支持px,详见[页面生命周期](/use?id=页面生命周期)|| |onReachBottomDistance|Number|50|页面上拉触底事件触发时距页面底部距离,单位只支持px,详见[页面生命周期](/use?id=页面生命周期)||
|backgroundColorTop|HexColor|#ffffff|顶部窗口的背景色。|仅 iOS 平台| |backgroundColorTop|HexColor|#ffffff|顶部窗口的背景色(bounce回弹区域)|仅 iOS 平台|
|backgroundColorBottom|HexColor|#ffffff|底部窗口的背景色。|仅 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)|微信小程序| |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| |animationType|String|pop-in|窗口显示的动画效果,详见:[窗口动画](api/router?id=animation)|App|
|animationDuration|Number|300|窗口显示动画的持续时间,单位为 ms|App| |animationDuration|Number|300|窗口显示动画的持续时间,单位为 ms|App|
...@@ -98,6 +101,13 @@ ...@@ -98,6 +101,13 @@
|mp-qq|Object||设置编译到 mp-qq 平台的特定样式|QQ小程序| |mp-qq|Object||设置编译到 mp-qq 平台的特定样式|QQ小程序|
|usingComponents|Object| |引用小程序组件,参考 [小程序组件](/frame?id=小程序组件支持)|微信小程序、App| |usingComponents|Object| |引用小程序组件,参考 [小程序组件](/frame?id=小程序组件支持)|微信小程序、App|
**注意**
- 支付宝小程序使用`titleImage`时必须使用`https`的图片链接地址,需要真机调试才能看到效果,支付宝开发者工具内无效果
- `globalStyle`中设置的`titleImage`也会覆盖掉`pages`->`style`内的设置文字标题
- navigationBarTextStyle 在iOS13上可能会错乱,此问题后续版本会修复
# pages # pages
`uni-app` 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下: `uni-app` 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下:
...@@ -165,8 +175,11 @@ ...@@ -165,8 +175,11 @@
|backgroundTextStyle|String|dark|下拉 loading 的样式,仅支持 dark/light|| |backgroundTextStyle|String|dark|下拉 loading 的样式,仅支持 dark/light||
|enablePullDownRefresh|Boolean|false|是否开启下拉刷新,详见[页面生命周期](/use?id=页面生命周期)。|| |enablePullDownRefresh|Boolean|false|是否开启下拉刷新,详见[页面生命周期](/use?id=页面生命周期)。||
|onReachBottomDistance|Number|50|页面上拉触底事件触发时距页面底部距离,单位只支持px,详见[页面生命周期](/use?id=页面生命周期)|| |onReachBottomDistance|Number|50|页面上拉触底事件触发时距页面底部距离,单位只支持px,详见[页面生命周期](/use?id=页面生命周期)||
|backgroundColorTop|HexColor|#ffffff|顶部窗口的背景色。|仅 iOS 平台| |backgroundColorTop|HexColor|#ffffff|顶部窗口的背景色(bounce回弹区域)|仅 iOS 平台|
|backgroundColorBottom|HexColor|#ffffff|底部窗口的背景色。|仅 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| |app-plus|Object||设置编译到 App 平台的特定样式,配置项参考下方 [app-plus](/collocation/pages?id=app-plus)|App|
|h5|Object||设置编译到 H5 平台的特定样式,配置项参考下方 [H5](/collocation/pages?id=h5)|H5| |h5|Object||设置编译到 H5 平台的特定样式,配置项参考下方 [H5](/collocation/pages?id=h5)|H5|
|mp-alipay|Object||设置编译到 mp-alipay 平台的特定样式,配置项参考下方 [MP-ALIPAY](/collocation/pages?id=mp-alipay)|支付宝小程序| |mp-alipay|Object||设置编译到 mp-alipay 平台的特定样式,配置项参考下方 [MP-ALIPAY](/collocation/pages?id=mp-alipay)|支付宝小程序|
...@@ -193,6 +206,10 @@ ...@@ -193,6 +206,10 @@
``` ```
**注意**
- 支付宝小程序使用`titleImage`时必须使用`https`的图片链接地址,需要真机调试才能看到效果,支付宝开发者工具内无效果
### 自定义导航栏使用注意@customnav ### 自定义导航栏使用注意@customnav
当navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,此时要注意几个问题: 当navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,此时要注意几个问题:
- 非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量[--status-bar-height](/frame?id=css%e5%8f%98%e9%87%8f),如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。 - 非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量[--status-bar-height](/frame?id=css%e5%8f%98%e9%87%8f),如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。
...@@ -236,7 +253,8 @@ ...@@ -236,7 +253,8 @@
|titleNView|Object||导航栏 ,详见:[导航栏](/collocation/pages?id=app-titleNView)|App、H5| |titleNView|Object||导航栏 ,详见:[导航栏](/collocation/pages?id=app-titleNView)|App、H5|
|subNVues|Object||原生子窗体,详见:[原生子窗体](/collocation/pages?id=app-subNVues)|App 1.9.10+| |subNVues|Object||原生子窗体,详见:[原生子窗体](/collocation/pages?id=app-subNVues)|App 1.9.10+|
|bounce|String||页面回弹效果,设置为 "none" 时关闭效果。|App(nvue Android暂无bounce效果)| |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| |pullToRefresh|Object||下拉刷新|App|
|scrollIndicator|String||滚动条显示策略,设置为 "none" 时不显示滚动条。|App| |scrollIndicator|String||滚动条显示策略,设置为 "none" 时不显示滚动条。|App|
|animationType|String|pop-in|窗口显示的动画效果,详见:[窗口动画](api/router?id=animation)。|App| |animationType|String|pop-in|窗口显示的动画效果,详见:[窗口动画](api/router?id=animation)。|App|
...@@ -245,15 +263,15 @@ ...@@ -245,15 +263,15 @@
- `.nvue` 页面仅支持 `titleNView` 配置,其它配置项暂不支持 - `.nvue` 页面仅支持 `titleNView` 配置,其它配置项暂不支持
#### 导航栏@app-titleNView #### 导航栏@app-titleNView
|属性|类型|默认值|描述|最低版本| |属性|类型|默认值|描述|版本兼容性|
|:-|:-|:-|:-|:-| |:-|:-|:-|:-|:-|
|backgroundColor|String|#F7F7F7|背景颜色,颜色值格式为"#RRGGBB"。|| |backgroundColor|String|#F7F7F7|背景颜色,颜色值格式为"#RRGGBB"。在使用半透明标题栏时,也可以设置rgba格式||
|buttons|Array||自定义按钮,详见 [buttons](/collocation/pages?id=app-titlenview-buttons)|| |buttons|Array||自定义按钮,详见 [buttons](/collocation/pages?id=app-titlenview-buttons)|纯nvue即render:native时暂不支持|
|titleColor|String|#000000|标题文字颜色|| |titleColor|String|#000000|标题文字颜色||
|titleOverflow|String|ellipsis|标题文字超出显示区域时处理方式。"clip"-超出显示区域时内容裁剪;"ellipsis"-超出显示区域时尾部显示省略标记(...)。|| |titleOverflow|String|ellipsis|标题文字超出显示区域时处理方式。"clip"-超出显示区域时内容裁剪;"ellipsis"-超出显示区域时尾部显示省略标记(...)。||
|titleText|String||标题文字内容|| |titleText|String||标题文字内容||
|titleSize|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)|| |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| |searchInput|Object||原生导航栏上的搜索框配置,详见:[searchInput](/collocation/pages?id=app-titlenview-searchinput)|1.6.0|
...@@ -261,8 +279,8 @@ ...@@ -261,8 +279,8 @@
- 每个页面均支持通过配置 `titleNView:false` 来禁用原生导航栏。一旦禁用原生导航,请注意阅读[自定义导航注意事项](/collocation/pages?id=customnav) - 每个页面均支持通过配置 `titleNView:false` 来禁用原生导航栏。一旦禁用原生导航,请注意阅读[自定义导航注意事项](/collocation/pages?id=customnav)
- `titleNView` 不能设置 `autoBackButton``homeButton`等属性 - `titleNView` 不能设置 `autoBackButton``homeButton`等属性
- `titleNView``type` 值为 `transparent` 时,导航栏为透明渐变导航栏 - `titleNView``type` 值为 `transparent` 时,导航栏为滚动透明渐变导航栏,默认只有button,滚动后标题栏底色和title文字会渐变出现; `type``float` 时,导航栏为悬浮标题栏,此时页面内容上顶到了屏幕顶部,包括状态栏,但导航栏悬浮盖在页面上方,一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。
-`titleNView` 配置 `buttons` 后,监听按钮的点击事件,vue 页面参考:[onNavigationBarButtonTap](/frame?id=页面生命周期)、nvue 页面参考:[uni.onNavigationBarButtonTap](/use-weex?id=onnavigationbarbuttontap) -`titleNView` 配置 `buttons` 后,监听按钮的点击事件,vue 页面及 nvue 的uni-app编译模式参考:[onNavigationBarButtonTap](/frame?id=页面生命周期)、nvue 的weex编译模式参考:[uni.onNavigationBarButtonTap](/use-weex?id=onnavigationbarbuttontap)
-`titleNView` 配置 `searchInput` 后,相关的事件监听参考:[onNavigationBarSearchInputChanged 等](/frame?id=页面生命周期) -`titleNView` 配置 `searchInput` 后,相关的事件监听参考:[onNavigationBarSearchInputChanged 等](/frame?id=页面生命周期)
- App下原生导航栏的按钮如果使用字体图标,注意检查字体库的名字(font-family)是否使用了默认的 iconfont,这个名字是保留字,不能作为外部引入的字体库的名字,需要调整为自定义的名称,否则无法显示。 - App下原生导航栏的按钮如果使用字体图标,注意检查字体库的名字(font-family)是否使用了默认的 iconfont,这个名字是保留字,不能作为外部引入的字体库的名字,需要调整为自定义的名称,否则无法显示。
- 想了解各种导航栏的开发方法,请详读[导航栏开发指南](https://ask.dcloud.net.cn/article/34921) - 想了解各种导航栏的开发方法,请详读[导航栏开发指南](https://ask.dcloud.net.cn/article/34921)
...@@ -387,10 +405,12 @@ searchInput的点击输入框onNavigationBarSearchInputClicked、文本变化onN ...@@ -387,10 +405,12 @@ searchInput的点击输入框onNavigationBarSearchInputClicked、文本变化onN
#### 原生子窗体@app-subNVues #### 原生子窗体@app-subNVues
`subNVues` 是 vue 页面的原生子窗体。用于解决 vue 页面中的层级覆盖和原生界面灵活自定义用的。 `subNVues` 是 vue 页面的原生子窗体。用于解决App中 vue 页面中的层级覆盖和原生界面灵活自定义用的。
它不是全屏页面,也不是组件,就是一个原生子窗体。它是一个 nvue 页面,使用 weex 引擎渲染,提供了比 cover-view、plus.nativeObj.view 更强大的原生排版能力,方便自定义原生导航或覆盖原生地图、视频等。请详读[subNVues 开发指南](http://ask.dcloud.net.cn/article/35948) 它不是全屏页面,也不是组件,就是一个原生子窗体。它是一个 nvue 页面,使用 weex 引擎渲染,提供了比 cover-view、plus.nativeObj.view 更强大的原生排版能力,方便自定义原生导航或覆盖原生地图、视频等。请详读[subNVues 开发指南](http://ask.dcloud.net.cn/article/35948)
`subNVue` 也可以在 nvue 页面中使用。但目前在纯nvue下(render为native)还不支持。
|属性|类型|描述| |属性|类型|描述|
|:- |:- |:-| |:- |:- |:-|
|id|String| subNVue 原生子窗体的标识 | |id|String| subNVue 原生子窗体的标识 |
...@@ -603,10 +623,10 @@ h5 平台下拉刷新动画,只有 circle 类型。 ...@@ -603,10 +623,10 @@ h5 平台下拉刷新动画,只有 circle 类型。
|属性|类型|默认值|描述| |属性|类型|默认值|描述|
|:-|:-|:-|:-| |:-|:-|:-|:-|
|allowsBounceVertical|String|YES|是否允许向下拉拽。支持 YES / NO| |allowsBounceVertical|String|YES|是否允许向下拉拽。支持 YES / NO|
|titleImage|String||导航栏图片地址(替换当前文字标题),内必须使用https的图片链接地址|
|transparentTitle|String|none|导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明| |transparentTitle|String|none|导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明|
|titlePenetrate|String|NO|导航栏点击穿透| |titlePenetrate|String|NO|导航栏点击穿透|
|showTitleLoading|String|NO|是否进入时显示导航栏的 loading。支持 YES / NO| |showTitleLoading|String|NO|是否进入时显示导航栏的 loading。支持 YES / NO|
|titleImage|String||导航栏图片地址(替换当前标题),必须为https的图片链接地址|
|backgroundImageUrl|String||下拉露出显示的背景图链接| |backgroundImageUrl|String||下拉露出显示的背景图链接|
|backgroundImageColor|HexColor||下拉露出显示的背景图底色| |backgroundImageColor|HexColor||下拉露出显示的背景图底色|
|gestureBack|String|NO|iOS 用,是否支持手势返回。支持 YES / NO| |gestureBack|String|NO|iOS 用,是否支持手势返回。支持 YES / NO|
...@@ -614,7 +634,7 @@ h5 平台下拉刷新动画,只有 circle 类型。 ...@@ -614,7 +634,7 @@ h5 平台下拉刷新动画,只有 circle 类型。
**注意事项** **注意事项**
- ```titleImage```仅支持https地址,设置了```titleImage```是页面```title```失效 - ```titleImage```仅支持https地址,设置了```titleImage```替换页面文字标题
- ```backgroundImageUrl```支持网络地址和本地地址,尽量使用绝对地址 - ```backgroundImageUrl```支持网络地址和本地地址,尽量使用绝对地址
- 部分配置可能会只在真机运行的时候生效,支付宝未来应该会改善 - 部分配置可能会只在真机运行的时候生效,支付宝未来应该会改善
...@@ -631,7 +651,7 @@ h5 平台下拉刷新动画,只有 circle 类型。 ...@@ -631,7 +651,7 @@ h5 平台下拉刷新动画,只有 circle 类型。
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。 - tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
- tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式) - tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)
- tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。 - tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。
- 顶部的 tabbar 目前仅微信小程序上支持,需要用到顶部选项卡的话,参考 hello uni-app->模板->顶部选项卡。 - 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡,可参考 hello uni-app->模板->顶部选项卡。
**属性说明:** **属性说明:**
...@@ -658,14 +678,15 @@ h5 平台下拉刷新动画,只有 circle 类型。 ...@@ -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 的 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页面,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 在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模板例子,[参考](https://ext.dcloud.net.cn/plugin?id=98)。可跨端,但+号不凸起。
- 如需 tabbar 中间凸起,App端可使用plus.nativeObj.view,[参考](https://ask.dcloud.net.cn/article/35036)。H5端可使用view自绘 - 如需 tabbar 中间凸起,可自定义tabbar,插件市场有例子,如colorUI等。但注意前端tabbar的性能不如原生tabbar,如果是多页方式,底部tabbar会在切换时闪执行转场动画,如果是单页方式,承载复杂页面内容会有性能问题。[插件市场](https://ext.dcloud.net.cn/search?q=tabbar)搜索tabbar有不少类似例子
- 如果不使用原生tabbar,在前端自己实现tabbar,在小程序和App端的性能体验不如原生tabbar。如果是多页方式,底部tabbar会在切换时闪一下,如果是单页方式,承载复杂页面内容会有性能问题。[插件市场](https://ext.dcloud.net.cn/search?q=tabbar)搜索tabbar有不少类似例子 - App端若使用nvue,自定义tabbar,没有性能体验问题
- App端使用nvue,可以不用这里的tabbar,自己做tabbar,没有性能体验问题 - 纯nvue项目(manifest里renderer为native),目前使用pages.json里的tabbar反而影响性能,建议使用前端自己实现单页面的tabbar。后续会解决这个bug
- 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) - Android App上弹出键盘顶起tabbar的问题。升级到HBuilderX 2.2后不再存在。
- 原生的tabbar只有一个且在首页。二级页的tab,或者用前端实现,或者App端使用nvue - 原生的tabbar只有一个且在首页。二级页如需的tab,前端自己实现
- 如果是需要先登录、后进入tab页面,不需要把登陆页设为首页,首页仍然是tabbar页,可参考HBuilderX新建uni-app项目时的登陆模板 - 如果是需要先登录、后进入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) - 微信小程序模拟器1.02.1904090版有bug,在缩放模拟器页面百分比后,tabbar点击多次后就会卡死。真机无碍,使用时注意。[详见](https://developers.weixin.qq.com/community/develop/doc/0002e6e6bf0d602d8c783e10756400)
**代码示例** **代码示例**
......
#### ad #### ad
Banner 广告。 广告组件
广告能力在不同小程序端实现不同,使用时需注意用[条件编译](https://uniapp.dcloud.io/platform)调用不同平台的代码。 广告能力在不同小程序端实现不同,使用时需注意用[条件编译](https://uniapp.dcloud.io/platform)调用不同平台的代码。
- App平台:无需编码,在打包App时可直接勾选广告位,[详见](https://dcloud.io/dad.html)
- 微信小程序:[规范文档](https://developers.weixin.qq.com/miniprogram/dev/component/ad.html) - 微信小程序:[规范文档](https://developers.weixin.qq.com/miniprogram/dev/component/ad.html)
- 百度小程序:[规范文档](https://smartprogram.baidu.com/docs/develop/component/ad/) - 百度小程序:[规范文档](https://smartprogram.baidu.com/docs/develop/component/ad/)
- 支付宝小程序:不支持此能力 - 支付宝小程序:不支持此能力
- 头条小程序:仅小游戏可用,小程序不可用,不适用于uni-app - 头条小程序:仅小游戏可用,小程序不可用,不适用于uni-app
- QQ小程序:[规范文档](https://q.qq.com/wiki/develop/miniprogram/component/open-ability/ad.html) - QQ小程序:[规范文档](https://q.qq.com/wiki/develop/miniprogram/component/open-ability/ad.html)
- App平台:无需编码,在打包App时可直接勾选广告位,[详见](https://dcloud.io/dad.html)
...@@ -37,7 +37,7 @@ app-nvue也不支持此组件。 ...@@ -37,7 +37,7 @@ app-nvue也不支持此组件。
|3|解码错误| |3|解码错误|
|4|不合适资源| |4|不合适资源|
**示例:** **示例:** [查看示例](https://uniapp.dcloud.io/h5/pages/component/audio/audio)
```html ```html
<template> <template>
......
...@@ -16,9 +16,14 @@ ...@@ -16,9 +16,14 @@
|hover-class|String|button-hover|指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果||| |hover-class|String|button-hover|指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果|||
|hover-start-time|Number|20|按住后多久出现点击态,单位毫秒||| |hover-start-time|Number|20|按住后多久出现点击态,单位毫秒|||
|hover-stay-time|Number|70|手指松开后点击态保留时间,单位毫秒||| |hover-stay-time|Number|70|手指松开后点击态保留时间,单位毫秒|||
|@getphonenumber|Handler||获取用户手机号回调|open-type="getPhoneNumber"|微信小程序|
|@getuserinfo|Handler||用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfo|open-type="getUserInfo"|微信小程序| |@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;}``** - **注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 有效值** **size 有效值**
...@@ -46,27 +51,26 @@ ...@@ -46,27 +51,26 @@
|值|说明|平台差异说明| |值|说明|平台差异说明|
|:-|:-|:-| |:-|:-|:-|
|feedback|打开“意见反馈”页面,用户可提交反馈内容并上传日志|5+App、微信小程序| |feedback|打开“意见反馈”页面,用户可提交反馈内容并上传日志|App、微信小程序、QQ小程序|
|share|触发用户转发|微信小程序、百度小程序、支付宝小程序、头条小程序| |share|触发用户转发|微信小程序、百度小程序、支付宝小程序、头条小程序、QQ小程序|
|getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息|微信小程序、百度小程序| |getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息|微信小程序、百度小程序、QQ小程序|
| contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |微信小程序| |contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |微信小程序、百度小程序|
| getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、头条小程序 | |getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、头条小程序 |
| launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数|微信小程序| |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 | 打开授权设置页 |微信小程序、百度小程序| |openSetting | 打开授权设置页 |微信小程序、百度小程序|
| getAuthorize | 支持小程序授权 | 支付宝小程序 | |getAuthorize | 支持小程序授权 | 支付宝小程序 |
| contactShare | 分享到通讯录好友 | 支付宝小程序 | |contactShare | 分享到通讯录好友 | 支付宝小程序 |
| lifestyle | 关注生活号 | 支付宝小程序 | |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/) 后点击应用名称,进入左侧菜单“用户反馈”页面获取反馈内容。 - 在 App 中,开发者登录 [DCloud开发者中心](https://dev.dcloud.net.cn/) 后点击应用名称,进入左侧菜单“用户反馈”页面获取反馈内容。
- 点击 share 分享按钮时会触发 [onShareAppMessage](/api/plugins/share) - 点击 share 分享按钮时会触发 [onShareAppMessage](/api/plugins/share)
- 支付宝小程序平台,获取用户手机号时,建议先通过条件编译的方式,调用支付宝原生API,[参考](https://docs.alipay.com/mini/api/getphonenumber) - 支付宝小程序平台,获取用户手机号时,建议先通过条件编译的方式,调用支付宝原生API,[参考](https://docs.alipay.com/mini/api/getphonenumber)
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/button/button)
```html ```html
<template> <template>
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
* camera 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。 * camera 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
* 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。 * 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
* 同一页面只能插入一个 camera 组件。 * 同一页面只能插入一个 camera 组件。
* 相关API:[reateCameraContext](/api/media/camera-context) * 相关API:[createCameraContext](/api/media/camera-context)
**代码示例** **代码示例**
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
* canvas 标签默认宽度 300px、高度 225px,动态修改 canvas 大小后需要重新绘制。 * canvas 标签默认宽度 300px、高度 225px,动态修改 canvas 大小后需要重新绘制。
* 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。 * 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。
* canvas 在微信小程序、百度小程序、QQ小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,参考 [native-component](/component/native-component) * 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)使用
**示例:** **示例:**
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
|checked|Boolean|false|当前是否选中,可用来设置默认选中| |checked|Boolean|false|当前是否选中,可用来设置默认选中|
|color|Color||checkbox的颜色,同css的color| |color|Color||checkbox的颜色,同css的color|
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/checkbox/checkbox)
```html ```html
<template> <template>
......
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
- 支付宝小程序中 `cover-view` 不支持嵌套。 - 支付宝小程序中 `cover-view` 不支持嵌套。
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/cover-view/cover-view)
```html ```html
<template> <template>
......
...@@ -29,11 +29,11 @@ editor组件目前只有App的vue页面和微信支持,其他端的富文本 ...@@ -29,11 +29,11 @@ editor组件目前只有App的vue页面和微信支持,其他端的富文本
| show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 | | show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 |
| show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 | | show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 |
| show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 | | show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 |
| bindready | eventhandle | | 否 | 编辑器初始化完成时触发 | | @ready | eventhandle | | 否 | 编辑器初始化完成时触发 |
| bindfocus | eventhandle | | 否 | 编辑器聚焦时触发,event.detail = {html, text, delta} | | @focus | eventhandle | | 否 | 编辑器聚焦时触发,event.detail = {html, text, delta} |
| bindblur | eventhandle | | 否 | 编辑器失去焦点时触发,detail = {html, text, delta} | | @blur | eventhandle | | 否 | 编辑器失去焦点时触发,detail = {html, text, delta} |
| bindinput | eventhandle | | 否 | 编辑器内容改变时触发,detail = {html, text, delta} | | @input | eventhandle | | 否 | 编辑器内容改变时触发,detail = {html, text, delta} |
| bindstatuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 | | @statuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 |
编辑器内支持部分 HTML 标签和内连样式,不支持**class****id** 编辑器内支持部分 HTML 标签和内连样式,不支持**class****id**
......
...@@ -11,12 +11,12 @@ ...@@ -11,12 +11,12 @@
|@submit|EventHandle|携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''},report-submit 为 true 时才会返回 formId|| |@submit|EventHandle|携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''},report-submit 为 true 时才会返回 formId||
|@reset|EventHandle|表单重置时会触发 reset 事件|&nbsp;| |@reset|EventHandle|表单重置时会触发 reset 事件|&nbsp;|
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/form/form)
```html ```html
<template> <template>
<view> <view>
<view class="uni-padding-wrap uni-common-mt"> <view>
<form @submit="formSubmit" @reset="formReset"> <form @submit="formSubmit" @reset="formReset">
<view class="uni-form-item uni-column"> <view class="uni-form-item uni-column">
<view class="title">switch</view> <view class="title">switch</view>
...@@ -28,10 +28,10 @@ ...@@ -28,10 +28,10 @@
<view class="title">radio</view> <view class="title">radio</view>
<radio-group name="radio"> <radio-group name="radio">
<label> <label>
<radio value="radio1" />选项一 <radio value="radio1" /><text>选项一</text>
</label> </label>
<label> <label>
<radio value="radio2" />选项二 <radio value="radio2" /><text>选项二</text>
</label> </label>
</radio-group> </radio-group>
</view> </view>
...@@ -39,10 +39,10 @@ ...@@ -39,10 +39,10 @@
<view class="title">checkbox</view> <view class="title">checkbox</view>
<checkbox-group name="checkbox"> <checkbox-group name="checkbox">
<label> <label>
<checkbox value="checkbox1" />选项一 <checkbox value="checkbox1" /><text>选项一</text>
</label> </label>
<label> <label>
<checkbox value="checkbox2" />选项二 <checkbox value="checkbox2" /><text>选项二</text>
</label> </label>
</checkbox-group> </checkbox-group>
</view> </view>
...@@ -55,43 +55,41 @@ ...@@ -55,43 +55,41 @@
<input class="uni-input" name="input" placeholder="这是一个输入框" /> <input class="uni-input" name="input" placeholder="这是一个输入框" />
</view> </view>
<view class="uni-btn-v"> <view class="uni-btn-v">
<button formType="submit">Submit</button> <button form-type="submit">Submit</button>
<button type="default" formType="reset">Reset</button> <button type="default" form-type="reset">Reset</button>
</view> </view>
</form> </form>
</view> </view>
</view> </view>
</template> </template>
``` <script>
export default {
```javascript
export default {
data() { data() {
return { return {
pickerHidden: true,
chosen: ''
} }
}, },
methods: { 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) { formSubmit: function(e) {
console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value)) console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
var formdata = e.detail.value
uni.showModal({
content: '表单数据内容:' + JSON.stringify(formdata),
showCancel: false
});
}, },
formReset: function(e) { formReset: function(e) {
console.log('清空数据') console.log('清空数据')
this.chosen = ''
} }
} }
} }
</script>
<style>
.uni-form-item .title {
padding: 20rpx 0;
}
</style>
``` ```
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/form.png?t=201857) ![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/form.png?t=201857)
......
...@@ -12,10 +12,11 @@ ...@@ -12,10 +12,11 @@
**Tips** **Tips**
- `<image>` 组件默认宽度 300px、高度 225px; - `<image>` 组件默认宽度 300px、高度 225px;`app-nvue平台,暂时默认为屏幕宽度`
- `src` 仅支持相对路径、绝对路径,支持 base64 码; - `src` 仅支持相对路径、绝对路径,支持 base64 码;
- 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 `image{will-change: transform}` ,可优化此问题。 - 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 `image{will-change: transform}` ,可优化此问题。
- 自定义组件里面使用 `<image>`时,若 `src` 使用相对路径可能出现路径查找失败的情况,故建议使用绝对路径。 - 自定义组件里面使用 `<image>`时,若 `src` 使用相对路径可能出现路径查找失败的情况,故建议使用绝对路径。
- webp格式的图片,app-vue下,iOS不支持,Android支持;app-nvue下,iOS和Android均支持。app-vue下也支持gif。
**mode 有效值:** **mode 有效值:**
...@@ -37,7 +38,7 @@ mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。 ...@@ -37,7 +38,7 @@ mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
|裁剪|bottom left|不缩放图片,只显示图片的左下边区域| |裁剪|bottom left|不缩放图片,只显示图片的左下边区域|
|裁剪|bottom right|不缩放图片,只显示图片的右下边区域| |裁剪|bottom right|不缩放图片,只显示图片的右下边区域|
**示例:** **示例:** [查看示例](https://uniapp.dcloud.io/h5/pages/component/image/image)
```html ```html
<template> <template>
......
...@@ -67,25 +67,13 @@ App平台的nvue页面,如果是uni-app编译模式,直接使用此属性设 ...@@ -67,25 +67,13 @@ App平台的nvue页面,如果是uni-app编译模式,直接使用此属性设
#### App平台iOS端软键盘上方横条去除方案 #### App平台iOS端软键盘上方横条去除方案
App平台在iOS上,webview中的软键盘弹出时,默认在软键盘上方有一个横条,显示着:上一项、下一项和完成等按钮。如不想显示这个横条,可以配置softinputNavBar: 'none' App平台在iOS上,webview中的软键盘弹出时,默认在软键盘上方有一个横条,显示着:上一项、下一项和完成等按钮。如不想显示这个横条,可以配置softinputNavBar: 'none'
- 如需要整个App配置,则在manifest中配置
```json
"app-plus": {
"softinput": {
"navBar": "none" // 是否显示软键盘上的导航条
}
}
```
- 如需要单个页面配置,则在pages.json中配置 配置方式,在 pages.json 中配置 style
```json ```json
{ "app-plus": {
"path": "pages/component/input/input", "softinputNavBar": "none"
"style": { }
"app-plus":{
"softinputNavBar":"none"
}
}
}
``` ```
- 如需使用js动态设置softinputNavBar - 如需使用js动态设置softinputNavBar
...@@ -131,7 +119,7 @@ App端开发聊天类应用时,目前推荐改为adjustResize模式。在hello ...@@ -131,7 +119,7 @@ App端开发聊天类应用时,目前推荐改为adjustResize模式。在hello
- 原生输入框在iOS上不会有软键盘上方的横条 - 原生输入框在iOS上不会有软键盘上方的横条
- 原生输入框一样受配置的`adjustPan|adjustResize`模式影响 - 原生输入框一样受配置的`adjustPan|adjustResize`模式影响
**input示例** **input示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/input/input)
```html ```html
<template> <template>
......
...@@ -15,7 +15,7 @@ for优先级高于内部控件,内部有多个控件的时候默认触发第 ...@@ -15,7 +15,7 @@ for优先级高于内部控件,内部有多个控件的时候默认触发第
**注:** **注:**
- app-nvue平台 暂不支持for属性 - app-nvue平台 暂不支持for属性
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/label/label)
```html ```html
<template> <template>
......
...@@ -27,6 +27,7 @@ app端nvue专用组件。在app-nvue下,如果是长列表,使用list组件 ...@@ -27,6 +27,7 @@ app端nvue专用组件。在app-nvue下,如果是长列表,使用list组件
> **注意** > **注意**
> - 不允许相同方向的 `<list>` 或者 `<scroll-view>` 互相嵌套,换句话说就是嵌套的 `<list>` / `<scroll-view>` 必须是不同的方向。 > - 不允许相同方向的 `<list>` 或者 `<scroll-view>` 互相嵌套,换句话说就是嵌套的 `<list>` / `<scroll-view>` 必须是不同的方向。
> - `<list>` 需要显式的设置其宽高,可使用 position: absolute; 定位或 width、height 设置其宽高值。 > - `<list>` 需要显式的设置其宽高,可使用 position: absolute; 定位或 width、height 设置其宽高值。
> - list是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
#### 子组件 #### 子组件
`<list>` 的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。 `<list>` 的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。
......
...@@ -2,13 +2,126 @@ ...@@ -2,13 +2,126 @@
实时音视频录制,也称直播推流。 实时音视频录制,也称直播推流。
目前只有App和微信小程序支持。 **平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(仅nvue)|x|√|x|x|x|x|
如app平台的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
<template>
<view>
<live-pusher id='livePusher1' class="livePusher" ref="livePusher" url=""
mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
aspect="9:16" postition="absolute"
@statechange="statechange" @netstatus="netstatus" @error = "error"
></live-pusher>
<button class="btn" @click="start">开始推流</button>
<button class="btn" @click="pause">暂停推流</button>
<button class="btn" @click="resume">resume</button>
<button class="btn" @click="stop">停止推流</button>
<button class="btn" @click="snapshot">快照</button>
<button class="btn" @click="startPreview">开启摄像头预览</button>
<button class="btn" @click="stopPreview">关闭摄像头预览</button>
<button class="btn" @click="switchCamera">切换摄像头</button>
</view>
</template>
```
```javascript
<script>
export default {
onReady() {
this.context = uni.createLivePusherContext("livePusher1", this);
},
methods: {
statechange(e) {
console.log("statechange:" + JSON.stringify(e));
},
netstatus(e) {
console.log("netstatus:" + JSON.stringify(e));
},
error(e) {
console.log("error:" + JSON.stringify(e));
},
start: function() {
this.context.start((a) => {
console.log("livePusher.start:" + JSON.stringify(a));
});
},
close: function() {
this.context.close((a) => {
console.log("livePusher.close:" + JSON.stringify(a));
});
},
snapshot: function() {
this.context.snapshot((e) => {
console.log(JSON.stringify(e));
});
},
resume: function() {
this.context.resume((a) => {
console.log("livePusher.resume:" + JSON.stringify(a));
});
},
pause: function() {
this.context.pause((a) => {
console.log("livePusher.pause:" + JSON.stringify(a));
});
},
stop: function() {
this.context.stop((a) => {
console.log(JSON.stringify(a));
});
},
switchCamera: function() {
this.context.switchCamera((a) => {
console.log("livePusher.switchCamera:" + JSON.stringify(a));
});
},
startPreview: function() {
this.context.startPreview((a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
});
},
stopPreview: function() {
this.context.stopPreview((a) => {
console.log("livePusher.stopPreview:" + JSON.stringify(a));
});
}
}
}
</script>
```
相关api:[uni.createLivePusherContext](/api/media/live-pusher-context?id=createLivePusherContext)
- 微信小程序:[规范文档](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)
**注意** **注意**
* 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平台:使用 `<live-pusher/>` 组件,打包 App 时必须勾选 manifest.json->App 模块权限配置->LivePusher(直播推流) 模块。 * App平台:使用 `<live-pusher/>` 组件,打包 App 时必须勾选 manifest.json->App 模块权限配置->LivePusher(直播推流) 模块。
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
|controls|Array||控件|| |controls|Array||控件||
|include-points|Array||缩放视野以包含所有给定的坐标点|App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序| |include-points|Array||缩放视野以包含所有给定的坐标点|App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序|
|show-location|Boolean||显示带有方向的当前定位点|微信小程序、H5、百度小程序、支付宝小程序| |show-location|Boolean||显示带有方向的当前定位点|微信小程序、H5、百度小程序、支付宝小程序|
|@markertap|EventHandle||点击标记点时触发|App平台需要指定 marker 对象属性 id| |@markertap|EventHandle||点击标记点时触发|App-nvue 2.3.3+, App平台需要指定 marker 对象属性 id|
|@callouttap|EventHandle||点击标记点对应的气泡时触发|| |@callouttap|EventHandle||点击标记点对应的气泡时触发||
|@controltap|EventHandle||点击控件时触发|| |@controltap|EventHandle||点击控件时触发||
|@regionchange|EventHandle||视野发生变化时触发|微信小程序、H5、百度小程序、支付宝小程序| |@regionchange|EventHandle||视野发生变化时触发|微信小程序、H5、百度小程序、支付宝小程序|
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
|borderRadius|callout边框圆角|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序| |borderRadius|callout边框圆角|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|bgColor|背景色|String|App-nvue 2.1.5+、微信小程序、H5、百度小程序| |bgColor|背景色|String|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|padding|文本边缘留白|Number|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+、微信小程序、百度小程序| |textAlign|文本对齐方式。有效值: left, right, center|String|App-nvue 2.1.5+、微信小程序、百度小程序|
**marker 上的标签 label** **marker 上的标签 label**
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
地图组件的经纬度必填,如果不填经纬度则默认值是北京的经纬度。 地图组件的经纬度必填,如果不填经纬度则默认值是北京的经纬度。
**示例** **示例** [查看示例](https://uniapp.dcloud.io/h5/pages/component/map/map)
```html ```html
<template> <template>
...@@ -174,16 +174,16 @@ map 组件相关操作的 JS API:[uni.createMapContext](api/location/map?id=cr ...@@ -174,16 +174,16 @@ map 组件相关操作的 JS API:[uni.createMapContext](api/location/map?id=cr
**注意事项** **注意事项**
- 小程序和 App的vue文件 中,`<map>` 组件是由引擎创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。在`<map>`上绘制内容,可使用组件自带的marker、controls等属性,也可以使用`<cover-view>`组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容,[参考](/component/native-component)。另外App端nvue文件不存在层级问题。 - 小程序和app-vue中,`<map>` 组件是由引擎创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。在`<map>`上绘制内容,可使用组件自带的marker、controls等属性,也可以使用`<cover-view>`组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容,[参考](/component/native-component)。另外App端nvue文件不存在层级问题。从微信基础库2.8.3开始,支持map组件的同层渲染,不再有层级问题。
- App端nvue文件的map和小程序拉齐度更高。vue里的map则与plus.map功能一致,和小程序的地图略有差异。 - App端nvue文件的map和小程序拉齐度更高。vue里的map则与plus.map功能一致,和小程序的地图略有差异。App端使用map推荐用nvue。
- 小程序和 App 中,请勿在 scroll-view、swiper、picker-view、movable-view 中使用 `<map>` 组件。 - 在涉及层级问题的小程序中和app-vue中,请勿在 scroll-view、swiper、picker-view、movable-view 中使用 `<map>` 组件。
- 小程序和 App 中,css 动画对 `<map>` 组件无效。 - 小程序和 app-vue 中,css 动画对 `<map>` 组件无效。
- map 组件使用的经纬度是国测局坐标,调用 uni.getLocation 接口需要指定 type 为 gcj02。 - map 组件使用的经纬度是国测局坐标,调用 uni.getLocation 接口需要指定 type 为 gcj02。
- `<map>` 组件在不同平台的底层引擎是不同的:H5、微信小程序为腾讯地图;App、支付宝小程序为高德地图;百度小程序端为百度地图。App端vue页面也可以使用百度地图,在manifest中配置,但nvue页面只支持高德地图。 - `<map>` 组件在不同平台的底层引擎是不同的:H5、微信小程序为腾讯地图;App、支付宝小程序为高德地图;百度小程序端为百度地图。app-vue也可以使用百度地图,在manifest中配置,但app-nvue只支持高德地图。
- map 组件默认的api是参考微信小程序的,如果觉得不够用,可以用plus.map,可以通过`$getAppMap`获取原生地图对象,[详见](https://uniapp.dcloud.io/api/location/map) - map 组件默认的api是参考微信小程序的,如需要使用plus.map,可以通过`$getAppMap`获取原生地图对象,[详见](https://uniapp.dcloud.io/api/location/map)
- H5 端获取定位信息,需要部署在 **https** 服务上,本地预览(localhost)仍然可以使用 http 协议。 - H5 端获取定位信息,需要部署在 **https** 服务上,本地预览(localhost)仍然可以使用 http 协议。
- 无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候,位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败。 - 无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候,位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败。
- App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质,获取AppKey,打包时需要在manifest文件中勾选相应模块,在SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。 - App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质,获取AppKey,打包时需要在manifest文件中勾选相应模块,在SDK配置中填写Appkey。注意申请包名和打包时的包名需匹配一致。在manifest可视化界面有详细申请指南。
##### FAQ ##### FAQ
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√| |√|√|√|√|√|x|√|
...@@ -15,7 +15,8 @@ ...@@ -15,7 +15,8 @@
|scale-area|Boolean|false|当里面的 movable-view 设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个 movable-area| |scale-area|Boolean|false|当里面的 movable-view 设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个 movable-area|
**注意:movable-area 必须设置 width 和 height 属性,不设置默认为 10px** **注意:movable-area 必须设置 width 和 height 属性,不设置默认为 10px**
- movable-area app-nvue平台 暂不支持手势缩放 - movable-area app-nvue平台 暂不支持手势缩放,并且和滚动冲突。
- PC平台不支持 movable-area。
#### movable-view #### movable-view
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√| |√|√|√|√|√|x|√|
...@@ -32,7 +33,7 @@ ...@@ -32,7 +33,7 @@
|属性名|类型|默认值|说明|平台差异说明| |属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-| |:-|:-|:-|:-|:-|
|direction|String|none|movable-view的移动方向,属性值有all、vertical、horizontal、none|| |direction|String|none|movable-view的移动方向,属性值有all、vertical、horizontal、none||
|inertia|Boolean|false|movable-view是否带有惯性|微信小程序、5+App、H5、百度小程序| |inertia|Boolean|false|movable-view是否带有惯性|微信小程序、App、H5、百度小程序|
|out-of-bounds|Boolean|false|超过可移动区域后,movable-view是否还可以移动|微信小程序、5+App、H5、百度小程序| |out-of-bounds|Boolean|false|超过可移动区域后,movable-view是否还可以移动|微信小程序、5+App、H5、百度小程序|
|x|Number / String||定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画|| |x|Number / String||定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画||
|y|Number / String||定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画|| |y|Number / String||定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画||
...@@ -63,7 +64,7 @@ ...@@ -63,7 +64,7 @@
**Tips** **Tips**
- movable-view必须在`<movable-area/>`组件中,并且必须是直接子节点,否则不能移动。 - movable-view必须在`<movable-area/>`组件中,并且必须是直接子节点,否则不能移动。
- 如果遇到x、y、scale属性设置不生效的问题参考:[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98) - 如果遇到x、y、scale属性设置不生效的问题参考:[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- swiper在非H5端,不支持内嵌video、map等原生组件。更新:微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用 - 除了H5端和app-nvue端,其他平台不支持内嵌video、map等原生组件。更新:微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用
**示例** **示例**
```html ```html
......
...@@ -14,7 +14,7 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是 ...@@ -14,7 +14,7 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
* [input](/component/input)(仅在微信小程序、百度小程序、支付宝小程序、头条小程序中且input置焦时表现为原生组件) * [input](/component/input)(仅在微信小程序、百度小程序、支付宝小程序、头条小程序中且input置焦时表现为原生组件)
* [textarea](/component/textarea)(仅在微信小程序、百度小程序、头条小程序表现为原生组件) * [textarea](/component/textarea)(仅在微信小程序、百度小程序、头条小程序表现为原生组件)
* [live-player](/component/live-player)(仅微信小程序、百度小程序支持,App端直接使用video组件可同时实现拉流) * [live-player](/component/live-player)(仅微信小程序、百度小程序支持,App端直接使用video组件可同时实现拉流)
* [live-pusher](/component/live-pusher)(仅微信小程序、百度小程序支持,App端直接使用plus.video.LivePusher可实现推流) * [live-pusher](/component/live-pusher)(仅微信小程序、百度小程序、app-nvue支持,app-vue使用plus.video.LivePusher可实现推流)
* [cover-view](/component/cover-view) * [cover-view](/component/cover-view)
* [cover-image](/component/cover-view?id=cover-image) * [cover-image](/component/cover-view?id=cover-image)
...@@ -24,7 +24,8 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是 ...@@ -24,7 +24,8 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制: 由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制:
* 原生组件的层级是**最高**的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。后插入的原生组件可以覆盖之前的原生组件。 * 原生组件的层级是**最高**的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。后插入的原生组件可以覆盖之前的原生组件。
* 原生组件无法在 scroll-view、swiper、picker-view、movable-view 中使用(微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用,即原生组件的同层渲染;App-nvue 2.1.5也实现了同层渲染了) * 原生组件无法在 scroll-view、swiper、picker-view、movable-view 中使用。
* 同层渲染支持:微信基础库2.4.4起支持了video的同层渲染、微信基础库2.8.3支持map的同层渲染。支持同层渲染后,相关组件的时候不再有层级问题,无需再使用cover-view覆盖,也可以内嵌入swiper等组件。app-nvue 不涉及层级问题,天然所有组件都是同层渲染。
* 部分CSS样式无法应用于原生组件,例如: * 部分CSS样式无法应用于原生组件,例如:
* 无法对原生组件设置 CSS 动画; * 无法对原生组件设置 CSS 动画;
* 无法定义原生组件为 position: fixed; * 无法定义原生组件为 position: fixed;
......
...@@ -28,9 +28,9 @@ ...@@ -28,9 +28,9 @@
**注意** **注意**
- navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, ``<navigator>`` 的子节点背景色应为透明色。** - navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, ``<navigator>`` 的子节点背景色应为透明色。**
- app-nvue 平台暂不支持 `<navigator>` - app-nvue 平台只有纯nvue项目(render为native)才支持 `<navigator>`。非render为native的情况下,nvue暂不支持navigator组件,请使用API跳转。
**示例** **示例** [查看示例](https://uniapp.dcloud.io/h5/pages/component/navigator/navigator)
```html ```html
<template> <template>
...@@ -40,9 +40,12 @@ ...@@ -40,9 +40,12 @@
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover"> <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
<button type="default">跳转到新页面</button> <button type="default">跳转到新页面</button>
</navigator> </navigator>
<navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover"> <navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
<button type="default">在当前页打开</button> <button type="default">在当前页打开</button>
</navigator> </navigator>
<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
<button type="default">跳转tab页面</button>
</navigator>
</view> </view>
</view> </view>
</view> </view>
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
`<picker-view />` 的子组件,仅可放置于 `<picker-view />` 中,其子节点的高度会自动设置成与 picker-view 的选中框的高度一致 `<picker-view />` 的子组件,仅可放置于 `<picker-view />` 中,其子节点的高度会自动设置成与 picker-view 的选中框的高度一致
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/picker-view/picker-view)
```html ```html
<template> <template>
......
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
|@cancel|EventHandle||取消选择时触发| |@cancel|EventHandle||取消选择时触发|
|disabled|Boolean|false|是否禁用| |disabled|Boolean|false|是否禁用|
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/picker/picker)
```html ```html
<template> <template>
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
|active-mode |String |backwards |backwards: 动画从头播;forwards:动画从上次结束点接着播|微信小程序、5+APP、H5 | |active-mode |String |backwards |backwards: 动画从头播;forwards:动画从上次结束点接着播|微信小程序、5+APP、H5 |
|@activeend |EventHandle| |动画完成事件 |微信小程序 | |@activeend |EventHandle| |动画完成事件 |微信小程序 |
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/progress/progress)
```html ```html
<template> <template>
<view> <view>
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
|disabled|Boolean|false|是否禁用| |disabled|Boolean|false|是否禁用|
|color|Color||radio的颜色,同css的color| |color|Color||radio的颜色,同css的color|
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/radio/radio)
```html ```html
<template> <template>
......
...@@ -4,7 +4,7 @@ app端nvue专用组件。 ...@@ -4,7 +4,7 @@ app端nvue专用组件。
`<recycle-list>` 是一个新的列表容器,具有回收和复用的能力,可以大幅优化内存占用和渲染性能。它的性能比list组件更高,但写法受限制。它除了会释放不可见区域的渲染资源,在非渲染的数据结构上也有更多优化。 `<recycle-list>` 是一个新的列表容器,具有回收和复用的能力,可以大幅优化内存占用和渲染性能。它的性能比list组件更高,但写法受限制。它除了会释放不可见区域的渲染资源,在非渲染的数据结构上也有更多优化。
此组件自HBuilderX 2.1.5+起支持。 此组件自HBuilderX 2.2.6+起支持。
#### 子组件 #### 子组件
`<recycle-list>` 只能使用 `<cell-slot>` 作为其直接子节点,使用其他节点无效。 `<recycle-list>` 只能使用 `<cell-slot>` 作为其直接子节点,使用其他节点无效。
...@@ -12,6 +12,10 @@ app端nvue专用组件。 ...@@ -12,6 +12,10 @@ app端nvue专用组件。
#### <cell-slot> #### <cell-slot>
<cell-slot> 代表的是列表每一项的模板,它只用来描述模板的结构,并不对应实际的节点。`<cell-slot>` 的个数只表示模板的种类数,真实列表项的个数是由数据决定的。 <cell-slot> 代表的是列表每一项的模板,它只用来描述模板的结构,并不对应实际的节点。`<cell-slot>` 的个数只表示模板的种类数,真实列表项的个数是由数据决定的。
**注意**
- `<cell-slot>` 包含自定义组件时,在 Android 上有性能问题
- recycle-list 是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
属性|说明 属性|说明
:--|:--| :--|:--|
......
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
|tr|| |tr||
|ul|&nbsp;| |ul|&nbsp;|
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/rich-text/rich-text)
```html ```html
<template> <template>
<view class="content"> <view class="content">
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
使用竖向滚动时,需要给 ``<scroll-view>`` 一个固定高度,通过 css 设置 height。 使用竖向滚动时,需要给 ``<scroll-view>`` 一个固定高度,通过 css 设置 height。
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/scroll-view/scroll-view)
```html ```html
<template> <template>
<view> <view>
...@@ -97,10 +97,10 @@ export default { ...@@ -97,10 +97,10 @@ export default {
**Tips** **Tips**
- 5+APP和小程序中,请勿在 scroll-view 中使用 map、video 等原生组件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生组件。更新:微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用 - APP-vue和小程序中,请勿在 scroll-view 中使用 map、video 等原生组件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生组件。更新:微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用。app-nvue无此限制。
- scroll-view 不适合放长列表,有性能问题。长列表滚动和下拉刷新,应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。 - scroll-view 不适合放长列表,有性能问题。长列表滚动和下拉刷新,应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。包括在app-nvue页面,长列表应该使用list而不是scroll-view
- scroll-into-view 的优先级高于 scroll-top。 - scroll-into-view 的优先级高于 scroll-top。
- 使用 scroll-view 会和原生下拉刷新造成冲突,所以在使用 scroll-view 的地方不建议使用下拉刷新,也不建议监听 onPullDownRefresh 事件 - scroll-view是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变
- 若要使用下拉刷新,使用页面的滚动,而不是 scroll-view 。插件市场有前端模拟的下拉刷新,但性能不佳。 - 若要使用下拉刷新,建议使用页面的滚动,而不是 scroll-view 。插件市场有前端模拟的下拉刷新,但性能不佳。
- 如果遇到scroll-top、scroll-left属性设置不生效的问题参考:[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98) - 如果遇到scroll-top、scroll-left属性设置不生效的问题参考:[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- scroll-view的滚动条设置,可通过css的-webkit-scrollbar自定义,包括隐藏滚动条。(nvue无此css) - scroll-view的滚动条设置,可通过css的-webkit-scrollbar自定义,包括隐藏滚动条。(nvue无此css)
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
- activeColor默认值在不同平台不一样,微信是绿色(#1aad19),头条是红色,其他平台是蓝色 - activeColor默认值在不同平台不一样,微信是绿色(#1aad19),头条是红色,其他平台是蓝色
- 如需要区间滑块,即一根横条上使用2个滑块选择一段范围,可见[插件市场](https://ext.dcloud.net.cn/search?q=%E5%8C%BA%E9%97%B4%E6%BB%91%E5%9D%97) - 如需要区间滑块,即一根横条上使用2个滑块选择一段范围,可见[插件市场](https://ext.dcloud.net.cn/search?q=%E5%8C%BA%E9%97%B4%E6%BB%91%E5%9D%97)
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/slider/slider)
```html ```html
<template> <template>
......
...@@ -15,11 +15,11 @@ ...@@ -15,11 +15,11 @@
|current|Number|0|当前所在滑块的 index|| |current|Number|0|当前所在滑块的 index||
|current-item-id|String||当前所在滑块的 item-id ,不能与 current 被同时指定|支付宝小程序不支持| |current-item-id|String||当前所在滑块的 item-id ,不能与 current 被同时指定|支付宝小程序不支持|
|interval|Number|5000|自动切换时间间隔|| |interval|Number|5000|自动切换时间间隔||
|duration|Number|500|滑动动画时长|| |duration|Number|500|滑动动画时长|app-nvue不支持|
|circular|Boolean|false|是否采用衔接滑动|| |circular|Boolean|false|是否采用衔接滑动||
|vertical|Boolean|false|滑动方向是否为纵向|| |vertical|Boolean|false|滑动方向是否为纵向||
|previous-margin|String|0px|前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值|头条小程序不支持| |previous-margin|String|0px|前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值|app-nvue、头条小程序不支持|
|next-margin|String|0px|后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值|头条小程序不支持| |next-margin|String|0px|后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值|app-nvue、头条小程序不支持|
|acceleration|Boolean|false|当开启时,会根据滑动速度,连续滑动多屏|支付宝小程序| |acceleration|Boolean|false|当开启时,会根据滑动速度,连续滑动多屏|支付宝小程序|
|disable-programmatic-animation|Boolean|false|是否禁用代码变动触发 swiper 切换时使用动画。|支付宝小程序| |disable-programmatic-animation|Boolean|false|是否禁用代码变动触发 swiper 切换时使用动画。|支付宝小程序|
|display-multiple-items|Number|1|同时显示的滑块数量|支付宝小程序不支持| |display-multiple-items|Number|1|同时显示的滑块数量|支付宝小程序不支持|
...@@ -49,6 +49,7 @@ change 事件返回 detail 中包含一个 source 字段,表示导致变更的 ...@@ -49,6 +49,7 @@ change 事件返回 detail 中包含一个 source 字段,表示导致变更的
- 如果遇到current、current-item-id属性设置不生效的问题参考:[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98) - 如果遇到current、current-item-id属性设置不生效的问题参考:[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- banner图的切换效果和指示器的样式,有多种风格可自定义,可在[uni-app插件市场](https://ext.dcloud.net.cn/search?q=%E8%BD%AE%E6%92%AD)搜索 - banner图的切换效果和指示器的样式,有多种风格可自定义,可在[uni-app插件市场](https://ext.dcloud.net.cn/search?q=%E8%BD%AE%E6%92%AD)搜索
- swiper在App的vue中、百度支付宝头条QQ小程序中,不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。 - swiper在App的vue中、百度支付宝头条QQ小程序中,不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。
- 同时监听 change transition,开始滑动时触发transition, 放开手后,在ios平台触发顺序为 transition... change,Android/微信小程序/支付宝为 transition... change transition...
#### swiper-item #### swiper-item
仅可放置在 ``<swiper>`` 组件中,宽高自动设置为100%。 仅可放置在 ``<swiper>`` 组件中,宽高自动设置为100%。
...@@ -57,7 +58,7 @@ change 事件返回 detail 中包含一个 source 字段,表示导致变更的 ...@@ -57,7 +58,7 @@ change 事件返回 detail 中包含一个 source 字段,表示导致变更的
|:-|:-|:-|:-|:-| |:-|:-|:-|:-|:-|
|item-id|String||该 swiper-item 的标识符| |item-id|String||该 swiper-item 的标识符|
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/swiper/swiper)
```html ```html
<template> <template>
<view> <view>
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
|@change|EventHandle||checked 改变时触发 change 事件,event.detail={ value:checked}|| |@change|EventHandle||checked 改变时触发 change 事件,event.detail={ value:checked}||
|color|Color||switch 的颜色,同 css 的 color|&nbsp;| |color|Color||switch 的颜色,同 css 的 color|&nbsp;|
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/switch/switch)
```html ```html
<template> <template>
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
- 支持 `\n` 方式换行。 - 支持 `\n` 方式换行。
- 如果使用 `<span>` 组件编译时会被转换为 `<text>` - 如果使用 `<span>` 组件编译时会被转换为 `<text>`
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/text/text)
```html ```html
<template> <template>
<view> <view>
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
|@input|EventHandle||当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上|| |@input|EventHandle||当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上||
|@confirm|EventHandle||点击完成时, 触发 confirm 事件,event.detail = {value: value}|微信小程序、百度小程序、QQ小程序| |@confirm|EventHandle||点击完成时, 触发 confirm 事件,event.detail = {value: value}|微信小程序、百度小程序、QQ小程序|
**示例** **示例** [查看示例](https://uniapp.dcloud.io/h5/pages/component/textarea/textarea)
```html ```html
<template> <template>
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
`<video>` 默认宽度 300px、高度 225px,可通过 css 设置宽高。 `<video>` 默认宽度 300px、高度 225px,可通过 css 设置宽高。
**示例** **示例** [查看示例](https://uniapp.dcloud.io/h5/pages/component/video/video)
```html ```html
<template> <template>
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
|hover-start-time|Number|50|按住后多久出现点击态,单位毫秒| |hover-start-time|Number|50|按住后多久出现点击态,单位毫秒|
|hover-stay-time|Number|400|手指松开后点击态保留时间,单位毫秒| |hover-stay-time|Number|400|手指松开后点击态保留时间,单位毫秒|
**示例** **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/view/view)
```html ```html
<template> <template>
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册