Skip to content

U
uni-app

r15132706585 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 0
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 f33fb3b2 编写于 作者: Q qiang
浏览文件
操作

Merge branch 'lainlee-master' into dev 

# Conflicts:
#	docs/api/media/video.md
#	docs/api/ui/font.md
#	docs/api/ui/nodes-info.md
#	lerna.json
#	packages/uni-app-plus-nvue/package.json
#	packages/uni-app-plus/package.json
#	packages/uni-cli-shared/package.json
#	packages/uni-h5-ui/package.json
#	packages/uni-h5/dist/index.css
#	packages/uni-h5/dist/index.umd.min.js
#	packages/uni-h5/package.json
#	packages/uni-mp-alipay/package.json
#	packages/uni-mp-baidu/package.json
#	packages/uni-mp-qq/package.json
#	packages/uni-mp-toutiao/package.json
#	packages/uni-mp-weixin/package.json
#	packages/uni-stat/package.json
#	packages/uni-template-compiler/package.json
#	packages/vue-cli-plugin-hbuilderx/package.json
#	packages/vue-cli-plugin-uni-optimize/package.json
#	packages/vue-cli-plugin-uni/package.json
#	packages/webpack-uni-mp-loader/package.json
#	packages/webpack-uni-pages-loader/package.json
#	src/core/view/components/image/index.vue
上级 69af8c1c 469592ea
展开全部 隐藏空白更改
内联 并排
Showing with 2310 addition and 1283 deletion
README.md
浏览文件 @ f33fb3b2
......@@ -6,11 +6,12 @@
# uni-app的特点
- 开发者和案例更多：20万+开发者，50+QQ、微信群，数万案例应用。[案例](https://uniapp.dcloud.io/case)
- 开发者和案例更多：HBuilder装机量380万台，开发者社区月活百万，70多个QQ微信群承载10万人。案例众多（[详见](https://uniapp.dcloud.io/case)）
- 性能更高（见[评测](https://juejin.im/post/5ca1736af265da30ae314248)）
- 更丰富的周边生态（见[插件市场](https://ext.dcloud.net.cn/)）。
- 更丰富的周边生态（见[插件市场](https://ext.dcloud.net.cn/)近千款插件）
- 提供比小程序原生开发更好的开发体验和更高的工程化效率
- 跨端抹平度更完善，且各端特色发挥更灵活，可真正实现一套代码多端覆盖，无需各端多头维护升级。
- 跨端抹平度更完善，且各端特色发挥更灵活，可真正实现一套代码多端覆盖，无需各端多头维护升级
- 权威认可：被阿里小程序官方工具内置（[详见](https://docs.alipay.com/mini/ide/0.70-stable)）
## 扫码体验
......@@ -43,7 +44,7 @@
## 论坛
由于`uni-app`有几十万开发者，50多个QQ、微信群，官方已无法维护更多交流群。请开发者到官方论坛交流：[https://ask.dcloud.net.cn/explore/](https://ask.dcloud.net.cn/explore/) 。论坛提供了比issus更专业的工具服务。
由于`DCloud`有70多个QQ、微信群，官方已无法维护更多交流群。请开发者到官方论坛交流：[https://ask.dcloud.net.cn/explore/](https://ask.dcloud.net.cn/explore/) 。论坛提供了比issues更专业的工具服务。
## 插件市场
......@@ -54,6 +55,7 @@
- 微信小程序转换uni-app指南及转换器：[https://ask.dcloud.net.cn/article/35786](https://ask.dcloud.net.cn/article/35786)
- vue h5项目转换uni-app指南：[https://ask.dcloud.net.cn/article/36174](https://ask.dcloud.net.cn/article/36174)
- mpvue 项目（组件）迁移指南、示例及资源汇总： [https://ask.dcloud.net.cn/article/34945](https://ask.dcloud.net.cn/article/34945)
- wepy转uni-app转换器：[https://github.com/zhangdaren/wepy-to-uniapp](https://github.com/zhangdaren/wepy-to-uniapp)
## 常见疑问
......@@ -65,9 +67,12 @@
- 答：good question。多端且不影响性能，确实很难，但uni-app做到了。在h5端，它的性能、包体积与直接使用vue.js开发一致； 在小程序端，它的性能比大多数开发框架更好，uni-app底层自动处理的setdata差量同步机制，比开发者手动写setdata更好，就像使用vue.js更新界面比手动写js修改dom更高效一样； 在App，uni-app支持webview渲染和原生渲染双引擎，启用原生渲染时，css写法受限，但性能是很接近原生开发的效果的，在当前的手机环境下，千万日活以下的应用在App使用uni-app也不会遇到任何压力。当然也可以在已经做好的原生App中将部分页面改为uni-app实现; 此外，我们会把很多跨端处理放在编译期完成的，这样会减少对运行期的效率影响。
- 问：不做多端，是不是不需要uni-app。
- 问：不做多端，是不是不需要uni-app？
- 答：不是。大量开发者用uni-app只做一个端，详见[案例](https://uniapp.dcloud.io/case)。对于开发者而言，一个优秀工具在手，做什么都不愁。
- 问：uni-app以后会不会变更开源协议，转向收费？
- 答：官方承诺永远不会变更开源协议。无论HBuilderX、uni-app、5+app，面向中国人永久免费。
## 更多资料
- 评测：[深入测试一周，主流多端框架大比武](https://mp.weixin.qq.com/s/jIDEHfuMnED6HTfNgjsW4w)
......
check-version.js 0 → 100644
浏览文件 @ f33fb3b2
const fs = require('fs')
const path = require('path')
const request = require('request')
const registry = 'https://registry.npmjs.org/@dcloudio/'
const pkgs = fs.readdirSync(path.resolve(__dirname, 'packages'))
const tag = process.argv[2] || 'alpha'
pkgs.forEach(pkg => {
request(registry + pkg, function(error, response, body) {
if (error) {
console.log(pkg, error)
} else {
const version = JSON.parse(body)['dist-tags'][tag]
console.log(pkg + ':' + (' '.repeat(80 - (pkg + ':' + version).length)) + version)
}
})
})
dist-tag-latest.js 0 → 100644
浏览文件 @ f33fb3b2
const fs = require('fs')
const path = require('path')
const shellExec = require('shell-exec')
const pkgs = fs.readdirSync(path.resolve(__dirname, 'packages'))
const version = process.argv[2]
if (!version) {
throw new Error('必须传入 version')
}
(async function() {
for (let i = 0; i < pkgs.length; i++) {
console.log(`npm dist-tag add @dcloudio/${pkgs[i]}@${version} latest`);
await shellExec(`npm dist-tag add @dcloudio/${pkgs[i]}@${version} latest`)
}
})();
docs/README.md
浏览文件 @ f33fb3b2
......@@ -3,7 +3,7 @@
即使不跨端，```uni-app```同时也是更好的小程序开发框架。详见[评测](https://ask.dcloud.net.cn/article/35947)
`DCloud`公司拥有350万开发者用户，旗下```uni-app```有5万+案例、600+插件、50+微信/qq群、更高的百度指数，可以放心选择。
`DCloud`公司拥有380万开发者，几十万应用案例、近千款插件、70+微信/qq群，并且被阿里小程序工具内置（[详见](https://docs.alipay.com/mini/ide/0.70-stable)），开发者可以放心选择。
<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>
......@@ -61,7 +61,7 @@
我们精心准备了一个简单的十分钟介绍视频，方便你快速了解```uni-app```的主要特征：
<video id="video" onplay="videoPlay()" preload="none" controls="controls" width="100%" poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-app20190127.mp4"></video>
<video id="video" onplay="videoPlay()" preload="none" controls="controls" width="100%" poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4"></video>
### 为什么要选择uni-app？
......@@ -74,7 +74,7 @@
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">开发者/案例数量更多</h5>
<p class="uniapp-home-content-item-text">5万+案例、600+插件、50+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">10万+案例、900+插件、70+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">跨端完善度更高，真正落地的提高生产力</p>
</div>
</div>
......@@ -150,14 +150,14 @@
从下面```uni-app```功能框架图可看出，```uni-app```在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni0124.png)
![](https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/uni-app/doc/uni0124.png)
### 一套代码，运行到多个平台
```uni-app```实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）：
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/dev1x8.jpg)
![](https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/uni-app/doc/dev1x8.jpg)
实际运行效果如下（点击图片可放大）：
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/run1x8.jpg)
![](https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/uni-app/doc/run1x9.jpg)
docs/_navbar.md
浏览文件 @ f33fb3b2
......@@ -2,12 +2,12 @@
* [框架](collocation/pages.md)
* [组件](component/README.md)
* [API](api/README.md)
* 其它规范
* [其它规范](javascript:;)
- [App扩展规范HTML5 Plus](http://www.html5plus.org/doc/h5p.html)
- [微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/)
- [支付宝小程序](https://docs.alipay.com/mini/developer/getting-started)
- [百度小程序](https://smartprogram.baidu.com/docs/develop/tutorial/codedir/)
- [头条小程序](https://developer.toutiao.com/docs/framework/)
- [头条小程序](https://developer.toutiao.com/dev/cn/mini-app/develop/component/introduction/basic-component)
- [QQ小程序](https://q.qq.com/wiki/develop/miniprogram/frame/)
- [Weex](https://weex.apache.org/cn/guide/)
......
docs/_sidebar.md
浏览文件 @ f33fb3b2
* [什么是 uni-app](README.md)
* [快速上手](quickstart.md)
* [uni-app的由来](history.md)
* [如何学习](resource.md)
* [框架简介](frame.md)
* [使用 Vue.js 注意事项](use.md)
* [使用 Weex/nvue 注意事项](use-weex.md)
* [使用 Weex/nvue 注意事项](use-weex.md)
* [使用 HTML5+ 注意事项](use-html5plus.md)
* [条件编译](platform.md)
* [uni-app 跨端开发注意事项](matter.md)
......@@ -15,10 +16,10 @@
* [开源项目资源汇总](casecode.md)
* [从其他项目转uni-app](translate.md)
* [选型评估指南](select.md)
* [常见问题](faq.md)
* [常见问题](faq.md)
* [更新日志](release.md)
<!-- * [更新日志](//update.dcloud.net.cn/hbuilderx/changelog/2.1.1.20190716.html) -->
<!-- <li><a id="update-hock" href="javascript:;" target="__blank">更新日志</a></li> -->
<!-- * [更新日志](//update.dcloud.net.cn/hbuilderx/changelog/2.1.1.20190716.html) -->
<!-- <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"><a href="//dev.dcloud.net.cn/wish/?channel=uniapp" target="__blank">需求墙</a></li>
<li class="show-sponsor-in-phone"><a href="//dev.dcloud.net.cn/sponsor/?channel=uniapp" target="__blank">赞助我们</a></li>
......@@ -40,43 +41,43 @@
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群26：147867597 &nbsp;<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=28a1a9a3e8f1866ee6a5f2b1caba05039e30d3ae1461e64b2ec31c095fcab951">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
<div>群32：166188631（500人已满）</div>
<div>群31：567471669（500人已满）</div>
<div>群30：371046920（500人已满）</div>
<div>群29：202965481（500人已满）</div>
<div>群28：166188776（2000人已满 </div>
<div>群27：811363410（2000人已满 </div>
<!-- <div>群26：147867597（2000人已满）</div> -->
<div>群25：165297000（500人已满）</div>
<div>群24：672494800（500人已满）</div>
<div>群23：599958679（500人已满）</div>
<div>群22：687186952（1000人已满）</div>
<div>群21：717019120（2000人已满）</div>
<div>群20：165796402（500人已满）</div>
<div>群19：165657124（1000人已满）</div>
<div>群18：698592271（500人已满）</div>
<div>群17：951348804（1000人已满）</div>
<div>群16：719211033（1000人已满）</div>
<div>群15：516984120（500人已满）</div>
<div>群14：465953250（500人已满）</div>
<div>群13：699478442（500人已满）</div>
<div>群12：884860657（500人已满）</div>
<div>群11：296811328（1000人已满）</div>
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（500人已满）</div>
<div>群8：695442854（500人已满）</div>
<div>群7：942061423（500人已满）</div>
<div>群6：697264024（2000人已满）</div>
<div>群5：731951419（500人已满）</div>
<div>群4：942702595（1000人已满）</div>
<div>群3：773794803（1000人已满） </div>
<div>群2：901474938（1000人已满） </div>
<div>群1：531031261（1000人已满）</div>
<div>官方QQ交流群</div>
<div>群26：147867597 &nbsp;<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=28a1a9a3e8f1866ee6a5f2b1caba05039e30d3ae1461e64b2ec31c095fcab951">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
<div>群32：166188631（500人已满）</div>
<div>群31：567471669（500人已满）</div>
<div>群30：371046920（500人已满）</div>
<div>群29：202965481（500人已满）</div>
<div>群28：166188776（2000人已满 </div>
<div>群27：811363410（2000人已满 </div>
<!-- <div>群26：147867597（2000人已满）</div> -->
<div>群25：165297000（500人已满）</div>
<div>群24：672494800（500人已满）</div>
<div>群23：599958679（500人已满）</div>
<div>群22：687186952（1000人已满）</div>
<div>群21：717019120（2000人已满）</div>
<div>群20：165796402（500人已满）</div>
<div>群19：165657124（1000人已满）</div>
<div>群18：698592271（500人已满）</div>
<div>群17：951348804（1000人已满）</div>
<div>群16：719211033（1000人已满）</div>
<div>群15：516984120（500人已满）</div>
<div>群14：465953250（500人已满）</div>
<div>群13：699478442（500人已满）</div>
<div>群12：884860657（500人已满）</div>
<div>群11：296811328（1000人已满）</div>
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（500人已满）</div>
<div>群8：695442854（500人已满）</div>
<div>群7：942061423（500人已满）</div>
<div>群6：697264024（2000人已满）</div>
<div>群5：731951419（500人已满）</div>
<div>群4：942702595（1000人已满）</div>
<div>群3：773794803（1000人已满） </div>
<div>群2：901474938（1000人已满） </div>
<div>群1：531031261（1000人已满）</div>
</div>
</div>
<div class="contact-item">
......@@ -86,4 +87,4 @@
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
\ No newline at end of file
</div>
docs/api/README.md
浏览文件 @ f33fb3b2
......@@ -366,10 +366,10 @@ function async request () {
|API|说明|
|:-|:-|
|[uni.createCanvasContext](api/ui/canvas?id=createcanvascontext)|创建绘图上下文|
|[uni.canvasToTempFilePath](api/ui/canvas?id=canvastotempfilepath)|将画布内容保存成文件|
|[uni.canvasGetImageData](api/ui/canvas?id=canvasgetimagedata)|获取画布图像数据|
|[uni.canvasPutImageData](api/ui/canvas?id=canvasputimagedata)|设置画布图像数据|
|[uni.createCanvasContext](/api/canvas/createCanvasContext)|创建绘图上下文|
|[uni.canvasToTempFilePath](/api/canvas/canvasToTempFilePath)|将画布内容保存成文件|
|[uni.canvasGetImageData](/api/canvas/canvasGetImageData)|获取画布图像数据|
|[uni.canvasPutImageData](/api/canvas/canvasPutImageData)|设置画布图像数据|
##### 下拉刷新
|API|说明|
......
docs/api/_sidebar.md
浏览文件 @ f33fb3b2
......@@ -64,6 +64,7 @@
* [电量](api/system/batteryInfo.md)
* [NFC](api/system/nfc.md)
* [设备方向](api/system/deviceMotion.md)
* [生物认证](api/system/authentication.md)
* [Worker](api/worker.md)
* 键盘
* [uni.hideKeyboard](/api/key?id=hidekeyboard)
......@@ -118,7 +119,6 @@
* [获取发票抬头](api/other/invoice-title.md)
* [小程序跳转](api/other/open-miniprogram.md)
* [账号信息](api/other/getAccountInfoSync.md)
* [生物认证(指纹及人脸识别)](api/other/authentication.md)
* [运动(计步器)](api/other/sport.md)
* [统计](api/other/report.md)
* [卡券](api/other/card.md)
......
docs/api/file/file.md
浏览文件 @ f33fb3b2
......@@ -229,4 +229,5 @@ uni.downloadFile({
**Tips**
App端有更强大的plus.io API可用。[https://www.html5plus.org/doc/zh_cn/io.html](https://www.html5plus.org/doc/zh_cn/io.html)
\ No newline at end of file
- App端，io操作还可以用更强大的plus.io API。[https://www.html5plus.org/doc/zh_cn/io.html](https://www.html5plus.org/doc/zh_cn/io.html)
- App端，打开各种格式的文件，如office、pdf等，还可以用更强大的三方插件，详见[插件市场](https://ext.dcloud.net.cn/search?q=pdf)
docs/api/file/getFileSystemManager.md
浏览文件 @ f33fb3b2
......@@ -4,5 +4,5 @@
获取全局唯一的文件管理器
- 微信小程序平台，[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.getFileSystemManager.html)
- 头条小程序平台，[规范详情](https://developer.toutiao.com/docs/api/getFileSystemManager.html)
- 头条小程序平台，[规范详情](https://developer.toutiao.com/dev/cn/mini-app/develop/api/file/getfilesystemmanager)
- QQ小程序平台，[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/file/qq.getFileSystemManager.html)
\ No newline at end of file
docs/api/lifecycle.md
浏览文件 @ f33fb3b2
......@@ -37,6 +37,10 @@
|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。|App、H5|1.6.0|
|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|App、H5|1.6.0|
**注意**
- H5端`onBackPress`只能监听页面导航栏的返回按钮的点击事件，不能监听浏览器返回以及手机的返回
``onPageScroll`` 参数说明：
|属性|类型|说明|
......
docs/api/location/location.md
浏览文件 @ f33fb3b2
......@@ -24,7 +24,7 @@
|altitude|高度，单位 m|
|verticalAccuracy|垂直精度，单位 m（Android 无法获取，返回 0）|
|horizontalAccuracy|水平精度，单位 m|
|[address](/api/location/location?id=address)|地址信息|
|[address](/api/location/location?id=address)|地址信息（仅App端支持，需配置geocode为true）|
**address 地址信息说明**
......@@ -52,12 +52,15 @@ uni.getLocation({
});
```
**注意**
#### 注意
- H5：在较新的手机浏览器上，H5 端获取定位信息，要求部署在 **https** 服务上，本地预览（localhost）仍然可以使用 http 协议。
- H5：国产安卓手机上，H5若无非定位，检查手机是否开通位置服务、GPS，ROM是否给该浏览器位置权限、浏览器是否对网页弹出请求给予定位的询问框。
- H5：安卓手机在原生App内嵌H5时，无法定位需要原生App处理Webview。
- H5：无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
- H5：使用坐标类型为 gcj02 时，需要配置腾讯地图 sdk 信息（manifest.json -> h5）。
- H5：微信公众号可使用微信js sdk，[详见](https://ask.dcloud.net.cn/article/35380)
- App：Android由于谷歌服务被墙，想在国产手机上正常定位，需要向高德等三方服务商申请SDK资质，获取AppKey。云打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。离线打包自行在原生工程中配置。注意包名和appkey信息必须匹配。
- App：Android由于谷歌服务被墙，想在国产手机上正常定位，需要向高德等三方服务商申请SDK资质，获取AppKey。云打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南，详见：[https://ask.dcloud.net.cn/article/29](https://ask.dcloud.net.cn/article/29)。离线打包自行在原生工程中配置。注意包名、appkey、证书信息必须匹配。
- 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是更合适的方案
- 小程序：api默认不返回详细地址中文描述。需要中文地址有2种方式：1、使用高德地图小程序sdk，在app和微信上都可以获得中文地址，[参考](http://ask.dcloud.net.cn/article/35070)。2、只考虑app，使用``plus.geolocation``也可以获取中文地址
......@@ -68,9 +71,9 @@ uni.getLocation({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|x|
|√|√|√|√|√|x|x|
**OBJECT 参数说明**
......@@ -84,7 +87,7 @@ uni.getLocation({
**注意**
- 因平台差异，如果SDK配置百度地图，需要设置keyword，才能显示相关地点
- nvue下只支持高德地图，不支持百度地图
- 纯nvue项目（manifest中renderer为native），暂不支持此API。可自行基于map组件封装。
- HBuilderX 2.4.0+ 非 weex 编译模式仅支持高德地图
**success 返回参数说明**
......@@ -110,6 +113,7 @@ uni.chooseLocation({
```
**注意**
- 不同端，使用地图选择时基于的底层地图引擎不一样，如微信小程序和H5是腾讯地图，App是高德地图，详见地图map组件的使用注意事项
- 不同端，使用地图选择时基于的底层地图引擎不一样，如微信小程序和H5是腾讯地图，App和阿里小程序是高德地图，百度小程序是百度地图，详见地图map组件的使用注意事项
- 微信内置浏览器中可使用微信js sdk，[详见](https://ask.dcloud.net.cn/article/35380)
- chooseLocation属于封装型API，开发者若觉得不够灵活，可自行基于原始的map组件进行封装
- 若Android App端位置不准，见上文uni.getLocation的注意事项
docs/api/location/map.md
浏览文件 @ f33fb3b2
......@@ -8,7 +8,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|x|
......@@ -32,6 +32,7 @@ mapContext
- 在页面中，必须在 `onReady` 中调用。
- 在组件中，必须在 `mounted` 中调用。
- nvue没有`$getAppMap()`，请使用`createMapContext`
- `uni-app`中使用原生地图无需提供占位div，得到`$getAppMap()`后直接js使用即可。
**getCenterLocation 的 OBJECT 参数列表**
......@@ -77,37 +78,63 @@ mapContext
|fail|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|失败描述
## 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|地址
#### 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**
- App端使用map，nvue比vue更强大。
- App端vue页面默认为高德地图，也可以选择百度地图。但app-nvue只有高德地图，没有百度地图。以及地图选择api，只支持高德地图。
- H5 端获取定位信息，需要部署在 **https** 服务上，本地预览（localhost）仍然可以使用 http 协议。
- 无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
- App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。
- App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南，详见：[https://ask.dcloud.net.cn/article/29](https://ask.dcloud.net.cn/article/29)
- ``<map>`` 组件默认为国测局坐标，调用 ``uni.getLocation`` 返回结果传递给 ``<map>`` 组件时，需指定 type 为 gcj02。
docs/api/location/open-location.md
浏览文件 @ f33fb3b2
......@@ -3,7 +3,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|x|
......@@ -42,12 +42,12 @@ uni.getLocation({
**Tips**
- 本API是一个非原子的封装界面，开发者如有定制需求，可自己做页面实现类似功能。
- H5 端获取定位信息，需要部署在 **https** 服务上，本地预览（localhost）仍然可以使用 http 协议。
- 无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
- 纯nvue项目（manifest中renderer为native），App端暂不支持此API。可自行基于map组件封装。
- 若定位不准，参考[uni.getLocation文档的注意事项](https://uniapp.dcloud.io/api/location/location)
- ``<map>`` 组件默认为国测局坐标，调用 ``uni.getLocation`` 返回结果传递给 ``<map>`` 组件时，需指定 type 为 gcj02。
- App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。
- App 端使用地图组件需要向高德等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南，详见：[https://ask.dcloud.net.cn/article/29](https://ask.dcloud.net.cn/article/29)。
- iOS端 如需使用第三方地图进行导航，需要在 manifest.json 文件内增加 ``urlschemewhitelist`` 节点，在线打包即可
- 不同平台打开的地图不一样，App端是高德地图、H5端是腾讯地图、微信小程序端是腾讯地图、百度小程序是百度地图、阿里小程序是高德地图、头条小程序是高德地图。
```json
{
"app-plus": {
......
docs/api/media/audio-context.md
浏览文件 @ f33fb3b2
......@@ -13,7 +13,7 @@
|:-|:-|:-|:-|:-|
|src|String|音频的数据链接，用于直接播放。|否||
|startTime|Number|开始播放的位置（单位：s），默认 0|否||
|autoplay|Boolean|是否自动开始播放，默认 false|否||
|autoplay|Boolean|是否自动开始播放，默认 false|否|H5端部分浏览器不支持|
|loop|Boolean|是否循环播放，默认 false|否||
|obeyMuteSwitch|Boolean|是否遵循系统静音开关，当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音，默认值 true|否|微信小程序、百度小程序、头条小程序|
|duration|Number|当前音频的长度（单位：s），只有在当前有合法的 src 时返回|是||
......@@ -27,7 +27,7 @@
|方法|参数|说明|
|:-|:-|:-|
|play||播放|
|play||播放（H5端部分浏览器需在用户交互时进行）|
|pause||暂停|
|stop||停止|
|seek|position|跳转到指定位置，单位 s|
......@@ -94,4 +94,4 @@ innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});
```
\ No newline at end of file
```
docs/api/media/background-audio-manager.md
浏览文件 @ f33fb3b2
......@@ -67,4 +67,5 @@ bgAudioMannager.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp
**注意**
因为背景音频播放耗费手机电量，所以平台都有管控，需在manifest中填写申请。
- ios App平台，背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 ``"UIBackgroundModes":["audio"]`` 才能保证音乐可以后台播放（打包成ipa生效）
- 小程序平台，需在manifest.json 对应的小程序节点下，填写"requiredBackgroundModes": ["audio"]。发布小程序时平台会审核
\ No newline at end of file
- 小程序平台，需在manifest.json 对应的小程序节点下，填写"requiredBackgroundModes": ["audio"]。发布小程序时平台会审核
- Android App端默认不会在通知栏出现音量控制，如需此功能，需要在插件市场单独下载原生插件，[详见](https://ext.dcloud.net.cn/search?q=%E9%80%9A%E7%9F%A5%E6%A0%8F+%E9%9F%B3%E4%B9%90%E6%8E%A7%E5%88%B6)
docs/api/media/camera-context.md
浏览文件 @ f33fb3b2
......@@ -31,6 +31,7 @@
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|timeoutCallback|Function|否|接超过30s或页面 onHide 时会结束录像|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）|
......
docs/api/media/editor-context.md
浏览文件 @ f33fb3b2
......@@ -43,6 +43,7 @@ editor 组件对应的 editorContext 实例，可通过 [uni.createSelectorQuery
| lineHeight | css style |
| letterSpacing | css style |
| textDecoration | css style |
| textIndent | css style |
对已经应用样式的选区设置会取消样式。css style 表示 css 中规定的允许值。
......
docs/api/media/image.md
浏览文件 @ f33fb3b2
......@@ -154,8 +154,8 @@ uni.chooseImage({
|width|Number|图片宽度，单位px||
|height|Number|图片高度，单位px||
|path|String|返回图片的本地路径||
|orientation|String|返回图片的方向，有效值见下表|小程序|
|type|String|返回图片的格式|小程序|
|orientation|String|返回图片的方向，有效值见下表|App、小程序|
|type|String|返回图片的格式|App、小程序|
**orientation 参数说明**
......
docs/api/media/live-player-context.md
浏览文件 @ f33fb3b2
......@@ -56,8 +56,8 @@ App平台的直播播放，不使用此API，而直接使用video的API。
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|见下|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-nvue 平台 2.2.5+ 支持 uni.createLivePusherContext(livePusherId, this)
- app-nvue 平台 2.2.5以下，需要同时设置组件属性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的优势有：
......@@ -66,77 +66,137 @@ App平台的直播播放，不使用此API，而直接使用video的API。
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" 表示失败
属性|类型 |默认值|必填|说明
:--|:--|:--|:--|:--|
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" 表示失败
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|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）的详细说明 键名|说明 :--|:--|
#### netstatus
> 网络状态通知事件
##### 安卓 返回参数（detail）的详细说明
键名|说明
:--|:--|
videoBitrate | 当前视频编/码器输出的比特率，单位 kbps
audioBitrate | 当前音频编/码器输出的比特率，单位 kbps
videoFPS | 当前视频帧率
videoGOP | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
netSpeed | 当前的发送/接收速度
netJitter | 网络抖动情况，抖动越大，网络越不稳定
videoWidth | 视频画面的宽度
videoHeight | 视频画面的高度
##### iOS 返回参数（detail）的详细说明 参数|类型 |说明 :--|:--|:--|
videoWidth | 视频画面的宽度
videoHeight | 视频画面的高度
##### iOS 返回参数（detail）的详细说明
参数|类型 |说明
:--|:--|:--|
code|Number| code码
message|string| 具体的网络状态信息
#### error > 渲染错误事件 ##### 返回参数（detail）的详细说明 参数|类型 |说明 :--|:--|:--|
message|string| 具体的网络状态信息
#### error
> 渲染错误事件
##### 返回参数（detail）的详细说明
参数|类型 |说明
:--|:--|:--|
errCode|Number|
errMsg|string|
errMsg|string|
docs/api/media/live-pusher-context.md
浏览文件 @ f33fb3b2
......@@ -8,81 +8,141 @@
|见下|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" 表示失败
属性|类型 |默认值|必填|说明
:--|:--|:--|:--|:--|
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+ 支持 uni.createLivePusherContext(livePusherId, this)
- app-nvue 平台 2.2.5- 需要同时设置组件属性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" 表示失败
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|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）的详细说明 键名|说明 :--|:--|
#### netstatus
> 网络状态通知事件
##### 安卓 返回参数（detail）的详细说明
键名|说明
:--|:--|
videoBitrate | 当前视频编/码器输出的比特率，单位 kbps
audioBitrate | 当前音频编/码器输出的比特率，单位 kbps
videoFPS | 当前视频帧率
videoGOP | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
netSpeed | 当前的发送/接收速度
netJitter | 网络抖动情况，抖动越大，网络越不稳定
videoWidth | 视频画面的宽度
videoHeight | 视频画面的高度
##### iOS 返回参数（detail）的详细说明 参数|类型 |说明 :--|:--|:--|
videoWidth | 视频画面的宽度
videoHeight | 视频画面的高度
##### iOS 返回参数（detail）的详细说明
参数|类型 |说明
:--|:--|:--|
code|Number| code码
message|string| 具体的网络状态信息
#### error > 渲染错误事件 ##### 返回参数（detail）的详细说明 参数|类型 |说明 :--|:--|:--|
message|string| 具体的网络状态信息
#### error
> 渲染错误事件
##### 返回参数（detail）的详细说明
参数|类型 |说明
:--|:--|:--|
errCode|Number|
errMsg|string|
errMsg|string|
docs/api/media/video-context.md
浏览文件 @ f33fb3b2
......@@ -9,22 +9,22 @@
**videoContext 对象的方法列表**
|方法|参数|说明|
|:-|:-|:-|
|play|无|播放|
|pause|无|暂停|
|seek|position|跳转到指定位置，单位 s|
|stop||停止视频，仅`微信小程序平台`支持，[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/VideoContext.stop.html)|
|sendDanmu|danmu|发送弹幕，danmu 包含两个属性 text, color|
|playbackRate|rate|设置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5|
|requestFullScreen|无|进入全屏，可传入{direction}参数，详见 video 组件文档|
|exitFullScreen|无|退出全屏|
|showStatusBar|无|显示状态栏，仅在iOS全屏下有效|
|hideStatusBar|无|隐藏状态栏，仅在iOS全屏下有效|
|方法|参数|说明|平台差异说明
|:-|:-|:-|:-|
|play|无|播放||
|pause|无|暂停||
|seek|position|跳转到指定位置，单位 s||
|stop||停止视频|微信小程序|
|sendDanmu|danmu|发送弹幕，danmu 包含两个属性 text, color||
|playbackRate|rate|设置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5。微信基础库2.6.3 起支持 2.0 倍速||
|requestFullScreen|无|进入全屏，可传入{direction}参数，详见 video 组件文档||
|exitFullScreen|无|退出全屏||
|showStatusBar|无|显示状态栏，仅在iOS全屏下有效|微信小程序、百度小程序、QQ小程序|
|hideStatusBar|无|隐藏状态栏，仅在iOS全屏下有效|微信小程序、百度小程序、QQ小程序|
**注意：**
- 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``
- app-nvue 平台 2.2.5+ 支持 uni.createVideoContext(videoId, this)
- app-nvue 平台 2.2.5以下使用本API，需同时设置组件属性id和ref ``<video id="video1" ref="video1"></video>``，或者直接使用 ref，例如 ``this.$refs.video1``
**示例**
......
docs/api/media/video.md
浏览文件 @ f33fb3b2
......@@ -24,10 +24,10 @@
|参数|说明|平台差异说明说明|
|:-|:-|:-|
|tempFilePath|选定视频的临时文件路径||
|duration|选定视频的时间长度，单位为 s|5+App不支持|
|size|选定视频的数据量大小||
|height|返回选定视频的高|5+App不支持|
|width|返回选定视频的宽|5+App不支持|
|duration|选定视频的时间长度，单位为 s|APP平台 2.1.0+、微信小程序|
|size|选定视频的数据量大小|APP平台 2.1.0+、微信小程序|
|height|返回选定视频的高|APP平台 2.1.0+、微信小程序|
|width|返回选定视频的宽|APP平台 2.1.0+、微信小程序|
|name|包含扩展名的文件名称|仅H5支持|
**注意：**
......
docs/api/other/authentication.md 已删除 100644 → 0
浏览文件 @ 69af8c1c
#### 生物认证
生物认证，又称活体检测。它包含指纹识别、人脸识别这两部分。即通过人体身体特征来进行身份认证识别。
各平台开发方式暂未统一，使用时需注意用[条件编译](https://uniapp.dcloud.io/platform)调用不同平台的代码。
##### 微信小程序
支持指纹和人脸识别两部分，[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.startSoterAuthentication.html)
如果使用腾讯云的SDK，可参考[网友分享](https://segmentfault.com/a/1190000020102601)
##### 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)
- 人脸识别：app引擎未内置，需要安装原生插件，详见[插件市场人脸识别插件](https://ext.dcloud.net.cn/search?q=%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB)
##### 支付宝小程序
只支持人脸识别，[规范详情](https://docs.alipay.com/mini/api/alipay-face-verify)
##### 百度小程序
只支持人脸识别，[规范详情](https://smartprogram.baidu.com/docs/develop/api/ai_face/#swan-ai-faceDetect/)
docs/api/other/open-miniprogram.md
浏览文件 @ f33fb3b2
......@@ -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/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)|
|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/dev/cn/mini-app/develop/open-capacity/mini-app-forward/navigatetominiprogram)|[QQ小程序](https://q.qq.com/wiki/develop/miniprogram/API/open_port/port_change.html#qq-navigatetominiprogram)|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x(见下)|x|√|√|√|√(1.15.0+)|√|
......
docs/api/other/report.md
浏览文件 @ f33fb3b2
......@@ -31,7 +31,7 @@ Tips
uni.report('title','首页')
// 登录
uni.report('lgoin',{
uni.report('login',{
'name':'uni-app',
'age':'21',
// ...
......@@ -93,7 +93,7 @@ uni.report('search',{
- 数据分析：[swan.reportAnalytics](https://smartprogram.baidu.com/docs/develop/api/data/#swan-reportAnalytics/)
##### 头条小程序平台：
- [reportAnalytics](https://developer.toutiao.com/docs/open/reportAnalytics.html)
- [reportAnalytics](https://developer.toutiao.com/dev/cn/mini-app/develop/open-capacity/data-analysis/reportanalytics)
##### QQ小程序平台：
- 数据上报：[qq.reportMonitor](https://q.qq.com/wiki/develop/miniprogram/API/open_port/port_dataup.html)
......
docs/api/plugins/login.md
浏览文件 @ f33fb3b2
......@@ -35,7 +35,7 @@ H5平台登陆注意事项：
* [微信小程序登录](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html)
* [支付宝小程序用户授权](https://docs.alipay.com/mini/introduce/auth)
* [百度小程序登录](https://smartprogram.baidu.com/docs/develop/api/open_log/#%E6%8E%88%E6%9D%83%E6%B5%81%E7%A8%8B%E8%AF%B4%E6%98%8E/)
* [头条小程序登录](https://developer.toutiao.com/docs/open/login.html)
* [头条小程序登录](https://developer.toutiao.com/dev/cn/mini-app/develop/open-capacity/log-in/login)
**示例**
......
docs/api/plugins/payment.md
浏览文件 @ f33fb3b2
......@@ -19,7 +19,7 @@ uni.requestPayment是一个统一各平台的客户端支付API，不管是在
|参数名|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-||
|provider|String|是|分享服务提供商，通过 [uni.getProvider](/api/plugins/provider) 获取。||
|provider|String|是|服务提供商，通过 [uni.getProvider](/api/plugins/provider) 获取。||
|orderInfo|String/Object|是|订单数据，[注意事项](/api/plugins/payment?id=orderinfo)|5+App、支付宝小程序、百度小程序、头条小程序|
|timeStamp|String|微信小程序必填|时间戳从1970年1月1日至今的秒数，即当前的时间。|微信小程序|
|nonceStr|String|微信小程序必填|随机字符串，长度为32个字符以下。|微信小程序|
......@@ -27,14 +27,21 @@ uni.requestPayment是一个统一各平台的客户端支付API，不管是在
|signType|String|微信小程序必填|签名算法，暂支持 MD5。|微信小程序|
|paySign|String|微信小程序必填|签名，具体签名方案参见 [微信小程序支付文档](https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=3)|微信小程序|
|bannedChannels|Array&lt;String&gt;|否|需要隐藏的支付方式，详见 [百度小程序支付文档](https://smartprogram.baidu.com/docs/develop/api/open_payment/#requestPolymerPayment/)|百度小程序|
|service|Number|头条小程序必填|固定值：1（拉起小程序收银台）开发者如果不希望使用头条小程序收银台，service设置为3/4时，可以直接拉起微信/支付宝进行支付：service=3： 微信API支付，不拉起小程序收银台；service=4： 支付宝API支付，不拉起小程序收银台。其中service=3、4，仅在1.35.0.1+基础库(头条743+)支持|头条小程序|
|_debug|Number|否|仅限调试用，上线前去掉该参数。_debug=1时，微信支付期间可以看到中间报错信息，方便调试|头条小程序|
|getOrderStatus|Function|头条小程序必填|商户前端实现的查询支付订单状态方法（该方法需要返回个Promise对象）。 service=3、4时不需要传。|头条小程序|
|success|Function|否|接口调用成功的回调||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）|&nbsp;|
#### 注意事项
- 头条小程序支付接口调整使用时请注意[发起头条支付](https://developer.toutiao.com/dev/cn/mini-app/develop/open-capacity/payment/pay)
#### orderInfo 注意事项@orderInfo
1. 百度小程序的 orderInfo 为 Object 类型，详细的数据结构，参考：[百度收银台支付](https://smartprogram.baidu.com/docs/develop/api/open_payment/#requestPolymerPayment/)。
2. 支付宝小程序的 orderInfo(支付宝的规范为 tradeNO) 为 String 类型，表示支付宝交易号。
3. 头条小程序的 orderInfo(头条的规范为 data) 为 Object 类型，详见：[发起头条支付](https://developer.toutiao.com/docs/open/requestPayment.html)
3. 头条小程序的 orderInfo(头条的规范为 data) 为 Object 类型，详见：[发起头条支付](https://developer.toutiao.com/dev/cn/mini-app/develop/open-capacity/payment/pay)
4. App端，支付宝支付和微信支付 orderInfo 均为 String 类型。
5. App端，苹果应用内支付 orderInfo 为Object 类型，{productid: 'productid'}。
......@@ -108,13 +115,13 @@ uni.requestPayment是一个统一各平台的客户端支付API，不管是在
#### FAQ
- Q：如何使用ping++等聚合支付
- A：uni-app的js API 已经完成跨端统一，客户端无需使用三方聚合支付。仅在服务器端使用三方聚合支付即可。
A：uni-app的js API 已经完成跨端统一，客户端无需使用三方聚合支付。仅在服务器端使用三方聚合支付即可。
- 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/)看下有没有做好的。
- Q：App端如何使用其他支付，比如银联、PayPal。
A：1、可以在web-view组件里使用它们的wap版支付；2、可以集成原生sdk，插件市场均有，[详见](https://ext.dcloud.net.cn/search?q=%E6%94%AF%E4%BB%98)。也可以自行开发原生插件，开发文档见[https://ask.dcloud.net.cn/article/35428](https://ask.dcloud.net.cn/article/35428)。
- Q：Appstore审核报PGPay SDK不允许上架的问题
- A：数字类产品（比如购买会员等不需要配送实物的商品），Apple规定必须使用苹果IAP应用内支付，给Apple分成30%。打包的时候不要勾选微信或支付宝等其他支付方式。如果你提交的包里包含了微信支付宝等支付的sdk，即使没使用，Appstore也会认为你有隐藏方式，以后会绕过iap，不给Apple分成，因此拒绝你的App上线。云打包时，manifest里选上支付模块，但sdk配置里去掉微信支付和支付宝支付。很多开发者的Android版是包含微信和支付宝支付的，此时注意分开判断。
A：数字类产品（比如购买会员等不需要配送实物的商品），Apple规定必须使用苹果IAP应用内支付，给Apple分成30%。打包的时候不要勾选微信或支付宝等其他支付方式。如果你提交的包里包含了微信支付宝等支付的sdk，即使没使用，Appstore也会认为你有隐藏方式，以后会绕过iap，不给Apple分成，因此拒绝你的App上线。云打包时，manifest里选上支付模块，但sdk配置里去掉微信支付和支付宝支付。很多开发者的Android版是包含微信和支付宝支付的，此时注意分开判断。详见[https://ask.dcloud.net.cn/article/36447](https://ask.dcloud.net.cn/article/36447)
**示例**
......
docs/api/plugins/push.md
浏览文件 @ f33fb3b2
`push` 是指从服务器主动给手机端发送消息。
- App平台
`uni-app` 提供了 uni push 服务，这是一个包括客户端和服务器的统一服务，整合了苹果APNs、华为、小米、OPPO、魅族等多家厂商的推送和个推的独立推送，不管客户端还是服务器，一套代码多端推送。
因本文档内容有限，单独写了一篇详细的 uni push 业务介绍，请仔细阅读 [https://ask.dcloud.net.cn/article/35622](https://ask.dcloud.net.cn/article/35622)。
`uni-app` 提供了 uni push 服务，这是一个包括客户端和服务器的统一服务，整合了苹果APNs、华为、小米、OPPO、VIVO、魅族等多家厂商的推送和个推的独立推送，不管客户端还是服务器，一套代码多端推送。
uni push 推送的开发API文档：[https://www.html5plus.org/doc/zh_cn/push.html](https://www.html5plus.org/doc/zh_cn/push.html)
开发者可以在uniPush中只接入个推，不配置其他厂商服务，但这将导致Android上App离线后无法推送消息。因为现在的国产rom节电管理策略严格，不使用rom厂商的push基本难以离线送达消息。
若想提供消息推送成功率，只有使用uniPush，并向各rom厂商申请开通推送服务（免费）。
插件市场有很多推送相关的插件，包括检查应用是否被授予推送权限（[参考](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)）
因本文档内容有限，另行开贴，介绍业务、开通流程，请务必仔细阅读 [https://ask.dcloud.net.cn/article/35622](https://ask.dcloud.net.cn/article/35622)。
插件市场也提供了其他三方推送方案，但注意unipush是推送成功率更高的解决方案，并且免费使用，更推荐使用。
- 客户端调用的js API见：[https://www.html5plus.org/doc/zh_cn/push.html](https://www.html5plus.org/doc/zh_cn/push.html)
- 服务器调用接口文档，仍然是个推的服务器文档[http://docs.getui.com/](http://docs.getui.com/)
- web发送界面，在DCloud的开发者后台：[https://dev.dcloud.net.cn/](https://dev.dcloud.net.cn/)
## 其他相关资源
- 检查应用是否被授予推送权限：[https://ext.dcloud.net.cn/plugin?id=594](https://ext.dcloud.net.cn/plugin?id=594)
- 开启关闭推送服务：[https://ext.dcloud.net.cn/plugin?id=727](https://ext.dcloud.net.cn/plugin?id=727)
- 自定义iOS推送铃声：[https://ext.dcloud.net.cn/plugin?id=690](https://ext.dcloud.net.cn/plugin?id=690)
- 如何自定义推送通知的图标：[https://ask.dcloud.net.cn/article/35537](https://ask.dcloud.net.cn/article/35537)
插件市场也提供了其他三方推送方案，但注意unipush是推送成功率更高的解决方案，并且免费使用。不推荐开发者使用其他推送服务。
但我们发现很多开发者有误解，导致还在错误使用其他推送。
- 常见误解1：“uniPush的专业性，和专业的个推、极光等服务可相比吗？”
答：uniPush是由个推将其本来收费的vip push产品，免费提供给了DCloud的开发者。它与个推vip push的只有2个区别：1、免费；2、账户使用的是DCloud开发者账户，而无需再重新注册个推账户。个推是A股上市公司，专业性在推送领域领先。
- 常见误解2：“uniPush好麻烦，我就喜欢个推、极光这种简单sdk，不想去各个rom厂商去申请一圈”
答：有此误解的开发者，根本不知道推送行业的现状。不集成rom厂商的推送，就无法在App离线时发送push。开发者可以只使用uniPush里面的个推服务，不去各个rom厂商申请推送，但你要知道这样做的后果就是在华为、小米、OPPO、VIVO、魅族上发不了离线消息。
- 常见误解3：“uniPush的送达率还是不够，是否可以付费来提升送达率，个推是有付费提升送达率的方法的”
答：前文已经说了。个推的付费提升送达率的产品就是vip push，而uniPush就是个推的vip Push。DCloud通过谈判免费给DCloud的开发者使用了。
- 小程序平台
......@@ -23,6 +41,7 @@ uni push 推送的开发API文档：[https://www.html5plus.org/doc/zh_cn/push.ht
百度模板消息文档：[https://smartprogram.baidu.com/docs/develop/third/api/](https://smartprogram.baidu.com/docs/develop/third/api/)
<!--
**注意：以下API暂停维护，仅为向下兼容而保留。App端 uni push 的API请使用 [https://www.html5plus.org/doc/zh_cn/push.html](https://www.html5plus.org/doc/zh_cn/push.html)**
### uni.subscribePush(OBJECT)
......@@ -152,7 +171,7 @@ uni.offPush({
}
});
```
-->
##### FAQ
......
docs/api/plugins/share.md
浏览文件 @ f33fb3b2
......@@ -68,6 +68,7 @@
* 分享新浪微博不会返回正确的成功回调
* 不能直接分享到QQ空间，可以分享到QQ，然后在QQ的界面里选择QQ空间。
* 分享微信朋友圈多图，微信官方已经禁掉这个功能。可以考虑把多张图用canvas合并成一张图分享出去。
* 从APP分享到微信时，无法判断用户点击取消分享，因为微信官方禁掉了分享成功的返回值。
#### 分享到微信聊天界面
......@@ -209,7 +210,7 @@ uni.share({
小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息。
* 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序原生菜单自带的分享按钮，也可能是开发者在页面中放置的分享按钮（<button open-type="share">）；
* 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序原生菜单自带的分享按钮，也可能是开发者在页面中放置的分享按钮（\<button open-type="share">）；
* 此事件需要 return 一个Object，用于自定义分享内容。
**平台差异说明**
......@@ -332,5 +333,5 @@ uni.hideShareMenu()
##### FAQ
- Q：App端如何集成其他登陆SDK
- A：使用原生插件方式，可以集成三方sdk，原生插件开发文档见[https://ask.dcloud.net.cn/article/35428](https://ask.dcloud.net.cn/article/35428)。开发之前可以先去[插件市场](https://ext.dcloud.net.cn/)看下有没有做好的。
- Q：App端如何集成其他分享SDK，如facebook分享、twitter分享
- A：插件市场已有相关插件，[详见](https://ext.dcloud.net.cn/search?q=%E5%88%86%E4%BA%AB)；也可以根据原生插件教程自行开发，原生插件开发文档见[https://ask.dcloud.net.cn/article/35428](https://ask.dcloud.net.cn/article/35428)
docs/api/request/UDP.md
浏览文件 @ f33fb3b2
#### UDP 通信
仅微信小程序平台支持，[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.getMenuButtonBoundingClientRect.html)
仅微信小程序平台支持，[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/network/udp/wx.createUDPSocket.html)
docs/api/request/request.md
浏览文件 @ f33fb3b2
......@@ -11,6 +11,7 @@
|data|Object/String/ArrayBuffer|否||请求的参数|5+App（自定义组件编译模式）不支持ArrayBuffer类型|
|header|Object|否||设置请求的 header，header 中不能设置 Referer。||
|method|String|否|GET|有效值详见下方说明||
|timeout|Number|否|30000|超时时间，单位 ms|支付宝小程序|
|dataType|String|否|json |如果设为 json，会尝试对返回的数据做一次 JSON.parse||
|responseType|String|否|text |设置响应的数据类型。合法值：text、arraybuffer|5+App和支付宝小程序不支持|
|sslVerify|Boolean|否|true|验证 ssl 证书|仅5+App安卓端支持（HBuilderX 2.3.3+）|
......
docs/api/router.md
浏览文件 @ f33fb3b2
......@@ -175,7 +175,7 @@ Tips：
* ``reLaunch`` 可以打开任意页面。
* 页面底部的 ``tabBar`` 由页面决定，即只要是定义为 ``tabBar`` 的页面，底部都有 ``tabBar``。
* 不能在 ```App.vue``` 里面进行页面跳转。
* H5端页面刷新之后页面栈会消失，此时`navigateBack`不能返回，如果一定要返回可以使用`history.back()`。
**参考事项**
- 页面路由拦截和管理，插件市场有很多封装好的工具类，搜索[路由](https://ext.dcloud.net.cn/search?q=%E8%B7%AF%E7%94%B1)
......
docs/api/system/authentication.md 0 → 100644
浏览文件 @ f33fb3b2
### 生物认证说明
生物认证，又称活体检测。它包含指纹识别、人脸识别这两部分。即通过人体身体特征来进行身份认证识别。
### uni.startSoterAuthentication(OBJECT)
开始 SOTER 生物认证。
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |头条小程序 |QQ小程序 |
|:- |:- |:- |:- |:- |:- |:- |
|√（2.3.8+） |x |√ |x |x |x |x |
App端在2.3.8版以前，可在插件市场获取[指纹相关插件](https://ext.dcloud.net.cn/plugin?id=358)。
**OBJECT参数说明**
|属性 |类型 |默认值 |必填 |说明 | 平台差异说明 |
|:- |:- |:- |:- |:- |:- |
|requestAuthModes |Array | |是 |请求使用的可接受的生物认证方式 |APP、微信小程序|
|challenge |String | |是 |挑战因子。挑战因子为调用者为此次生物鉴权准备的用于签名的字符串关键识别信息，将作为 resultJSON 的一部分，供调用者识别本次请求。例如：如果场景为请求用户对某订单进行授权确认，则可以将订单号填入此参数。 |微信小程序 |
|authContent |String |'' |否 |验证描述，即识别过程中显示在界面上的对话框提示内容 |APP、微信小程序|
|success |Function | |否 |接口调用成功的回调函数 | |
|fail |Function | |否 |接口调用失败的回调函数 | |
|complete |Function | |否 |接口调用结束的回调函数（调用成功、失败都会执行） | |
**OBJECT.requestAuthModes说明**
|值 |说明 |
|:- |:- |
|fingerPrint|指纹识别 |
|facial |人脸识别 |
注意：
- App端指纹识别，Android平台从Android6.0起才提供了官方API，uni-app也是从Android6起支持。对于更低版本的安卓，某些rom私有的指纹识别API，uni-app并不支持。
- App端人脸识别，iOS平台使用自带的faceID，而Android平台需要依赖三方SDK方可实现，可在插件市场搜索[人脸识别](https://ext.dcloud.net.cn/search?q=%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB)插件
**OBJECT.success返回值说明**
|属性 |类型 |说明 |平台差异说明 |
|:- |:- |:- |:- |
|authMode |string |生物认证方式 |APP、微信小程序|
|resultJSON |string |在设备安全区域（TEE）内获得的本机安全信息（如TEE名称版本号等以及防重放参数）以及本次认证信息（仅Android支持，本次认证的指纹ID）。具体说明见下文 |微信小程序 |
|resultJSONSignature|string |用SOTER安全密钥对 resultJSON 的签名(SHA256 with RSA/PSS, saltlen=20) |微信小程序 |
|errCode |number |错误码 | |
|errMsg |string |错误信息 | |
**resultJSON说明**
此数据为设备TEE中，将传入的challenge和TEE内其他安全信息组成的数据进行组装而来的JSON，对下述字段的解释如下表。例子如下：
|字段名 |说明 |
|:- |:- |
|raw |调用者传入的challenge |
|fid |（仅Android支持）本次生物识别认证的生物信息编号（如指纹识别则是指纹信息在本设备内部编号）|
|counter|防重放特征参数 |
|tee_n |TEE名称（如高通或者trustonic等） |
|tee_v |TEE版本号 |
|fp_n |指纹以及相关逻辑模块提供商（如FPC等） |
|fp_v |指纹以及相关模块版本号 |
|cpu_id |机器唯一识别ID |
|uid |概念同Android系统定义uid，即应用程序编号 |
**错误码说明**
|错误码 |错误码说明 |
|:- |:- |
|0 |识别成功 |
|90001 |本设备不支持生物认证 |
|90002 |用户未授权使用该生物认证接口 |
|90003 |请求使用的生物认证方式不支持 |
|90004 |未传入challenge或challenge长度过长（最长512字符）|
|90005 |auth_content长度超过限制（最长42个字符） |
|90007 |内部错误 |
|90008 |用户取消授权 |
|90009 |识别失败 |
|90010 |重试次数过多被冻结 |
|90011 |用户未录入所选识别方式 |
### uni.checkIsSupportSoterAuthentication(OBJECT)
获取本机支持的 SOTER 生物认证方式
**OBJECT参数说明**
|属性 |类型 |默认值 |必填 |说明 |
|:- |:- |:- |:- |:- |
|success |function | |否 |接口调用成功的回调函数 |
|fail |function | |否 |接口调用失败的回调函数 |
|complete |function | |否 |接口调用结束的回调函数（调用成功、失败都会执行） |
**OBJECT.success返回值说明**
|属性 |类型 |说明 |
|:- |:- |:- |
|supportMode|Array|该设备支持的可被SOTER识别的生物识别方式|
### uni.checkIsSoterEnrolledInDevice(OBJECT)
获取设备内是否录入如指纹等生物信息的接口
**OBJECT参数说明**
|属性 |类型 |默认值 |必填 |说明 |
|checkAuthMode|string | |是 |认证方式 |
|success |function | |否 |接口调用成功的回调函数 |
|fail |function | |否 |接口调用失败的回调函数 |
|complete |function | |否 |接口调用结束的回调函数（调用成功、失败都会执行） |
**OBJECT.checkAuthMode合法值**
|值 |说明 |
|:- |:- |
|fingerPrint|指纹识别 |
|facial |人脸识别 |
**OBJECT.success返回值说明**
|属性 |类型 |说明 |
|:- |:- |:- |
|isEnrolled |boolean|是否已录入信息 |
|errMsg |string |错误信息 |
#### 代码示例
```html
<template>
<view class="content">
<button type="primary" @click="checkIsSupportSoterAuthentication">检查支持的认证方式</button>
<button type="primary" @click="checkIsSoterEnrolledInDeviceFingerPrint">检查是否录入指纹</button>
<button type="primary" @click="checkIsSoterEnrolledInDeviceFaceID">检查是否录入FaceID</button>
<button type="primary" @click="startSoterAuthenticationFingerPrint">开始指纹认证</button>
<button type="primary" @click="startSoterAuthenticationFaceID">开始FaceID认证</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
checkIsSupportSoterAuthentication() {
uni.checkIsSupportSoterAuthentication({
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
})
},
checkIsSoterEnrolledInDeviceFingerPrint() {
uni.checkIsSoterEnrolledInDevice({
checkAuthMode: 'fingerPrint',
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
})
},
checkIsSoterEnrolledInDeviceFaceID() {
uni.checkIsSoterEnrolledInDevice({
checkAuthMode: 'facial',
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
})
},
startSoterAuthenticationFingerPrint() {
uni.startSoterAuthentication({
requestAuthModes: ['fingerPrint'],
challenge: '123456',
authContent: '请用指纹解锁',
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
})
},
startSoterAuthenticationFaceID() {
uni.startSoterAuthentication({
requestAuthModes: ['facial'],
challenge: '123456',
authContent: '请用FaceID解锁',
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
})
}
}
}
</script>
<style>
button {
width: 200px;
margin: 20px auto;
}
</style>
```
#### 注意事项
- App端自2.3.8版本起开始支持生物认证，更低版本或想使用指纹功能，可在插件市场获取[插件](https://ext.dcloud.net.cn/plugin?id=358)
- App端的人脸识别，仅支持iOS端的faceID。Android端需要依赖三方SDK方可实现，可在插件市场搜索[人脸识别](https://ext.dcloud.net.cn/search?q=%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB)插件
- App端打包时，注意需要在manifest的模块中选择指纹和faceID，否则打包后无法运行相关功能。
- hello uni-app已经集成相关示例，最新版HBuilderX新建新版hello uni-app示例项目真机运行可见，在API-设备-生物认证里。
- 微信小程序如果使用腾讯云的SDK，可参考[网友分享](https://segmentfault.com/a/1190000020102601)
- 支付宝小程序只支持人脸识别，[规范详情](https://docs.alipay.com/mini/api/facecapture)
- 百度小程序只支持人脸识别，[规范详情](https://smartprogram.baidu.com/docs/develop/api/ai_face/#swan-ai-faceDetect/)
docs/api/system/barcode.md
浏览文件 @ f33fb3b2
......@@ -61,7 +61,6 @@ uni.scanCode({
- App-vue如果想自定义扫码，可参考[uni-app中如何使用5+的原生界面控件](http://ask.dcloud.net.cn/article/35036)和[plus.barcode API](https://www.html5plus.org/doc/zh_cn/barcode.html)
- App-nvue，支持barcode组件，可自定义扫码界面。[详见](https://uniapp.dcloud.io/component/barcode)
- 微信小程序自定义扫码界面，可使用camera组件。[详见](https://uniapp.dcloud.io/component/camera)
- App下纯nvue项目（manifest中renderer为native），不支持此API，请使用barcode组件来替代。
- 微信内嵌浏览器运行H5版时，可通过js sdk实现扫码，需要引入一个单独的js，[详见](https://ask.dcloud.net.cn/article/35380)
- 在扫码界面点击返回也会进入 `fail` 回调中
- 支付宝小程序不支持 `success` 回调中的 `scanType`，`charSet`，`path`
docs/api/system/clipboard.md
浏览文件 @ f33fb3b2
......@@ -55,5 +55,5 @@ uni.getClipboardData({
#### **注意**
- 设置剪贴板内容后，小程序平台会自动弹出轻提示。App平台默认与小程序保持一致策略。如不希望在App平台弹出提示，可使用Native.js自行操作剪贴板，插件市场有封装好的示例[https://ext.dcloud.net.cn/plugin?id=712](https://ext.dcloud.net.cn/plugin?id=712)
- 设置剪贴板内容后，小程序平台会自动弹出轻提示。App平台默认与小程序保持一致策略。如不希望在App平台弹出提示，可使用Native.js自行操作剪贴板，插件市场有封装好的示例[https://ext.dcloud.net.cn/plugin?id=712](https://ext.dcloud.net.cn/plugin?id=712)。也可以在设置剪切板后立即uni.hideToast()。
- H5的复制粘贴，可去插件市场搜索[剪贴板](https://ext.dcloud.net.cn/search?q=%E5%89%AA%E8%B4%B4%E6%9D%BF)
docs/api/system/info.md
浏览文件 @ f33fb3b2
......@@ -55,6 +55,7 @@
**Tips**
- 屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生tabbar高度
- H5端，windowHeight不包含NavigationBar和TabBar的高度，windowTop等于NavigationBar高度，windowBottom等于TabBar高度，statusBarHeight为0
- APP端windowTop和windowBottom都是0，注意区分与H5端的差异
**safeArea 的结构**
......@@ -167,12 +168,23 @@ try {
H5、小程序、iOS，属于对用户隐私保护比较严格的平台，在这些平台很难获取有效的设备唯一标记。
Android已经改进用户隐私保护，在很多新手机上，获取imei等信息时需要弹框让用户授权。
Android已经改进用户隐私保护，在很多新手机上，获取imei等信息时需要弹框让用户授权。而Android10已经无法获取imei了。
- H5平台：
常用的方式是uv，即在uni.storage里存一个随机数，本质是存在浏览器的localstorage里。将随机数发给服务器，进行用户身份识别和统计。当然如果用户浏览器清空了localstorage、更换了浏览器、或使用隐私模式，那么就统计数据就会有误差。
- 小程序平台：
小程序也可以采用与H5类似的方式，在uni.storage里存一个随机数。如果想获取用户的微信唯一ID，也可以弹框请求用户授权。
- App iOS平台：
iOS并不提供imei的获取API，可通过[plus.device.getInfo](http://www.html5plus.org/doc/zh_cn/device.html#plus.device.getInfo) 可以获得设备的唯一标识（uuid），这个id其实也是一种随机数概念，类似于h5的uv计算，卸载app重装会发生变化；
iOS还有一个叫`idfa`的广告识别符，可通过Native.js获取，详见：[idfa介绍](https://ask.dcloud.net.cn/article/36107)。
- App Android平台：
Android也可以使用UUID，同iOS。
Android10以下可以得到imei，在[plus.device.getInfo](http://www.html5plus.org/doc/zh_cn/device.html#plus.device.getInfo) 可以获得设备的国际移动设备身份码（imei）。注意很多新手机在获取imei时会弹框要求用户授权。
Android10以上，部分国产手机支持OAID，详见[匿名设备标识符（OAID）](http://www.html5plus.org/doc/zh_cn/device.html#plus.device.getOAID)
- H5平台：常用的方式是uv，即在uni.storage里存一个随机数，本质是存在浏览器的localstorage里。将随机数发给服务器，进行用户身份识别和统计。当然如果用户浏览器清空了localstorage、更换了浏览器、或使用隐私模式，那么就统计数据就会有误差。
- 小程序平台：小程序也可以采用与H5类似的方式，在uni.storage里存一个随机数。如果想获取用户的微信唯一ID，也可以弹框请求用户授权。
- App iOS平台：iOS并不提供imei的获取API，可通过[plus.device.getInfo](http://www.html5plus.org/doc/zh_cn/device.html#plus.device.getInfo) 可以获得设备的唯一标识（uuid），这个id其实也是一种随机数概念。卸载app重装会发生变化；iOS还有一个叫`idfa`的广告识别符，可通过Native.js实现，在社区中搜索可见。
- App Android平台：Android也可以使用UUID，同iOS。但Android还能得到imei，在[plus.device.getInfo](http://www.html5plus.org/doc/zh_cn/device.html#plus.device.getInfo) 可以获得设备的国际移动设备身份码（imei）。注意很多新手机在获取imei时会弹框要求用户授权。
`plus.device.getInfo`的API是从HBuilderX 2.0.3+开始提供的，老版需使用plus.devide.uuid或plus.device.imei。
### uni.canIUse(String)
......
docs/api/system/phone.md
浏览文件 @ f33fb3b2
......@@ -16,4 +16,12 @@
uni.makePhoneCall({
phoneNumber: '114' //仅为示例
});
```
\ No newline at end of file
```
注：App端关于电话短信的扩展文档
- Android不弹出询问框直接拨打电话：[https://ask.dcloud.net.cn/question/4035](https://ask.dcloud.net.cn/question/4035)
- 发送短信：[http://www.html5plus.org/doc/zh_cn/messaging.html](http://www.html5plus.org/doc/zh_cn/messaging.html)
- Android读取短信验证码：[http://ask.dcloud.net.cn/article/676](http://ask.dcloud.net.cn/article/676)
- Android遍历读取短信：[https://ask.dcloud.net.cn/article/12934](https://ask.dcloud.net.cn/article/12934)
注意需要赋予相关权限。
docs/api/system/wifi.md
浏览文件 @ f33fb3b2
......@@ -4,7 +4,7 @@
微信小程序平台实现参考：[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.startWifi.html)
头条小程序的wifi API参考：[规范详情](https://developer.toutiao.com/docs/api/getConnectedWifi.html)
头条小程序的wifi API参考：[规范详情](https://developer.toutiao.com/dev/cn/mini-app/develop/api/device/wi-fi/getconnectedwifi)
App 平台实现参考
......
docs/api/ui/font.md
浏览文件 @ f33fb3b2
### uni.loadFontFace(Object object)
动态加载网络字体。文件地址需为下载类型。
注意:
1. 引入中文字体，体积过大时会发生错误，建议抽离出部分中文，减少体积，或者用图片替代
2. 字体链接必须是https。
3. 字体链接必须是同源下的，或开启了cors支持，微信小程序的域名是servicewechat.com
4. canvas等原生组件不支持使用接口添加的字体
5. 工具里提示 Faild to load font可以忽略
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|1.9.0+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|2.3.4+|基础库 2.1.0+|x|x|x|x|
**参数说明**
|属性|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|family|String||是|定义的字体名称|
|source|String||是|字体资源的地址。建议格式为 TTF 和 WOFF，WOFF2 在低版本的iOS上会不兼容。|
|desc|Object||否|可选的字体描述符|
|success|Function||否|接口调用成功的回调函数|
|fail|Function||否|接口调用失败的回调函数|
|complete|Function||否|接口调用结束的回调函数（调用成功、失败都会执行）|
**Object.desc 的结构**
|属性|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|style|String|normal|否|字体样式，可选值为 normal / italic / oblique|
|weight|String|normal|否|字体粗细，可选值为 normal / bold / 100 / 200../ 900|
|variant|String|normal|否|设置小型大写字母的字体显示文本，可选值为 normal / small-caps / inherit|
**代码示例**
```javascript
uni.loadFontFace({
family: 'Bitstream Vera Serif Bold',
source: 'url("https://sungd.github.io/Pacifico.ttf")',
success() {
console.log('success')
}
})
```
### uni.loadFontFace(Object object)
动态加载字体。
注意:
1. 引入中文字体，体积过大时会发生错误，建议抽离出部分中文，减少体积，或者用图片替代
2. 微信小程序端只支持网络字体，字体链接必须是https。App支持网络或本地的字体（本地字体需使用[平台绝对路径](http://www.html5plus.org/doc/zh_cn/io.html#plus.io.convertLocalFileSystemURL)）。
3. 微信小程序端字体链接必须是同源下的，或开启了cors支持，微信小程序的域名是servicewechat.com
4. canvas等原生组件不支持使用接口添加的字体
5. 工具里提示 Faild to load font可以忽略
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|1.9.0+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|2.3.4+|基础库 2.1.0+|x|x|x|x|
**参数说明**
|属性|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|family|String||是|定义的字体名称|
|source|String||是|字体资源的地址。建议格式为 TTF 和 WOFF，WOFF2 在低版本的iOS上会不兼容。|
|desc|Object||否|可选的字体描述符|
|success|Function||否|接口调用成功的回调函数|
|fail|Function||否|接口调用失败的回调函数|
|complete|Function||否|接口调用结束的回调函数（调用成功、失败都会执行）|
**Object.desc 的结构**
|属性|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|style|String|normal|否|字体样式，可选值为 normal / italic / oblique|
|weight|String|normal|否|字体粗细，可选值为 normal / bold / 100 / 200../ 900|
|variant|String|normal|否|设置小型大写字母的字体显示文本，可选值为 normal / small-caps / inherit|
**代码示例**
```javascript
uni.loadFontFace({
family: 'Bitstream Vera Serif Bold',
source: 'url("https://sungd.github.io/Pacifico.ttf")',
success() {
console.log('success')
}
})
```
**Tips**
插件市场有加载字体的例子：[https://ext.dcloud.net.cn/plugin?id=954](https://ext.dcloud.net.cn/plugin?id=954)
docs/api/ui/navigationbar.md
浏览文件 @ f33fb3b2
......@@ -39,7 +39,10 @@ uni.setNavigationBarTitle({
|animation|Object|否|动画效果，{duration,timingFunc}|微信小程序、百度小程序|
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）|&nbsp;|
|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）|&nbsp;|
**注意**
- Android 上的 backgroundColor 参数有限制，黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)
**animation 结构**
......
docs/api/ui/nodes-info.md
浏览文件 @ f33fb3b2
......@@ -64,7 +64,7 @@ query.select('#id').boundingClientRect(data => {
|字段名|类型|默认值|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|:-|
|id|Boolean|false|否|是否返回节点 ``id``||
|dataset|Boolean|false|否|是否返回节点 ``dataset``||
|dataset|Boolean|false|否|是否返回节点 ``dataset``| App、微信小程序、H5 |
|rect|Boolean|false|否|是否返回节点布局位置（``left`` ``right`` ``top`` ``bottom``）||
|size|Boolean|false|否|是否返回节点尺寸（``width`` ``height``）||
|scrollOffset|Boolean|false|否|是否返回节点的 ``scrollLeft`` ``scrollTop``，节点必须是 ``scroll-view`` 或者 ``viewport``||
......@@ -110,7 +110,7 @@ query.select('#id').boundingClientRect(data => {
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|2.4.5+|√|x|x|x|√|
|√|HBuilderX 2.4.7+|√|x|x|x|√|
**callback 返回参数**
......@@ -118,7 +118,26 @@ query.select('#id').boundingClientRect(data => {
| --- | --- | --- |
| context | Object | 节点对应的 Context 对象 |
### nodesRef.node(callback)
获取 `Node` 节点实例。目前支持 `Canvas` 的获取。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|x|x|√|
**callback 返回参数**
| 属性 | 类型 | 说明 |
| --- | --- | --- |
| node | Object | 节点对应的 Node 实例 |
**注意**
- 目前仅能用于`canvas`
- `canvas`需设置`type="webgl"`才能正常使用
### 代码示例
......
docs/api/ui/tabbar.md
浏览文件 @ f33fb3b2
......@@ -197,4 +197,4 @@ uni.setTabBarBadge({
**Tip**
- tabbar是原生的，层级高于前端元素
- [uni-app插件市场](https://ext.dcloud.net.cn/search?q=%E5%BA%95%E9%83%A8%E5%9B%BE%E6%A0%87%E8%8F%9C%E5%8D%95)有封装的前端tabbar，但性能不如原生tabbar
- HBuilderX 2.3.4 版本以下如果想要一个中间带+号的tabbar，在HBuilderX中新建uni-app项目、选择 底部选项卡 模板
\ No newline at end of file
- 如果想要一个中间带+号的tabbar，在HBuilderX中新建uni-app项目、选择 底部选项卡 模板
docs/api/window/communication.md
浏览文件 @ f33fb3b2
......@@ -63,12 +63,68 @@
- 如果没有提供参数，则移除所有的事件监听器；
- 如果只提供了事件，则移除该事件所有的监听器；
- 如果同时提供了事件与回调，则只移除这个回调的监听器；
- 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
**代码示例**
```javascript
uni.$off('update',function(data){
console.log('移除 update 自定义事件');
})
`$emit`、`$on`、`$off`常用于跨页面、跨组件通讯，这里为了方便演示放在同一个页面
```html
<template>
<view class="content">
<view class="data">
<text>{{val}}</text>
</view>
<button type="primary" @click="comunicationOff">结束监听</button>
</view>
</template>
<script>
export default {
data() {
return {
val: 0
}
},
onLoad() {
setInterval(()=>{
uni.$emit('add', {
data: 2
})
},1000)
uni.$on('add', this.add)
},
methods: {
comunicationOff() {
uni.$off('add', this.add)
},
add(e) {
this.val += e.data
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.data {
text-align: center;
line-height: 40px;
margin-top: 40px;
}
button {
width: 200px;
margin: 20px 0;
}
</style>
```
......
docs/api/window/subNVues.md
浏览文件 @ f33fb3b2
......@@ -4,148 +4,148 @@ subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做
> subNvue 自1.9.10 起支持 ，仅支持 app 平台
### uni.getSubNVueById(subNvueId)@app-getsubnvuebyid
通过 `ID` 获取 `subNVues` 原生子窗体的实例。 [subNVues 配置](/collocation/pages?id=app-subNVues)
|参数 |类型 |说明 |
|--- |--- |--- |
|subNvueId |String | 原生子窗体的 ID|
**代码示例**
```javascript
const subNVue = uni.getSubNVueById('popup');
```
#### 返回值
返回一个 [subNVue](/api/window/subNVues?id=subnvue) 对象
### uni.getCurrentSubNVue()@app-getCurrentSubNVue
在一个subnvue窗体的nvue页面代码中，获取当前 `subNVues` 原生子窗体的实例。
**代码示例（注意执行在nvue页面中）**
```javascript
const subNVue = uni.getCurrentSubNVue();
```
#### 返回值
返回一个 [subNVue](/api/window/subNVues?id=subnvue) 对象
#### subNVue 对象的方法列表@subNVue
|方法 |说明 |
|--- |--- |
|show | 显示原生子窗体 |
|hide | 隐藏原生子窗体 |
|setStyle | 设置原生子窗体的样式 |
### subNVue.show (aniShow,duration,showedCB)
显示原生子窗体
|参数 |类型|默认值 |说明 |
|--- |--- |--- |--- |
|aniShow |String| auto |显示原生子窗体的动画效果 ，如果没有指定窗口动画类型，则使用默认值“auto”，即自动选择上一次显示窗口的动画效果，如果之前没有显示过，则使用“none”动画效果。[详见动画类型](/api/window/subNVues?id=动画类型)|
|duration |Number| 600 |显示原生子窗体的动画持续时间，单位为ms，如果没有设置则使用默认窗口动画时间 600ms。|
|showedCB |Function| |显示完成的回调函数，当指定原生子窗体显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。 |
**代码示例**
```javascript
subNVue.show('slide-in-left',200,()=>{
console.log('subNVue 原生子窗体显示成功');
})
```
### subNVue.hide (aniShow,duration)
隐藏原生子窗体
|参数 |类型|默认值 |说明 |
|--- |---|--- |--- |
|aniShow |String| auto |隐藏原生子窗体的动画效果 ，如果没有指定窗口动画类型，则使用默认值“auto”，即自动选择上一次显示窗口的动画效果，如果之前没有显示过，则使用“none”动画效果。[详见动画类型](/api/window/subNVues?id=动画类型)|
|duration |Number| 600 |隐藏原生子窗体的动画持续时间，单位为ms，如果没有设置则使用默认窗口动画时间 600ms。 |
**代码示例**
```javascript
subNVue.hide('slide-out-left',200);
```
### subNVue.setStyle (style)
设置原生子窗体的样式
|参数 |类型 |说明 |
|--- |--- |--- |
|style |Object | 原生子窗体的样式 |
**原生子窗体的样式**
|属性|类型|默认值|描述|
|:-|:-|:-|:-|
|position|String|absolute|原生子窗体的排版位置，排版位置决定原生子窗体在父窗口中的定位方式。 可取值："static"，原生子窗体在页面中正常定位，如果页面存在滚动条则随窗口内容滚动；"absolute"，原生子窗体在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动；"dock"，原生子窗体在页面中停靠，停靠的位置由dock属性值决定。 默认值为"absolute"。|
|dock|String|bottom|原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效，可取值："top"，原生子窗体停靠则页面顶部；"bottom"，原生子窗体停靠在页面底部；"right"，原生子窗体停靠在页面右侧；"left"，原生子窗体停靠在页面左侧。 默认值为"bottom"。|
|mask|HexColor|rgba(0,0,0,0.5)|原生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效，可取值： rgba格式字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"，表示黑色半透明；|
|width|String|100%|原生子窗体的宽度,支持百分比、像素值，默认为100%。未设置width属性值时，可同时设置left和right属性值改变窗口的默认宽度。|
|height|String|100%|原生子窗体的高度,支持百分比、像素值，默认为100%。 当未设置height属性值时，优先通过top和bottom属性值来计算原生子窗体的高度。|
|top|String|0px|原生子窗体垂直向下的偏移量，支持百分比、像素值，默认值为0px。 未设置top属性值时，优先通过bottom和height属性值来计算原生子窗体的top位置。|
|bottom|String||原生子窗体垂直向上偏移量,支持百分比、像素值，默认值无值（根据top和height属性值来自动计算）。 当同时设置了top和height值时，忽略此属性值； 当未设置height值时，可通过top和bottom属性值来确定原生子窗体的高度。|
|left|String|0px|原生子窗体水平向左的偏移量，支持百分比、像素值，默认值为0px。 未设置left属性值时，优先通过right和width属性值来计算原生子窗体的left位置。|
|right|String||原生子窗体水平向右的偏移量，支持百分比、像素值，默认无值（根据left和width属性值来自动计算）。 当设置了left和width值时，忽略此属性值； 当未设置width值时，可通过left和bottom属性值来确定原生子窗体的宽度。|
### uni.getSubNVueById(subNvueId)@app-getsubnvuebyid
通过 `ID` 获取 `subNVues` 原生子窗体的实例。 [subNVues 配置](/collocation/pages?id=app-subNVues)
|参数 |类型 |说明 |
|--- |--- |--- |
|subNvueId |String | 原生子窗体的 ID|
**代码示例**
```javascript
const subNVue = uni.getSubNVueById('popup');
```
#### 返回值
返回一个 [subNVue](/api/window/subNVues?id=subnvue) 对象
### uni.getCurrentSubNVue()@app-getCurrentSubNVue
在一个subnvue窗体的nvue页面代码中，获取当前 `subNVues` 原生子窗体的实例。
**代码示例（注意执行在nvue页面中）**
```javascript
const subNVue = uni.getCurrentSubNVue();
```
#### 返回值
返回一个 [subNVue](/api/window/subNVues?id=subnvue) 对象
#### subNVue 对象的方法列表@subNVue
|方法 |说明 |
|--- |--- |
|show | 显示原生子窗体 |
|hide | 隐藏原生子窗体 |
|setStyle | 设置原生子窗体的样式 |
### subNVue.show (aniShow,duration,showedCB)
显示原生子窗体
|参数 |类型|默认值 |说明 |
|--- |--- |--- |--- |
|aniShow |String| auto |显示原生子窗体的动画效果 ，如果没有指定窗口动画类型，则使用默认值“auto”，即自动选择上一次显示窗口的动画效果，如果之前没有显示过，则使用“none”动画效果。[详见动画类型](/api/window/subNVues?id=动画类型)|
|duration |Number| 600 |显示原生子窗体的动画持续时间，单位为ms，如果没有设置则使用默认窗口动画时间 600ms。|
|showedCB |Function| |显示完成的回调函数，当指定原生子窗体显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。 |
**代码示例**
```javascript
subNVue.show('slide-in-left',200,()=>{
console.log('subNVue 原生子窗体显示成功');
})
```
### subNVue.hide (aniShow,duration)
隐藏原生子窗体
|参数 |类型|默认值 |说明 |
|--- |---|--- |--- |
|aniShow |String| auto |隐藏原生子窗体的动画效果 ，如果没有指定窗口动画类型，则使用默认值“auto”，即自动选择上一次显示窗口的动画效果，如果之前没有显示过，则使用“none”动画效果。[详见动画类型](/api/window/subNVues?id=动画类型)|
|duration |Number| 600 |隐藏原生子窗体的动画持续时间，单位为ms，如果没有设置则使用默认窗口动画时间 600ms。 |
**代码示例**
```javascript
subNVue.hide('slide-out-left',200);
```
### subNVue.setStyle (style)
设置原生子窗体的样式
|参数 |类型 |说明 |
|--- |--- |--- |
|style |Object | 原生子窗体的样式 |
**原生子窗体的样式**
|属性|类型|默认值|描述|
|:-|:-|:-|:-|
|position|String|absolute|原生子窗体的排版位置，排版位置决定原生子窗体在父窗口中的定位方式。 可取值："static"，原生子窗体在页面中正常定位，如果页面存在滚动条则随窗口内容滚动；"absolute"，原生子窗体在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动；"dock"，原生子窗体在页面中停靠，停靠的位置由dock属性值决定。 默认值为"absolute"。|
|dock|String|bottom|原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效，可取值："top"，原生子窗体停靠则页面顶部；"bottom"，原生子窗体停靠在页面底部；"right"，原生子窗体停靠在页面右侧；"left"，原生子窗体停靠在页面左侧。 默认值为"bottom"。|
|mask|HexColor|rgba(0,0,0,0.5)|原生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效，可取值： rgba格式字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"，表示黑色半透明；|
|width|String|100%|原生子窗体的宽度,支持百分比、像素值，默认为100%。未设置width属性值时，可同时设置left和right属性值改变窗口的默认宽度。|
|height|String|100%|原生子窗体的高度,支持百分比、像素值，默认为100%。 当未设置height属性值时，优先通过top和bottom属性值来计算原生子窗体的高度。|
|top|String|0px|原生子窗体垂直向下的偏移量，支持百分比、像素值，默认值为0px。 未设置top属性值时，优先通过bottom和height属性值来计算原生子窗体的top位置。|
|bottom|String||原生子窗体垂直向上偏移量,支持百分比、像素值，默认值无值（根据top和height属性值来自动计算）。 当同时设置了top和height值时，忽略此属性值； 当未设置height值时，可通过top和bottom属性值来确定原生子窗体的高度。|
|left|String|0px|原生子窗体水平向左的偏移量，支持百分比、像素值，默认值为0px。 未设置left属性值时，优先通过right和width属性值来计算原生子窗体的left位置。|
|right|String||原生子窗体水平向右的偏移量，支持百分比、像素值，默认无值（根据left和width属性值来自动计算）。 当设置了left和width值时，忽略此属性值； 当未设置width值时，可通过left和bottom属性值来确定原生子窗体的宽度。|
|margin|String||原生子窗体的边距，用于定位原生子窗体的位置，支持auto，auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。|
|zindex|Number||原生子窗体的窗口的堆叠顺序值，拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面，拥有相同堆叠顺序的窗口后调用show方法则在前面。|
**代码示例**
```javascript
subNVue.setStyle({
"position": "absolute", //除 popup 外，其他值域参考 5+ webview position 文档
"width": "50%",
"height": "50%",
"left":"20px",
"top":"100px"
})
```
### subNVue.postMessage(OBJECT)
发送消息
**代码示例**
```javascript
const subNVue = uni.getSubNVueById('subNvue');
subNvue.postMessage({
id:'1'
name:'subNvues'
})
```
### subNVue.onMessage(CallBack)
监听消息
**代码示例**
```javascript
const subNVue = uni.getSubNVueById('subNvue');
subNvue.onMessage(function(data){
console.log('监听来自所属页面的 message' + JSON.stringify(data));
})
```
### 动画类型
显示动画与关闭动画，会有默认的对应规则。但是如果通过 API 原生子窗体的关闭动画类型，则不会使用默认的类型。
|zindex|Number||原生子窗体的窗口的堆叠顺序值，拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面，拥有相同堆叠顺序的窗口后调用show方法则在前面。|
**代码示例**
```javascript
subNVue.setStyle({
"position": "absolute", //除 popup 外，其他值域参考 5+ webview position 文档
"width": "50%",
"height": "50%",
"left":"20px",
"top":"100px"
})
```
### subNVue.postMessage(OBJECT)
发送消息
**代码示例**
```javascript
const subNVue = uni.getSubNVueById('subNvue');
subNvue.postMessage({
id:'1'
name:'subNvues'
})
```
### subNVue.onMessage(CallBack)
监听消息
**代码示例**
```javascript
const subNVue = uni.getSubNVueById('subNvue');
subNvue.onMessage(function(data){
console.log('监听来自所属页面的 message' + JSON.stringify(data));
})
```
### 动画类型
显示动画与关闭动画，会有默认的对应规则。但是如果通过 API 原生子窗体的关闭动画类型，则不会使用默认的类型。
|显示动画|关闭动画|显示动画描述（关闭动画与之相反）
|:-|:-|:-|
......@@ -157,15 +157,15 @@ subNvue.onMessage(function(data){
|zoom-out|zoom-in|新窗体从小到大缩放显示|
|zoom-fade-out|zoom-fade-in|新窗体从小到大逐渐放大并且从透明到不透明逐渐显示|
|pop-in|pop-out|新窗体从左侧进入，且老窗体被挤压而出|
|none|none|无动画|
详细的窗口动画说明，请参考：
- 窗口显示的动画：[AnimationTypeShow](https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeShow)
- 窗口关闭的动画：[AnimationTypeClose](https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeClose)
**注意事项**
|none|none|无动画|
详细的窗口动画说明，请参考：
- 窗口显示的动画：[AnimationTypeShow](https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeShow)
- 窗口关闭的动画：[AnimationTypeClose](https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeClose)
**注意事项**
- 了解更多 `subNVue` 原生子窗体的用途，请详读[subNVues 原生子窗体开发指南](https://ask.dcloud.net.cn/article/35948)
- 在hello uni-app的接口-界面-原生子窗体中，有完整的subNVue示例，包括带渐变色的原生导航栏、可遮盖地图的侧滑菜单、可从顶部弹出的popup、可在视频上滚动的消息列表
- 每个 `subNVue` 页面都要在 pages.json 中注册
- `subNVue` 比cover-view和plus.nativeObj.view更强大，也占用更多内存，为了保证更好的性能体验，一个vue页面不要加载太多 `subNVue` 子窗体，建议控制在三个以内
\ No newline at end of file
- 每个 `subNVue` 页面都要在 pages.json 中注册。如果需要全局弹窗，也可以直接弹出nvue页面，参考这个[插件](https://ext.dcloud.net.cn/plugin?id=953)
- `subNVue` 比cover-view和plus.nativeObj.view更强大，也占用更多内存，为了保证更好的性能体验，一个vue页面不要加载太多 `subNVue` 子窗体，建议控制在三个以内
docs/api/worker.md
浏览文件 @ f33fb3b2
......@@ -4,4 +4,5 @@
- 微信小程序：[规范详情](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
- QQ小程序：[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/worker/worker.html)
- H5：标准H5的worker仍然可以使用
docs/case.md
浏览文件 @ f33fb3b2
如特别关心App端案例，注意uni-app编译到App时，使用了DCloud的5+App引擎，拥有众多案例（包括中国邮政、中国工商、湖北银行、360等），有2亿手机用户在使用基于5+引擎开发的应用。详见[https://dcloud.io/case/](https://dcloud.io/case/)
如关心App端案例，注意uni-app编译到App时，其实是使用了DCloud的5+App引擎，该引擎拥有众多案例（包括中国工商总局、公安部、中国邮政、湖北银行、360等），有3亿手机用户在使用基于5+引擎开发的应用。详见[https://dcloud.io/case/](https://dcloud.io/case/)
uni-app已经有几十万开发者，是开发者数量和案例最丰富的多端开发框架。
我们相信还有更多优秀案例，没有被我们采集到，欢迎大家到[项目案例征集](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中新建项目获得，也可从[github](https://github.com/dcloudio/hello-uniapp)上获取。
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style"><b>Hello uni-app：</b></a>演示uni-app框架的组件、接口、模板。本项目源码可在HBuilderX中新建项目获得，也可从[github](https://github.com/dcloudio/hello-uniapp)上获取。
<div style="display:flex;justify-content: space-around;">
<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"/>
<span style="margin-top:15px;">App及H5的通用快码</span>
<span style="margin-top:15px;">App、H5、小程序通用快码</span>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg" width="200"/>
......@@ -17,7 +17,7 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多
</a>
</div>
<a href="//m3w.cn/__uni__1e99193" target="_blank" class="clear-style"><b>新闻/资讯类App模板：</b></a>基于uni-app开发的新闻/资讯类App模板，nvue 典型案例。一套代码，在 App 上使用原生渲染，并同时能编译为各端小程序和H5。本项目源码在HBuilderX中新建项目可获得。
<a href="//m3w.cn/__uni__1e99193" target="_blank" class="clear-style"><b>新闻/资讯类App模板：</b></a>nvue 典型案例，App端纯原生渲染，可左右拖动的复杂长列表，满足苛刻的性能要求。并同时能编译为小程序和H5。本项目源码在HBuilderX中新建项目可获得，并可进一步运行到各端小程序。
<div style="display:flex;justify-content: space-around;">
<a href="//m3w.cn/__uni__1e99193" target="_blank" class="clear-style barcode-view">
<img src="//img.cdn.aliyun.dcloud.net.cn/stream/qr/__UNI__1E99193.png/256" width="200"/>
......@@ -165,6 +165,8 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多
**中国银联云闪付：** App部分页面使用uni-app制作
**招商银行：** App部分页面使用uni-app制作
**拉卡拉收款宝：** App部分页面使用uni-app制作
**香橙：** 餐馆SaaS服务，手机点餐、下单、排队叫号、营销推广。[官网](http://ivcvc.com)
......@@ -173,7 +175,9 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多
**波比英语课堂：**幼儿英语启蒙神器培养国际宝宝。[App、小程序通用链接](http://m3w.cn/bbyykt)
**桂聘：** 广西区域招聘，随时随地找工作，[Android和iOS](http://www.guipin.com/jihui/)
**桂聘：**广西区域招聘。[Android和iOS](http://www.guipin.com/jihui/)
**新疆包邮：**新疆网民的专属导购APP。[Android](https://android.myapp.com/myapp/detail.htm?apkName=com.h5415379.wux)、[iOS](https://apps.apple.com/cn/app/%E6%96%B0%E7%96%86%E5%8C%85%E9%82%AE/id1433935701)
**课呱呱：**在线学习好工作。[App、小程序、H5通用链接](http://m3w.cn/__uni__b19209a)
......@@ -191,6 +195,8 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多
**共青团全国青少年弘扬中华优秀传统文化交流展示活动专题网站：**[同时适配PC和手机版的H5](https://chuancheng.xwhdw.com/)
**北京财政局某报考系统：**[H5](http://czj.beijing.gov.cn/kjbmh5)
**上海宣传系统e支部：**[H5](http://ezb.shxc.gov.cn/eParty/#/)
**广西国税：**[H5](http://www.gxgs.gov.cn:7701/#/)
......@@ -201,7 +207,7 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多
**江苏公安网上政工慰问：**[H5](https://jxt.jsga.gov.cn:10006/app/njqxgzzs/zgww/#/)
**杭州智安通：*[H5](https://hzjjzat.citydo.com.cn/vehicle-test)
**杭州智安通：**[H5](https://hzjjzat.citydo.com.cn/vehicle-test)
**深圳福田区爱福田：**[H5](https://ifutian.szft.gov.cn/masterSecond/)
......@@ -281,6 +287,8 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多
**蚂蚁猎聘：**让求职更快乐、求职招聘一站式服务平台，[Android](http://www.antliepin.com/APPobject/liepin.apk)、[iOS](https://itunes.apple.com/cn/app/id1441284344)。
**so米直播：**体育赛事直播。[H5](https://wap.smzb8.net:168/)、[App](https://smzb8.net:168/)
**有鱼严选：**专心做商品内容的导购返利APP，[Android](https://android.myapp.com/myapp/detail.htm?apkName=io.dcloud.UNI2F373EE)、[iOS](https://itunes.apple.com/cn/app/%E6%9C%89%E9%B1%BC%E4%B8%A5%E9%80%89-%E7%B2%BE%E6%8C%91%E5%A4%A9%E7%8C%AB%E5%A5%BD%E8%B4%A7%E5%B8%AE%E6%82%A8%E7%9C%81%E9%92%B1%E6%B7%98%E5%AE%9D/id1445349622?mt=8)。
**肆台：**看见世界，让世界看见（使用 nvue 实现的新闻 App）。[Android](https://android.myapp.com/myapp/detail.htm?apkName=com.sitai.zlstyle)
......@@ -341,7 +349,7 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多
**卡邦：**一款集云智能消费管理系统、全国落地POS管理系统、大数据信用评估系统为三位一体的综合管理平台类app，[H5](http://h5kb.d5x319.cn)。
**法保网：**一款提供法律服务app，[iOS](https://itunes.apple.com/cn/app/id1453634358)。
**法保网：**一款提供法律服务app，[iOS](https://itunes.apple.com/cn/app/id1453634358)、[Android](https://android.myapp.com/myapp/detail.htm?apkName=com.lawprotect)。
**遂宁之窗：**快速获取遂宁信息。[Android](http://index.scsn.cn/Appurl_AndroidVer.html)、[iOS](https://itunes.apple.com/cn/app/%E9%81%82%E5%AE%81%E4%B9%8B%E7%AA%97/id1435590219?mt=8)
......@@ -463,6 +471,17 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多
**斗豆侠：**购物App。[iOS](https://apps.apple.com/cn/app/id1395120441)、[Android](https://obs.myhwclouds.com/vipbean/xgyx_guns/APK/yq.apk)
**RUCY：**衣着搭配。[Android](https://appstore.huawei.com/app/C101136185)、[iOS](https://apps.apple.com/cn/app/rucy/id1479275199)
**BookChat：**通用电子书应用。[iOS](https://apps.apple.com/cn/app/id1481932361)、[Android](https://www.pgyer.com/bookchat-app)
**乐猪租房：**租房网站和小程序。[h5](https://h5.lezf.com/)、微信、支付宝、百度、头条搜索 乐猪租房
**稀饭旅行小程序：**微信、百度搜索 稀饭旅行
**吾爱街机：**可在小程序玩街机游戏。微信小程序搜索 吾爱街机
#### 更多小程序案例（可在微信小程序中搜索）@wx-more
......
docs/casecode.md
浏览文件 @ f33fb3b2
......@@ -4,12 +4,12 @@
- [图片App模版](https://github.com/dcloudio/uni-template-picture)：图片App模版，包含单列图、双列图，图片分类，图片轮播、预览、下载，图片分享、收藏，设置桌面背景图等功能。-- by DCloud
- [登录模板](https://github.com/dcloudio/uni-template-login)：登录/注册模板，包含微博、微信、QQ第三方登录示例 -- by DCloud
- [wxcomponents-template](https://github.com/dcloudio/uni-app/tree/master/examples/wxcomponents-template)：小程序原生组件使用示例 -- by DCloud
- [登录模板](https://github.com/dcloudio/uni-template-login)：登录/注册模板，包含微博、微信、QQ第三方登录示例 -- by DCloud
- [wxcomponents-template](https://github.com/dcloudio/uni-app/tree/master/examples/wxcomponents-template)：小程序原生组件使用示例 -- by DCloud
- [uni-template-news](https://github.com/dcloudio/uni-template-news)：基于uni-app开发的新闻/资讯类App模板 -- by DCloud
- [uni-template-news](https://github.com/dcloudio/uni-template-news)：基于uni-app开发的新闻/资讯类App模板 -- by DCloud
- [uni-app 开发资源汇总](https://github.com/aben1188/awesome-uni-app/blob/master/README.md)：uni-app 一站式学习资源/开发资源汇总 -- aben1188
- [colorUI for uni-app](https://ext.dcloud.net.cn/plugin?id=239)：colorUI官方维护的uni-app版本，酷炫漂亮的css库 -- by 文晓港
......@@ -25,13 +25,15 @@
- [WordPress与uni-app](https://ask.dcloud.net.cn/article/35704)：一个WordPress使用uni-app开发app和小程序的教程 -- by lqczzyx
- [unicmf模板](https://ext.dcloud.net.cn/plugin?id=241)：基于thinkcmf5.1(thinkphp5.1)开发的unicmf模板 -- by hrai.online
- [仿QQ音乐](https://github.com/SuiXiangjun/uniappQQmic)：基于uni-app开发仿QQ音乐 -- by SuiXiangjun
- [uni-shop](https://github.com/siberiawolf/uni-shop)：用 `uni-app` 创建的类微信应用 -- by siberiawolf
- [uni-app音乐书库](https://gitee.com/yanglilong127/uniapp_music_library)：基于 `uni-app` 的音乐电子书库 -- by burtyang
- [仿QQ音乐](https://github.com/SuiXiangjun/uniappQQmic)：基于uni-app开发仿QQ音乐 -- by SuiXiangjun
- [uni-shop](https://github.com/siberiawolf/uni-shop)：用 `uni-app` 创建的类微信应用 -- by siberiawolf
- [bookstack](https://github.com/TruthHun/BookChatApp)：通用书籍阅读APP及多端小程序 -- by www.bookstack.cn
- [uni-app音乐书库](https://gitee.com/yanglilong127/uniapp_music_library)：基于 `uni-app` 的音乐电子书库 -- by burtyang
- [仿One](https://github.com/dcloudio/uni-template-one)：基于uni-app开发仿One -- by DCloud
- [仿微信朋友圈模版](https://github.com/liuxiaoyucc/uni-app-moments)： 仿微信朋友圈模版 -- by liuxiaoyucc
......@@ -56,4 +58,4 @@
mpvue的所有开源资源都可以用于uni-app。下文汇总收集了网友开源的各种mpvue项目，涵盖了各种业务场景。
- mpvue 开源项目汇总：[https://ask.dcloud.net.cn/article/34945](https://ask.dcloud.net.cn/article/34945)
**更多开源资源，可访问uni-app插件市场**：[https://ext.dcloud.net.cn/](https://ext.dcloud.net.cn/)
\ No newline at end of file
**更多开源资源，可访问uni-app插件市场**：[https://ext.dcloud.net.cn/](https://ext.dcloud.net.cn/)
docs/collocation/App.md
浏览文件 @ f33fb3b2
......@@ -12,6 +12,7 @@
|onLaunch |当`uni-app` 初始化完成时触发（全局只触发一次） |
|onShow |当 `uni-app` 启动，或从后台进入前台显示 |
|onHide |当 `uni-app` 从前台进入后台 |
|onError |当 `uni-app` 报错时触发 |
|onUniNViewMessage|对 `nvue` 页面发送的数据进行监听，可参考 [nvue 向 vue 通讯](/use-weex?id=nvue-向-vue-通讯) |
在`App.vue`文件里使用生命周期函数，如下：
......@@ -55,6 +56,8 @@
js中操作globalData的方式如下：
`getApp().globalData.text = 'test'`
在应用onLaunch时，getApp对象还未获取，暂时可以使用this.$scope.globalData获取globalData。
如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。HBuilderX 2.0.3起，nvue页面在`uni-app`编译模式下，也支持onShow。
weex编译模式中使用globalData的话，由于weex生命周期不支持onShow，但熟悉5+的话，可利用监听webview的addEventListener show事件实现onShow效果，或者直接使用weex生命周期中的beforeCreate。
......
docs/collocation/_sidebar.md
浏览文件 @ f33fb3b2
* 配置
* [pages.json](collocation/pages.md)
* [manifest.json](collocation/manifest.md)
* [package.json](collocation/package.md)
* [vue-config.js](collocation/vue-config.md)
* [uni.scss](collocation/uni-scss.md)
* [App.vue](collocation/App.md)
* [main.js](collocation/main.md)
* 框架接口
* [日志打印](collocation/frame/log.md)
* [定时器](collocation/frame/timer.md)
* [生命周期](collocation/frame/lifecycle.md)
* [页面](collocation/frame/window.md)
* [页面通讯](collocation/frame/communication.md)
* [package.json](collocation/package.md)
* [vue.config.js](collocation/vue-config.md)
* [uni.scss](collocation/uni-scss.md)
* [App.vue](collocation/App.md)
* [main.js](collocation/main.md)
* 框架接口
* [日志打印](collocation/frame/log.md)
* [定时器](collocation/frame/timer.md)
* [生命周期](collocation/frame/lifecycle.md)
* [页面](collocation/frame/window.md)
* [页面通讯](collocation/frame/communication.md)
<li></li>
<div class="contact-box">
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
......@@ -31,43 +31,43 @@
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群5：731951419 &nbsp;<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=b920bffa5218984bc31720896909b55e857a31890d57f6399fe2dc4f55ca9d43">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
<div>群32：166188631（500人已满）</div>
<div>群31：567471669（500人已满）</div>
<div>群30：371046920（500人已满）</div>
<div>群29：202965481（500人已满）</div>
<div>群28：166188776（2000人已满 </div>
<div>群27：811363410（2000人已满 </div>
<div>群26：147867597（2000人已满）</div>
<div>群25：165297000（500人已满）</div>
<div>群24：672494800（500人已满）</div>
<div>群23：599958679（500人已满）</div>
<div>群22：687186952（1000人已满）</div>
<div>群21：717019120（2000人已满）</div>
<div>群20：165796402（500人已满）</div>
<div>群19：165657124（1000人已满）</div>
<div>群18：698592271（500人已满）</div>
<div>群17：951348804（1000人已满）</div>
<div>群16：719211033（1000人已满）</div>
<div>群15：516984120（500人已满）</div>
<div>群14：465953250（500人已满）</div>
<div>群13：699478442（500人已满）</div>
<div>群12：884860657（500人已满）</div>
<div>群11：296811328（1000人已满）</div>
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（500人已满）</div>
<div>群8：695442854（500人已满）</div>
<div>群7：942061423（500人已满）</div>
<div>群6：697264024（2000人已满）</div>
<!-- <div>群5：731951419（1000人已满）</div> -->
<div>群4：942702595（1000人已满）</div>
<div>群3：773794803（1000人已满） </div>
<div>群2：901474938（1000人已满） </div>
<div>群1：531031261（1000人已满）</div>
<div>官方QQ交流群</div>
<div>群5：731951419 &nbsp;<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=b920bffa5218984bc31720896909b55e857a31890d57f6399fe2dc4f55ca9d43">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
<div>群32：166188631（500人已满）</div>
<div>群31：567471669（500人已满）</div>
<div>群30：371046920（500人已满）</div>
<div>群29：202965481（500人已满）</div>
<div>群28：166188776（2000人已满 </div>
<div>群27：811363410（2000人已满 </div>
<div>群26：147867597（2000人已满）</div>
<div>群25：165297000（500人已满）</div>
<div>群24：672494800（500人已满）</div>
<div>群23：599958679（500人已满）</div>
<div>群22：687186952（1000人已满）</div>
<div>群21：717019120（2000人已满）</div>
<div>群20：165796402（500人已满）</div>
<div>群19：165657124（1000人已满）</div>
<div>群18：698592271（500人已满）</div>
<div>群17：951348804（1000人已满）</div>
<div>群16：719211033（1000人已满）</div>
<div>群15：516984120（500人已满）</div>
<div>群14：465953250（500人已满）</div>
<div>群13：699478442（500人已满）</div>
<div>群12：884860657（500人已满）</div>
<div>群11：296811328（1000人已满）</div>
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（500人已满）</div>
<div>群8：695442854（500人已满）</div>
<div>群7：942061423（500人已满）</div>
<div>群6：697264024（2000人已满）</div>
<!-- <div>群5：731951419（1000人已满）</div> -->
<div>群4：942702595（1000人已满）</div>
<div>群3：773794803（1000人已满） </div>
<div>群2：901474938（1000人已满） </div>
<div>群1：531031261（1000人已满）</div>
</div>
</div>
<div class="contact-item">
......@@ -77,4 +77,4 @@
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
\ No newline at end of file
</div>
docs/collocation/frame/communication.md
浏览文件 @ f33fb3b2
......@@ -63,12 +63,68 @@
- 如果没有提供参数，则移除所有的事件监听器；
- 如果只提供了事件，则移除该事件所有的监听器；
- 如果同时提供了事件与回调，则只移除这个回调的监听器；
- 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
**代码示例**
```javascript
uni.$off('update',function(data){
console.log('移除 update 自定义事件');
})
`$emit`、`$on`、`$off`常用于跨页面、跨组件通讯，这里为了方便演示放在同一个页面
```html
<template>
<view class="content">
<view class="data">
<text>{{val}}</text>
</view>
<button type="primary" @click="comunicationOff">结束监听</button>
</view>
</template>
<script>
export default {
data() {
return {
val: 0
}
},
onLoad() {
setInterval(()=>{
uni.$emit('add', {
data: 2
})
},1000)
uni.$on('add', this.add)
},
methods: {
comunicationOff() {
uni.$off('add', this.add)
},
add(e) {
this.val += e.data
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.data {
text-align: center;
line-height: 40px;
margin-top: 40px;
}
button {
width: 200px;
margin: 20px 0;
}
</style>
```
......
docs/collocation/frame/lifecycle.md
浏览文件 @ f33fb3b2
......@@ -7,6 +7,7 @@
|onLaunch|当``uni-app`` 初始化完成时触发（全局只触发一次）|
|onShow|当 ``uni-app`` 启动，或从后台进入前台显示|
|onHide|当 ``uni-app`` 从前台进入后台|
|onError|当 ``uni-app`` 报错时触发|
|onUniNViewMessage|对 ``nvue`` 页面发送的数据进行监听，可参考 [nvue 向 vue 通讯](/use-weex?id=nvue-向-vue-通讯)|
**注意**
......
docs/collocation/frame/window.md
浏览文件 @ f33fb3b2
### getApp()
```getApp()``` 函数用于获取当前应用实例，一般用于获取globalData 。
**实例**
```javascript
const app = getApp()
console.log(app.globalData)
```
**注意：**
- 不要在定义于 `App()` 内的函数中，或调用 `App` 前调用 `getApp()` ，可以通过 `this.$scope` 获取对应的app实例
- 通过 `getApp()` 获取实例之后，不要私自调用生命周期函数。
### getCurrentPages()
......
docs/collocation/manifest.md
浏览文件 @ f33fb3b2
......@@ -46,9 +46,9 @@
|modules|Object|权限模块，[详见](/collocation/manifest?id=modules)||
|distribute|Object|5+App 发布信息，[详见](/collocation/manifest?id=distribute)||
|usingComponents|Boolean|是否启用自定义组件模式，默认为false，[编译模式区别详情](https://ask.dcloud.net.cn/article/35843)|1.9.0|
|nvueCompiler|String|切换 nvue 编译模式，可选值，`weex` ：老编译模式，`uni-app`： 新编译模式，默认为 `weex` 。[编译模式区别详情](http://ask.dcloud.net.cn/article/36074)|2.0.3 Alpha|
|nvueCompiler|String|切换 nvue 编译模式，可选值，`weex` ：老编译模式，`uni-app`： 新编译模式，默认为 `weex` 。[编译模式区别详情](http://ask.dcloud.net.cn/article/36074)|2.0.3|
|renderer|String|可不加载基于 webview 的运行框架，减少包体积、提升启动速度。可选值 `native`| App-nvue 2.2.0+|
|nvue|Object|nvue 页面布局初始配置，[详见](/collocation/manifest?id=nvue)|2.0.3 Alpha|
|nvue|Object|nvue 页面布局初始配置，[详见](/collocation/manifest?id=nvue)|2.0.3|
PS：这里只列出了核心部分，更多内容请参考 [完整的 manifest.json](/collocation/manifest?id=完整-manifestjson)。
**Tips**
......@@ -102,7 +102,7 @@ splash（启动封面）是App必然存在的、不可取消的。
**注意**
- 仅App云打包生效。本地打包需自行在原生工程中配置。
-
#### App Distribute@distribute
|属性|类型|描述|
......@@ -132,7 +132,7 @@ splash（启动封面）是App必然存在的、不可取消的。
|属性|类型|描述|
|:-|:-|:-|
|flex-direction|String| flex 成员项的排列方向，支持项，row：从左到右； row-reverse：从下到上；column：从上到下；column-reverse：与 row 相反，默认值 column。|
|flex-direction|String| flex 成员项的排列方向，支持项，row：从左到右； row-reverse：从右到左；column：从上到下；column-reverse：与 column 相反，默认值 column。|
### h5
......@@ -297,6 +297,7 @@ Tips：关于摇树优化（treeShaking）原理及优化结果，参考：[http
|navigateToMiniProgramAppIdList|Array|需要跳转的小程序列表，[详见](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html)|
|permission|Object|微信小程序接口权限相关设置，比如申请位置权限必须填此处[详见](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html)|
|workers|String|Worker 代码放置的目录。 [详见](https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html)|
|optimization|Object| 对微信小程序的优化配置 |
#### setting
......@@ -307,7 +308,15 @@ Tips：关于摇树优化（treeShaking）原理及优化结果，参考：[http
|urlCheck|Boolean|是否检查安全域名和 TLS 版本|
|es6|Boolean|ES6 转 ES5|
|postcss|Boolean|上传代码时样式是否自动补全|
|minified|Boolean|上传代码时是否自动压缩|
|minified|Boolean|上传代码时是否自动压缩|
#### optimization
对微信小程序的优化配置
|属性|类型|说明|
|:-|:-|:-|
|subPackages|Boolean|是否开启分包优化|
### mp-alipay
......@@ -323,6 +332,15 @@ Tips：关于摇树优化（treeShaking）原理及优化结果，参考：[http
|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) |
|optimization|Object| 对百度小程序的优化配置 |
#### optimization
对百度小程序的优化配置
|属性|类型|说明|
|:-|:-|:-|
|subPackages|Boolean|是否开启分包优化|
### mp-toutiao
......@@ -331,7 +349,7 @@ Tips：关于摇树优化（treeShaking）原理及优化结果，参考：[http
|appid|String|头条小程序的 AppID，登录 [https://developer.toutiao.com/](https://developer.toutiao.com/) 申请|
|setting|Object|头条小程序项目设置，参考[头条小程序项目设置](/collocation/manifest?id=mp-toutiao-setting)|
|usingComponents|Boolean| 是否启用自定义组件模式，`v2.0+`，默认为false，[编译模式区别详情](https://ask.dcloud.net.cn/article/35843)|
|navigateToMiniProgramAppIdList |Array|需要跳转的小程序列表，[详见](https://developer.toutiao.com/docs/framework/globalSetting.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE) |
|navigateToMiniProgramAppIdList |Array|需要跳转的小程序列表，[详见](https://developer.toutiao.com/dev/cn/mini-app/develop/framework/basic-reference/general-configuration) |
#### 头条小程序项目设置@mp-toutiao-setting
......@@ -352,8 +370,26 @@ Tips：关于摇树优化（treeShaking）原理及优化结果，参考：[http
|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 |
|optimization|Object| 对QQ小程序的优化配置 |
#### optimization
对QQ小程序的优化配置
|属性|类型|说明|
|:-|:-|:-|
|subPackages|Boolean|是否开启分包优化|
mp-qq只支持自定义组件模式，不存在usingComponents配置
### 关于分包优化的说明
- 在对应平台的配置下添加`"optimization":{"subPackages":true}`开启分包优化
- 目前只支持`mp-weixin`、`mp-qq`、`mp-baidu`的分包优化
- 分包优化具体逻辑：
+ 静态文件：分包下支持 static 等静态资源拷贝
+ js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
+ 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息
### 完整 manifest.json
......@@ -514,7 +550,7 @@ mp-qq只支持自定义组件模式，不存在usingComponents配置
}
}
},
// 屏幕方向
// 屏幕方向 需要云打包/本地打包/自定义基座生效
"orientation": [
"portrait-primary",
"landscape-primary",
......
docs/collocation/package.md
浏览文件 @ f33fb3b2
......@@ -28,10 +28,10 @@ package.json扩展配置用法（拷贝代码记得去掉注释！）：
Tips：
- `UNI_PLATFORM`仅支持填写`uni-app`默认支持的基准平台，目前仅限如下枚举值：`app-plus`、`h5`、`mp-weixin`、`mp-alipay`、`mp-baidu`、`mp-toutiao`、`mp-qq`
- `UNI_PLATFORM`仅支持填写`uni-app`默认支持的基准平台，目前仅限如下枚举值：`h5`、`mp-weixin`、`mp-alipay`、`mp-baidu`、`mp-toutiao`、`mp-qq`
- `BROWSER` 仅在`UNI_PLATFORM`为`h5`时有效,目前仅限如下枚举值：`Chrome`、`Firefox`、`IE`、`Edge`、`Safari`、`HBuilderX`
- `package.json`文件中不允许出现注释，否则扩展配置无效
- `vue-cli`需更新到最新版，HBuilderX需升级到Alpha 2.1.6+ 版本
- `vue-cli`需更新到最新版，HBuilderX需升级到 2.1.6+ 版本
#### 示例：钉钉小程序
......
docs/collocation/pages.md
浏览文件 @ f33fb3b2
......@@ -48,16 +48,18 @@
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
}
},
"pageOrientation": "portrait"//全局屏幕旋转设置(仅微信/QQ小程序)，支持 auto / portrait / landscape
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "56px",
"fontSize": "12px",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
......@@ -71,7 +73,7 @@
}],
"midButton": {
"width": "80px",
"height": "56px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
......@@ -100,7 +102,7 @@
|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 / landscape 详见 [响应显示区域变化](https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html)|微信小程序|
|animationType|String|pop-in|窗口显示的动画效果，详见：[窗口动画](api/router?id=animation)|App|
|animationDuration|Number|300|窗口显示动画的持续时间，单位为 ms|App|
|app-plus|Object||设置编译到 App 平台的特定样式，配置项参考下方 [app-plus](/collocation/pages?id=app-plus)|App|
......@@ -263,7 +265,7 @@
|:-|:-|:-|:-|:-|
|titleNView|Object||导航栏 ，详见:[导航栏](/collocation/pages?id=app-titleNView)|App、H5|
|subNVues|Object||原生子窗体，详见:[原生子窗体](/collocation/pages?id=app-subNVues)|App 1.9.10+|
|bounce|String||页面回弹效果，设置为 "none" 时关闭效果。|App（nvue Android暂无bounce效果）|
|bounce|String||页面回弹效果，设置为 "none" 时关闭效果。|App（nvue Android无页面级bounce效果，仅list、recycle-list、waterfall等滚动组件有bounce效果）|
|softinputNavBar|String|auto|iOS软键盘上完成工具栏的显示模式，设置为 "none" 时关闭工具栏。|仅ios生效|
|softinputMode|String|adjustPan|软键盘弹出模式，支持 adjustResize、adjustPan 两种模式|App|
|pullToRefresh|Object||下拉刷新|App|
......@@ -271,7 +273,7 @@
|animationType|String|pop-in|窗口显示的动画效果，详见：[窗口动画](api/router?id=animation)。|App|
|animationDuration|Number|300|窗口显示动画的持续时间，单位为 ms。|App|
**Tips**
- `.nvue` 页面仅支持 `titleNView` 配置，其它配置项暂不支持
- `.nvue` 页面仅支持 `titleNView、pullToRefresh` 配置，其它配置项暂不支持
#### 导航栏@app-titleNView
|属性|类型|默认值|描述|版本兼容性|
......@@ -282,15 +284,16 @@
|titleOverflow|String|ellipsis|标题文字超出显示区域时处理方式。"clip"-超出显示区域时内容裁剪；"ellipsis"-超出显示区域时尾部显示省略标记（...）。||
|titleText|String||标题文字内容||
|titleSize|String||标题文字字体大小||
|type|String|default|导航栏样式。"default"-默认样式；"transparent"-滚动透明渐变；"float"-悬浮导航栏。||
|type|String|default|导航栏样式。"default"-默认样式；"transparent"-滚动透明渐变；"float"-悬浮导航栏。|App-nvue 2.4.4+ 支持|
|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|
**Tips**
- 每个页面均支持通过配置 `titleNView:false` 来禁用原生导航栏。一旦禁用原生导航，请注意阅读[自定义导航注意事项](/collocation/pages?id=customnav)。
- 页面支持通过配置 navigationStyle为custom，或titleNView为false，来禁用原生导航栏。一旦禁用原生导航，请注意阅读[自定义导航注意事项](/collocation/pages?id=customnav)。
- `titleNView` 不能设置 `autoBackButton`、`homeButton`等属性
- `titleNView` 的 `type` 值为 `transparent` 时，导航栏为滚动透明渐变导航栏，默认只有button，滚动后标题栏底色和title文字会渐变出现； `type` 为 `float` 时，导航栏为悬浮标题栏，此时页面内容上顶到了屏幕顶部，包括状态栏，但导航栏悬浮盖在页面上方，一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。
- `titleNView` 的 `type` 值为 `transparent` 时，导航栏为滚动透明渐变导航栏，默认只有button，滚动后标题栏底色和title文字会渐变出现； `type` 为 `float` 时，导航栏为悬浮标题栏，此时页面内容上顶到了屏幕顶部，包括状态栏，但导航栏悬浮盖在页面上方，一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。
- `titleNView` 的 `type` 值为 `transparent` 时，App-nvue 2.4.4+ 支持
- 在 `titleNView` 配置 `buttons` 后，监听按钮的点击事件，vue 页面及 nvue 的uni-app编译模式参考：[onNavigationBarButtonTap](/frame?id=页面生命周期)、nvue 的weex编译模式参考：[uni.onNavigationBarButtonTap](/use-weex?id=onnavigationbarbuttontap)
- 在 `titleNView` 配置 `searchInput` 后，相关的事件监听参考：[onNavigationBarSearchInputChanged 等](/frame?id=页面生命周期)
- App下原生导航栏的按钮如果使用字体图标，注意检查字体库的名字（font-family）是否使用了默认的 iconfont，这个名字是保留字，不能作为外部引入的字体库的名字，需要调整为自定义的名称，否则无法显示。
......@@ -380,7 +383,7 @@ searchInput的点击输入框onNavigationBarSearchInputClicked、文本变化onN
"navigationBarTitleText": "详情",
"app-plus": {
"titleNView": {
"type": "transparent"//透明渐变导航栏
"type": "transparent"//透明渐变导航栏 App-nvue 2.4.4+ 支持
}
}
}
......@@ -389,7 +392,7 @@ searchInput的点击输入框onNavigationBarSearchInputClicked、文本变化onN
"style": {
"app-plus": {
"titleNView": {
"type": "transparent",//透明渐变导航栏
"type": "transparent",//透明渐变导航栏 App-nvue 2.4.4+ 支持
"searchInput": {
"backgroundColor": "#fff",
"borderRadius": "6px", //输入框圆角
......@@ -671,13 +674,14 @@ h5 平台下拉刷新动画，只有 circle 类型。
|color|HexColor|是||tab 上的文字默认颜色||
|selectedColor|HexColor|是||tab 上的文字选中时的颜色||
|backgroundColor|HexColor|是||tab 的背景色||
|borderStyle|String|否|black|tabbar 上边框的颜色，仅支持 black/white||
|borderStyle|String|否|black|tabbar 上边框的颜色，仅支持 black/white|App 2.3.4+ 支持其他颜色值|
|list|Array|是||tab 的列表，详见 list 属性说明，最少2个、最多5个 tab||
|position|String|否|bottom|可选值 bottom、top|top 值仅微信小程序支持|
|fontSize|String|否|12px|文字默认大小|App（HBuilderX 2.3.4+）|
|iconWidth|String|否|24px|图标默认宽度（高度等比例缩放）|App（HBuilderX 2.3.4+）|
|height|String|否|56px|tabBar 默认高度|App（HBuilderX 2.3.4+）|
|midButton|Object|否||中间按钮 仅在 list 项为偶数时有效|App（HBuilderX 2.3.4+）|
|fontSize|String|否|10px|文字默认大小|App 2.3.4+|
|iconWidth|String|否|24px|图标默认宽度（高度等比例缩放）|App 2.3.4+|
|spacing|String|否|3px|图标和文字的间距|App 2.3.4+|
|height|String|否|50px|tabBar 默认高度|App 2.3.4+|
|midButton|Object|否||中间按钮 仅在 list 项为偶数时有效|App 2.3.4+|
其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
......@@ -693,23 +697,25 @@ h5 平台下拉刷新动画，只有 circle 类型。
|属性|类型|必填|默认值|描述|
|:-|:-|:-|:-|:-|
|width|String|否|80px|中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度|
|height|String|否|56px|中间按钮的高度，可以大于 tabBar 高度|
|height|String|否|50px|中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果|
|text|String|否||中间按钮的文字|
|iconPath|String|否||中间按钮的图片路径|
|iconWidth|String|否|24px||图片宽度（高度等比例缩放）|
|iconWidth|String|否|24px|图片宽度（高度等比例缩放）|
|backgroundImage|String|否||中间按钮的背景图片路径|
midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap，详见[https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap](https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap)
#### **tabbar常见问题** @tips-tabbar
- tabbar 的默认高度，在不同平台不一样。App端的默认高度在HBuilderX 2.3.4起从56px调整为50px，与H5端统一。开发者也可以自行设定高度，调回56px。[详见](https://uniapp.dcloud.io/frame?id=%e5%9b%ba%e5%ae%9a%e5%80%bc)
- tabbar 的 js api 见[接口-界面-tabbar](https://uniapp.dcloud.io/api/ui/tabbar)，可实现动态显示隐藏（如弹出层无法覆盖tabbar）、内容修改（如国际化）、item加角标等功能。hello uni-app中也有示例。
- tabbar 的 item 点击事件见[页面生命周期的onTabItemTap](https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)。
- 代码跳转到tabbar页面，api只能使用[uni.switchTab](https://uniapp.dcloud.io/api/router?id=switchtab)，不能使用uni.navigateTo、uni.redirectTo；使用navigator组件跳转时必须设置[open-type="switchTab"](https://uniapp.dcloud.io/component/navigator)
- tabbar 在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，应该使用css变量`--window-bottom`，比如悬浮在tabbar上方10px的按钮，样式如下`bottom: calc(var(--window-bottom) + 10px)`
- tabbar 的默认高度，在不同平台不一样。[详见](https://uniapp.dcloud.io/frame?id=%e5%9b%ba%e5%ae%9a%e5%80%bc)
- 中间带+号的tabbar模板例子，[参考](https://ext.dcloud.net.cn/plugin?id=98)。可跨端，但+号不凸起。
- 中间带+号的tabbar模板例子，[参考](https://ext.dcloud.net.cn/plugin?id=98)。可跨端，但+号不凸起。如需中间凸起，配置tabbar的midButton。
- App端若使用nvue，自定义tabbar，没有性能体验问题。
- 纯nvue项目（manifest里renderer为native），目前使用pages.json里的tabbar反而影响性能，建议使用前端自己实现单页面的tabbar。后续会解决这个bug。
- Android App上弹出键盘顶起tabbar的问题。升级到HBuilderX 2.2后不再存在。
- 原生的tabbar只有一个且在首页。二级页如需的tab，前端自己实现。
- 原生的tabbar有且只有一个且在首页。二级页如需的tab，前端自行实现。
- 如果是需要先登录、后进入tab页面，不需要把登陆页设为首页，首页仍然是tabbar页，可参考HBuilderX新建uni-app项目时的登陆模板
- 前端弹出遮罩层挡不住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)
......@@ -792,7 +798,13 @@ subPackages 节点接收一个数组，数组每一项都是应用的子包，
|root|String|是|子包的根目录|
|pages|Array|是|子包由哪些页面组成，参数同 [pages](/collocation/pages?id=pages)|
**注意：** ```subPackages``` 里的pages的路径是 ``root`` 下的相对路径，不是全路径。
**注意：**
- ```subPackages``` 里的pages的路径是 ``root`` 下的相对路径，不是全路径。
- `uni-app`内支持对微信小程序、QQ小程序、百度小程序分包优化，[关于分包优化的说明](/collocation/manifest?id=关于分包优化的说明)
- 针对`vendor.js`过大的情况可以使用运行时压缩代码
+ `HBuilderX`创建的项目勾选`运行-->运行到小程序模拟器-->运行时是否压缩代码`
+ `cli`创建的项目可以在`pacakge.json`中添加参数`--minimize`，示例：`"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"`
**使用方法：**
......
docs/collocation/uni-scss.md
浏览文件 @ f33fb3b2
`uni.scss`文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，`uni.scss`文件里预置了一批scss变量预置。
``uni-app`` 内置了常用的样式变量，采用 scss 预处理方式，文件名为 ``uni.scss``，在代码中无需 import 这个文件即可使用这些样式变量。
``uni-app`` 官方扩展插件（uni ui）及 [插件市场](https://ext.dcloud.net.cn) 上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。
``uni-app`` 官方扩展插件及 [插件市场](https://ext.dcloud.net.cn) 上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。
开发阶段，每个 ``uni-app`` 项目在目录都会有一个 ``uni.scss`` 的文件，可以通过修改 scss 文件的变量来定制自己的插件主题，实现自定义主题功能。
``uni.scss``是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。
**注意：**
1. 如要使用这些常用变量，需要在 HBuilderX 里面安装 scss 插件；
2. 使用时需要在 style 节点上加上 ``lang="scss"``。
```
<style lang="scss">
</style>
```
3. pages.json不支持scss，原生导航栏和tabbar的动态修改只能使用js api
**以下是 uni.scss 的相关变量：**
......@@ -76,4 +79,4 @@ $uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;
```
\ No newline at end of file
```
docs/collocation/vue-config.md
浏览文件 @ f33fb3b2
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项，具体规范参考：[vue-config.js](https://cli.vuejs.org/zh/config/#vue-config-js)
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项，具体规范参考：[vue.config.js](https://cli.vuejs.org/zh/config/#vue-config-js)
**支持情况**
* CLI 工程
......
docs/component/README.md
浏览文件 @ f33fb3b2
### 基础组件
框架为开发者提供了一系列基础组件，类似HTML里的基础标签元素。
uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签元素。
但uni-app的组件与HTML不同，而是与微信小程序相同，更适合手机端使用。
但uni-app的组件与HTML不同，而是与小程序相同，更适合手机端使用。
虽然不推荐使用HTML标签，但实际上如果开发者写了`div`等标签，在编译到非H5平台时也会被编译器转换为`view`标签，类似的还有`span`转`text`、`a`转`navigator`等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。
开发者可以通过组合这些基础组件进行快速开发。
基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。
DCloud提供了扩展组件框架uni-ui（见文末），同时更多三方开发的组件也收录到插件市场。
什么是组件：
* 组件是视图层的基本组成单元。
* 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
* 一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。内容则写在两个标签之内。
```html
<template>
......@@ -29,7 +27,7 @@ DCloud提供了扩展组件框架uni-ui（见文末），同时更多三方开
**Tips**
- 所有组件与属性名都是小写，单词之间以连字符``-``连接。
- 根节点为 ``<template>``，这个 ``<template>`` 下只能有一个根``<view>``组件。
- 根节点为 ``<template>``，这个 ``<template>`` 下只能且必须有一个根``<view>``组件。这是vue单文件组件规范。
- **平台差异说明**若无特殊说明，则表示所有平台均支持。
### 属性类型
......@@ -68,7 +66,7 @@ DCloud提供了扩展组件框架uni-ui（见文末），同时更多三方开
|组件名|说明|
|:-|:-|
|[view](component/view.md)|视图容器|
|[view](component/view.md)|视图容器，类似于HTML中的div|
|[scroll-view](component/scroll-view.md)|可滚动视图容器|
|[swiper](component/swiper.md)|滑块视图容器|
......@@ -90,9 +88,9 @@ DCloud提供了扩展组件框架uni-ui（见文末），同时更多三方开
|[input](component/input.md)|输入框|
|[checkbox](component/checkbox.md)|多项选择器|
|[radio](component/radio.md)|单项选择器|
|[picker](component/picker.md)|列表选择器|
|[picker-view](component/picker-view.md)|内嵌列表选择器|
|[slider](component/slider.md)|滚动选择器|
|[picker](component/picker.md)|弹出式列表选择器|
|[picker-view](component/picker-view.md)|窗体内嵌式列表选择器|
|[slider](component/slider.md)|滑动选择器|
|[switch](component/switch.md)|开关选择器|
|[label](component/label.md)|标签|
......@@ -100,7 +98,7 @@ DCloud提供了扩展组件框架uni-ui（见文末），同时更多三方开
|组件名|说明|
|:-|:-|
|[navigator](component/navigator.md)|应用链接|
|[navigator](component/navigator.md)|页面链接。类似于HTML中的a标签|
**媒体组件（Media）：**
......@@ -110,7 +108,8 @@ DCloud提供了扩展组件框架uni-ui（见文末），同时更多三方开
|[camera](component/camera.md)|相机|
|[image](component/image.md)|图片|
|[video](component/video.md)|视频|
|[live-player](component/live-player.md)|直播|
|[live-player](component/live-player.md)|直播播放|
|[live-pusher](component/live-pusher.md)|实时音视频录制，也称直播推流|
**地图（Map）：**
......@@ -131,56 +130,107 @@ DCloud提供了扩展组件框架uni-ui（见文末），同时更多三方开
|:-|:-|
|[web-view](component/web-view.md)|web浏览器组件|
**平台开放数据（Open-data）：**
|组件名|说明|
|:-|:-|
|[open-data](component/open-data.md)|展示平台开放的数据|
**各平台专有组件**
在小程序平台和weex平台，还有一些专有组件，比如open-data，详见左侧导航
### 扩展组件（uni-ui）：@uniui
uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
注意与web开发不同，uni-ui不包括基础组件，**它是基础组件的补充**。
uni-ui不包括基础组件，**它是基础组件的补充**。
#### uni ui产品特点
1、高性能
目前为止，在小程序和混合app领域，uni ui是性能的标杆。
- 自动差量更新数据
虽然uni-app支持小程序自定义组件，所有小程序的ui库都可以用。但小程序自定义组件的ui库都需要使用setData手动更新数据，在大数据量时、或高频更新数据时，很容易产生性能问题。
而uni ui属于vue组件，uni-app引擎底层自动diff更新数据。当然其实插件市场里众多vue组件都具备这个特点。
- 优化逻辑层和视图层通讯折损
非H5，不管是小程序还是App，不管是app的webview渲染还是原生渲染，全都是逻辑层和视图层分离的。这里就有一个逻辑层和视图层通讯的折损问题。
比如在视图层拖动一个可跟手的组件，由于通讯的损耗，用js监听很难做到实时跟手。
这时就需要使用css动画以及平台底层提供的wxs、bindingx等技术。不过这些技术都比较复杂，所以uni ui里做了封装，在需要跟手式操作的ui组件，比如swiperaction列表项左滑菜单，就在底层使用了这些技术，实现了高性能的交互体验
- 背景停止
很多ui组件是会一直动的，比如轮播图、跑马灯。即便这个窗体被新窗体挡住，它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上，背景操作ui会引发很严重的性能问题，造成前台界面明显卡顿。
而uni ui的组件，会自动判断自己的显示状态，在组件不再可见时，不会再消耗硬件资源。
2、全端
uni ui的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。
比如导航栏navbar组件，会自动处理不同端的状态栏。
比如swiperaction组件，在app和微信小程序上会使用交互体验更好的wxs技术，但在不支持wxs的其他小程序端会使用js模拟类似效果。
web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。
uni ui还支持nvue原生渲染，[详见](https://github.com/dcloudio/uni-ui/tree/nvue-uni-ui)
未来uni ui还会支持pc等大屏设备。
3、与uni统计自动集成实现免打点
uni统计是优秀的多端统计平台，见[tongji.dcloud.net.cn](https://tongji.dcloud.net.cn)。
除了一张报表看全端，它的另一个重要特点是免打点。
比如使用uni ui的navbar标题栏、收藏、购物车等组件，均可实现自动打点，统计页面标题等各种行为数据。
当然你也可以关闭uni统计，这不是强制的。
4、风格扩展
uni ui的默认风格是中型的，与uni-app基础组件风格一致。但它支持[uni.scss](https://uniapp.dcloud.io/collocation/uni-scss)，可以方便的扩展和切换App的风格。
ui是一种需求非常发散的产品，DCloud官方也无意用uni ui压制第三方ui插件的空间，但官方有义务在性能和多端方面提供一个开源的标杆给大家。
我们欢迎更多优秀的ui组件出现，也欢迎更多人贡献uni ui的主题风格，满足更多用户的需求。
uni-ui支持npm安装和zip下载安装2种方式。
npm安装参考：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
下表为uni-ui的扩展组件清单，点击每个组件可单独安装。
|组件名|说明|
|:-|:-|
|[Badge](https://ext.dcloud.net.cn/plugin?id=21)| 数字角标|
|[Calendar](https://ext.dcloud.net.cn/plugin?id=56)| 日历|
|[Card](https://ext.dcloud.net.cn/plugin?id=22)| 卡片|
|[Collapse](https://ext.dcloud.net.cn/plugin?id=23)| 折叠面板|
|[CountDown](https://ext.dcloud.net.cn/plugin?id=25)| 倒计时|
|[Drawer](https://ext.dcloud.net.cn/plugin?id=26)| 抽屉|
|[Fab](https://ext.dcloud.net.cn/plugin?id=144)| 悬浮按钮|
|[Grid](https://ext.dcloud.net.cn/plugin?id=27)| 宫格|
|[Icon](https://ext.dcloud.net.cn/plugin?id=28)| 图标|
|[IndexedList](https://ext.dcloud.net.cn/plugin?id=375)| 索引列表|
|[List](https://ext.dcloud.net.cn/plugin?id=24)| 列表|
|[LoadMore](https://ext.dcloud.net.cn/plugin?id=29)| 加载更多|
|[NavBar](https://ext.dcloud.net.cn/plugin?id=52)| 自定义导航栏|
|[NoticeBar](https://ext.dcloud.net.cn/plugin?id=30)| 通告栏|
|[NumberBox](https://ext.dcloud.net.cn/plugin?id=31)| 数字输入框|
|[Pagination](https://ext.dcloud.net.cn/plugin?id=32)| 分页器|
|[PopUp](https://ext.dcloud.net.cn/plugin?id=329)| 弹出层|
|[Rate](https://ext.dcloud.net.cn/plugin?id=33)| 评分|
|[SegmentedControl](https://ext.dcloud.net.cn/plugin?id=54)| 分段器|
|[Steps](https://ext.dcloud.net.cn/plugin?id=34)| 步骤条|
|[SwipeAction](https://ext.dcloud.net.cn/plugin?id=181)| 滑动操作|
|[SwiperDot](https://ext.dcloud.net.cn/plugin?id=284)| 轮播图指示点|
#### uni ui的使用方式
uni ui支持npm安装，和HBuilderX单独导入个别组件等多种使用方式
1. npm安装参考：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
2. 下表为uni-ui的扩展组件清单，点击每个组件可单独安装。
|组件名|说明|
|:-|:-|
|[Badge](https://ext.dcloud.net.cn/plugin?id=21)| 数字角标|
|[Calendar](https://ext.dcloud.net.cn/plugin?id=56)| 日历|
|[Card](https://ext.dcloud.net.cn/plugin?id=22)| 卡片|
|[Collapse](https://ext.dcloud.net.cn/plugin?id=23)| 折叠面板|
|[CountDown](https://ext.dcloud.net.cn/plugin?id=25)| 倒计时|
|[Drawer](https://ext.dcloud.net.cn/plugin?id=26)| 抽屉|
|[Fab](https://ext.dcloud.net.cn/plugin?id=144)| 悬浮按钮|
|[Fav](https://ext.dcloud.net.cn/plugin?id=864)| 收藏按钮|
|[GoodsNav](https://ext.dcloud.net.cn/plugin?id=865)| 底部购物导航|
|[Grid](https://ext.dcloud.net.cn/plugin?id=27)| 宫格|
|[Icons](https://ext.dcloud.net.cn/plugin?id=28)| 图标|
|[IndexedList](https://ext.dcloud.net.cn/plugin?id=375)| 索引列表|
|[List](https://ext.dcloud.net.cn/plugin?id=24)| 列表|
|[LoadMore](https://ext.dcloud.net.cn/plugin?id=29)| 加载更多|
|[NavBar](https://ext.dcloud.net.cn/plugin?id=52)| 自定义导航栏|
|[NoticeBar](https://ext.dcloud.net.cn/plugin?id=30)| 通告栏|
|[NumberBox](https://ext.dcloud.net.cn/plugin?id=31)| 数字输入框|
|[Pagination](https://ext.dcloud.net.cn/plugin?id=32)| 分页器|
|[PopUp](https://ext.dcloud.net.cn/plugin?id=329)| 弹出层|
|[Rate](https://ext.dcloud.net.cn/plugin?id=33)| 评分|
|[SearchBar](https://ext.dcloud.net.cn/plugin?id=866)| 搜索栏|
|[SegmentedControl](https://ext.dcloud.net.cn/plugin?id=54)| 分段器|
|[Steps](https://ext.dcloud.net.cn/plugin?id=34)| 步骤条|
|[SwipeAction](https://ext.dcloud.net.cn/plugin?id=181)| 滑动操作|
|[SwiperDot](https://ext.dcloud.net.cn/plugin?id=284)| 轮播图指示点|
|[Tag](https://ext.dcloud.net.cn/plugin?id=35)| 标签|
**更多组件**
除了基础组件、uni-ui，插件市场还有更多扩展组件、模板，包括前端组件和原生扩展组件，具体见[插件市场](https://ext.dcloud.net.cn/)。
关于其他vue的web组件库、小程序组件库是否能在uni-app中使用的问题，参考[http://ask.dcloud.net.cn/article/35489](http://ask.dcloud.net.cn/article/35489)
\ No newline at end of file
关于其他vue的web组件库、小程序组件库是否能在uni-app中使用的问题，参考[https://ask.dcloud.net.cn/article/35489](https://ask.dcloud.net.cn/article/35489)
docs/component/button.md
浏览文件 @ f33fb3b2
......@@ -10,19 +10,19 @@
|type|String|default|按钮的样式类型|||
|plain|Boolean|false|按钮是否镂空，背景色透明|||
|disabled|Boolean|false|是否禁用|||
|loading|Boolean|false|名称前是否带 loading 图标||app-nvue 平台，在 ios 上为雪花，Android上为圆圈|
|loading|Boolean|false|名称前是否带 loading 图标||App-nvue 平台，在 ios 上为雪花，Android上为圆圈|
|form-type|String||用于 ``<form>`` 组件，点击分别会触发 ``<form>`` 组件的 submit/reset 事件|||
|open-type|String||开放能力|||
|hover-class|String|button-hover|指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果|||
|hover-class|String|button-hover|指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果||App-nvue 平台暂不支持|
|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"|微信小程序|
|@error|Handler||当使用开放能力时，发生错误的回调|open-type="launchApp"|微信小程序|
|@opensetting|Handler||在打开授权设置页并关闭后回调|open-type="openSetting"|微信小程序|
|@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 有效值**
......@@ -36,7 +36,7 @@
|值|说明|
|:-|:-|
|primary|微信小程序为绿色，5+App、百度小程序、支付宝小程序为蓝色，头条小程序为红色|
|primary|微信小程序为绿色，App、H5、百度小程序、支付宝小程序为蓝色，头条小程序为红色，QQ小程序为浅蓝色|
|default|白色|
|warn|红色|
......
docs/component/canvas.md
浏览文件 @ f33fb3b2
......@@ -20,7 +20,7 @@
* canvas 标签默认宽度 300px、高度 225px，动态修改 canvas 大小后需要重新绘制。
* 同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。
* canvas 在微信小程序、百度小程序、QQ小程序中为原生组件，层级高于前端组件，请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖，参考 [native-component](/component/native-component)。
* canvas 在App端 vue 页面不是原生组件。App-nvue下如需使用canvas，暂未封装为uni API，可参考[文档](https://github.com/dcloudio/NvueCanvasDemo)使用。
* canvas 在App端 vue 页面不是原生组件。App-nvue下如需使用canvas，暂未封装为uni API，可参考[文档](https://github.com/dcloudio/NvueCanvasDemo)使用。目前对nvue的开发者仍然建议在使用canvas时单独起一个vue页面，或者用web-view组件。
**示例：**
......
docs/component/cover-view.md
浏览文件 @ f33fb3b2
......@@ -5,7 +5,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|
......@@ -16,7 +16,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|x|√|
......@@ -44,13 +44,29 @@
**Tips**
- App端vue页面 `cover-view`、`cover-image` 中不支持嵌套其它组件，包括再次嵌套`cover-view`，仅可覆盖`video`、`map`。App端nvue页面自2.1.5起没有这些受限制。
- App端还可以使用强大的plus.nativeObj.view绘制原生内容，参考:[uni-app中使用5+界面控件](https://ask.dcloud.net.cn/article/35036)、[plus.nativeObj.view规范](https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View)
- App端vue页面 `cover-view`、`cover-image` 中不支持嵌套其它组件，包括再次嵌套`cover-view`，仅可覆盖`video`、`map`。App端nvue页面自2.1.5起没有这些限制。
- App端还可以使用plus.nativeObj.view绘制原生内容，参考:[uni-app中使用5+界面控件](https://ask.dcloud.net.cn/article/35036)、[plus.nativeObj.view规范](https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View)
- App端还提供了更灵活和强大的`subNvue`，参考[原生子窗体subNvue](/api/window/subNVues)
- 在 video 组件中使用时，若想在全屏模式下使用`cover-view`，只有在微信小程序、App端的nvue页面可实现。
- 百度小程序iOS端暂不支持一个页面有多个video时嵌套cover-view。
- 支付宝小程序中 `cover-view` 不支持嵌套。
**微信小程序的cover-view使用注意：**
- cover-view和cover-image的aria-role仅可设置为button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击
- 基础库 2.2.4 起支持 touch 相关事件，也可使用 hover-class 设置点击态
- 基础库 2.1.0 起支持设置 scale rotate 的 css 样式，包括 transition 动画
- 基础库 1.9.90 起 cover-view 支持 overflow: scroll，但不支持动态更新 overflow
- 基础库 1.9.90 起最外层 cover-view 支持 position: fixed
- 基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件map、video、canvas、camera内，避免嵌套在其他组件内。
- 基础库 1.6.0 起支持css transition动画，transition-property只支持transform (translateX, translateY)与opacity。
- 基础库 1.6.0 起支持css opacity。
- 事件模型遵循冒泡模型，但不会冒泡到原生组件。
- 文本建议都套上cover-view标签，避免排版错误。
- 只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。
- 建议子节点不要溢出父节点
- 支持使用 z-index 控制层级
- 默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;
- 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示
**示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/cover-view/cover-view)
......
docs/component/editor.md
浏览文件 @ f33fb3b2
......@@ -39,11 +39,11 @@ editor组件目前只有H5、App的vue页面和微信支持，其他端的富文
#### 支持的标签
不满足的标签会被忽略，``会被转行为`<p>`储存。
不满足的标签会被忽略，`<div>`会被转行为`<p>`储存。
| 类型 | 节点 |
| --- | --- |
| 行内元素 | ` <strong> <b> <ins> <em> <i> <u> <del> <s> <sub> <sup> <img>` |
| 行内元素 | `<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>` |
| 块级元素 | `<p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>` |
#### 支持的内连样式
......@@ -52,17 +52,15 @@ editor组件目前只有H5、App的vue页面和微信支持，其他端的富文
| 类型 | 样式 |
| --- | --- |
| 块级样式 | `text-align` `direction` `margin` `margin-top` `margin-left` `margin-right` `margin-bottom`
`padding` `padding-top` `padding-left` `padding-right` `padding-bottom` `line-height` `text-indent` |
| 行内样式 | `font` `font-size` `font-style` `font-variant` `font-weight` `font-family`
`letter-spacing` `text-decoration` `color` `background-color` |
| 块级样式 | `text-align` `direction` `margin` `margin-top` `margin-left` `margin-right` `margin-bottom` `padding` `padding-top` `padding-left` `padding-right` `padding-bottom` `line-height` `text-indent` |
| 行内样式 | `font` `font-size` `font-style` `font-variant` `font-weight` `font-family` `letter-spacing` `text-decoration` `color` `background-color` |
**注意事项**
1. 插入的 html 中事件绑定会被移除
2. formats 中的 color 属性会统一以 hex 格式返回
3. 粘贴时仅纯文本内容会被拷贝进编辑器
4. 插入 html 到编辑器内时，编辑器会删除一些不必要的标签，以保证内容的统一。例如`<p>xxx</p>`会改写为`<p>xxx</p>`
4. 插入 html 到编辑器内时，编辑器会删除一些不必要的标签，以保证内容的统一。例如`<p><span>xxx</span></p>`会改写为`<p>xxx</p>`
5. 编辑器聚焦时页面会被上推，系统行为以保证编辑区可见
**示例代码**
......
docs/component/image.md
浏览文件 @ f33fb3b2
......@@ -6,7 +6,8 @@
|:-|:-|:-|:-|:-|
|src|String||图片资源地址||
|mode|String|'scaleToFill'|图片裁剪、缩放的模式|<div style="width:68px;"></div>|
|lazy-load|Boolean|false|图片懒加载。只针对page与scroll-view下的image有效|微信小程序、5+APP、百度小程序、头条小程序|
|lazy-load|Boolean|false|图片懒加载。只针对page与scroll-view下的image有效|微信小程序、5+APP、百度小程序、头条小程序|
|fade-show|Boolean|true|图片显示动画效果|仅App-nvue 2.3.4+ Android有效|
|@error|HandleEvent||当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}||
|@load|HandleEvent||当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}|&nbsp;|
......
docs/component/input.md
浏览文件 @ f33fb3b2
......@@ -14,16 +14,16 @@
|placeholder-class|String|"input-placeholder"|指定 placeholder 的样式类||
|disabled|Boolean|false|是否禁用||
|maxlength|Number|140|最大输入长度，设置为 -1 的时候不限制最大长度||
|cursor-spacing|Number|0|指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|5+App、微信小程序、百度小程序、QQ小程序|
|cursor-spacing|Number|0|指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|App、微信小程序、百度小程序、QQ小程序|
|focus|Boolean|false|获取焦点。在 H5 平台聚焦后软键盘是否跟随弹出，取决于当前浏览器本身的规范（策略）。||
|confirm-type|String|done|设置键盘右下角按钮的文字，仅在 type="text" 时生效。||
|confirm-hold|Boolean|false|点击键盘右下角按钮时是否保持键盘不收起|5+App、微信小程序、支付宝小程序、百度小程序、QQ小程序|
|confirm-hold|Boolean|false|点击键盘右下角按钮时是否保持键盘不收起|App、微信小程序、支付宝小程序、百度小程序、QQ小程序|
|cursor|Number||指定focus时的光标位置||
|selection-start|Number|-1|光标起始位置，自动聚集时有效，需与selection-end搭配使用||
|selection-end|Number|-1|光标结束位置，自动聚集时有效，需与selection-start搭配使用||
|adjust-position|Boolean|true|键盘弹起时，是否自动上推页面|5+App（softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序|
|adjust-position|Boolean|true|键盘弹起时，是否自动上推页面|App（softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序|
|@input|EventHandle||当键盘输入时，触发input事件，event.detail = {value}|差异见下方 Tips|
|@focus|EventHandle||输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度|仅微信小程序、5+App（HBuilderX 2.2.3） 、QQ小程序支持 height|
|@focus|EventHandle||输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度|仅微信小程序、App（2.2.3+） 、QQ小程序支持 height|
|@blur|EventHandle||输入框失去焦点时触发，event.detail = {value: value}||
|@confirm|EventHandle||点击完成按钮时触发，event.detail = {value: value}|&nbsp;|
......@@ -47,8 +47,9 @@
- 小程序平台，`number` 类型只支持输入整型数字。微信开发者工具上体现不出效果，请使用真机预览。
- 如果需要在小程序平台输入浮点型数字，请使用 `digit` 类型。
- input组件若不想弹出软键盘，可设置为disable
- App平台的vue页面及 H5平台 的弹出键盘使用的是浏览器控制的键盘，丰富程度略低。可通过插件市场补足。
- [uni-app插件市场](https://ext.dcloud.net.cn/)有各种类型的模拟键盘，比如车牌键盘、身份证键盘，以及封装好的搜索框ui组件，可去插件市场搜索 [键盘](https://ext.dcloud.net.cn/search?q=%E9%94%AE%E7%9B%98)。
- App平台的vue页面及 H5平台 的弹出键盘使用的是浏览器控制的键盘，丰富程度略低。可通过插件市场找到更多类型的键盘。
- 插件市场有各种类型的模拟键盘，比如车牌键盘、身份证键盘，可去插件市场搜索 [键盘](https://ext.dcloud.net.cn/search?q=%E9%94%AE%E7%9B%98)。
- 搜索框ui组件，可参考uni ui的search组件或封装好的页面模板。[详见](https://ext.dcloud.net.cn/search?q=search)
- [uni-app插件市场](https://ext.dcloud.net.cn/)有输入文字后自动提示候选的组件，可搜索 [autocomplete](https://ext.dcloud.net.cn/search?q=autocomplete) 查看。
**confirm-type 有效值**
......@@ -62,7 +63,8 @@
|go|右下角按钮为“前往”||
|done|右下角按钮为“完成”|微信、支付宝、百度小程序、App的nvue|
App平台的nvue页面，如果是uni-app编译模式，直接使用此属性设置即可生效。如果是weex编译模式，需通过weex的api设置，[weex相关文档参考](https://weex.apache.org/zh/docs/components/input.html#%E5%B1%9E%E6%80%A7)
- App平台的nvue页面，如果是uni-app编译模式，直接使用此属性设置即可生效。如果是weex编译模式，需通过weex的api设置，[weex相关文档参考](https://weex.apache.org/zh/docs/components/input.html#%E5%B1%9E%E6%80%A7)
- App平台的vue页面不支持控制键盘右下角为“发送”，涉及聊天的建议使用nvue。
#### App平台iOS端软键盘上方横条去除方案
......@@ -99,10 +101,9 @@ App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adju
}
```
App端开发聊天类应用时，目前推荐改为adjustResize模式。在hello uni-app的模板-聊天中有详细示例。
**注意**
- adjustResize模式在Android App上，弹起键盘和收回键盘时，因为要重设webview窗体高度，可能会临时性出现灰屏或漏出下层页面内容。
- adjustResize模式在Android App上，弹起键盘和收回键盘时，因为要重设webview窗体高度，可能会在个别安卓机型闪现灰屏或漏出下层页面内容。
- 小程序端在 input 聚焦期间，避免使用 css 动画。
- H5平台只能在用户交互时修改 focus 生效。
- 如果遇到 focus 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
......
docs/component/list.md
浏览文件 @ f33fb3b2
......@@ -2,6 +2,10 @@
app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件的性能高于使用view或scroll-view的滚动。原因在于list在不可见部分的渲染资源回收有特殊的优化处理。
原生渲染的资源回收机制，与webview渲染不同。webview不需要数据有规则格式，长页面处于不可视的部分，其渲染资源会自动回收，除非webview使用区域滚动而不是页面滚动。所以vue页面只要不用scroll-view，就不需要关注这个问题。而原生渲染则必须注意。
如果需要跨端，建议使用uni-ui的uni-list组件，它会自动处理webview渲染和原生渲染的情况，在app-nvue下使用list组件，而在其他平台则使用页面滚动。详见[https://ext.dcloud.net.cn/plugin?id=24](https://ext.dcloud.net.cn/plugin?id=24)
`<list>` 组件是提供垂直列表功能的核心组件，拥有平滑的滚动和高效的内存管理，非常适合用于长列表的展示。最简单的使用方法是在 `<list>` 标签内使用一组由简单数组循环生成的 `<cell>` 标签填充。
```
......@@ -25,10 +29,11 @@ app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件
```
> **注意**
> - 不允许相同方向的 `<list>` 或者 `<scroll-view>` 互相嵌套，换句话说就是嵌套的 `<list>` / `<scroll-view>` 必须是不同的方向。
> - 相同方向 `<list>` 或者 `<scroll-view>` 互相嵌套时，Android 平台子 `<list>` 不可滚动，iOS 可以，iOS 有Bounce效果， Android仅可滚动时有
> - `<list>` 需要显式的设置其宽高，可使用 position: absolute; 定位或 width、height 设置其宽高值。
> - list是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
#### 子组件
`<list>` 的子组件只能包括以下四种组件或是 fix 定位的组件，其他形式的组件将不能被正确渲染。
......@@ -46,8 +51,8 @@ app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件
|show-scrollbar|控制是否出现滚动条|boolean|true|
|loadmoreoffset|触发 loadmore 事件所需要的垂直偏移距离（设备屏幕底部与 list 底部之间的距离），建议手动设置此值，设置大于0的值即可|number|0|
|offset-accuracy|控制 onscroll 事件触发的频率：表示两次onscroll事件之间列表至少滚动了10px。注意，将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能|number|10|
|pagingEnabled|是否按分页模式线上List，默认值false|boolean|true/false|
|scrollable|是否运行List关系|boolean|true/false|
|pagingEnabled|是否按分页模式显示List，默认值false|boolean|true/false|
|scrollable|是否允许List滚动|boolean|true/false|
`loadmoreoffset` 示意图：
......
docs/component/live-pusher.md
浏览文件 @ f33fb3b2
......@@ -51,69 +51,90 @@ whiteness|Number|0|否|美白，取值范围 0-9（iOS取值范围为1） ，0
</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));
});
}
}
}
```javascript
<script>
export default {
data: {
fil: true
},
onReady() {
this.context = uni.createLivePusherContext("livePusher", 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({
success: (a) => {
console.log("livePusher.start:" + JSON.stringify(a));
}
});
},
close: function() {
this.context.close({
success: (a) => {
console.log("livePusher.close:" + JSON.stringify(a));
}
});
},
snapshot: function() {
this.context.snapshot({
success: (e) => {
console.log(JSON.stringify(e));
}
});
},
resume: function() {
this.context.resume({
success: (a) => {
console.log("livePusher.resume:" + JSON.stringify(a));
}
});
},
pause: function() {
this.context.pause({
success: (a) => {
console.log("livePusher.pause:" + JSON.stringify(a));
}
});
},
stop: function() {
this.context.stop({
success: (a) => {
console.log(JSON.stringify(a));
}
});
},
switchCamera: function() {
this.context.switchCamera({
success: (a) => {
console.log("livePusher.switchCamera:" + JSON.stringify(a));
}
});
},
startPreview: function() {
this.context.startPreview({
success: (a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
}
});
},
stopPreview: function() {
this.context.stopPreview({
success: (a) => {
console.log("livePusher.stopPreview:" + JSON.stringify(a));
}
});
}
}
}
</script>
```
......
docs/component/map.md
浏览文件 @ f33fb3b2
......@@ -4,7 +4,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|x|
......@@ -21,6 +21,7 @@
|controls|Array||控件||
|include-points|Array||缩放视野以包含所有给定的坐标点|App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序|
|show-location|Boolean||显示带有方向的当前定位点|微信小程序、H5、百度小程序、支付宝小程序|
|polygons|Array.`<polygon>`||多边形|App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序|
|@markertap|EventHandle||点击标记点时触发|App-nvue 2.3.3+, App平台需要指定 marker 对象属性 id|
|@callouttap|EventHandle||点击标记点对应的气泡时触发||
|@controltap|EventHandle||点击控件时触发||
......@@ -96,6 +97,17 @@
|borderColor|线的边框颜色|String|否||App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|borderWidth|线的厚度|Number|否||App-nvue 2.1.5+、微信小程序、H5、百度小程序|
**polygon**<br>
指定一系列坐标点，根据 points 坐标数据生成闭合多边形
属性|说明|类型|必填|备注
:--|:--|:--|:--|:--|
points|经纬度数组|array|是|[{latitude: 0, longitude: 0}]
strokeWidth|描边的宽度|Number|否|
strokeColor|描边的颜色|String|否|十六进制|
fillColor|填充颜色|String|否|十六进制|
zIndex|设置多边形 Z 轴数值|Number|否|
**circles**
在地图上显示圆
......@@ -175,21 +187,21 @@ 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文件不存在层级问题。从微信基础库2.8.3开始，支持map组件的同层渲染，不再有层级问题。
- App端nvue文件的map和小程序拉齐度更高。vue里的map则与plus.map功能一致，和小程序的地图略有差异。App端使用map推荐用nvue。
- App端nvue文件的map和小程序拉齐度更高。vue里的map则与plus.map功能一致，和小程序的地图略有差异。**App端使用map推荐使用nvue。**
- 在涉及层级问题的小程序中和app-vue中，请勿在 scroll-view、swiper、picker-view、movable-view 中使用 `<map>` 组件。
- 小程序和 app-vue 中，css 动画对 `<map>` 组件无效。
- map 组件使用的经纬度是国测局坐标，调用 uni.getLocation 接口需要指定 type 为 gcj02。
- `<map>` 组件在不同平台的底层引擎是不同的：H5、微信小程序为腾讯地图；App、支付宝小程序为高德地图；百度小程序端为百度地图。app-vue也可以使用百度地图，在manifest中配置，但app-nvue只支持高德地图。
- map 组件默认的api是参考微信小程序的，如需要使用plus.map，可以通过`$getAppMap`获取原生地图对象，[详见](https://uniapp.dcloud.io/api/location/map)
- `<map>` 组件在不同平台的底层引擎是不同的：H5、微信小程序为腾讯地图；App、支付宝小程序为高德地图；百度小程序端为百度地图。app-vue也可以使用百度地图，在manifest中配置，但app-nvue只支持高德地图。另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要，建议使用高德地图。
- map 组件默认的api是参考微信小程序的，如需要使用plus.map，可以通过`$getAppMap`获取原生地图对象，[详见](https://uniapp.dcloud.io/api/location/map)。注意nvue的map组件不是plus.map对象，无法使用`$getAppMap`
- H5 端获取定位信息，需要部署在 **https** 服务上，本地预览（localhost）仍然可以使用 http 协议。
- 无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
- App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest文件中勾选相应模块，在SDK配置中填写Appkey。注意申请包名和打包时的包名需匹配一致。在manifest可视化界面有详细申请指南。
- App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest文件中勾选相应模块，在SDK配置中填写Appkey。注意申请包名和打包时的包名需匹配一致，证书信息匹配。在manifest可视化界面有详细申请指南。
##### FAQ
Q：应用中使用了 `<map>` 组件，打包为原生应用时，提示缺少权限模块怎么办？
A：原生的地图，依赖第三方的 SDK，因此打包移动应用时，需要勾选相关的权限并填写 key 信息。详见：[http://ask.dcloud.net.cn/article/35090](http://ask.dcloud.net.cn/article/35090)
Q：应用中使用了 `<map>` 组件，打包为App时，提示缺少权限模块怎么办？
A：App端原生地图，依赖第三方的 SDK，因此打包移动应用时，需要在manifest中勾选相关的权限并填写 key 信息。详见：[https://ask.dcloud.net.cn/article/29](https://ask.dcloud.net.cn/article/29)
Q：国外应用想使用谷歌地图/google地图怎么办？
A：1. 可以在web-view下调用谷歌的web地图；2. 可以写一个原生插件封装谷歌原生地图，具体参考uni-app插件市场的原生插件开发教程
docs/component/native-component.md
浏览文件 @ f33fb3b2
......@@ -65,11 +65,17 @@ plus.nativeObj.view的API比较原生，可以画出任何界面，但plus.nativ
- [subNVue](https://ask.dcloud.net.cn/article/35948)
subNVue是把weex渲染的原生子窗体，覆盖在vue页面上，它解决了plus.nativeObj.view的所有不足，提供了最强大的层级问题解决方案。subNVue的详细介绍见：[https://ask.dcloud.net.cn/article/35948](https://ask.dcloud.net.cn/article/35948)
subNVue是把weex渲染的原生子窗体，覆盖在vue页面上，它解决了plus.nativeObj.view的不足，提供了强大的层级问题解决方案。subNVue的详细介绍见：[https://ask.dcloud.net.cn/article/35948](https://ask.dcloud.net.cn/article/35948)
注意App的非自定义组件编译模式不支持subNVue。
- [弹出部分区域透明的nvue页面](https://ext.dcloud.net.cn/plugin?id=953)
uni-app支持在App端弹出半透明的nvue窗体。即看起来是在本窗体弹出一个元素，但实际上是弹出了一个部分区域蒙灰透明的新窗体。这样的窗体比subnvue有个优势就是可以全局复用。具体参考这个[插件](https://ext.dcloud.net.cn/plugin?id=953)
subNVue或弹出部分区域透明的nvue页面，会比plus.nativeObj.view多占用一些内存。所以如果你要覆盖的内容很简单，cover-view或plus.nativeObj.view可以简单实现，也没必要用subNVue或nvue。
subNVue强大，同时也意味着比plus.nativeObj.view多占用一些内存。所以如果你要覆盖的内容很简单，cover-view或plus.nativeObj.view可以简单实现，也没必要用subNVue。
另注意App的非自定义组件编译模式不支持subNVue。
**关于subNVue和Webview的层级问题**
subNVue的层级高于前端元素，但多个subNVue以及Webview，它们之间的也存在层级关系。
......@@ -89,4 +95,4 @@ nvue页面全部都是原生组件，互相之间没有层级问题。
#### 总结
所以如果你的层级覆盖问题比较简单，不用嵌套，且有跨端需求，就使用cover-view。
如果App端cover-view无法满足需求，且需要覆盖的原生界面比较简单，可以用plus.nativeObj.view。否则，就使用subnvue吧。
如果App端cover-view无法满足需求，且需要覆盖的原生界面比较简单，可以用plus.nativeObj.view。否则，就使用subnvue或部分区域透明的nvue吧。
docs/component/open-data.md
浏览文件 @ f33fb3b2
......@@ -12,7 +12,7 @@
该功能为各小程序平台提供的开放能力。App端和H5端不涉及此概念。
支付宝和头条没有open-data组件，但提供了API方式获取相关信息。支付宝[参考](https://docs.alipay.com/mini/api/ch8chh)、头条[参考](https://developer.toutiao.com/docs/open/getUserInfo.html)
支付宝和头条没有open-data组件，但提供了API方式获取相关信息。支付宝[参考](https://docs.alipay.com/mini/api/ch8chh)、头条[参考](https://developer.toutiao.com/dev/cn/mini-app/develop/open-capacity/user-information/getuserinfo)
**属性说明**
......
docs/component/picker-view.md
浏览文件 @ f33fb3b2
......@@ -8,9 +8,9 @@
|:-|:-|:-|:-|
|value|Array＜Number＞|数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。||
|indicator-style|String|设置选择器中间选中框的样式||
|indicator-class|String|设置选择器中间选中框的类名|头条小程序不支持|
|indicator-class|String|设置选择器中间选中框的类名|app-nvue和头条小程序不支持|
|mask-style|String|设置蒙层的样式||
|mask-class|String|设置蒙层的类名|头条小程序不支持|
|mask-class|String|设置蒙层的类名|app-nvue和头条小程序不支持|
|@change|EventHandle|当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）|&nbsp;|
**注意：**其中只可放置 `<picker-view-column/>` 组件，其他节点不会显示。
......@@ -88,5 +88,5 @@ export default {
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/picker-view.png)
**Tips**
- 微信小程序端，滚动时在iOS自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
- app-nvue 暂不支持 ``<picker-view>``
\ No newline at end of file
- 微信小程序端，滚动时在iOS自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
- 如果需要在PC端使用`picker-view`，可以配置[H5模版](https://uniapp.dcloud.io/collocation/manifest?id=h5-template)，并引入[touch-emulator.js](https://github.com/dcloudio/touchemulator)
docs/component/picker.md
浏览文件 @ f33fb3b2
#### picker
从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
**普通选择器**
......@@ -17,6 +17,7 @@
|disabled|Boolean|false|是否禁用|
|@cancel|EventHandle||取消选择或点遮罩层收起 picker 时触发|
- picker在各平台的实现是有UI差异的，有的平台如百度、支付宝小程序的Android端是从中间弹出的；有的平台支持循环滚动如微信、百度小程序；有的平台没有取消按钮如App端。但均不影响功能使用。
**多列选择器**
......@@ -24,10 +25,11 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|vue支持，nvue不支持|√|√|x|√|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|vue支持，nvue自2.4起支持|√|√|x|√|√|√|
支付宝小程序 picker 组件不支持多列选择，可以使用 picker-view 组件替代。
**属性说明**
......@@ -51,9 +53,11 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|
- 时间选择在App端调用的是os的原生时间选择控件，在不同平台有不同的ui表现
**属性说明**
......@@ -72,9 +76,11 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|
- 日期选择在App端调用的是os的原生日期选择控件，在不同平台有不同的ui表现。
**属性说明**
......@@ -102,13 +108,11 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|√|
- 因省市区选择器包含大量数据，占用体积，且很多城市数据有自维护需求，所以在App和H5平台没有内置。有两种方案解决：
1. 使用mpvue-picker代替，全端通用，自定义性更强，参考： Hello uni-app的模板-多列选择picker，或[插件市场](https://ext.dcloud.net.cn/plugin?id=115)。手机预览网址：[https://uniapp.dcloud.io/h5/pages/template/mpvue-picker/mpvue-picker](https://uniapp.dcloud.io/h5/pages/template/mpvue-picker/mpvue-picker)
2. 在H5和App平台使用多列选择器，自行填充城市数据（上述mpvue-picker或hello uni-app自带城市数据city.data.js）
- 因省市区选择器包含大量数据，占用体积，并非所有应用都需要，且很多城市数据有自维护需求，所以在App和H5平台没有内置。可以基于多列picker或picker-view，自行填充城市数据，插件市场有较多类似插件，[详见](https://ext.dcloud.net.cn/search?q=%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9)。注意基于多列picker方式的地区选择不能运行在支付宝小程序上，只有基于picker-view的可以全端运行。已知mpvue-picker插件是基于picker-view的。
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
......@@ -227,4 +231,4 @@ export default {
**注意**
- 在picker内容还在滚动时或滚动回弹动画还未结束时，点确定关闭弹出的picker，数据无法及时更新。需等待一下，或手动触停滚动再点确定。所有平台均如此
- app-nvue 平台，mode 目前仅支持 ``selector`` ``time`` ``date``
- 如果需要在PC端使用`picker`，需注意pc端没有touchmove事件，可以配置[H5模版](https://uniapp.dcloud.io/collocation/manifest?id=h5-template)，并引入[touch-emulator.js](https://github.com/dcloudio/touchemulator)来解决。hello uni-app的pc版也是使用了这个方案。
docs/component/slider.md
浏览文件 @ f33fb3b2
......@@ -74,4 +74,7 @@ export default {
示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中
预览H5效果：使用浏览器的手机模式访问[https://uniapp.dcloud.io/h5/pages/component/slider/slider](https://uniapp.dcloud.io/h5/pages/component/slider/slider)
\ No newline at end of file
预览H5效果：使用浏览器的手机模式访问[https://uniapp.dcloud.io/h5/pages/component/slider/slider](https://uniapp.dcloud.io/h5/pages/component/slider/slider)
**Tips**
- 如果需要在PC端使用`slider`，可以配置[H5模版](https://uniapp.dcloud.io/collocation/manifest?id=h5-template)，并引入[touch-emulator.js](https://github.com/dcloudio/touchemulator)
\ No newline at end of file
docs/component/textarea.md
浏览文件 @ f33fb3b2
......@@ -18,9 +18,9 @@
|cursor-spacing|Number|0|指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|5+App、微信小程序、百度小程序、头条小程序、QQ小程序|
|cursor|Number||指定focus时的光标位置|微信小程序、5+App、H5、百度小程序、头条小程序、QQ小程序|
|show-confirm-bar|Boolean|true|是否显示键盘上方带有”完成“按钮那一栏|微信小程序、百度小程序、QQ小程序|
|selection-start|Number|-1|光标起始位置，自动聚集时有效，需与selection-end搭配使用|微信小程序、5+App、H5、百度小程序、头条小程序、QQ小程序|
|selection-end|Number|-1|光标结束位置，自动聚集时有效，需与selection-start搭配使用|微信小程序、5+App、H5、百度小程序、头条小程序、QQ小程序|
|adjust-position|Boolean|true|键盘弹起时，是否自动上推页面|5+App、微信小程序、百度小程序、QQ小程序|
|selection-start|Number|-1|光标起始位置，自动聚焦时有效，需与selection-end搭配使用|微信小程序、5+App、H5、百度小程序、头条小程序、QQ小程序|
|selection-end|Number|-1|光标结束位置，自动聚焦时有效，需与selection-start搭配使用|微信小程序、5+App、H5、百度小程序、头条小程序、QQ小程序|
|adjust-position|Boolean|true|键盘弹起时，是否自动上推页面|5+App、微信小程序、百度小程序、QQ小程序|
|@focus|EventHandle||输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度|仅微信小程序、5+App（HBuilderX 2.0+ [nvue uni-app模式](http://ask.dcloud.net.cn/article/36074)） 、QQ小程序支持 height|
|@blur|EventHandle||输入框失去焦点时触发，event.detail = {value, cursor}||
|@linechange|EventHandle||输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}|头条小程序不支持|
......@@ -61,11 +61,11 @@ export default {
**Tips**
- textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 @submit。
- textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 @submit。
- `input` 事件处理函数内实时修改当前值不生效，可以延迟设置，例如：``setTimeout(() => { this.value = 100 }, 0)``。
- 微信小程序、百度小程序、头条小程序中，textarea是原生组件，层级高于前端组件，请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。覆盖textarea需要使用cover-view。[详见](/component/native-component)
- 小程序端 css 动画对 textarea 组件无效。
- H5 平台只能在用户交互时修改 focus 生效。
- H5 平台只能在用户交互时修改 focus 生效。
- 如果遇到 focus 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- 软键盘的弹起和收齐逻辑，详见[input的文档](/component/input?id=app%E5%B9%B3%E5%8F%B0ios%E7%AB%AF%E8%BD%AF%E9%94%AE%E7%9B%98%E4%B8%8A%E6%96%B9%E6%A8%AA%E6%9D%A1%E5%8E%BB%E9%99%A4%E6%96%B9%E6%A1%88)
......
docs/component/video.md
浏览文件 @ f33fb3b2
......@@ -129,7 +129,7 @@ export default {
- 视频播放格式说明：
* H5平台：支持支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。（``<video/>`` 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。
* 小程序平台：各小程序平台支持程度不同，详见各家文档：[微信小程序视频组件文档](https://developers.weixin.qq.com/miniprogram/dev/component/video.html)、支付宝不支持video组件、[百度小程序视频组件文档](https://smartprogram.baidu.com/docs/develop/component/media/#video/)、[头条小程序视频组件文档](https://developer.toutiao.com/docs/comp/video.html)
* 小程序平台：各小程序平台支持程度不同，详见各家文档：[微信小程序视频组件文档](https://developers.weixin.qq.com/miniprogram/dev/component/video.html)、支付宝不支持video组件、[百度小程序视频组件文档](https://smartprogram.baidu.com/docs/develop/component/media/#video/)、[头条小程序视频组件文档](https://developer.toutiao.com/dev/cn/mini-app/develop/component/media-component/video)
* App平台： 支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。
- video全屏后，如何自行绘制界面？比如加个标题、加个分享按钮
......@@ -145,5 +145,6 @@ export default {
- 除微信基础库 2.4.0 和app端nvue页面 2.1.5 以上，其他情况下非H5的video不能放入scroll-view和swiper。注意参考 [原生组件使用限制](/component/native-component)。
- App平台：使用 `<video/>` 组件，打包 App 时必须勾选 manifest.json->App 模块权限配置->VideoPlayer 模块。
- App平台：如果使用的视频路径为本地路径，需要配置资源为释放模式：在 manifest.json 文件内 app-plus 节点下新增 runmode 配置，设置值为liberate。
- App平台：如果想使用非原生的video，即原来普通的html5自带video，可使用web-view组件load html页面，在其中使用普通h5 video。
- H5平台： 在部分浏览器中会强制调用原生播放器播放（如：微信内置浏览器、UC浏览器等），在 x5 内核的浏览器中支持配置[同层播放器](https://x5.tencent.com/tbs/guide/video.html)。
docs/component/web-view.md
浏览文件 @ f33fb3b2
......@@ -60,7 +60,7 @@
注意：
- 小程序仅支持加载网络网页，不支持本地html
- 小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。
- App 端使用 `自定义组件模式` 时，uni.web-view.js 的最低版为 [uni.webview.1.5.1.js](https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js)
- App 端使用 `自定义组件模式` 时，uni.web-view.js 的最低版为 [uni.webview.1.5.2.js](https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js)
- App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 `uni-app 项目根目录->hybrid->html` 文件夹下，如下为一个加载本地网页的`uni-app`项目文件目录示例：
<pre v-pre="" data-lang="">
......@@ -131,18 +131,30 @@
在 `<web-view>` 加载的 HTML 中，添加以下代码：
```html
<!-- 微信 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- 支付宝的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。 -->
<script type="text/javascript">
if (navigator.userAgent.indexOf('AlipayClient') > -1) {
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
}
</script>
<!-- 百度 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。 -->
<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-1.7.0.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
```
待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
```html
......@@ -250,7 +262,7 @@ web-view组件在App和小程序中层级较高，如需要在vue页面中写代
- `<web-view>` 组件默认铺满全屏并且层级高于前端组件。App端想调节大小或再其上覆盖内容需使用plus规范。
- `<web-view>` 组件所在窗口的标题，跟随页面的 `<title>` 值的变化而变化。
- App端，web-view加载的html页面可以运行plus的api，但注意如果该页面调用了plus.key的API监听了back按键（或使用mui的封装），会造成back监听冲突。需要该html页面移除对back的监听。或按照上面的示例代码禁止网页使用plus对象
- `uni.webview.js` 最新版地址：[https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js](https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js)
- `uni.webview.js` 最新版地址：[https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js](https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js)
- 小程序平台，个人类型与海外类型的小程序使用 `web-view` 组件，提交审核时注意微信等平台是否允许使用
- 小程序平台， `src` 指向的链接需登录小程序管理后台配置域名白名单。`5+App`和`H5` 无此限制。
......
docs/faq.md
浏览文件 @ f33fb3b2
......@@ -24,18 +24,20 @@
**uni-app App资源热更新：** [https://ask.dcloud.net.cn/article/35667](https://ask.dcloud.net.cn/article/35667)
**App初期启动的引导轮播：** 因为是App专用，为了更好的性能，推荐使用nvue制作。参考插件市场已经封装的插件[https://ext.dcloud.net.cn/plugin?id=676](https://ext.dcloud.net.cn/plugin?id=676)
**App全面屏底部安全区适配：**[https://ask.dcloud.net.cn/article/35564](https://ask.dcloud.net.cn/article/35564)
**App全面屏、安全区、刘海屏适配：**[https://ask.dcloud.net.cn/article/35564](https://ask.dcloud.net.cn/article/35564)
**App权限状态判断及引导：**[https://ext.dcloud.net.cn/plugin?id=594](https://ext.dcloud.net.cn/plugin?id=594)
**App打包资源文件进行加密：**[https://ask.dcloud.net.cn/article/36437](https://ask.dcloud.net.cn/article/36437)
**uni-app 中使用 5+ 的原生界面控件（包括map、video、livepusher、barcode、nview）：**[https://ask.dcloud.net.cn/article/35036](https://ask.dcloud.net.cn/article/35036)
**App分享到微信时分享为小程序：**[使用plus.share，设置分享类型为miniProgram](https://www.html5plus.org/doc/zh_cn/share.html#plus.share.WeixinMiniProgramOptions)。注意uni-app不需要plus ready，将plus ready里的代码写到页面的onLoad生命周期即可
**App启动微信小程序：**[使用plus.share的launchMiniProgram](https://www.html5plus.org/doc/zh_cn/share.html#plus.share.ShareService.launchMiniProgram)。注意uni-app不需要plus ready，将plus ready里的代码写到页面的onLoad生命周期即可
**App初期启动的引导轮播：** 因为是App专用，为了更好的性能，推荐使用nvue制作。参考插件市场已经封装的插件[https://ext.dcloud.net.cn/plugin?id=676](https://ext.dcloud.net.cn/plugin?id=676)
## H5常见问题
**uni-app 的 H5 版使用注意事项：**[https://ask.dcloud.net.cn/article/35232](https://ask.dcloud.net.cn/article/35232)
......
docs/frame.md
浏览文件 @ f33fb3b2
......@@ -61,6 +61,7 @@
|onLaunch|当``uni-app`` 初始化完成时触发（全局只触发一次）|
|onShow|当 ``uni-app`` 启动，或从后台进入前台显示|
|onHide|当 ``uni-app`` 从前台进入后台|
|onError|当 `uni-app` 报错时触发 |
|onUniNViewMessage|对 ``nvue`` 页面发送的数据进行监听，可参考 [nvue 向 vue 通讯](/use-weex?id=nvue-向-vue-通讯)|
**注意**
......@@ -425,12 +426,12 @@ uni-app 提供内置 CSS 变量
### 固定值
`uni-app` 中以下组件的高度是固定的，不可修改：
|组件|描述|5+App|H5|
|组件|描述|App|H5|
|:-|:-|:-|:-|
|NavigationBar|导航栏|44px|44px|
|TabBar|底部选项卡|56px|50px|
|TabBar|底部选项卡|HBuilderX 2.3.4之前为56px，2.3.4起和H5调为一致，统一为 50px。但可以自主更改高度）|50px|
各小程序平台，包括同小程序平台的iOS和Android的高度也不一样。TabBar在App端默认高度，与微信iOS版主界面的tabbar高度保持一致。
各小程序平台，包括同小程序平台的iOS和Android的高度也不一样。
### Flex布局
......@@ -443,9 +444,10 @@ uni-app 提供内置 CSS 变量
- 支持 base64 格式图片。
- 支持网络路径图片。
- 使用本地路径背景图片需注意：
1. 图片小于 40kb，``uni-app`` 会自动将其转化为 base64 格式；
2. 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
1. 图片小于 40kb，``uni-app`` 会自动将其转化为 base64 格式
2. 图片大于等于 40kb， 需开发者自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
4. `uni-app v3`版本设定为不自动将图片转 base64 格式
```css
.test2 {
background-image: url('~@/static/logo.png');
......@@ -534,12 +536,21 @@ uni-app 提供内置 CSS 变量
## ES6 支持
uni-app 在支持绝大部分 ES6 API 的同时，也支持了 ES7 的 await/async。
ES6 API 的支持，详见如下表格部分（`x` 表示不支持，无特殊说明则表示支持。不区分App、小程序、H5）：
ES6 API 的支持，详见如下表格部分（`x` 表示不支持，无特殊说明则表示支持）：
- 因为iOS上不允许三方js引擎，所以iOS上不区分App、小程序、H5，各端均仅依赖iOS版本。
- 各端Android版本有差异：
* App端的数据见下表；
* H5端数据见caniuse；
* 微信小程序[详见](https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/js-support.html#%E5%AE%A2%E6%88%B7%E7%AB%AF%20ES6%20API%20%E6%94%AF%E6%8C%81%E6%83%85%E5%86%B5)
* 阿里小程序[详见](https://docs.alipay.com/mini/framework/implementation-detail)
* 百度小程序[详见](https://smartprogram.baidu.com/docs/develop/framework/operating-environment/)
* 头条小程序[详见](https://developer.toutiao.com/dev/cn/mini-app/develop/framework/mini-app-runtime/javascript-support)
* QQ小程序[详见](https://q.qq.com/wiki/develop/miniprogram/frame/useful/useful_env.html#es6%E6%94%AF%E6%8C%81%E6%83%85%E5%86%B5)
|String|iOS8|iOS9|iOS10|Android|
|:-|:-|:-|:-|:-|
|codePointAt|||||
|normalize|x|x|||
|normalize|x|x||仅支持 NFD/NFC|
|includes|||||
|startsWith|||||
|endsWith|||||
......@@ -608,7 +619,7 @@ ES6 API 的支持，详见如下表格部分（`x` 表示不支持，无特殊
|Promise||||&nbsp;|
**注意**
- 不管哪个端都是这个数据，即便是Android4.4。因为uni-app编译器把es6语法自动转es5了。低版本Android的兼容性主要是css，太新的css语法在低版本不支持，js语法不受影响。
- App端Android支持不依赖Android版本号，即便是Android4.4也是上表数据。因为uni-app的js代码运行在自带的独立jscore中，没有js的浏览器兼容性问题。uni-app的vue页面在Android低端机上只有css浏览器兼容性问题，因为vue页面仍然渲染在webview中，受Android版本影响，太新的css语法在低版本不支持。
- 默认不需要在微信工具里继续开启es6转换。但如果用了微信的wxml自定义组件（wxcomponents目录下），uni-app编译器并不会处理这些文件中的es6代码，需要去微信工具里开启转换。从HBuilderX调起微信工具时，如果发现工程下有wxcomponents目录会自动配置微信工程打开es6转换。
......@@ -720,7 +731,7 @@ const package = require('packageName')
```
## 小程序组件支持
``uni-app`` 支持在 App 和小程序中使用**小程序自定义组件**。
``uni-app`` 支持在 App 和 小程序 中使用**小程序自定义组件**。
**平台差异说明**
......@@ -934,25 +945,26 @@ slide-view.vue
**注意事项**
* 小程序组件需要放在项目特殊文件夹 ``wxcomponents``（或 mycomponents、swancomponents）。HBuilderX 建立的工程 ``wxcomponents`` 文件夹在 项目根目录下。vue-cli 建立的工程 ``wxcomponents`` 文件夹在 ``src`` 目录下。可以在 vue.config.js 中自定义其他目录。
* 当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是页面级配置。
* 注意数据和事件绑定的差异，使用时应按照 vue 的数据和事件绑定方式
- 属性绑定从 attr="{{ a }}"，改为 :attr="a"；从 title="复选框{{ item }}" 改为 :title="'复选框' + item"
- 事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"
- 阻止事件冒泡 从 catch:tap="xx" 改为 @tap.native.stop="xx"
- wx:if 改为 v-if
- wx:for="{{ list }}" wx:key="{{ index }}" 改为`v-for="(item,index) in list"
- 原事件命名以短横线分隔的需要手动修改小程序组件源码为驼峰命名，比如：*this.$emit('left-click')* 修改为 *this.$emit('leftClick')*（HBuilderX 1.9.0+ 不再需要修改此项）
* 小程序组件需要放在项目特殊文件夹 ``wxcomponents``（或 mycomponents、swancomponents）。HBuilderX 建立的工程 ``wxcomponents`` 文件夹在 项目根目录下。vue-cli 建立的工程 ``wxcomponents`` 文件夹在 ``src`` 目录下。可以在 vue.config.js 中自定义其他目录
* 小程序组件的性能，不如vue组件。使用小程序组件，需要自己手动setData，很难自动管理差量数据更新。而使用vue组件会自动diff更新差量数据。所以如无明显必要，建议使用vue组件而不是小程序组件。比如某些小程序ui组件，完全可以用更高性能的uni ui替代。
* 当需要在 `vue` 组件中使用小程序组件时，注意在 `pages.json` 的 `globalStyle` 中配置 `usingComponents`，而不是页面级配置。
* 注意数据和事件绑定的差异，使用时应按照 `vue` 的数据和事件绑定方式
- 属性绑定从 `attr="{{ a }}"`，改为 `:attr="a"`；从 `title="复选框{{ item }}"` 改为 `:title="'复选框' + item"`
- 事件绑定从 `bind:click="toggleActionSheet1"` 改为 `@click="toggleActionSheet1"`
- 阻止事件冒泡 从 `catch:tap="xx"` 改为 `@tap.native.stop="xx"`
- `wx:if` 改为 `v-if`
- `wx:for="{{ list }}" wx:key="{{ index }}"` 改为`v-for="(item,index) in list"`
- 原事件命名以短横线分隔的需要手动修改小程序组件源码为驼峰命名，比如：`this.$emit('left-click')` 修改为 `this.$emit('leftClick')`（HBuilderX 1.9.0+ 不再需要修改此项）
详细的小程序转uni-app语法差异可参考文档[https://ask.dcloud.net.cn/article/35786](https://ask.dcloud.net.cn/article/35786)。
## WXS
WXS是微信小程序的一套脚本语言，[规范详见](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/)。
WXS是一套运行在视图层的脚本语言，[微信端的规范详见](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/)。
它的特点是运行在渲染层。当需要避免逻辑层和渲染层交互通信折损时，可采用wxs。
它的特点是运行在视图层。当需要避免逻辑层和渲染层交互通信折损时，可采用wxs。
uni-app可以将wxs代码编译到微信小程序、QQ小程序、APP、H5上（`HBuilderX 2.2.5-alpha`及以上版本）
uni-app可以将wxs代码编译到微信小程序、QQ小程序、APP、H5上（`HBuilderX 2.2.5`及以上版本）
与wxs类似，百度小程序提供了Filter、阿里小程序提供了SJS，uni-app也支持使用这些功能，并将它们编译到百度和阿里的小程序端。不过它们的功能还不如wxs强大。此外头条系小程序自身不支持类似功能。
......@@ -962,6 +974,8 @@ uni-app可以将wxs代码编译到微信小程序、QQ小程序、APP、H5上（
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(不支持nvue)|√|√|SJS|Filter|x|√|
App端nvue解决此类需求，不应该使用wxs，而是使用bindingx。
**wxs示例**
以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考[WXS 语法参考](https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/)。本示例使用wxs响应`touchmove`事件，减少视图层与逻辑层通信，使滑动更加丝滑。
......@@ -1162,7 +1176,7 @@ export default {
- 在微信自定义组件中`wxcomponents`也可以使用wxs
- `nvue`页面暂不支持wxs、sjs、filter.js
- 各个`script`标签会分别被打包至对应支持平台，不需要额外写条件编译
- 自`HBuilderX 2.2.5-alpha`开始，不推荐使用各个小程序自有的引入方式，推荐使用`script`标签引入
- 自`HBuilderX 2.2.5`开始，不推荐使用各个小程序自有的引入方式，推荐使用`script`标签引入
## 致谢
......
docs/history.md 0 → 100644
浏览文件 @ f33fb3b2
uni，读 `you ni`，是统一的意思。
很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。
DCloud于2012年开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。
2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是`B/S`模式的轻应用，而是能接近原生功能、性能的动态App，并且即点即用。
为将该技术发扬光大，DCloud将技术标准捐献给工信部旗下的HTML5中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务。
360手机助手率先接入，在其3.4版本实现应用的秒开运行。
<img src="https://img-cdn-qiniu.dcloud.net.cn/pic-3.png" style="max-width:480px;">
随后DCloud推动大众点评、携程、京东、有道词典、唯品会等众多开发者为流应用平台提供应用。
在2015年9月，DCloud推进微信团队开展小程序业务，演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例，以及分享了webview体验优化的经验。
微信团队经过分析，于2016年初决定上线小程序业务，但其没有接入联盟标准，而是订制了自己的标准。
DCloud持续在业内普及小程序理念，推进各大流量巨头，包括手机厂商，陆续上线类似小程序/快应用等业务。
部分公司接入了联盟标准，但更多公司因利益纷争严重，标准难以统一。
技术是纯粹的，不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件正确的事情。
虽然是始作俑者，但造成混乱的局面非DCloud所愿。于是我们决定开发一个免费开源的框架。
既然各巨头无法在标准上达成一致，那么就通过这个框架为开发者抹平各平台差异。
这，就是uni-app的由来。
- 因为多年积累，所以DCloud拥有300多万开发者，并不意外
- 因为DCloud一直都有小程序的iOS、Android引擎，所以uni-app的App端和小程序端保持高度一致，并不意外
- 因为DCloud在引擎上的持续投入，所以uni-app的App端功能、性能比大多数小程序引擎都优秀，并不意外
- 因为DCloud对各家小程序太了解了，所以做好抹平各端差异的跨端框架，并不意外
现在，uni-app已经是业内最风靡的应用框架，支撑着6亿手机用户的庞大生态。
世界兜兜转转，当你踏出第一步时，随后很多事不会按你的预期发展。但只要你不忘初心，你想要的那个目标，最终会换个方式实现。
DCloud的初心是什么？
1. **为开发者提供免费、高效的开发工具，让天下没有难做的应用**
2. **改进应用形态，让用户更方便的获取数字服务**
DCloud也再次承诺不会对uni-app、HBuilderX等工具收费，感谢数百万开发者的一路陪伴，也请一直监督我们不忘初心！
docs/matter.md
浏览文件 @ f33fb3b2
......@@ -190,3 +190,10 @@ H5没有原生组件概念问题，非H5端有原生组件并引发了原生组
### 各家小程序的浏览器内核不同，会造成css兼容性问题
查阅细节参考：[https://ask.dcloud.net.cn/article/1318](https://ask.dcloud.net.cn/article/1318)
### vendor.js过大的处理方式
- 使用运行时代码压缩
+ `HBuilderX`创建的项目勾选`运行-->运行到小程序模拟器-->运行时是否压缩代码`
+ `cli`创建的项目可以在`pacakge.json`中添加参数`--minimize`，示例：`"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"`
- 使用分包优化，[关于分包优化的说明](/collocation/manifest?id=关于分包优化的说明)
\ No newline at end of file
docs/performance.md
浏览文件 @ f33fb3b2
#### 运行原理
1. 逻辑层和视图层分离，且非H5端通信有折损
##### 逻辑层和视图层分离，且非H5端通信有折损
``uni-app`` 在非H5端运行时，从架构上分为逻辑层和视图层两个部分。逻辑层负责储存数据和执行业务逻辑，视图层负责页面渲染。
``uni-app`` 在非H5端运行时，从架构上分为逻辑层和视图层两个部分。逻辑层负责执行业务逻辑，也就是运行js代码，视图层负责页面渲染。
页面加载时，联网和逻辑运算在逻辑层（Android是v8，iOS是jscore），然后会传递数据给视图层渲染。这种通信有损耗。同样，在视图层操作时，比如拖动页面，要实时传递事件给逻辑层接收，也是有损耗的。
虽然开发者在一个vue页面里写js和css，但其实，编译时就已经将它们拆分了。
2. App端渲染引擎可切换
###### 逻辑层详解
在App端，nvue页面的视图层是由原生引擎渲染的，vue页面的视图层是os的webview渲染的。
uni-app的webview渲染经过优化，性能也足够好。它比nvue弱的地方主要在于启动速度和可左右拖动的长列表。
逻辑层是运行在一个独立的jscore里的，它不依赖于本机的webview，所以一方面它没有浏览器兼容问题，可以在Android4.4上跑es6代码，另一方面，它无法运行window、document、navigator、localstorage等浏览器专用的js API。
3. app-vue和小程序的数据更新，分页面级和组件级
`jscore`就是一个标准js引擎，标准js是可以正常运行的，比如if、for、各种字符串、日期处理等。js和浏览器的区别要注意区分开来。
- 所谓浏览器的js引擎，就是jscore或v8的基础上新增了一批浏览器专用API，比如dom；
- node.js引擎，则是v8基础上补充一些电脑专用API，比如本地io；
- 那么uni-app的App端和小程序端的js引擎，其实是在jscore上补充了一批手机端常用的JS API，比如扫码。
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/jscore.jpg)
###### 视图层详解
h5和小程序平台，以及app-vue，视图层是webview。而app-nvue的视图层是基于weex改造的原生视图。
在iOS上，所有人都只能使用iOS提供的webview。它有一定的浏览器兼容问题，iOS版本不同，它的表现有细微差异。
Android上小程序大多自带了一个几十M的chromium webview，而App端没办法带这么大体积的三方包，所以App端使用了Android system webview，而系统webview跟随手机不同而有差异。
所以uni-app的js基本没有不同手机的兼容问题（因为js引擎自带了），而视图层的css，在app-vue上会有手机浏览器的css兼容问题。所以在app-vue的场景中尽量不要使用太新的css语法，除非你不打算支持低端机。
###### 逻辑层和视图层分离的利与弊
逻辑层和视图层分离，好处是js运算不卡渲染，最简单直接的感受就是：窗体动画稳。
如果开发者使用过5+App，应该有概念，webview新窗体一边做进入动画，一边自身渲染，很容易卡动画。而uni-app则无需写预载代码，新窗体渲染快且动画稳定。
但是两层分离也带来一个坏处，这两层互相通信，其实是有损耗的。
iOS还好，但Android低端机上，每次通信都要耗时几十毫秒。平时看不出来影响，但有几个场景表现明显。
1. 连续高帧率绘制canvas动画，会发现还不如webview内部绘制流程
2. 视图层滚动、跟手操作，不停反馈给逻辑层，js再处理逻辑并通知视图层做对应更新。此时会发现交互不跟手或卡
不管app-vue/小程序，还是app-nvue，都有相同的问题。
解决这类问题，在webview渲染和原生渲染引用了不同的做法。
- webview渲染的视图层
在app-vue和微信小程序上，提供了一种运行于视图层的专属js，微信叫做wxs，uni-app也沿用了这个名称。
微信里对wxs限制较多，只能实现有限的功能，app端（尤其是v3编译器下）则没有限制。
wxs中可以监听手势，以uni ui的swiperAction组件为例，手指拖动，侧边的列表菜单项要跟手滑出，此时就需要使用wxs才能实现流畅效果。
至于canvas动画，微信的canvas是原生的，无法运用wxs操作，且一样有通信折算，所以绘制动画的性能不佳。而uni-app的app-vue的canvas是webview的，并且支持wxs操作，开发者可以在普通js中传递数据和指令给wxs，在wxs里绘制动画，将不再有通信折损，实现更流畅的效果（app端需v3编译器）
- 原生渲染的视图层
在app-nvue里，折损一样存在。包括react native也有这个问题。weex发明了一套bindingx机制，可以在js里传一个表达式给原生，由原生解析后根据指令操作视图层，这个技术在uni-app里也可以使用。
bindingx作为一种表达式，它的功能不及js强大，但基本的手势监听、动画还是可以实现的，比如uni ui的swiperAction组件在app-nvue下运行时会自动启用bindingx，以实现流畅跟手。
###### app-vue和小程序的数据更新，分页面级和组件级
对于复杂页面，更新某个区域的数据时，需要把这个区域做成组件，这样更新数据时就只更新这个组件，否则会整个页面的数据更新，造成点击延迟卡顿。
这就是自定义组件编译模式的特点。
比如微博长列表页面，点击一个点赞图标，赞数要立即+1，此时这个点赞图标一定要做成组件。否则这个+1会引发页面级所有数据的更新。
比如微博长列表页面，点击一个点赞图标，赞数要立即+1，此时这个点赞按钮一定要做成组件。否则这个+1会引发页面级所有数据的更新。
app-nvue和h5不存在此问题。造成差异的原因是小程序目前只提供了组件差量更新的机制，不能自动计算所有页面差量。
#### 优化建议
**使用自定义组件模式**
##### 使用自定义组件模式
使用自定义组件模式，在manifest中配置自定义组件模式（HBuilderX1.9起新建项目默认即为自定义组件模式）。
......@@ -32,58 +81,68 @@ app-nvue和h5不存在此问题。造成差异的原因是小程序目前只提
之前的非自定义组件模式已经不再推荐，如果你的应用还是非自定义组模式，请尽快升级。
**避免使用大图**
##### 避免使用大图
页面中若大量使用大图资源，会造成页面切换的卡顿，导致系统内存升高，甚至白屏崩溃。
尤其是不要把多张大图缩小后显示在一个屏幕内，比如上传图片前选了数张几M体积的照片，然后缩小在一个屏幕中展示多张几M的大图，非常容易白屏崩溃。
**优化数据更新**
##### 优化数据更新
在 ``uni-app`` 中，定义在 data 里面的数据每次变化时都会通知视图层重新渲染页面。 所以如果不是视图所需要的变量，可以不定义在 data 中，可在外部定义变量或直接挂载在vue实例上，以避免造成资源浪费。
**长列表**
##### 长列表
- 长列表中如果每个item有一个点赞按钮，点击后点赞数字+1，此时点赞组件必须是一个单独引用的组件，才能做到差量数据更新。否则会造成整个列表数据重载。（要求自定义组件模式）
- 长列表中每个item并不一定需要做成组件，取决于你的业务中是否需要差量更新某一行item的数据，如没有此类需求则不应该引入大量组件。（点击item后背景变色，属于css调整，没有更新data数据和渲染，不涉及这个问题）
- app端nvue的长列表应该使用list组件，有自动的渲染资源回收机制。vue页面使用页面滚动的性能，好于使用scroll-view的区域滚动。
- app端nvue的长列表应该使用list组件，有自动的渲染资源回收机制。vue页面使用页面滚动的性能，好于使用scroll-view的区域滚动。uni ui封装了uList组件，强烈推荐开发者使用，避免自己写的不好产生性能问题。
- 如需要左右滑动的长列表，请在HBuilderX新建uni-app项目选新闻模板，那是一个标杆实现。自己用swiper和scroll-view做很容易引发性能问题。
**减少一次性渲染的节点数量**
##### 减少一次性渲染的节点数量
页面初始化时，逻辑层如果一次性向视图层传递很大的数据，使视图层一次性渲染大量节点，可能造成通讯变慢、页面切换卡顿，所以建议以局部更新页面的方式渲染页面。如：服务端返回100条数据，可进行分批加载，一次加载50条，500ms 后进行下一次加载。
**减少节点嵌套层级**
##### **减少节点嵌套层级**
深层嵌套的节点在页面初始化构建时往往需要更多的内存占用，并且在遍历节点时也会更慢些，所以建议减少深层的节点嵌套。
**避免视图层和逻辑层频繁进行通讯**
##### 避免视图层和逻辑层频繁进行通讯
* 减少 scroll-view 组件的 scroll 事件监听，当监听 scroll-view 的滚动事件时，视图层会频繁的向逻辑层发送数据；
* 监听 scroll-view 组件的滚动事件时，不要实时的改变 scroll-top/scroll-left 属性，因为监听滚动时，视图层向逻辑层通讯，改变 scroll-top/scroll-left 时，逻辑层又向视图层通讯，这样就可能造成通讯卡顿。
* 注意 onPageScroll 的使用，onPageScroll 进行监听时，视图层会频繁的向逻辑层发送数据；
* 多使用css动画，而不是通过js的定时器操作界面做动画
* 如果是canvas里做跟手操作，建议使用web-view组件。web-view里的页面没有逻辑层和视图层分离的概念，自然也不会有通信折损。
**优化页面切换动画**
##### 优化页面切换动画
* 页面初始化时若存在大量图片或原生组件渲染和大量数据通讯，会发生新页面渲染和窗体进入动画抢资源，造成页面切换卡顿、掉帧。建议延时100ms~300ms渲染图片或复杂原生组件，分批进行数据通讯，以减少一次性渲染的节点数量。
* App端动画效果可以自定义。popin/popout的双窗体联动挤压动画效果对资源的消耗更大，如果动画期间页面里在执行耗时的js，可能会造成动画掉帧。此时可以使用消耗资源更小的动画效果，比如slide-in-right/slide-out-right。
**优化样式渲染速度**
##### 优化背景色闪白
如果页面背景是深色，在vue页面中可能会发生新窗体刚开始动画时是灰白色背景，动画结束时才变为深色背景，造成闪屏。这是因为webview的背景生效太慢的问题。此时需将样式写在 ``App.vue`` 里，可以加速页面样式渲染速度。``App.vue`` 里面的样式是全局样式，每次新开页面会优先加载 ``App.vue`` 里面的样式，然后加载普通 vue 页面的样式。另外nvue页面不存在此问题，也可以更改为nvue页面。
* 如果页面背景是深色，在vue页面中可能会发生新窗体刚开始动画时是灰白色背景，动画结束时才变为深色背景，造成闪屏。这是因为webview的背景生效太慢的问题。此时需将样式写在 ``App.vue`` 里，可以加速页面样式渲染速度。``App.vue`` 里面的样式是全局样式，每次新开页面会优先加载 ``App.vue`` 里面的样式，然后加载普通 vue 页面的样式。
* 还可以在pages.json的globalStyle->style->app-plus->background下配置全局背景色
```json
"style": {
"app-plus": {
"background":"#000000"
}
}
```
* 另外nvue页面不存在此问题，也可以更改为nvue页面。
**使用 nvue 代替 vue**
##### 使用nvue代替vue
在 App 端 ```uni-app``` 的 nvue 页面可是基于 [weex](https://weex.apache.org/) 定制的原生渲染引擎，实现了页面原生渲染能力、提高了页面流畅性。若对页面性能要求较高可以使用此方式开发，详见：[nvue](/use-weex)。
**优化App启动速度的注意**
##### 优化启动速度
* 工程代码越多，包括背景图和本地字体文件越大，对App的启动速度有影响，应注意控制体积。<image>组件引用的前景图不影响性能。
* App端的 splash 关闭有白屏检测机制，如果首页一直白屏或首页本身就是一个空的中转页面，可能会造成 splash 10秒才关闭，可参考此文解决[https://ask.dcloud.net.cn/article/35565](https://ask.dcloud.net.cn/article/35565)
* App端使用自定义组件模式时启动速度更快，首页为nvue页面时启动速度更快
* App设置为纯nvue项目（manifest里设置app-plus下的renderer:"native"），这种项目的启动速度更快，2秒即可完成启动。因为它整个应用都使用原生渲染，不加载基于webview的那套框架。
**优化包体积**
##### 优化包体积
* uni-app发行到小程序时，自带引擎只有几十K，主要是一个定制过的vue.js核心库。如果使用了es6转es5、css对齐的功能，可能会增大代码体积，可以配置这些编译功能是否开启。
* uni-app的H5端，自带了vue.js、vue-rooter及部分es6 polyfill库，这部分的体积gzip后只有92k，和web开发使用vue基本一致。而内置组件ui库（如picker、switch等）、小程序的对齐js api等，相当于一个完善的大型ui库。但大多数应用不会用到所有内置组件和API。由此uni-app提供了摇树优化机制，未摇树优化前的uni-app整体包体积约500k，服务器部署gzip后162k。开启摇树优化需在manifest配置，[详情](https://uniapp.dcloud.io/collocation/manifest?id=optimization)。
......
docs/platform.md
浏览文件 @ f33fb3b2
......@@ -32,7 +32,7 @@ uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-
|MP-WEIXIN|微信小程序|[微信小程序](https://developers.weixin.qq.com/miniprogram/dev/api/)|
|MP-ALIPAY|支付宝小程序|[支付宝小程序](https://docs.alipay.com/mini/developer/getting-started)|
|MP-BAIDU|百度小程序|[百度小程序](https://smartprogram.baidu.com/docs/develop/tutorial/codedir/)|
|MP-TOUTIAO|头条小程序|[头条小程序](https://developer.toutiao.com/docs/framework/)|
|MP-TOUTIAO|头条小程序|[头条小程序](https://developer.toutiao.com/dev/cn/mini-app/develop/framework/basic-reference/introduction)|
|MP-QQ|QQ小程序| （目前仅cli版支持）|
|MP|微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序|&nbsp;|
......
docs/quickstart.md
浏览文件 @ f33fb3b2
......@@ -138,7 +138,7 @@ HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行
<div align=center>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190222-6.png"/>
</div>
3. 在微信开小程序发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：[微信官方教程](https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/release.html)。
3. 在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：[微信官方教程](https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/release.html)。
**发布为百度小程序：**
1. 入驻小程序并申请百度小程序AppID，参考：[百度小程序教程](https://smartprogram.baidu.com/docs/introduction/enter_application/)。
......@@ -159,12 +159,12 @@ HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行
**发布为头条小程序：**
1. 入驻头条小程序，参考：[头条小程序教程](https://developer.toutiao.com/docs/intro/create.html)。
1. 入驻头条小程序，参考：[头条小程序教程](https://developer.toutiao.com/dev/cn/mini-app/introduction/plug-in/registration)。
2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-字节跳动"，即可在 ``/unpackage/dist/build/mp-alipay`` 生成头条小程序项目代码。
<div align=center>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190222-8.png"/>
</div>
3. 在字节跳动小程序开发者工具中，导入生成的头条小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 [头条小程序后台](https://developer.toutiao.com/app/applist)，选择刚提交的版本点击提交审核，详见：[头条小程序文档](https://developer.toutiao.com/docs/intro/create.html#%E6%8F%90%E5%AE%A1%E3%80%81%E5%8F%91%E5%B8%83%E3%80%81%E6%9B%B4%E6%96%B0)。
3. 在字节跳动小程序开发者工具中，导入生成的头条小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 [头条小程序后台](https://developer.toutiao.com/app/applist)，选择刚提交的版本点击提交审核，详见：[头条小程序文档](https://developer.toutiao.com/dev/cn/mini-app/introduction/plug-in/verification)。
发布的快捷键是`Ctrl+u`。同样可拉下快速发布菜单并按数字键选择。
......
docs/release.md
浏览文件 @ f33fb3b2
此差异已折叠。
docs/resource.md
浏览文件 @ f33fb3b2
......@@ -6,9 +6,8 @@
#### 如果你熟悉h5，但不熟悉vue和小程序
1. 看完这篇[白话uni-app](http://ask.dcloud.net.cn/article/35657)
2. 看这个培训视频，从vue到uni-app全部讲了。[《uni-app 商业级应用实战》](https://ke.qq.com/course/379043?from=800006421)，出品人：腾讯课堂NEXT学院
3. 如果不愿意付费看视频，可以去vue官网自学。注意vuejs可以在html中使用，而uni-app里没有HTML，直接就是vue文件。另外vue的路由、npm可以不学
4. 不太需要专门去学习小程序开发，只看uni-app官网即可
2. DCloud与vue合作，在[vue.js官网](https://cn.vuejs.org/v2/guide/)提供了免费视频教程，也可以直达教程地址：[https://learning.dcloud.io](https://learning.dcloud.io)
3. 不太需要专门去学习小程序开发，只看uni-app官网即可
#### 如果你使用过mpvue
几乎不用学习，看完这篇即可[mpvue转uni-app指南](http://ask.dcloud.net.cn/article/34945)
......@@ -17,10 +16,11 @@
如下是三方专业培训机构的视频教程
* [《uni-app 商业级应用实战》](https://ke.qq.com/course/379043?from=800006421)，出品人：腾讯课堂NEXT学院。亮点：腾讯课堂官方出品；不懂 vue 的工程师也可快速学习；从入门到实战都包括。
* [《uni-app 跨平台应用开发教程》](http://www.hcoder.net/course/info_242.html)，出品人：hcoder 刘海君，课时：共25节。亮点：讲师经验丰富，也是graceui框架作者。
* [《uni-app 实战教程 - “悦读”项目实战》](https://ke.qq.com/course/364262?tuin=4f8da6)，出品人：hcoder 刘海君，点击[领取专享优惠劵](https://ke.qq.com/p/IYf6YNZf?tuin=4f8da6)
* [《uni-app实战仿糗事百科app开发》](https://study.163.com/course/introduction.htm?courseId=1209188809&_trace_c_p_k2_=4b765abfb2f946039c8ea6230737f6af)，出品人：帝莎IT学院。适用人群：具备Html+Css+Javascript基础知识。
* [《uni-app 实战教程 - “悦读”项目实战》](https://ke.qq.com/course/364262?tuin=4f8da6)，出品人：hcoder 刘海君，点击[领取专享优惠劵](https://ke.qq.com/p/IYf6YNZf?tuin=4f8da6)
* [《uni-app实战社区交友类app开发》](https://study.163.com/course/introduction.htm?courseId=1209188809&_trace_c_p_k2_=4b765abfb2f946039c8ea6230737f6af)，出品人：帝莎IT学院。适用人群：具备Html+Css+Javascript基础知识。
* [《uni-app仿小米商城实战》](https://study.163.com/course/courseMain.htm?courseId=1209401825&share=2&shareId=480000001892585)，出品人：帝莎IT学院。首页使用nvue开发，目前支持app端和小程序端。
* [《uni-app多端调试环境配置》](https://study.163.com/course/courseMain.htm?courseId=1209401924&share=2&shareId=480000001892585)，出品人：帝莎IT学院。
* [《uni-app实战仿微信app全栈开发》](https://study.163.com/course/courseMain.htm?courseId=1209487898&share=2&shareId=480000001892585)，出品人：帝莎IT学院。
<!-- * [《跟枫桥一起开发App》](https://www.lusita.cn)，出品人：唐枫桥，来源：源码商城（注：源码商城App、小程序本身就是基于```uni-app```开发的） -->
<!-- * [《广州番禺职业技术学院 uni-app课程》](http://doc.zengqs.com/1143144)，出品人：曾教授 -->
......@@ -48,4 +48,4 @@ uni-app跨了很多端，虽然代码层面可以开发一次，生成多端。
#### uni-app的底层框架实现原理及优化策略（高级）
通过[评测对比](https://juejin.im/post/5ca1736af265da30ae314248)，我们知道uni-app的性能比其他小程序开发框架好，但底层原理是什么？
这篇视频就是讲解uni-app框架底层的实现思路和优化策略：[《uni-app框架如何实现高性能》](https://v.qq.com/x/page/r0886mn8v6l.html)
\ No newline at end of file
这篇视频就是讲解uni-app框架底层的实现思路和优化策略：[《uni-app框架如何实现高性能》](https://v.qq.com/x/page/r0886mn8v6l.html)
docs/select.md
浏览文件 @ f33fb3b2
此差异已折叠。
docs/snippet.md
浏览文件 @ f33fb3b2
......@@ -90,33 +90,35 @@ uni.showToast({
### 使用 Chrome 调试 H5
进入 ``uni-app`` 项目，点击工具栏的运行 -> 运行到浏览器 -> 选择 Chrome，即可将 uni-app运行到 浏览器，可参考 [运行uni-app](/quickstart?id=运行uni-app)，运行到浏览器后，就能和普通 web 项目一样进行预览和调试了。
进入 ``uni-app`` 项目，`点击工具栏的运行 -> 运行到浏览器 -> 选择 Chrome`，即可将 `uni-app`运行到 浏览器，可参考 [运行uni-app](/quickstart?id=运行uni-app)，运行到浏览器后，就能和普通 `web` 项目一样进行预览和调试了。
**注意**：Chrome调试只能保证样式一致，部分原生能力是不支持的。
点 `Chrome` 控制台的 `Sources` 栏，可以给 js 打断点调试。
点 Chrome 控制台的 Sources 栏，可以给 js 打断点调试。
在 Page 下找到 webpack 里的工程目录，可直接找到对应的vue页面进行断点调试；或按 Ctrl+P搜文件名，进入页面调试；也可点击控制台的 log 信息，进入对应的页面进行调试。
在 `Page` 下找到 `webpack` 里的工程目录，可直接找到对应的`vue`页面进行断点调试；或按 `Ctrl+P`搜文件名，进入页面调试；也可点击控制台的 `log` 信息，进入对应的页面进行调试。
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/chrome-debug1.png)
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/chrome-debug2.png)
点击HBuilderX的右上角的预览按钮，可以在内置浏览器里打开H5运行结果，也可以点右键打开控制台调试，方法同上。
### 使用各家小程序开发工具调试
``uni-app`` 运行到微信web开发者工具等小程序开发工具里，可在这些工具的控制台查看 ``console`` 信息，网络请求等信息等。
页面样式调试和一般的web项目一样，通过调试的箭头选中元素即可查看相应的节点和样式，如下图：
页面样式调试和一般的`web`项目一样，通过调试的箭头选中元素即可查看相应的节点和样式，如下图：
![uni-app](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug1.png)
调试 js 时需要切换到 Sources 栏，选中想要调试的那个页面的js，进行调试（如果js代码是压缩过的，点击右下角的{}可格式化代码），如下图：
调试 `js` 时需要切换到 `Sources` 栏，根据sourcemap，找到 `webpack` 里正确的目录，选中想要调试的那个页面的`js`，进行调试（如果`js`代码是压缩过的，点击右下角的{}可格式化代码），如下图：
![uni-app](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug2.png)
### 关于 App 的调试debug
自 `HBuilderX 2.0.3+` 版本起开始支持 `App` 端的调试。
常规开发里，在HBuilderX的运行菜单里运行App，手机端的错误或console.log日志信息会直接打印到控制台。
如果需要更多功能，比如审查元素、打断点debug，则需要启动调试模式。自 `HBuilderX 2.0.3+` 版本起开始支持 `App` 端的调试。
#### 打开调试窗口
在 `HBuilderX` 中，正确运行项目： `运行 --> 运行到手机或模拟器 --> 选择设备`，项目启动后，在下方的控制台选择 `debug` 图标。
......@@ -126,10 +128,27 @@ uni.showToast({
正确打开调试窗口后，显示如下：
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-window.png)
#### Elements
根据上一步，启动完成`debug`窗口后，可以看到`Elements`。`Elements` 主要显示当前页面的组织结构，目前`Elements`只支持`nvue`。
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-elements.png)
#### console.log打日志
`console.log`是我们日常开发最常用的调试方法，`HBuilderX`中当然也不能少。
- App端提供真机运行的`console.log`日志输出，运行到真机或模拟器时，不用点`debug`按钮，操作手机，会在`HBuilderX`的控制台直接输出日志。
- 如果是比较复杂的逻辑，那就推荐使用调试工具中的`console`了。根据上一步，启动完成`debug`窗口后，执行`console.log`方法就可以看到打印的内容了。
`debug`窗口中看`console.log`的方法如下图：
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-console-new.jpg)
#### 调试页面
在调试窗口控制台的 Sources （图中指示1） 栏，可以给 js 打断点调试。
在调试窗口控制台的 `Sources` （图中指示1） 栏，可以给 `js` 打断点调试。
在 uniapp:// （图中指示2）下找到需要调试的页面，单击打开 ，在右侧可以看到我们需要调试的内容（图中指示3）。在需要调试的代码行号的位置，点击打上断点（图中指示4）。
在 `uniapp`（图中指示2）下找到需要调试的页面，单击打开 ，在右侧可以看到我们需要调试的内容（图中指示3）。在需要调试的代码行号的位置，点击打上断点（图中指示4）。
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-log.png)
......@@ -137,16 +156,25 @@ uni.showToast({
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/csdndebug-breakpoint.png)
#### 同步断点到调试器
在控制台众多代码中寻找要调试的代码是比较麻烦的一件事，`HBuilderX`的调试还提供一个便利的功能，可直接在编辑器中打断点，断点会自动同步到调试工具中。
操作步骤：在HBuilderX编辑器中对目标行的行号处点右键，在右键菜单中选择“同步断点到调试器”，然后调试控制台会自动打开对应的代码并在指定行处标记断点。演示如下：
![debug](//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/debug-console-light.gif)
Tip
- debug仅支持自定义组件模式。如果是非自定义组件模式，请在manifest里配置选为自定义组件模式。非自定义组件模式即将停止支持，[详见](https://ask.dcloud.net.cn/article/36385)
- `vue` 和 `nvue` 页面都能打断点调试
- 目前仅支持 `nvue` 页面审查元素，`vue` 页面暂不支持，`Android` 暂不支持查看 `style`
- App端提供真机运行的console.log日志输出，运行到真机或模拟器时，不用点debug按钮，操作手机，会在HBuilderX的控制台直接输出日志。
- 如果是调试App的界面和常规API，推荐编译到H5端，点HBuilderX右上角的预览，在内置浏览器里调Dom，保存后立即看到结果，调试更方便。并且H5端也支持titleNView的各种复杂设置。唯一要注意的就是css兼容性，使用太新的css在pc上预览可能正常，但低端Android上异常，具体可查询caniuse等网站。
- 常用的开发模式就是pc上使用内置浏览器预览调dom，运行到真机上看console.log。如果是很复杂的问题才使用debug。
- vue页面也可以在微信开发者工具里调试，除了plus API，其他是一样的，微信开发者工具的查看Dom和网络和存储等调试工具相对而言更完善些。
注意：即使不发布微信小程序、只发布App，也需要安装微信开发者工具。
- uni-app的App端没有5+App那种webkit remote debug
- `debug`仅支持自定义组件模式。如果是非自定义组件模式，请在`manifest`里配置选为自定义组件模式。非自定义组件模式即将停止支持，[详见](https://ask.dcloud.net.cn/article/36385)
- `vue` 和 `nvue` 页面均支持断点调试
- 目前仅支持 `nvue` 页面审查元素，`vue` 页面暂不支持，以及 `Android` 平台的 `nvue` 审查元素暂不支持查看 `style`
- App端提供真机运行的`console.log`日志输出，运行到真机或模拟器时，不用点`debug`按钮，运行手机App，会在`HBuilderX`的控制台直接输出日志。
- 如果是调试`App`的界面和常规API，推荐编译到H5端，点`HBuilderX`右上角的预览，在内置浏览器里调`Dom`，保存后立即看到结果，调试更方便。并且H5端也支持`titleNView`的各种复杂设置。唯一要注意的就是`css`兼容性，使用太新的`css`在`pc`上预览可能正常，但低端`Android`上异常，具体可查询`caniuse`等网站。
- 常用的开发模式就是`pc`上使用内置浏览器预览调dom，运行到真机上看`console.log`。如果是很复杂的问题才使用`debug`。
- vue页面也可以在微信开发者工具里调试，除了plus API，其他是一样的，微信开发者工具的查看`Dom`和网络和存储等调试工具相对而言更完善些。
注意：即使不发布微信小程序、只发布`App`，也需要安装微信开发者工具。
- uni-app的App端没有5+App那种webkit remote debug，因为uni-app的js不是运行在webview里，而是独立的jscore里。
- 部分manifest配置，如三方sdk配置，需要打包后生效的，可以打包一个自定义运行基座。打包自定义基座后运行这个自定义基座，同样可以真机运行和debug。打包正式包将无法真机运行和debug。
### 持续集成
......
docs/translate.md
浏览文件 @ f33fb3b2
......@@ -5,5 +5,7 @@
**vue h5项目转换uni-app指南：**[https://ask.dcloud.net.cn/article/36174](https://ask.dcloud.net.cn/article/36174)
**微信小程序转换uni-app指南及转换器：**[https://ask.dcloud.net.cn/article/35786](https://ask.dcloud.net.cn/article/35786)
**wepy转uni-app转换器：**[https://github.com/zhangdaren/wepy-to-uniapp](https://github.com/zhangdaren/wepy-to-uniapp)
**mpvue 项目（组件）迁移指南、示例及资源汇总：** [https://ask.dcloud.net.cn/article/34945](https://ask.dcloud.net.cn/article/34945)
docs/use-weex.md
浏览文件 @ f33fb3b2
此差异已折叠。
src/core/view/components/image/index.vue
浏览文件 @ f33fb3b2
......@@ -10,7 +10,7 @@
@resize="_resize" />
</uni-image>
</template>
<script>
<script>
export default {
name: 'Image',
props: {
......@@ -97,7 +97,7 @@ export default {
}
},
watch: {
src (newValue, oldValue) {
src (newValue, oldValue) {
this._setContentImage()
this._loadImage()
},
......@@ -112,10 +112,10 @@ export default {
}
},
mounted () {
this.availHeight = this.$el.style.height || ''
this._setContentImage()
if (!this.realImagePath) {
return
this.availHeight = this.$el.style.height || ''
this._setContentImage()
if (!this.realImagePath) {
return
}
this._loadImage()
},
......@@ -127,18 +127,18 @@ export default {
},
_fixSize () {
const elWidth = this._getWidth()
if (elWidth) {
let height = elWidth / this.ratio
// fix: 解决 Chrome 浏览器上某些情况下导致 1px 缝隙的问题
if (typeof navigator && navigator.vendor === 'Google Inc.' && height > 10) {
height = Math.round(height / 2) * 2
if (elWidth) {
let height = elWidth / this.ratio
// fix: 解决 Chrome 浏览器上某些情况下导致 1px 缝隙的问题
if (typeof navigator && navigator.vendor === 'Google Inc.' && height > 10) {
height = Math.round(height / 2) * 2
}
this.$el.style.height = height + 'px'
this.sizeFixed = true
}
},
_setContentImage () {
this.$refs.content.style.backgroundImage = this.src ? `url(${this.realImagePath})` : 'none'
},
_setContentImage () {
this.$refs.content.style.backgroundImage = this.src ? `url("${this.realImagePath}")` : 'none'
},
_loadImage () {
const _self = this
......
unpublish.js 0 → 100644
浏览文件 @ f33fb3b2
const fs = require('fs')
const path = require('path')
const shellExec = require('shell-exec')
const pkgs = fs.readdirSync(path.resolve(__dirname, 'packages'))
const version = process.argv[2]
if (!version) {
throw new Error('必须传入 version')
}
(async function() {
for (let i = 0; i < pkgs.length; i++) {
console.log(`npm unpublish @dcloudio/${pkgs[i]}@${version}`);
await shellExec(`npm unpublish @dcloudio/${pkgs[i]}@${version}`)
}
})();
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或