提交 b3bbe811 编写于 作者: Q qiang

Merge branch 'dev' into alpha

# Conflicts:
#	packages/uni-template-compiler/lib/script/traverse/data/attrs.js
......@@ -5,3 +5,4 @@ unpackage/
.idea
.DS_Store
!packages/uni-app-plus/dist
package-lock.json
......@@ -6,7 +6,7 @@
# uni-app的特点
- 开发者和案例更多:HBuilder装机量420万台,开发者社区月活百万,70多个QQ微信群承载10万人。案例众多,uni统计月活6.5亿([详见](https://uniapp.dcloud.io/case)
- 开发者和案例更多:HBuilder装机量500万台,开发者社区月活百万,70多个QQ微信群承载10万人。案例众多,uni统计月活10亿([详见](https://uniapp.dcloud.io/case)
- 性能更高(见[评测](https://juejin.im/post/5ca1736af265da30ae314248)
- 更丰富的周边生态,[插件市场](https://ext.dcloud.net.cn/)数千款插件
- 提供比小程序原生开发更好的开发体验、更高的工程化效率
......@@ -15,9 +15,9 @@
## 扫码体验
一套代码编译到8个平台,开发一次、多处运行,这不是梦想,而是现实。依次扫描8个二维码,亲自体验最全面的跨平台效果!
开发一次,编译到10个平台。依次扫描10个二维码,亲自体验最全面的跨平台效果!
<img src="https://img-cdn-qiniu.dcloud.net.cn/uni-app-qr-all.jpg"/>
<img src="https://img.cdn.aliyun.dcloud.net.cn/uni-app/uni-app-qr-all.jpg"/>
*注: 某些平台不能提交简单demo,补充了一些其他功能。*
......@@ -77,5 +77,6 @@
## 更多资料
- 评测:[跨端开发框架深度横评之2020版](https://juejin.im/post/5e8e8d5a6fb9a03c6d3d9f42)
- 评测:[深入测试一周,主流多端框架大比武](https://mp.weixin.qq.com/s/jIDEHfuMnED6HTfNgjsW4w)
- [uni-app在App端和flutter、react native的比较](https://ask.dcloud.net.cn/article/36083)
......@@ -23,6 +23,10 @@ const PLATFORMS = {
prefix: 'tt',
title: '头条小程序'
},
'mp-kuaishou': {
prefix: 'ks',
title: '快手小程序'
},
'quickapp-webview': {
prefix: 'qa',
title: '快应用(Webview)版'
......@@ -52,6 +56,9 @@ module.exports = {
plugins: [
alias({
entries: [{
find: 'uni-shared/query',
replacement: path.resolve(__dirname, '../src/shared/query.js')
}, {
find: 'uni-shared',
replacement: path.resolve(__dirname, '../src/shared/util.js')
}, {
......
<p style="width: 100%;text-align: center;font-size: 140px;height: 40px;margin-top: 1.2em!important;">404</p>
<p style="width: 100%;text-align: center;font-size: 40px;">Not Found</p>
\ No newline at end of file
<p style="width: 100%;text-align: center;font-size: 60px;height: 40px;margin-top: 1.2em!important;">页面迷路了</p>
<p style="width: 100%;text-align: center;font-size: 20px;line-height:30px;">1. 请确认访问地址是否有误<br/>2. 请检查网络环境是否通畅<br/>3. 关闭广告屏蔽插件后重试</p>
\ No newline at end of file
```uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉等多个平台。
```uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
`DCloud`公司拥有420万开发者,几十万应用案例、6.5亿手机端月活用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app([详见](https://docs.alipay.com/mini/ide/0.70-stable)),腾讯课堂官方为uni-app录制培训课程([详见](https://ask.dcloud.net.cn/article/35640)),开发者可以放心选择。
`DCloud`公司拥有500万开发者用户,几十万应用案例、10亿手机端月活用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app([详见](https://docs.alipay.com/mini/ide/0.70-stable)),腾讯课堂官方为uni-app录制培训课程([详见](https://ask.dcloud.net.cn/article/35640)),开发者可以放心选择。
`uni-app`在手,做啥都不愁。即使不跨端,```uni-app```也是更好的小程序开发框架([详见](https://ask.dcloud.net.cn/article/35947))、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
<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>
<p>一套代码编到8个平台,这不是梦想。眼见为实,扫描8个二维码,亲自体验最全面的跨平台效果!</p>
<p>一套代码编到10个平台,这不是梦想。眼见为实,扫描10个二维码,亲自体验最全面的跨平台效果!</p>
<div class="flex-img-group-view">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-android.png" width="160"/>
</div>
<b>Android版</b>
</a>
<a href="https://itunes.apple.com/cn/app/hello-uni-app/id1417078253?mt=8" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-ios.png" width="160"/>
</div>
<b>iOS版</b>
</a>
<a href="https://uniapp.dcloud.io/h5/" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-h5.png" width="160"/>
</div>
<b>H5版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg" width="160"/></div>
<b>微信小程序版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="https://img-cdn-qiniu.dcloud.net.cn/img/alipay1.png" width="160"/></div>
<b>支付宝小程序版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/baidu-uniapp.png" width="160"/></div>
<b>百度小程序版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/mp-toutiao.png" width="160"/>
</div>
<b>字节跳动小程序版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qq.png" width="160"/>
</div>
<b>QQ小程序版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7c946930-bcf2-11ea-b997-9918a5dda011.png" width="160" />
</div>
<b>Android版</b>
</a>
<a href="https://itunes.apple.com/cn/app/hello-uni-app/id1417078253?mt=8" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7c910dd0-bcf2-11ea-b680-7980c8a877b8.png" width="160" />
</div>
<b>iOS版</b>
</a>
<a href="https://hellouniapp.dcloud.net.cn/" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/uni-h5-hosting-qr.png" width="160" />
</div>
<b>H5版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg" width="160" /></div>
<b>微信小程序版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/30112940-bcf2-11ea-a30b-e311646dfaf2.png" width="160" /></div>
<b>支付宝小程序版</b>
</a>
</div>
<p>
<em>注:某些平台不能提交简单demo,故补充了一些其他功能;hello uni-app示例代码可从[github](https://github.com/dcloudio/hello-uniapp)获取</em></br>
<div class="flex-img-group-view" style="margin-top: 20px;">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/e7fc6700-bcf1-11ea-b680-7980c8a877b8.png" width="160" /></div>
<b>百度小程序版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/mp-toutiao.png" width="160" />
</div>
<b>字节跳动小程序版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qq.png" width="160" />
</div>
<b>QQ小程序版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qa-union.png" width="160" />
</div>
<b>快应用</b>
</a>
<a href="https://so.mp.360.cn/mp.html?appid=qh4j181qqtru354st6" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-mp-360-qr.png" width="160" />
</div>
<b>360小程序</b>
</a>
</div>
<p>注:<br/>
<em>- 某些平台不能提交简单demo,故补充了一些其他功能;hello uni-app示例代码可从[github](https://github.com/dcloudio/hello-uniapp)获取</em></br>
<em>- 快应用仅支持 vivo 、oppo、华为</em></br>
<em>- 360小程序仅 windows平台支持,需要在360浏览器中打开</em></br>
</p>
</div>
......@@ -74,7 +90,7 @@
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">开发者/案例数量更多</h5>
<p class="uniapp-home-content-item-text">几十万应用、uni统计月活6.5亿、70+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">几十万应用、uni统计月活10亿、70+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">跨端完善度更高,真正落地的提高生产力</p>
</div>
</div>
......
......@@ -10,6 +10,8 @@
- [百度小程序](https://smartprogram.baidu.com/docs/develop/tutorial/codedir/)
- [字节跳动小程序](https://developer.toutiao.com/dev/cn/mini-app/develop/component/introduction/basic-component)
- [QQ小程序](https://q.qq.com/wiki/develop/miniprogram/frame/)
- [华为快应用](https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-component-view)
- [360小程序](https://mp.360.cn/doc/miniprogram/dev/#/view)
- [Weex](https://weex.apache.org/cn/guide/)
<ul class="nav-href">
......
* [什么是 uni-app](README.md)
* [快速上手](quickstart.md)
* [uni-app的由来](history.md)
* [如何学习](resource.md)
* [框架简介](frame.md)
* [使用 Vue.js 注意事项](use.md)
* [使用 Weex/nvue 注意事项](use-weex.md)
* [使用 HTML5+ 注意事项](use-html5plus.md)
* [条件编译](platform.md)
* [uni-app 跨端开发注意事项](matter.md)
* [高效开发技巧](snippet.md)
* [性能优化建议](performance.md)
* [开放生态](ecosystem.md)
* [从其他项目转uni-app](translate.md)
* [混合开发](hybrid.md)
* [uni小程序sdk](https://ask.dcloud.net.cn/docs/#https://ask.dcloud.net.cn/article/36941)
* [运营服务](cloud.md)
* [案例](case.md)
* [开源项目资源汇总](casecode.md)
* [选型评估指南](select.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> -->
<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>
* [什么是 uni-app](README.md)
* [快速上手](quickstart.md)
* [uni-app的由来](history.md)
* [如何学习](resource.md)
* [框架简介](frame.md)
* [使用 Vue.js 注意事项](use.md)
* [使用 Weex/nvue 注意事项](use-weex.md)
* [使用 HTML5+ 注意事项](use-html5plus.md)
* [条件编译](platform.md)
* [uni-app 跨端开发注意事项](matter.md)
* [高效开发技巧](snippet.md)
* [性能优化建议](performance.md)
* [开放生态](ecosystem.md)
* [从其他项目转uni-app](translate.md)
* [混合开发](hybrid.md)
* [uni小程序sdk](https://nativesupport.dcloud.net.cn/README)
* [运营服务](cloud.md)
* [案例](case.md)
* [开源项目资源汇总](casecode.md)
* [选型评估指南](select.md)
* [常见问题](faq.md)
* 更新日志
* [正式版](release.md)
* [Alpha版](release-note-alpha.md)
<!-- * [更新日志](//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>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库:<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a><a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/uniad-520.png" width="20" height="20"/>
<div class="contact-smg">
<div>uniAD</div>
</div>
</a>
<a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-tongji-icon.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库:<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a><a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<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>群11:296811328 &nbsp;<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=730a560eaea916a912d0de1bf80adf2e25ebde12dbc1b28a37fb94b3a5ecfb70">点此加入</a></div>
<div>群16:719211033 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0SG97jRMTnKLEqkK2qIO7mfxia2zwJoA&jump_from=webapi">点此加入</a></div>
<div>群35:713420817(2000人已满)</div>
<div>群34:530305531(2000人已满)</div>
<div>群33:498071674(2000人已满)</div>
<div>群32:166188631(2000人已满)</div>
<div>群31:567471669(2000人已满)</div>
<div>群30:371046920(2000人已满)</div>
<div>群29:202965481(1000人已满)</div>
<div>群29:202965481(2000人已满)</div>
<div>群28:166188776(2000人已满)</div>
<div>群27:811363410(2000人已满)</div>
<div>群26:147867597(2000人已满)</div>
<div>群25:165297000(2000人已满)</div>
<div>群24:672494800(2000人已满)</div>
<div>群23:599958679(2000人已满)</div>
<div>群22:687186952(1000人已满)</div>
<div>群22:687186952(2000人已满)</div>
<div>群21:717019120(2000人已满)</div>
<div>群20:165796402(2000人已满)</div>
<div>群19:165657124(1000人已满)</div>
<div>群18:698592271(1000人已满)</div>
<div>群17:951348804(1000人已满)</div>
<div>群16:719211033(2000人已满)</div>
<div>群19:165657124(2000人已满)</div>
<div>群18:698592271(2000人已满)</div>
<div>群17:951348804(2000人已满)</div>
<!-- <div>群16:719211033(2000人已满)</div> -->
<div>群15:516984120(2000人已满)</div>
<div>群14:465953250(2000人已满)</div>
<div>群13:699478442(2000人已满)</div>
<div>群12:884860657(2000人已满)</div>
<!-- <div>群11:296811328(2000人未满)</div> -->
<div>群11:296811328(2000人已满)</div>
<div>群10:959059626(2000人已满)</div>
<div>群9:775128777(2000人已满)</div>
<div>群8:695442854(2000人已满)</div>
<div>群7:942061423(2000人已满)</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>群5:731951419(2000人已满)</div>
<div>群4:942702595(2000人已满)</div>
<div>群3:773794803(2000人已满) </div>
<div>群2:901474938(2000人已满) </div>
<div>群1:531031261(2000人已满)</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
......@@ -133,9 +133,11 @@ function async request () {
|API|说明|
|:-|:-|
|[uni.chooseVideo](api/media/video?id=choosevideo)|从相册选择视频,或者拍摄|
|[uni.chooseVideo](api/media/video?id=choosevideo)|从相册选择视频,或者拍摄|
|[uni.chooseMedia](api/media/video?id=choosemedia)|拍摄或从手机相册中选择图片或视频。|
|[uni.saveVideoToPhotosAlbum](api/media/video?id=savevideotophotosalbum)|保存视频到系统相册|
|[uni.createVideoContext](/api/media/video-context?id=createvideocontext)|视频组件管理|
|[uni.createVideoContext](/api/media/video-context?id=createvideocontext)|视频组件管理|
##### 相机组件管理
|API|说明|
......@@ -310,7 +312,13 @@ function async request () {
|[uni.startBeaconDiscovery](/api/system/ibeacon?id=startbeacondiscovery)|停止搜索附近的 iBeacon 设备|
|[uni.stopBeaconDiscovery](/api/system/ibeacon?id=stopbeacondiscovery)|开始搜索附近的 iBeacon 设备|
##### 生物认证
|API|说明|
|:-|:-|
|[uni.startSoterAuthentication](/api/system/authentication?id=startsoterauthentication)|开始生物认证|
|[uni.checkIsSupportSoterAuthentication](/api/system/authentication?id=checkissupportsoterauthentication)|获取本机支持的生物认证方式|
|[uni.checkIsSoterEnrolledInDevice](/api/system/authentication?id=checkissoterenrolledindevice)|获取设备内是否录入如指纹等生物信息的接口|
#### 界面
##### 交互反馈
......@@ -348,7 +356,7 @@ function async request () {
|API|说明|
|:-|:-|
|[uni.setBackgroundColor](/api/ui/bgcolor?id=setbackgroundcolor)|动态设置窗口的背景色。|
|[uni.setBackgroundColor](/api/ui/bgcolor?id=setbackgroundcolor-1)|动态设置下拉背景字体、loading 图的样式。|
|[uni.setBackgroundTextStyle](/api/ui/bgcolor?id=setbackgroundtextstyle)|动态设置下拉背景字体、loading 图的样式。|
##### 动画
......@@ -419,7 +427,8 @@ function async request () {
|[uni.getProvider](api/plugins/provider?id=getprovider)|获取服务供应商|
|[uni.login](api/plugins/login?id=login)|登录|
|[uni.getUserInfo](api/plugins/login?id=getuserinfo)|获取用户信息|
|[uni.share](api/plugins/share?id=share)|分享|
|[uni.share](api/plugins/share?id=share)|分享|
|[uni.shareWithSystem](api/plugins/share?id=sharewithsystem)|使用系统分享|
|[uni.requestPayment](api/plugins/payment?id=requestpayment)|支付|
|[uni.subscribePush](api/plugins/push?id=subscribepush)|开启推送|
|[uni.unsubscribePush](api/plugins/push?id=unsubscribepush)|关闭推送|
......
......@@ -4,6 +4,7 @@
* [uni.base64ToArrayBuffer](api/base64ToArrayBuffer?id=base64toarraybuffer)
* [uni.arrayBufferToBase64](api/arrayBufferToBase64?id=arraybuffertobase64)
* [生命周期](api/lifecycle.md)
* [应用级事件](api/application.md)
* 网络
* [发起请求](api/request/request.md)
* [上传、下载](api/request/network-file.md)
......@@ -17,6 +18,7 @@
* [uni.reLaunch](/api/router?id=relaunch)
* [uni.switchTab](/api/router?id=switchtab)
* [uni.navigateBack](/api/router?id=navigateback)
* [uni.preloadPage](/api/preload-page)
* [窗口动画](/api/router?id=animation)
* 数据缓存
* [uni.setStorage](/api/storage/storage?id=setstorage)
......@@ -43,6 +45,7 @@
* [相机组件控制](api/media/camera-context.md)
* [直播组件控制](api/media/live-player-context.md)
* [富文本](api/media/editor-context.md)
* [音视频合成](api/media/media-container.md)
* 设备
* [系统信息](api/system/info.md)
* [内存](api/system/memory.md)
......@@ -105,7 +108,8 @@
* [CanvasContext](api/canvas/CanvasContext.md)
* [CanvasGradient](api/canvas/CanvasGradient.md)
* 广告
* [激励视频广告](api/ad/rewarded-video-ad.md)
* [激励视频广告](api/a-d/rewarded-video.md)
* [插屏广告](api/a-d/interstitial.md)
* 第三方服务
* [获取服务供应商](api/plugins/provider.md)
* [登录](api/plugins/login.md)
......@@ -130,78 +134,87 @@
* [小程序更新](api/other/update.md)
* [调试](api/other/set-enable-debug.md)
* [获取第三方平台数据](api/other/get-extconfig.md)
* [广告](api/other/advertisement.md)
<li></li>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库:<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a><a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<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?id
=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">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/uniad-520.png" width="20" height="20"/>
<div class="contact-smg">
<div>uniAD</div>
</div>
</a>
<a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-tongji-icon.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库:<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a><a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<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>群16:719211033 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0SG97jRMTnKLEqkK2qIO7mfxia2zwJoA&jump_from=webapi">点此加入</a></div>
<div>群35:713420817(2000人已满)</div>
<div>群34:530305531(2000人已满)</div>
<div>群33:498071674(2000人已满)</div>
<div>群32:166188631(2000人已满)</div>
<div>群31:567471669(2000人已满)</div>
<div>群30:371046920(2000人已满)</div>
<div>群29:202965481(2000人已满)</div>
<div>群28:166188776(2000人已满)</div>
<div>群27:811363410(2000人已满)</div>
<div>群26:147867597(2000人已满)</div>
<div>群25:165297000(2000人已满)</div>
<div>群24:672494800(2000人已满)</div>
<div>群23:599958679(2000人已满)</div>
<div>群22:687186952(2000人已满)</div>
<div>群21:717019120(2000人已满)</div>
<div>群20:165796402(2000人已满)</div>
<div>群19:165657124(2000人已满)</div>
<div>群18:698592271(2000人已满)</div>
<div>群17:951348804(2000人已满)</div>
<!-- <div>群16:719211033(2000人已满)</div> -->
<div>群15:516984120(2000人已满)</div>
<div>群14:465953250(2000人已满)</div>
<div>群13:699478442(2000人已满)</div>
<div>群12:884860657(2000人已满)</div>
<div>群11:296811328(2000人已满)</div>
<div>群10:959059626(2000人已满)</div>
<div>群9:775128777(2000人已满)</div>
<div>群8:695442854(2000人已满)</div>
<div>群7:942061423(2000人已满)</div>
<div>群6:697264024(2000人已满)</div>
<div>群5:731951419(2000人已满)</div>
<div>群4:942702595(2000人已满)</div>
<div>群3:773794803(2000人已满) </div>
<div>群2:901474938(2000人已满) </div>
<div>群1:531031261(2000人已满)</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
### 插屏广告
插屏广告组件。插屏广告组件是一个原生组件,层级比普通组件高。插屏广告组件每次创建都会返回一个全新的实例,默认是隐藏的,需要调用 InterstitialAd.show() 将其显示。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|x|x|x|
uni.createInterstitialAd(Object object)
|属性|类型|必填|说明|
|:-:|:-:|:-:|:-:|
|adUnitId|string|是|广告单元 id,微信小程序2.6.0+|
#### 方法
`Promise InterstitialAd.show()`
显示插屏广告。
`Promise InterstitialAd.load()`
加载插屏广告。
`InterstitialAd.destroy()`
销毁插屏广告实例。
`InterstitialAd.onLoad(function callback)`
监听插屏广告加载事件。
`InterstitialAd.offLoad(function callback)`
取消监听插屏广告加载事件
`InterstitialAd.onError(function callback)`
监听插屏错误事件。
`InterstitialAd.offError(function callback)`
取消监听插屏错误事件
`InterstitialAd.onClose(function callback)`
监听插屏广告关闭事件。
`InterstitialAd.offClose(function callback)`
取消监听插屏广告关闭事件
......@@ -23,15 +23,17 @@
激励视频广告组件是由客户端原生的图片、文本、视频控件组成的,层级最高,会覆盖在普通组件上。
播放开始后提供6秒关闭功能,请注意:这个会对CPM有负向影响。请用开发者帐号的邮箱,将应用名称和APP ID邮件发送到bd@dcloud.io。
### 广告创建
开发者可以调用 uni.createRewardedVideoAd 创建激励视频广告组件。该方法返回的是一个单例,该实例仅对当前页面有效,不允许跨页面使用。
开发者可以调用 uni.createRewardedVideoAd 创建激励视频广告组件。
激励视频广告组件默认是隐藏的,因此可以提前创建,以提前初始化组件。开发者可以在页面的 `onReady` 事件回调中创建广告实例,并在该页面的生命周期内重复调用该广告实例。
```
<script>
let rewardedVideoAd = null;
export default {
data() {
return {
......@@ -39,26 +41,291 @@
}
},
onReady() {
if(uni.createRewardedVideoAd) {
rewardedVideoAd = uni.createRewardedVideoAd({ adpid: 'xxxx' })
rewardedVideoAd.onLoad(() => {
console.log('onLoad event')
})
rewardedVideoAd.onError((err) => {
console.log('onError event', err)
})
rewardedVideoAd.onClose((res) => {
console.log('onClose event', res)
})
}
this._isLoaded = false
rewardedVideoAd = this._rewardedVideoAd = uni.createRewardedVideoAd({ adpid: '1507000689' }) // 仅用于HBuilder基座调试 adpid: '1507000689'
rewardedVideoAd.onLoad(() => {
this._isLoaded = true
console.log('onLoad event')
// 当激励视频被关闭时,默认预载下一条数据,加载完成时仍然触发 `onLoad` 事件
})
rewardedVideoAd.onError((err) => {
console.log('onError event', err)
})
rewardedVideoAd.onClose((res) => {
console.log('onClose event', res)
})
},
methods: {
show() {
if (this._isLoaded) {
this._rewardedVideoAd.show()
}
}
}
}
</script>
```
为避免滥用广告资源,目前每个用户每天可观看激励式视频广告的次数有限,建议展示广告按钮前先判断广告是否拉取成功。
### 完整调用示例
支持多页面重复调用,可以传入不同广告位,默认处理了Loading状态及快速点击调用问题
```
<script>
import AD from "ad.js"
export default {
data() {
return {
title: '激励视频广告'
}
},
onReady() {
// HBuilderX标准基座真机运行测试激励视频广告位标识(adpid)为:1507000689
// adpid: 1507000689 仅用于测试,发布时需要改为广告后台(https://uniad.dcloud.net.cn/)申请的 adpid
// 广告后台申请的广告位(adpid)需要自定义基座/云打包/本地打包后生效
this._adpid = 1507000689
// 可选预加载数据
// AD.load(this._adpid)
},
methods: {
showAd() {
AD.show(this._adpid, (res) => {
console.log("onclose")
console.log(res)
// 用户点击了【关闭广告】按钮
if (res && res.isEnded) {
// 正常播放结束
console.log("onClose " + res.isEnded);
} else {
// 播放中途退出
console.log("onClose " + res.isEnded);
}
// 可选预加载下一条广告数据,减少加载等待时间,调用此 API 不会显示loading,不影响业务
// AD.load(this._adpid)
}, (err) => {
// 广告无法显示,输出错误信息,可以采集数据上报以便分析
console.log(err) // {code: code, errMsg: message}
})
}
}
}
</script>
```
```
// ad.js
class AdHelper {
constructor() {
this._ads = {}
}
load(adpid, onload, onerror) {
if (!adpid || this.isBusy(adpid)) {
return
}
this.get(adpid).load(onload, onerror)
}
show(adpid, onsuccess, onfail) {
if (!adpid || this.isBusy(adpid)) {
return
}
var ad = this.get(adpid)
uni.showLoading({
mask: true
})
ad.load(() => {
uni.hideLoading()
ad.show((e) => {
onsuccess && onsuccess(e)
// 关闭视频
})
}, (err) => {
uni.hideLoading()
onfail && onfail(err)
})
}
isBusy(adpid) {
return (this._ads[adpid] && this._ads[adpid].isLoading)
}
get(adpid) {
if (!this._ads[adpid]) {
this._ads[adpid] = new RewardedVideo({
adpid: adpid
})
}
return this._ads[adpid]
}
}
const eventNames = [
'load',
'close',
'verify',
'error'
]
const EXPIRED_TIME = 1000 * 60 * 30
const ProviderType = {
CSJ: 'csj',
GDT: 'gdt'
}
const RETRY_COUNT = 1
class RewardedVideo {
constructor(options = {}) {
this._isLoad = false
this._isLoading = false
this._lastLoadTime = 0
this._lastError = null
this._retryCount = 0
this._loadCallback = null
this._closeCallback = null
this._errorCallback = null
const rewardAd = this._rewardAd = plus.ad.createRewardedVideoAd(options)
rewardAd.onLoad((e) => {
this._isLoading = false
this._isLoad = true
this._lastLoadTime = Date.now()
this.onLoad()
})
rewardAd.onClose((e) => {
this._isLoad = false
this.onClose(e)
})
rewardAd.onVerify((e) => {
// e.isValid
})
rewardAd.onError(({
code,
message
}) => {
this._isLoading = false
const data = {
code: code,
errMsg: message
}
if (code === -5008) {
this._loadAd()
return
}
if (this._retryCount < RETRY_COUNT) {
this._retryCount += 1
this._loadAd()
return
}
this._lastError = data
this.onError(data)
})
}
get isExpired() {
return (this._lastLoadTime !== 0 && (Math.abs(Date.now() - this._lastLoadTime) > EXPIRED_TIME))
}
get isLoading() {
return this._isLoading
}
getProvider() {
return this._rewardAd.getProvider()
}
load(onload, onerror) {
this._loadCallback = onload
this._errorCallback = onerror
if (this._isLoading) {
return
}
if (this._isLoad) {
this.onLoad()
return
}
this._retryCount = 0
this._loadAd()
}
show(onclose) {
this._closeCallback = onclose
if (this._isLoading || !this._isLoad) {
return
}
if (this._lastError !== null) {
this.onError(this._lastError)
return
}
const provider = this.getProvider()
if (provider === ProviderType.CSJ && this.isExpired) {
this._loadAd()
return
}
this._rewardAd.show()
}
onLoad(e) {
if (this._loadCallback != null) {
this._loadCallback()
}
}
onClose(e) {
if (this._closeCallback != null) {
this._closeCallback({
isEnded: e.isEnded
})
}
}
onError(e) {
if (this._errorCallback != null) {
this._errorCallback(e)
}
}
destroy() {
this._rewardAd.destroy()
}
_loadAd() {
this._isLoad = false
this._isLoading = true
this._lastError = null
this._rewardAd.load()
}
}
export default new AdHelper()
```
### 显示/隐藏
激励视频广告组件默认是隐藏的,在用户主动触发广告后,开发者需要调用 RewardedVideoAd.show() 进行显示。
......@@ -146,9 +413,128 @@ rewardedVideoAd.onClose(res => {
})
```
### 服务器回调(App平台 HBuilderX 2.6.8,仅穿山甲支持)
激励视频广告可以支持广告服务器到业务服务器的回调,用于业务系统判断是否提供奖励给观看广告的用户。配置服务器回调后,当用户成功看完广告时,广告服务器会访问配置的回调链接,通知用户完成观看激励视频。
相对来讲服务器回调将更加安全,可以依赖广告平台的反作弊机制来避免用户模拟观看广告完成的事件。
如何使用
1. 申请激励视频广告位时开启服务器回调
2. 创建激励视频广告时传入回调参数
urlCallback示例
```
rewardedVideoAd = uni.createRewardedVideoAd({
adpid: '',
urlCallback: {
amount: '6',
name: 'RewardVideoAD1',
userId: 'testuser',
extra: 'testdata'
}
});
```
### 服务器回调事件
- HBuilderX 2.6.8+
```
rewardedVideoAd.onVerify(e => {
// 广告商调用开发者服务器返回结果
console.log(e.isValid);
})
```
### 服务器回调数据说明
当最终用户观看激励视频广告完成后,广告服务器会以GET方式请求业务服务器的回调链接,并拼接以下参数回传:
`user_id=%s&trans_id=%s&reward_name=%s&reward_amount=%d&extra=%s&sign=%s`
字段名称|说明|字段类型|备注|
:-|:-|:-|:-|
sign|签名|String|签名信息|
user_id|用户id|String |调用API传入的userId|
trans_id|交易id|String |广告平台生成的唯一交易ID|
reward_amount|奖励数量|String |广告后台配置或调用API传入的amount|
reward_name|奖励名称|String|广告后台配置或调用API传入的name|
extra|自定义数据,可以为空|String|透传给回调服务器的数据,调用API传入的extra|
#### 签名信息
在uni-AD广告平台申请激励视频广告位通过后,如果开启服务器回调则会生成appSecurityKey。
appSecurityKey用于签名校验服务器回调请求的合法性(请务必保管好),sign字段值生成规则为:sign=sha256(appSecurityKey,trans_id)
Python示例:
```
import hashlib
if __name__ == "__main__":
trans_id = "6FEB23ACB0374985A2A52D282EDD5361u6643"
app_security_key = "7ca31ab0a59d69a42dd8abc7cf2d8fbd"
check_sign_raw = "%s:%s" % (app_security_key, trans_id)
sign = hashlib.sha256(check_sign_raw).hexdigest()
```
#### 回调请求返回数据约定
返回json数据,字段如下:
字段名称|说明|字段类型|备注|
:-|:-|:-|:-|
isValid|校验结果|Blean|判定结果,是否发放奖励|
示例
```
{
"isValid": true
}
```
#### 获取广告商名称
- HBuilderX 2.6.8+
```
var rewardedVideoAd = uni.createRewardedVideoAd({
adpid: ''
});
var provider = rewardedVideoAd.getProvider();
// csj gdt
```
### app平台错误码
code|message|
:-|:-|
-5001|广告位标识adpid为空,请传入有效的adpid
-5002|无效的广告位标识adpid,请使用正确的adpid
-5003|未开通广告,请在广告平台申请并确保已审核通过
-5004|无广告模块,打包时请配置要使用的广告模块
-5005|广告加载失败,请尝试重新加载
-5006|广告未加载完成无法播放,请加载完成后再调show播放
-5007|无法获取广告配置数据,请尝试重试
-5008|广告已过期,请重新加载数据
-5100|其他错误,聚合广告商内部错误
**@error 详细错误码**
- App端聚合的穿山甲(iOS):[错误码](https://ad.oceanengine.com/union/media/union/download/detail?id=16&docId=5de8d574b1afac00129330d5&osType=ios)
- App端聚合的穿山甲(Android):[错误码](https://ad.oceanengine.com/union/media/union/download/detail?id=4&docId=5de8d9b925b16b00113af0ed&osType=android)
- App端聚合的广点通(iOS):[错误码](https://developers.adnet.qq.com/doc/ios/union/union_debug#%E9%94%99%E8%AF%AF%E7%A0%81)
- App端聚合的广点通(Android):[错误码](https://developers.adnet.qq.com/doc/android/union/union_debug#sdk%20%E9%94%99%E8%AF%AF%E7%A0%81)
**注意事项**
- 多次调用 `RewardedVideoAd.onLoad()``RewardedVideoAd.onError()``RewardedVideoAd.onClose()` 等方法监听广告事件会产生多次事件回调,建议在创建广告后监听一次即可,或者先取消原有的监听事件再重新监听。
- 仅 V3 编译支持,参考 manifest.json 配置
- 仅 V3 编译支持,参考项目 manifest.json 配置
- 测试期间请使用测试 `adpid`,参考测试代码,如果无法显示换个时间再试
- 多次调用 `RewardedVideoAd.onLoad()``RewardedVideoAd.onError()``RewardedVideoAd.onClose()` 等方法监听广告事件会产生多次事件回调,建议在创建广告后监听一次即可。
- 为避免滥用广告资源,目前每个用户每天可观看激励式视频广告的次数有限,建议展示广告按钮前先判断广告是否拉取成功。
- App平台,建议每个广告商每个设备每天调用次数不超过`15`,中间要有间隔时间,否则可能触发系统策略导致流量收益下降
**AD组件**
文档地址:[https://uniapp.dcloud.io/component/ad](https://uniapp.dcloud.io/component/ad)
### uni.onPageNotFound(funciton callback)
监听应用要打开的页面不存在事件。该事件与 `App.onPageNotFound` 的回调时机一致
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|
#### 参数
**function callback**
要打开的页面不存在事件的回调函数
#### 参数
|属性|类型|说明|
|:-:|:-:|:-:|
|path|String|不存在页面的路径 (代码包路径)|
|query|Object|打开不存在页面的 query 参数|
|isEntryPage|Boolean|是否本次启动的首个页面(例如从分享等入口进来,首个页面是开发者配置的分享页面) |
**注意**
- 开发者可以在回调中进行页面重定向,但必须在回调中同步处理,异步处理(例如 `setTimeout` 异步执行)无效。
- 若开发者没有调用 `uni.onPageNotFound` 绑定监听,也没有声明 `App.onPageNotFound`,当跳转页面不存在时,将推入客户端原生的页面不存在提示页面。
- 如果回调中又重定向到另一个不存在的页面,将推入客户端原生的页面不存在提示页面,并且不再第二次回调。
- 在除了 `App.vue` 的其他时机中调用 `uni.onPageNotFound` 的话,需要用uni.offPageNotFound取消监听,否则会出现监听多次的情况
### uni.onError(funciton callback)
监听小程序错误事件。如脚本错误或 `API` 调用报错等。该事件与 `App.onError` 的回调时机与参数一致。
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|√|
#### 参数
**function callback**
应用错误事件的回调函数
#### 参数
**string error**
错误信息,包含堆栈
### uni.onAppShow(function callback)
监听应用切前台事件。该事件与 `App.onShow` 的回调参数一致。
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√|√|
**支付宝小程序使用说明:**
- 由于开发者工具版本限制,目前本 API 暂不支持在开发者工具调试和真机调试,仅支持真机预览。开发者请调至 预览 模式,在支付宝客户端扫码查看效果。
- 请勿使用 API 监听匿名函数,否则将无法关闭监听。
#### 参数
**function callback**
应用切前台事件的回调函数
#### 参数
|属性|类型|说明|平台差异说明|
|:-:|:-:|:-:|:-:|
|path|String|应用切前台的路径 (代码包路径)||
|scene|Number|应用切前台的场景值||
|query|Object |应用切前台的 query 参数||
|shareTicket|String |shareTicket|微信小程序|
|referrerInfo|String|来源信息||
|entryType|String|页面展现的来源标识,可取的值为: 'user'、'schema'、'sys',对应代表的意义如下表。|百度小程序 2.10.7+|
|appURL|String|展现时的调起协议,仅当entryType值为 schema 时存在。|百度小程序 2.10.7+|
|entryDataHash|String|群入口信息,通过群应用商店打开、群分享卡片打开的小程序可获得。|qq小程序|
**referrerInfo 的结构**
|属性|类型|说明|平台差异说明|
|:-:|:-:|:-:||
|appId|String|来源小程序的appId||
|extraData|Object|来源小程序传过来的数据|微信小程序和qq小程序 scene=1037或1038时支持|
### uni.onAppHide(function callback)
监听应用切后台事件。该事件与 `App.onHide` 的回调参数一致。
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√|√|
**支付宝小程序使用说明:**
- 由于开发者工具版本限制,目前本 API 暂不支持在开发者工具调试和真机调试,仅支持真机预览。开发者请调至 预览 模式,在支付宝客户端扫码查看效果。
- 请勿使用 API 监听匿名函数,否则将无法关闭监听。
#### 参数
**function callback**
应用切后台事件的回调函数
### uni.offPageNotFound(function callback)
取消监听应用要打开的页面不存在事件。
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|
#### 参数
**function callback**
应用要打开的页面不存在事件的回调函数
### uni.offError(funciton callback)
取消监听应用错误事件。
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|√|
#### 参数
**function callback**
应用错误事件的回调函数
### uni.offAppShow(function callback)
取消监听小程序切前台事件。
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√|√|
#### 参数
**function callback**
应用切前台事件的回调函数
### uni.offAppHide(function callback)
取消监听小程序切后台事件。
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√|√|
#### 参数
**function callback**
应用切后台事件的回调函数
......@@ -10,11 +10,11 @@ App-nvue下如需使用canvas,暂未封装为uni API,可参考[文档](https
### CanvasContext.fillStyle string
填充颜色。用法同 [CanvasContext.setFillStyle()](./CanvasContext?id=canvascontextsetfillstyle)
填充颜色。用法同 [CanvasContext.setFillStyle()](#canvascontextsetfillstyle)
### CanvasContext.strokeStyle string
边框颜色。用法同 [CanvasContext.setStrokeStyle()](./CanvasContext?id=canvascontextsetstrokestyle)
边框颜色。用法同 [CanvasContext.setStrokeStyle()](#canvascontextsetstrokestyle)
### CanvasContext.shadowOffsetX number
......@@ -34,19 +34,19 @@ App-nvue下如需使用canvas,暂未封装为uni API,可参考[文档](https
### CanvasContext.lineWidth number
线条的宽度。用法同 [CanvasContext.setLineWidth()](./CanvasContext?id=canvascontextsetlinewidth)
线条的宽度。用法同 [CanvasContext.setLineWidth()](#canvascontextsetlinewidth)
### CanvasContext.lineCap number
线条的端点样式。用法同 [CanvasContext.setLineCap()](./CanvasContext?id=canvascontextsetlinecap)
线条的端点样式。用法同 [CanvasContext.setLineCap()](#canvascontextsetlinecap)
### CanvasContext.lineJoin number
线条的交点样式。用法同 [CanvasContext.setLineJoin()](./CanvasContext?id=canvascontextsetlinejoin)
线条的交点样式。用法同 [CanvasContext.setLineJoin()](#canvascontextsetlinejoin)
### CanvasContext.miterLimit number
最大斜接长度。用法同 [CanvasContext.setMiterLimit()](./CanvasContext?id=canvascontextsetmiterlimit)
最大斜接长度。用法同 [CanvasContext.setMiterLimit()](#canvascontextsetmiterlimit)
### CanvasContext.lineDashOffset number
......@@ -292,7 +292,7 @@ ctx.draw()
clearRect 并非画一个白色的矩形在地址区域,而是清空,为了有直观感受,对 canvas 加了一层背景色。
```javascript
<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>
<canvas canvas-id="myCanvas" id="myCanvas" style="border: 1px solid; background: #123456;"/>
```
```javascript
......
......@@ -6,7 +6,7 @@
|参数|类型|必填|说明|
|---|---|---|---|
|canvasId|String|是|画布标识,传入 ```<canvas />``` 的 canvas-id|
|canvasId|String|是|画布标识,传入 ```<canvas />``` 的 canvas-id(支付宝小程序是id、其他平台是canvas-id)|
|x|Number|是|将要被提取的图像数据矩形区域的左上角 x 坐标|
|y|Number|是|将要被提取的图像数据矩形区域的左上角 y 坐标|
|width|Number|是|将要被提取的图像数据矩形区域的宽度|
......
......@@ -6,7 +6,7 @@
|参数|类型|必填|说明|最低版本|
|---|---|---|---|--|
|canvasId|String|是|画布标识,传入 ```<canvas />``` 的 canvas-id||
|canvasId|String|是|画布标识,传入 ```<canvas />``` 的 canvas-id(支付宝小程序是id、其他平台是canvas-id)||
|data|Uint8ClampedArray|是|图像像素点数据,一维数组,每四项表示一个像素点的rgba||
|x|Number|是|源图像数据在目标画布中的位置偏移量(x 轴方向的偏移量)||
|y|Number|是|源图像数据在目标画布中的位置偏移量(y 轴方向的偏移量)||
......@@ -19,7 +19,7 @@
**示例代码**
```javascript
const data = new Uint8ClampedArray([255, 0, 0, 1])
const data = new Uint8ClampedArray([255, 0, 0, 255])
uni.canvasPutImageData({
canvasId: 'myCanvas',
x: 0,
......
......@@ -18,7 +18,7 @@
|height |Number |否 |画布高度(默认为canvas高度-y)|
|destWidth |Number |否 |输出图片宽度(默认为 width * 屏幕像素密度)|
|destHeight |Number |否 |输出图片高度(默认为 height * 屏幕像素密度)|
|canvasId |String |是 |画布标识,传入 ``<canvas/>`` 的 canvas-id|
|canvasId |String |是 |画布标识,传入 ``<canvas/>`` 的 canvas-id(支付宝小程序是id、其他平台是canvas-id)|
|fileType |String |否 |目标文件的类型,只支持 'jpg' 或 'png'。默认为 'png'|
|quality |Number |否 |图片的质量,取值范围为 (0, 1],不在范围内时当作1.0处理|
|success |Function |否 |接口调用成功的回调函数|
......
......@@ -4,14 +4,14 @@
创建 ```canvas``` 绘图上下文(指定 canvasId)。在自定义组件下,第二个参数传入组件实例this,以操作组件内 ```<canvas/>``` 组件
**Tip:** 需要指定 canvasId,该绘图上下文只作用于对应的 ```<canvas/>```
**Tip:** 需要指定 canvasId,该绘图上下文只作用于对应的 `<canvas/>`
#### 参数
|参数|类型|说明|
|----|----|-----|
|canvasId|String |画布表示,传入定义在 ```<canvas/>``` 的 canvas-id |
|componentInstance|Object |自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id 的 ```<canvas/>``` ,如果省略,则不在任何自定义组件内查找 |
|canvasId|String |画布表示,传入定义在 `<canvas/>` 的 canvas-id或id(支付宝小程序是id、其他平台是canvas-id) |
|componentInstance|Object |自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id 的 `<canvas/>` ,如果省略,则不在任何自定义组件内查找 |
#### 返回值
......
......@@ -14,14 +14,32 @@ const PluginName = uni.requireNativePlugin(PluginName); // PluginName 为原生
不管是vue文件还是nvue文件,都是这个API。
下面以原生插件 [DCloud-RichAlert](https://ext.dcloud.net.cn/plugin?id=36) 为例,介绍如何使用此API。
下面以原生插件 [DCloud-RichAlert](https://ext.dcloud.net.cn/plugin?id=36) 为例,介绍如何使用此API。
**注意**
- 只有免费插件可以下载到本地(不推荐),
1. 购买或下载uni-app原生插件
``uni-app`` 项目工程中添加插件:从 [http://ext.dcloud.net.cn/plugin?id=36](http://ext.dcloud.net.cn/plugin?id=36) 购买或下载原生增强提示框插件。
- 选择购买时需选择需要使用原生插件的包名,只有免费插件支持下载到本地。如需云端打包,推荐直接购买。购买成功之后可以在项目内选择购买的插件,如下图:
![选择原生插件](https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20190416/1b5297e695ad1536ddafe3c834e9c297.png)
- 如果选择下载,解压到 `uni-app` 项目根目录下的 `nativeplugins` 目录(如不存在则创建),添加后目录结构如下
![uni-app](https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20181226/10cd9e6a19769b9543e0a0eda2c66696.png)
2. 在页面引入原生插件,``uni.requireNativePlugin`` 使用后返回一个对象:
1.``uni-app`` 项目工程中添加插件:从 [http://ext.dcloud.net.cn/plugin?id=36](http://ext.dcloud.net.cn/plugin?id=36) 下载 DCloud-RichAlert.zip ,解压到 ``uni-app`` 项目根目录下的 ``nativeplugins`` 目录(如不存在则创建),添加后目录结构为:![ uni-app](https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20181226/10cd9e6a19769b9543e0a0eda2c66696.png)
2. 在页面引入原生插件,``uni.requireNativePlugin`` 使用后返回一个对象:
```javascript
const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
```
3. 使用原生插件
```
3. 使用原生插件
```javascript
dcRichAlert.show({
position: 'bottom',
......@@ -49,6 +67,6 @@ dcRichAlert.show({
**注意事项:**
1. 插件来源为 [插件市场](http://ext.dcloud.net.cn/?cat1=5),或自己开发的插件,Android插件开发参考:[https://ask.dcloud.net.cn/article/35416](https://ask.dcloud.net.cn/article/35416),iOS插件开发参考:[https://ask.dcloud.net.cn/article/35415](https://ask.dcloud.net.cn/article/35415)
2. 不支持真机运行原生插件,仅支持云端打包运行或使用自定义基座运行;
1. 可以在 [插件市场](https://ext.dcloud.net.cn/?cat1=5&cat2=51) 查看更多插件,如需开发uni原生插件请参考 [uni原生插件开发文档](https://nativesupport.dcloud.net.cn/NativePlugin/README)
2. 集成原生插件后,需要提交云端打包或制作自定义基座运行才会生效,不支持直接在内置基座运行。
3. 如果插件需要传递文件路径,则需要传手机文件的绝对路径,可使用 5+ [IO模块](http://www.html5plus.org/doc/zh_cn/io.html) 的相关 API 得到文件的绝对路径。
\ No newline at end of file
......@@ -70,7 +70,7 @@ uni.chooseImage({
|:-|:-|:-|
|filePath|String|文件的本地路径|
|createTime|Number|文件的保存时的时间戳,从 `1970/01/01 08:00:00` 到该时刻的秒数。|
|size|String|文件大小,以字节为单位。|
|size|Number|文件大小,以字节为单位。|
**示例代码:**
......
......@@ -6,7 +6,7 @@
|参数名|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-:|
|type|String|否|默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于 ``uni.openLocation`` 的坐标||
|type|String|否|默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于 ``uni.openLocation`` 的坐标,app平台高德SDK仅支持返回gcj02||
|altitude|Boolean|否|传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度|App和字节跳动小程序不支持|
|geocode|Boolean|否|默认false,是否解析地址信息|仅App平台支持|
|success|Function|是|接口调用成功的回调函数,返回内容详见返回参数说明。||
......@@ -61,10 +61,12 @@ uni.getLocation({
- H5: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可视化界面有详细申请指南,详见:[https://ask.dcloud.net.cn/article/29](https://ask.dcloud.net.cn/article/29)。离线打包自行在原生工程中配置。注意包名、appkey、证书信息必须匹配
- App:Android由于谷歌服务被墙,或者手机上没有GMS,想正常定位就需要向高德等三方服务商申请SDK资质,获取AppKey。否则打包后定位就会不准。云打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南,详见:[https://ask.dcloud.net.cn/article/29](https://ask.dcloud.net.cn/article/29)。离线打包自行在原生工程中配置。注意包名、appkey、证书信息必须匹配。真机运行可以正常定位,是因为真机运行基座使用了DCloud向高德申请的sdk配置,打包后必须由开发者自己申请。如果手机自带GMS且网络环境可以正常访问google定位服务器,此时无需在manifest填写高德定位的sdk配置
- App:``<map>`` 组件默认为国测局坐标gcj02,调用 ``uni.getLocation`` 返回结果传递给 ``<map>`` 组件时,需指定 type 为 gcj02。
- App:定位和map是2个东西。通过`getLocation`得到位置坐标后,可以在任意map地图上展示,比如定位使用高德,地图使用google的webview版地图。如果坐标系不同时,注意转换坐标系。
- App:如果使用web-view加载地图,无需在manifest里配地图的sdk配置。
- App:持续定位方案:iOS端可以申请持续定位权限,[参考](https://ask.dcloud.net.cn/article/12569)。Android如果进程被杀,代码无法执行。可以使用[unipush](https://ask.dcloud.net.cn/article/35622),通过服务器激活App,执行透传消息,让App启动然后采集位置。Android上,即使自己写原生插件做后台进程,也很容易被杀,unipush是更合适的方案
- 小程序:api默认不返回详细地址中文描述。需要中文地址有2种方式:1、使用高德地图小程序sdk,在app和微信上都可以获得中文地址,[参考](http://ask.dcloud.net.cn/article/35070)。2、只考虑app,使用``plus.geolocation``也可以获取中文地址
- 小程序:api默认不返回详细地址中文描述。需要中文地址有2种方式:1、使用高德地图小程序sdk,在app和微信上都可以获得中文地址,[参考](http://ask.dcloud.net.cn/article/35070)。2、只考虑app,使用``plus.geolocation``也可以获取中文地址。manifest里的App SDK配置仅用于app,小程序无需在这里配置。
- 可以通过用户授权API来判断用户是否给应用授予定位权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
### uni.chooseLocation(OBJECT)
......@@ -80,6 +82,8 @@ uni.getLocation({
|参数名|类型|必填|说明|
|:-|:-|:-|:-|
|latitude|String|否|目标地纬度,仅微信小程序2.9.0+支持|
|longitude|String|否|目标地经度,仅微信小程序2.9.0+支持|
|keyword|String|否|搜索关键字,仅App平台支持|
|success|Function|是|接口调用成功的回调函数,返回内容详见返回参数说明。|
|fail|Function|否|接口调用失败的回调函数(获取定位失败、用户取消等情况下触发)|
......@@ -97,8 +101,8 @@ uni.getLocation({
|:-|:-|
|name|位置名称|
|address|详细地址|
|latitude|纬度,浮点数,范围为-90~90,负数表示南纬|
|longitude|经度,浮点数,范围为-180~180,负数表示西经|
|latitude|纬度,浮点数,范围为-90~90,负数表示南纬,使用 gcj02 国测局坐标系。|
|longitude|经度,浮点数,范围为-180~180,负数表示西经,使用 gcj02 国测局坐标系。|
**示例**
......@@ -114,7 +118,7 @@ uni.chooseLocation({
```
**注意**
- 不同端,使用地图选择时基于的底层地图引擎不一样,如微信小程序和H5是腾讯地图,App和阿里小程序是高德地图(注意app端不支持百度地图),百度小程序是百度地图,详见地图map组件的使用注意事项
- 不同端,使用地图选择时基于的底层地图引擎不一样,如微信小程序和H5是腾讯地图,App和阿里小程序是高德地图,百度小程序是百度地图,详见地图map组件的使用注意事项。app中也可以使用百度定位,在manifest中配置,打包后生效。但app-nvue里只能用百度定位,不能用百度地图。另外选择地图、查看地图位置的API也仅支持高德地图。所以App端如无特殊必要,建议使用高德地图。
- 微信内置浏览器中可使用微信js sdk,[详见](https://ask.dcloud.net.cn/article/35380)
- chooseLocation属于封装型API,开发者若觉得不够灵活,可自行基于原始的map组件进行封装
- chooseLocation属于封装型API,开发者若觉得不够灵活,可自行基于原始的map组件进行封装。插件市场已经有各种封装样例了。
- 若Android App端位置不准,见上文uni.getLocation的注意事项
......@@ -21,7 +21,7 @@ mapContext
|方法|参数|说明|平台差异说明|最低版本|
|:-|:-|:-|:-|:-|
|getCenterLocation|OBJECT|获取当前地图中心的经纬度,返回的是 gcj02 坐标系,可以用于 [uni.openLocation](api/location/location?id=getlocation)|||
|moveToLocation||将地图中心移动到当前定位点,需要配合map组件的show-location使用|||
|moveToLocation|OBJECT|将地图中心移动到当前定位点,需要配合map组件的show-location使用|||
|translateMarker|OBJECT|平移marker,带动画|app-nvue 2.1.5+、微信小程序带动画||
|includePoints|OBJECT|缩放视野展示所有经纬度|app-nvue 2.1.5+||
|getRegion|OBJECT|获取当前地图的视野范围|||
......@@ -43,14 +43,27 @@ mapContext
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
**moveToLocation 的 OBJECT 参数列表**
|参数 |类型 |必填 |说明 |
|:- |:- |:- |:- |
|longitude|Number |否 |经度 ,App 2.6.8、H5、仅微信小程序 2.8.0+ 支持 |
|latitude |Number |否 |纬度 ,App 2.6.8、H5、仅微信小程序 2.8.0+ 支持 |
|success |Function |否 |接口调用成功的回调函数 ,res = { longitude: "经度", latitude: "纬度"}|
|success |Function |否 |接口调用成功的回调函数 ,res = { longitude: "经度", latitude: "纬度"}|
|fail |Function |否 |接口调用失败的回调函数 |
|complete |Function |否 |接口调用结束的回调函数(调用成功、失败都会执行) |
**translateMarker 的 OBJECT 参数列表**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|markerId|Number|是|指定 marker|
|destination|Object|是|指定 marker 移动到的目标点|
|autoRotate|Boolean||移动过程中是否自动旋转 marker|
|rotate|Number||marker 的旋转角度|
|autoRotate|Boolean||移动过程中是否自动旋转 marker|
|rotate|Number||marker 的旋转角度|
|duration|Number|否|动画持续时长,默认值1000ms,平移与旋转分别计算|
|animationEnd|Function|否| 动画结束回调函数|
|fail|Function|否| 接口调用失败的回调函数|
......
......@@ -5,7 +5,7 @@
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|√|√|
|√|√|√|1.23.4+|√|√|√|
**innerAudioContext 对象的属性列表**
......@@ -98,4 +98,5 @@ innerAudioContext.onError((res) => {
**tips**
如需音频的倍速播放,可通过video的倍速播放替代实现。插件市场有封装好的插件[音频倍速播放](https://ext.dcloud.net.cn/search?q=%E9%9F%B3%E9%A2%91%E5%80%8D%E9%80%9F%E6%92%AD%E6%94%BE)
- 如需音频的倍速播放,可通过video的倍速播放替代实现。插件市场有封装好的插件[音频倍速播放](https://ext.dcloud.net.cn/search?q=%E9%9F%B3%E9%A2%91%E5%80%8D%E9%80%9F%E6%92%AD%E6%94%BE)
- 如果需要带ui的音频播放器样式,可以在插件市场搜索相关[插件](https://ext.dcloud.net.cn/search?q=audio)
### uni.getBackgroundAudioManager()
获取**全局唯一**的背景音频管理器 ``backgroundAudioManager``
背景音频,不是游戏的背景音乐,而是类似QQ音乐那样,App在后台时,仍然在播放音乐。如果你不需要在App切后台时继续播放,那么不应该使用本API,而应该使用普通音频API[uni.createInnerAudioContext](https://uniapp.dcloud.io/api/media/audio-context)
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
......@@ -22,7 +24,7 @@
|singer|String|歌手名,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。|否|
|coverImgUrl|String|封面图url,用于做原生音频播放器背景图。原生音频播放器中的分享功能,分享出去的卡片配图及背景也将使用该图。|否|
|webUrl|String|页面链接,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。|否|
|protocol|String|音频协议。默认值为 'http',设置 'hls' 可以支持播放 HLS 协议的直播音频|否|
|protocol|String|音频协议。默认值为 'http',设置 'hls' 可以支持播放 HLS 协议的直播音频,App平台暂不支持|否|
**backgroundAudioManager 对象的方法列表**
......
......@@ -61,7 +61,10 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
## editorContext.insertImage(OBJECT)
插入图片
插入图片。
微信小程序平台地址为临时文件时,获取的编辑器html格式内容中 `<img>` 标签增加属性 data-local,delta 格式内容中图片 attributes 属性增加 data-local 字段,该值为传入的临时文件地址。
开发者可选择在提交阶段上传图片到服务器,获取到网络地址后进行替换。替换时对于html内容应替换掉 `<img>` 的 src 值,对于 delta 内容应替换掉 `insert { image: abc }` 值。
**OBJECT 参数说明**
......@@ -69,7 +72,10 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
| --- | --- | --- | --- | --- |
| src | String | | 是 | 图片地址 |
| alt | String | | 否 | 图像无法显示时的替代文本 |
| data | Object | | 否 | data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上 |
| width | String | | 否 | 图片宽度(pixels/百分比),2.6.5+ 支持 |
| height | String | | 否 | 图片高度 (pixels/百分比),2.6.5+ 支持|
| extClass | String | | 否 | 添加到图片 img 标签上的类名,2.6.5+ 支持 |
| data | Object | | 否 | data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上,2.6.5+ 支持 |
| success | Function | | 否 | 接口调用成功的回调函数 |
| fail | Function | | 否 | 接口调用失败的回调函数 |
| complete | Function | | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
......
### uni.createMediaContainer()
创建音视频处理容器,最终可将容器中的轨道合成一个视频 ,返回 `MediaContainer` 对象
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|2.9.0+|x|x|x|x|
#### MediaContainer.addTrack(track)
将音频或视频轨道添加到容器
**参数说明**
|参数|说明|
|:-|:-|
|track|要添加的音频或视频轨道|
#### MediaContainer.destroy()
将容器销毁,释放资源
#### MediaContainer.export()
将容器内的轨道合并并导出视频文件
#### MediaContainer.extractDataSource(object)
将容器内的轨道合并并导出视频文件 ,返回 `MediaTrack` 对象
**参数说明**
|属性|类型|必填 |说明|
|:-|:-|:-|:-|
|source|String|是|视频源地址,只支持本地文件|
#### MediaContainer.removeTrack(track)
将音频或视频轨道添加到容器
**参数说明**
|参数|说明|
|:-|:-|
|track|要移除的音频或视频轨道|
### MediaTrack
可通过 `MediaContainer.extractDataSource` 返回。
`MediaTrack` 音频或视频轨道,可以对轨道进行一些操作
**参数说明**
|属性|类型|说明|
|:-|:-|:-|
|kind|String|轨道类型,只读 ,audio:音频轨道;video:视频轨道 |
|duration|Number|轨道长度,只读 |
|volume|Number|音量,音频轨道下有效,可写 |
\ No newline at end of file
......@@ -12,8 +12,8 @@
|方法|参数|说明|平台差异说明|
|:-|:-|:-|:-|
|start|options|开始录音||
|pause||暂停录音||
|resume||继续录音||
|pause||暂停录音|App 暂不支持|
|resume||继续录音|App 暂不支持|
|stop||停止录音||
|onStart|callback|录音开始事件||
|onPause|callback|录音暂停事件||
......
......@@ -24,7 +24,7 @@
|参数|类型|说明|平台差异说明说明|
|:-|:-|:-|:-|
|tempFilePath|String|选定视频的临时文件路径||
|tempFile|File|选定的视频文件|仅H5(2.7.0+)支持|
|tempFile|File|选定的视频文件|仅H5(2.6.15+)支持|
|duration|Number|选定视频的时间长度,单位为 s|APP 2.1.0+、H5、微信小程序|
|size|Number|选定视频的数据量大小|APP 2.1.0+、H5、微信小程序|
|height|Number|返回选定视频的高|APP 2.1.0+、H5、微信小程序|
......@@ -36,6 +36,7 @@
* camera 部分 Android 手机下由于系统 ROM 不支持无法生效,打开拍摄界面后可操作切换
* 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
* App下如需进一步压缩视频大小,可以在插件市场搜索[视频压缩](http://ext.dcloud.net.cn/search?q=%E8%A7%86%E9%A2%91%E5%8E%8B%E7%BC%A9)插件
* 如需上传到cdn,可使用uniCloud.uploadFile API,uniCloud提供了免费cdn给开发者使用,详见[https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile](https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile)
**示例**
......@@ -68,6 +69,91 @@ export default {
}
```
### uni.chooseMedia(OBJECT)
拍摄或从手机相册中选择图片或视频。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|2.10.0+|x|x|x|x|
**OBJECT 参数说明**
|参数名|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|count|Number|9|否|最多可以选择的文件个数|
|mediaType|Array.&lt;string&gt;|['image', 'video']|否|文件类型|
|sourceType|Array.&lt;string&gt;|['album', 'camera']|否|图片和视频选择的来源|
|maxDuration|Number|10|否|拍摄视频最长拍摄时间,单位秒。时间范围为 3s 至 30s 之间|
|sizeType|Array.&lt;string&gt;|['original', 'compressed']|否|仅对 mediaType 为 image 时有效,是否压缩所选文件|
|camera|String|'back'|否|仅在 sourceType 为 camera 时生效,使用前置或后置摄像头|
|success|function||否|接口调用成功的回调函数|
|fail|function||否|接口调用失败的回调函数|
|complete|function||否|接口调用结束的回调函数(调用成功、失败都会执行)|
**OBJECT.mediaType 合法值**
|值|说明|
|:-|:-|
|image|只能拍摄图片或从相册选择图片|
|video|只能拍摄视频或从相册选择视频 |
**OBJECT.sourceType 合法值**
|值|说明|
|:-|:-|
|album|从相册选择|
|camera|使用相机拍摄 |
**OBJECT.camera 合法值**
|值|说明|
|:-|:-|
|back|使用后置摄像头|
|front|使用前置摄像头 |
**success 返回参数说明**
|参数名|类型|说明|
|:-|:-|:-|
|tempFiles|Array.&lt;string&gt;|本地临时文件列表|
|type|String|文件类型,有效值有 image 、video|
**res.tempFiles 的结构**
|参数名 |类型 |说明 |
|:- |:- |:- |
|tempFilePath |String |本地临时文件路径 (本地路径)|
|size |Number |本地临时文件大小,单位 B |
|duration |Number |视频的时间长度 |
|height |Number |视频的高度 |
|width |Number |视频的宽度 |
|thumbTempFilePath|String |视频缩略图临时文件路径 |
**示例**
```javascript
uni.chooseMedia({
count: 9,
mediaType: ['image','video'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success(res) {
console.log(res.tempFilest)
}
})
```
**Tips**
* 如需上传到cdn,可使用uniCloud.uploadFile API,uniCloud提供了免费cdn给开发者使用,详见[https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile](https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile)
### uni.saveVideoToPhotosAlbum(OBJECT)
保存视频到系统相册。
......@@ -133,3 +219,119 @@ export default {
}
}
```
### uni.getVideoInfo(OBJECT)
获取视频详细信息
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|2.11.0+|x|x|x|x|
**OBJECT 参数说明**
|属性 |类型 |默认值 |必填 |说明 |
|:-: |:-: |:-: |:-: |:-: |
|src |string |- |是 |视频文件路径,可以是临时文件路径也可以是永久文件路径 |
|success |function |- |否 |接口调用成功的回调函数 |
|fail |function |- |否 |接口调用失败的回调函数 |
|complete |function |- |否 |接口调用结束的回调函数(调用成功、失败都会执行) |
**success 返回参数说明**
|参数名 |类型 |说明 |
|:- |:- |:- |
|orientation|string |画面方向 |
|type |string |视频格式 |
|duration |number |视频长度 |
|size |number |视频大小,单位 kB |
|height |number |视频的长,单位 px |
|width |number |视频的宽,单位 px |
|fps |number |视频帧率 |
|bitrate |number |视频码率,单位 kbps|
**res.orientation参数说明**
|值 |说明 |
|:- |:- |
|up |默认 |
|down |180度旋转 |
|left |逆时针旋转90度 |
|right |顺时针旋转90度 |
|up-mirrored |同up,但水平翻转 |
|down-mirrored |同down,但水平翻转 |
|left-mirrored |同left,但垂直翻转 |
|right-mirrored |同right,但垂直翻转 |
### uni.compressVideo(OBJECT)
压缩视频接口。开发者可指定压缩质量 quality 进行压缩。当需要更精细的控制时,可指定 bitrate、fps、和 resolution,当 quality 传入时,这三个参数将被忽略。原视频的相关信息可通过 getVideoInfo 获取。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|2.11.0+|x|x|x|x|
App端有很多插件支持视频压缩,详见[插件市场](https://ext.dcloud.net.cn/search?q=%E8%A7%86%E9%A2%91%E5%8E%8B%E7%BC%A9)
压缩完毕后如需上传到cdn,可使用uniCloud.uploadFile API,uniCloud提供了免费cdn给开发者使用,详见[https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile](https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile)
**OBJECT 参数说明**
|属性 |类型 |默认值 |必填 |说明 |
|:-: |:-: |:-: |:-: |:-: |
|src |string | |是 |视频文件路径,可以是临时文件路径也可以是永久文件路径 |
|quality |string | |是 |压缩质量 |
|bitrate |number | |是 |码率,单位 kbps |
|fps |number | |是 |帧率 |
|resolution |number | |是 |相对于原视频的分辨率比例,取值范围(0, 1] |
|success |function | |否 |接口调用成功的回调函数 |
|fail |function | |否 |接口调用失败的回调函数 |
|complete |function | |否 |接口调用结束的回调函数(调用成功、失败都会执行) |
**quality可取值**
|值 |说明 |
|:- |:- |
|low |低 |
|medium |中 |
|high |高 |
**success 返回参数说明**
|参数名 |类型 |说明 |
|:- |:- |:- |
|tempFilePath |string |压缩后的临时文件地址 |
|size |string |压缩后的大小,单位 kB|
### uni.openVideoEditor(OBJECT)
打开视频编辑器
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|2.12.0+|x|x|x|x|
**OBJECT 参数说明**
|属性 |类型 |默认值 |必填 |说明 |
|:-: |:-: |:-: |:-: |:-: |
|filePath |string |- |是 |视频源的路径,只支持本地路径 |
|success |function |- |否 |接口调用成功的回调函数 |
|fail |function |- |否 |接口调用失败的回调函数 |
|complete |function |- |否 |接口调用结束的回调函数(调用成功、失败都会执行) |
**success 返回参数说明**
|参数名 |类型 |说明 |
|:- |:- |:- |
|duration |number |剪辑后生成的视频文件的时长,单位毫秒(ms) |
|size |number |剪辑后生成的视频文件大小,单位字节数(byte) |
|tempFilePath |string |编辑后生成的视频文件的临时路径 |
|tempThumbPath|string |编辑后生成的缩略图文件的临时路径 |
......@@ -2,7 +2,7 @@
从uni-app 2.2.3起,支持uni统计。一张报表,掌握全端数据。业务介绍详见[https://tongji.dcloud.net.cn](https://tongji.dcloud.net.cn)
自定义事件是统计中不可获取的功能。开发者可通过本API自定义上报统计数据,如统计登录、注册、点击某个按钮,我们都可以称之为自定义事件。
自定义事件是统计中不可或缺的功能。开发者可通过本API自定义上报统计数据,如统计登录、注册、点击某个按钮,我们都可以称之为自定义事件。
##### uni.report( eventName , options)
......
......@@ -28,6 +28,7 @@ H5平台登陆注意事项:
|参数名|说明|
|:-|:-|
|authResult|登录服务商提供的登录信息,服务商不同返回的结果不完全相同|
|code|小程序专有,用户登录凭证。开发者需要在开发者服务器后台,使用 code 换取 openid 和 session_key 等信息|
|errMsg|描述信息|
各个平台的登录流程存在差异,详细请参考相关平台的文档说明:
......@@ -156,6 +157,5 @@ uni.login({
```
#### App端集成其他登陆SDK如支付宝、淘宝、facebook登陆的说明
1. 使用原生插件方式,可以集成三方sdk,原生插件开发文档见[https://ask.dcloud.net.cn/article/35428](https://ask.dcloud.net.cn/article/35428)。开发之前可以先去[插件市场](https://ext.dcloud.net.cn/)看下有没有做好的。
2. 支付宝登陆、淘宝登陆在插件市场均有插件,[支付宝登陆](https://ext.dcloud.net.cn/search?q=%E6%94%AF%E4%BB%98%E5%AE%9D%E7%99%BB%E9%99%86)[淘宝登陆](https://ext.dcloud.net.cn/search?q=%E7%99%BE%E5%B7%9D)
3. 也可以内嵌web-view组件,使用web登陆模式集成这些三方登陆
1. [支付宝登陆](https://ext.dcloud.net.cn/search?q=%E6%94%AF%E4%BB%98%E5%AE%9D%E7%99%BB%E9%99%86)[淘宝登陆](https://ext.dcloud.net.cn/search?q=%E7%99%BE%E5%B7%9D)[抖音登录](https://ext.dcloud.net.cn/search?q=%E6%8A%96%E9%9F%B3%E7%99%BB%E5%BD%95)[facebook登录](https://ext.dcloud.net.cn/search?q=facebook%E7%99%BB%E5%BD%95)等在插件市场均已有插件,还有[sharesdk](https://ext.dcloud.net.cn/search?q=sharesdk)等专业集成多家登录分享的插件。
2. 也可以内嵌web-view组件,使用web登陆模式集成这些三方登陆
### uni.requestPayment(OBJECT)
支付
uni.requestPayment是一个统一各平台的客户端支付API,不管是在某家小程序还是在App中,客户端均使用本API调用。
uni.requestPayment是一个统一各平台的客户端支付API,不管是在某家小程序还是在App中,客户端均使用本API调用支付
本API运行在各端时,会自动转换为各端的原生支付调用API。
虽然客户端API统一了,但各平台的支付申请开通、配置回填、服务器开发,仍然需要看各个平台本身的支付文档。
注意支付不仅仅需要客户端的开发,还需要服务端开发。虽然客户端API统一了,但各平台的支付申请开通、配置回填仍然需要看各个平台本身的支付文档。
比如微信有App支付、小程序支付、H5支付等不同的申请入口和使用流程,对应到uni-app,在App端要申请和使用微信的App支付,而小程序端则申请和使用微信的小程序支付。
比如微信有App支付、小程序支付、H5支付等不同的申请入口和使用流程,对应到uni-app,在App端要申请微信的App支付,而小程序端则申请微信的小程序支付。
如果服务端使用[uniCloud](https://uniapp.dcloud.io/uniCloud/README),那么官方提供了[uniPay](https://uniapp.dcloud.io/uniCloud/unipay)云端统一支付服务,把App、微信小程序、支付宝小程序里的服务端支付开发进行了统一的封装。
前端统一的`uni.requestPayment`和云端统一的`uniPay`搭配,可以极大提升支付业务的开发效率,强烈推荐给开发者使用。`uniPay`的文档另见:[https://uniapp.dcloud.io/uniCloud/unipay](https://uniapp.dcloud.io/uniCloud/unipay)
**平台差异说明**
......@@ -43,7 +47,8 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在
2. 支付宝小程序的 orderInfo(支付宝的规范为 tradeNO) 为 String 类型,表示支付宝交易号。
3. 字节跳动小程序的 orderInfo 为 Object 类型,详见:[发起头条支付](https://developer.toutiao.com/dev/cn/mini-app/develop/open-capacity/payment/pay)
4. 由于头条新版支付接口要求版本较高,在不支持新版支付接口的情况下仍会对应旧版支付接口,此时 orderInfo 对应字节跳动小程序 data, 详见:[头条支付旧版接口](https://developer.toutiao.com/dev/cn/mini-app/develop/open-capacity/payment/requestpayment-deprecated)。用户可以使用 tt.pay 判断是否支持新版接口。另外需要注意字节跳动小程序在`1.35.0+`版本基础库支持了 canIUse ,在`1.19.4+`版本基础库支持了新版支付接口 tt.pay ,所以应避免使用 canIUse 判断是否为新版接口。
5. App端,支付宝支付和微信支付 orderInfo 均为 String 类型。
5. App端,支付宝支付 orderInfo 为 String 类型。
6. App端,微信支付 orderInfo 为 Object 类型。
6. App端,苹果应用内支付 orderInfo 为Object 类型,{productid: 'productid'}。
#### H5 平台@h5-payment
......@@ -57,7 +62,7 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在
- 其他支付(如银联)请使用web-view组件以H5方式实现。
- 支付宝小程序只支持支付宝支付。
- 百度小程序为百度支付,其二次封装了度小满、支付宝、微信支付。
- Hello uniapp 里演示了各种支付(iap支付见社区文章底部的赞助按钮),同时该示例开源了对应的服务端源码,参考:[https://github.com/dcloudio/H5P.Server/tree/master/payment](https://github.com/dcloudio/H5P.Server/tree/master/payment)
- Hello uniapp 里演示了各种支付。
### App平台支付流程
......@@ -100,7 +105,7 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在
1.`manifest.json - App模块权限选择` 中勾选 payment(支付)
2.`manifest.json - App SDK配置` 中,勾选需要的支付平台,目前有微信支付、支付宝支付、苹果应用内支付(IAP),其中微信支付需要填写从微信开放平台获取的AppID
![](http://img-cdn-qiniu.dcloud.net.cn/uploads/article/20190520/4c674701c469a258aeb69b803d3c97db.png)
![](https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20190520/4c674701c469a258aeb69b803d3c97db.png)
<!-- ![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/pay1.png) -->
<!-- 临时把老图注掉,替换正式地址时再把老图地址放开 -->
3. 这些配置需要打包生效,真机运行仍然是HBuilder基座的设置,可使用自定义基座调试。离线打包请参考离线打包文档在原生工程中配置。
......@@ -110,19 +115,24 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在
#### uni-app里开发
##### uniCloud开发
- 前端:使用`unicloud.callfunction`调用指定的云函数。
- 服务端:使用[uniPay](https://uniapp.dcloud.io/uniCloud/unipay),该服务对应的演示工程在插件市场:[https://ext.dcloud.net.cn/plugin?id=1835](https://ext.dcloud.net.cn/plugin?id=1835),此示例为完整的前后端支付演示,使用`uniPay`可极快的完成支付业务开发。
##### php开发
- 前端:使用 ``uni.request`` 请求服务端接口,得到订单数据,使用 ``uni.requestPayment`` 向支付平台发起支付请求,拉起支付平台的客户端进行支付。在hello uni-app里详细代码。
- 服务端:PHP可参考 [https://github.com/dcloudio/H5P.Server/tree/master/payment](https://github.com/dcloudio/H5P.Server/tree/master/payment)
#### FAQ
- Q:如何使用ping++等聚合支付
A:uni-app的js API 已经完成跨端统一,客户端无需使用三方聚合支付。仅在服务器端使用三方聚合支付即可
A:uni-app的js API 已经完成跨端统一,客户端无需使用三方聚合支付。如果服务器选择`uniCloud`,也无需三方聚合支付。如果服务端使用php、java等传统服务器开发,可以在服务端使用三方聚合支付
- 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版是包含微信和支付宝支付的,此时注意分开判断。详见[https://ask.dcloud.net.cn/article/36447](https://ask.dcloud.net.cn/article/36447)
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)
**示例**
......
`push` 是指从服务器主动给手机端发送消息。
`push` 是指从服务器主动给手机端发送消息。App平台和小程序平台机制不太一样,小程序平台的概念叫模板消息。
- App平台
### App平台
`uni-app` 提供了 uni push 服务,这是一个包括客户端和服务器的统一服务,整合了苹果APNs、华为、小米、OPPO、VIVO、魅族等多家厂商的推送和个推的独立推送,不管客户端还是服务器,一套代码多端推送。
`uni-app` 提供了 uni push 服务,这是一个包括客户端和服务器的统一服务,整合了苹果APNs、华为、小米、OPPO、VIVO、魅族、谷歌FCM等多家厂商的系统推送和个推的独立推送,不管客户端还是服务器,一套代码多端推送。
开发者可以在uniPush中只接入个推,不配置其他厂商服务,但这将导致Android上App离线后无法推送消息。因为现在的国产rom节电管理策略严格,不使用rom厂商的push基本难以离线送达消息。
开发者可以在uniPush中只接入个推,不配置其他厂商服务,但这将导致很多Android手机上App离线后无法推送消息。因为现在的国产rom节电管理策略严格,不使用原厂的push基本难以离线送达消息。
若想提供消息推送成功率,只有使用uniPush,并向各rom厂商申请开通推送服务(免费)。
因本文档内容有限,另行开贴,介绍业务、开通流程,请务必仔细阅读 [https://ask.dcloud.net.cn/article/35622](https://ask.dcloud.net.cn/article/35622)
- 客户端调用的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/)
- web自助发送界面:在DCloud的开发者后台:[https://dev.dcloud.net.cn/](https://dev.dcloud.net.cn/),选择应用后点击uniPush栏目。
- 编写代码调用服务器接口发送push消息:
* 如果使用uniCloud开发服务器,可以使用封装好的插件,更简单易用:[https://ext.dcloud.net.cn/plugin?id=1680](https://ext.dcloud.net.cn/plugin?id=1680)
* 如果使用传统服务器开发,文档仍然是个推的服务器文档[http://docs.getui.com/](http://docs.getui.com/)
## 其他相关资源
**其他相关资源**
- 检查应用是否被授予推送权限:[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)
......@@ -25,11 +27,13 @@
- 常见误解1:“uniPush的专业性,和专业的个推、极光等服务可相比吗?”
答:uniPush是由个推将其本来收费的vip push产品,免费提供给了DCloud的开发者。它与个推vip push的只有2个区别:1、免费;2、账户使用的是DCloud开发者账户,而无需再重新注册个推账户。个推是A股上市公司,专业性在推送领域领先。
- 常见误解2:“uniPush好麻烦,我就喜欢个推、极光这种简单sdk,不想去各个rom厂商去申请一圈”
答:有此误解的开发者,根本不知道推送行业的现状。不集成rom厂商的推送,就无法在App离线时发送push。开发者可以只使用uniPush里面的个推服务,不去各个rom厂商申请推送,但你要知道这样做的后果就是在华为、小米、OPPO、VIVO、魅族上发不了离线消息。
答:uniPush不建立在申请手机厂商授权的基础上,如果你不申请那些,使用起来和用普通的个推是一样的。但是要特别注意,推送行业的现状就是:**不集成rom厂商的推送,就无法在App离线时发送push。**。按照普通个推模式使用,后果就是在华为、小米、OPPO、VIVO、魅族上发不了离线消息。
- 常见误解3:“uniPush的送达率还是不够,是否可以付费来提升送达率,个推是有付费提升送达率的方法的”
答:前文已经说了。个推的付费提升送达率的产品就是vip push,而uniPush就是个推的vip Push。DCloud通过谈判免费给DCloud的开发者使用了。
- 常见误解4:开通uniPush要实名认证,还得传身份证,开通普通个推不用这么麻烦。
答:此问题之前曾存在,后来已经处理,保持和个推需要的身份信息相同,不再需要身份证。
- 小程序平台
### 小程序平台
小程序平台的类似概念叫做`模板消息`
......@@ -37,6 +41,8 @@
微信模板消息文档:[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html)
如果使用uniCloud发送微信模板消息,参考:[https://ext.dcloud.net.cn/plugin?id=1810](https://ext.dcloud.net.cn/plugin?id=1810)
支付宝模板消息文档:[https://docs.alipay.com/mini/introduce/message](https://docs.alipay.com/mini/introduce/message)
百度模板消息文档:[https://smartprogram.baidu.com/docs/develop/third/api/](https://smartprogram.baidu.com/docs/develop/third/api/)
......
......@@ -43,8 +43,8 @@ uni-app的App引擎已经封装了微信、QQ、微博的分享SDK,开发者
|值|说明|provider 支持度|
|:-|:-|:-|
|0|图文|weixin、sinaweibo|
|1|纯文字||
|2|纯图片||
|1|纯文字|weixin、qq|
|2|纯图片|weixin、qq|
|3|音乐|weixin、qq|
|4|视频|weixin、sinaweibo|
|5|小程序|weixin|
......@@ -254,7 +254,7 @@ uni.share({
##### FAQ
- 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)
- A:插件市场已有相关插件,[详见](https://ext.dcloud.net.cn/search?q=share);也可以根据原生插件教程自行开发,原生插件开发文档见[https://ask.dcloud.net.cn/article/35428](https://ask.dcloud.net.cn/article/35428)
- Q:弹出分享菜单,是否有已经写好的插件?
- A:插件市场有很多封装好的分享菜单插件,[底部图标菜单](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),可直接弹出菜单,并且没有遮挡层级问题,推荐使用。
......
#### uni.preloadPage(OBJECT)
预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。
**平台差异说明**
|App-nvue|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.7.12+)|√(2.7.12+)|x|x|x|x|x|
|属性|类型|必填|说明|
|:-:|:-:|:-:|:-:|
|url|string|是|预加载页面url|
|complete|Function|否|预加载成功完成回调|
|fail|Function|否|预加载失败回调|
#### H5 平台
预加载 /pages/test/test 对应的js文件,不执行页面预渲染逻辑
```
uni.preloadPage({url: "/pages/test/test"});
```
#### App-nvue 平台
预加载nvue页面 /pages/test/test
```
uni.preloadPage({url: "/pages/test/test"});
```
注意事项
1. App平台仅支持预加载 nvue 页面,执行页面预渲染,预载时触发生命周期 `onLoad``onReady`,不触发 `onShow`
2. 打开新页面时,url 完全相同(包含参数)时,优先使用预加载页面,触发生命周期 onShow
3. tabbar页面,仅支持预加载尚未显示过的页面,否者返回 fail,提示 already exists
4. 同一时间,相同 url 仅 preloadPage 一次
5. 当同一个预载页面已被打开(在路由栈),再次打开相同url时,不再使用该预加载页面,而是打开新的非预载页面
6. `uni.reLanuch`, `uni.switchTab`, `uni.navigateBack`(含Android返回键) 切换页面时,预加载页面不会被销毁,仅触发生命周期 `onHide`
7. 在预载页面使用 `uni.redirectTo` 时,预加载页面会被销毁,触发生命周期 `onUnload`
示例
```
uni.preloadPage({url: "/pages/test/test"}); // 预加载 /pages/test/test 页面(仅触发onLoad,onReady)
uni.navigateTo({url: "/pages/test/test"}); // url匹配,跳转预加载页面(仅触发onShow)
uni.navigateTo({url: "/pages/test/test?a=b"}); // url不匹配,正常打开新页面
```
HBuilderX 2.7.12+的hello uni-app,在navigator示例和uni ui的日历示例中增加了页面预载示例。
#### uni.unPreloadPage(OBJECT)
取消预载页面。
1. 仅App-nvue支持
2. 当预载页面未被打开时,使用 `unPreloadPage`时会销毁该页面,触发生命周期 `onUnload`
3. 当预载页面已被打开时,使用 `unPreloadPage`时不销毁该页面,但该预加载页面不再继续存在,会随着路由变化而销毁
......@@ -4,14 +4,16 @@
> 在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。
**推荐开发者使用更好的API`uniCloud.uploadFile`,uniCloud提供了免费CDN和更好的易用性,包括安全的cdn直传。详见:[https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile](https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile)**
**OBJECT 参数说明**
|参数名|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|url|String|是|开发者服务器 url||
|files|Array|否|需要上传的文件列表。**使用 files 时,filePath 和 name 不生效。**|App、H5( 2.7.0+)|
|files|Array|否|需要上传的文件列表。**使用 files 时,filePath 和 name 不生效。**|App、H5( 2.6.15+)|
|fileType|String|见平台差异说明|文件类型,image/video/audio|仅支付宝小程序,且必填。|
|file|File|否|要上传的文件对象。|仅H5(2.7.0+)支持|
|file|File|否|要上传的文件对象。|仅H5(2.6.15+)支持|
|filePath|String|是|要上传文件资源的路径。||
|name|String|是|文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容||
|header|Object|否|HTTP 请求 Header, header 中不能设置 Referer。||
......@@ -25,7 +27,8 @@
- App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
- hello uni-app中的客服反馈,支持多图上传。[uni-app插件市场](https://ext.dcloud.net.cn/)中也有多个封装的组件。
- App平台选择和上传非图像、视频文件,参考[https://ask.dcloud.net.cn/article/35547](https://ask.dcloud.net.cn/article/35547)
- 网络请求的 ``超时时间`` 可以统一在 ``manifest.json`` 中配置 [networkTimeout](/collocation/manifest?id=networktimeout)
- 网络请求的 ``超时时间`` 可以统一在 ``manifest.json`` 中配置 [networkTimeout](/collocation/manifest?id=networktimeout)
- 支付宝小程序开发工具上传文件返回的http状态码为字符串形式,支付宝小程序真机返回的状态码为数字形式
**files参数说明**
......@@ -34,7 +37,7 @@ files 参数是一个 file 对象的数组,file 对象的结构如下:
|参数名|类型|必填|说明|
|:-|:-|:-|:-|
|name|String|否|multipart 提交时,表单的项目名,默认为 file|
|file|File|否|要上传的文件对象,仅H5(2.7.0+)支持|
|file|File|否|要上传的文件对象,仅H5(2.6.15+)支持|
|uri|String|是|文件的本地地址|
Tip:
......@@ -138,7 +141,7 @@ uni.chooseImage({
### uni.downloadFile(OBJECT)
下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径。
> 在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。
> 在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。在h5上是跨域的,用户需要处理好跨域问题。
**OBJECT 参数说明**
......@@ -231,4 +234,4 @@ downloadTask.onProgressUpdate((res) => {
downloadTask.abort();
}
});
```
\ No newline at end of file
```
......@@ -15,8 +15,9 @@
|dataType|String|否|json |如果设为 json,会尝试对返回的数据做一次 JSON.parse||
|responseType|String|否|text |设置响应的数据类型。合法值:text、arraybuffer|App和支付宝小程序不支持|
|sslVerify|Boolean|否|true|验证 ssl 证书|仅App安卓端支持(HBuilderX 2.3.3+)|
|withCredentials|Boolean|否|false|跨域请求时是否携带凭证(cookies)|仅H5支持(HBuilderX 2.7.0+)|
|success|Function|否||收到开发者服务成功返回的回调函数||
|withCredentials|Boolean|否|false|跨域请求时是否携带凭证(cookies)|仅H5支持(HBuilderX 2.6.15+)|
|firstIpv4|Boolean|否|false|DNS解析时优先使用ipv4|仅 App-Android 支持 (HBuilderX 2.8.0+)|
|success|Function|否||收到开发者服务器成功返回的回调函数||
|fail|Function|否||接口调用失败的回调函数||
|complete|Function|否||接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
......@@ -115,6 +116,7 @@ requestTask.abort();
**Tips**
- 请求的 ``header````content-type`` 默认为 ``application/json``
- 避免在 ``header`` 中使用中文,或者使用 encodeURIComponent 进行编码,否则在百度小程序报错。(来自:[快狗打车前端团队](https://juejin.im/user/2612095359650712)
- 网络请求的 ``超时时间`` 可以统一在 ``manifest.json`` 中配置 [networkTimeout](/collocation/manifest?id=networktimeout)
- H5 端本地调试需注意跨域问题,参考:[调试跨域问题解决方案](https://ask.dcloud.net.cn/article/35267)
- 注意由于百度小程序iOS客户端,请求失败时会进入fail回调,需要针对百度增加相应的处理以解决该问题。
......
......@@ -76,6 +76,9 @@ uni.redirectTo({
关闭所有页面,打开到应用内的某个页面。
**注意:**
如果调用了 [uni.preloadPage(OBJECT)](https://uniapp.dcloud.net.cn/api/preload-page) 不会关闭,仅触发生命周期 `onHide`
**OBJECT参数说明**
|参数|类型|必填|说明|
......@@ -108,6 +111,9 @@ Tips:
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
**注意:**
如果调用了 [uni.preloadPage(OBJECT)](https://uniapp.dcloud.net.cn/api/preload-page) 不会关闭,仅触发生命周期 `onHide`
**OBJECT参数说明**
|参数|类型|必填|说明|
......@@ -251,4 +257,4 @@ pages.json 中配置的是窗口显示的动画
**注意**
- 纯nvue项目(render为native),窗体动画默认进入动画为popin,返回为pop-out。如果想修改动画类型,只能通过uni.navigateTo API修改,在组件或pages.json里配置动画类型无效
- 非纯nvue项目,App端窗体动画,默认进入动画为slider-in-right,默认返回动画为pop-out
- webview 中嵌入 uni-app H5时,使用 uni.webView.navigateTo... 跳转页面
......@@ -104,6 +104,7 @@ App端在2.3.8版以前,可在插件市场获取[指纹相关插件](https://e
**OBJECT参数说明**
|属性 |类型 |默认值 |必填 |说明 |
|:-: |:-: |:-: |:-: |:-: |
|checkAuthMode|string | |是 |认证方式 |
|success |function | |否 |接口调用成功的回调函数 |
|fail |function | |否 |接口调用失败的回调函数 |
......
......@@ -48,7 +48,7 @@ uni.scanCode({
// 调起条码扫描
uni.scanCode({
scanType: 'barCode',
scanType: ['barCode'],
success: function (res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
......
......@@ -4,6 +4,22 @@
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|x|x|x|
### uni.setBLEMTU(OBJECT)
2.8.4+
设置蓝牙最大传输单元。需在 uni.createBLEConnection调用成功后调用,mtu 设置范围 (22,512)。安卓5.1以上有效。
**OBJECT 参数说明**
|属性|类型|默认值|必填|说明|
|---|---|---|---|---|
|deviceId|string||是|用于区分设备的 id|
|mtu|number||是|最大传输单元(22,512) 区间内,单位 bytes|
|success|function||否|接口调用成功的回调函数|
|fail|function||否|接口调用失败的回调函数|
|complete|function||否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.writeBLECharacteristicValue(OBJECT)
向低功耗蓝牙设备特征值中写入二进制数据。注意:必须设备的特征值支持 write 才可以成功调用。
......@@ -282,6 +298,23 @@ uni.getBLEDeviceServices({
})
```
### uni.getBLEDeviceRSSI(OBJECT)
2.8.4+
获取蓝牙设备的信号强度。
**OBJECT 参数说明**
|属性|类型|默认值|必填|说明|
|---|---|---|---|---|
|deviceId|string||是|蓝牙设备 id|
|success|function||否|接口调用成功的回调函数|
|fail|function||否|接口调用失败的回调函数|
|complete|function||否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.getBLEDeviceCharacteristics(OBJECT)
获取蓝牙设备某个服务中所有特征值(characteristic)。
......
......@@ -27,6 +27,8 @@ uni.setScreenBrightness({
});
```
>*Tips:* 避免 onshow() 里使用 setScreenBrightness() , 亮度变化会再次触发 onShow() 造成死循环
### uni.getScreenBrightness(OBJECT)
获取屏幕亮度。
......@@ -73,7 +75,7 @@ uni.getScreenBrightness({
|参数名|类型|必填|说明|
|:-|:-|:-|:-|
|keepScreenOn|Boolean|是|接口调用成功的回调|
|keepScreenOn|Boolean|是|是否保持屏幕常亮|
|success|Function|否|接口调用成功的回调|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
......
......@@ -54,9 +54,10 @@
|safeAreaInsets|在竖屏正方向下的安全区域插入位置(2.5.3+)|App、H5、微信小程序|
**Tips**
- 屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生tabbar高度
- H5端,windowHeight不包含NavigationBar和TabBar的高度,windowTop等于NavigationBar高度,windowBottom等于TabBar高度,statusBarHeight为0
- APP端windowTop和windowBottom都是0,注意区分与H5端的差异
- 屏幕高度 = 原生NavigationBar高度(含状态栏高度)+ 可使用窗口高度 + 原生TabBar高度
- windowHeight不包含NavigationBar和TabBar的高度
- H5端,windowTop等于NavigationBar高度,windowBottom等于TabBar高度
- App端,windowTop等于透明状态NavigationBar高度,windowBottom等于透明状态TabBar高度
**safeArea 的结构**
......
......@@ -17,4 +17,5 @@ uni.onUIStyleChange(function (res) {
```
**注意**
- 自定义基座生效
- 仅 V3 编译支持,参考 manifest.json 配置
\ No newline at end of file
......@@ -55,4 +55,7 @@
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|intervalID|Number|是|要取消的定时器的 ID|
\ No newline at end of file
|intervalID|Number|是|要取消的定时器的 ID|
## 注意事项
* App 端返回的定时器编号可能为 String 类型,使用时无需主动转换为 Number 类型
\ No newline at end of file
......@@ -17,7 +17,11 @@
uni.setNavigationBarTitle({
title: '新的标题'
});
```
```
**注意**
- 如果需要在页面进入时设置标题,可以在`onReady`内执行,以避免被框架内的修改所覆盖。如果必须在`onShow`内执行需要延迟一小段时间
### uni.setNavigationBarColor(OBJECT)
......@@ -42,7 +46,8 @@ uni.setNavigationBarTitle({
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
**注意**
- Android 上的 backgroundColor 参数有限制,黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)
- Android 上的 backgroundColor 参数有限制,黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)
- 如果需要在页面进入时设置标题,可以在`onReady`内执行,以避免被框架内的修改所覆盖。如果必须在`onShow`内执行需要延迟一小段时间
**animation 结构**
......@@ -140,7 +145,7 @@ uni.hideNavigationBarLoading()
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|x|x|x|
|x|x|√|x|x|1.48.0+|1.10.0+|
**OBJECT参数说明**
......
......@@ -43,7 +43,10 @@ uni.showToast({
**Tips**
App端可通过[plus.nativeUI.toast API](https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast)实现更多功能。
- App端可通过[plus.nativeUI.toast API](https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast)实现更多功能。
- `showToast``showLoading` 是底层同一个(按的小程序的设计),所以 `showToast``showLoading` 会相互覆盖,而 `hideLoading` 也会关闭 `showToast` 。冲突解决方案:
+ App:使用 [plus.nativeUI.toast](http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast) 接口
+ 非App:其中一个使用自定义组件实现。
### uni.hideToast()
......@@ -94,6 +97,12 @@ setTimeout(function () {
}, 2000);
```
**注意**
- `showToast``showLoading` 是底层同一个(按的小程序的设计),所以 `showToast``showLoading` 会相互覆盖,而 `hideLoading` 也会关闭 `showToast` 。冲突解决方案:
+ App:使用 [plus.nativeUI.toast](http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast) 接口
+ 非App:其中一个使用自定义组件实现。
### uni.showModal(OBJECT)
显示模态弹窗,类似于标准 html 的消息框:alert、confirm。
......@@ -153,7 +162,7 @@ uni.showModal({
|参数|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|itemList|Array&lt;String&gt;|是|按钮的文字数组|微信、百度、字节跳动小程序数组长度最大为6个|
|itemColor|HexColor|否|按钮的文字颜色,字符串格式,默认为"#000000"|字节跳动小程序不支持|
|itemColor|HexColor|否|按钮的文字颜色,字符串格式,默认为"#000000"|App-iOS、字节跳动小程序不支持|
|popover|Object|否|iPad 上弹出原生选择按钮框的指示区域,默认指向屏幕底部水平居中位置|仅 App 2.6.6+ 支持|
|success|Function|否|接口调用成功的回调函数,详见返回参数说明||
|fail|Function|否|接口调用失败的回调函数||
......
......@@ -4,10 +4,24 @@
**OBJECT参数说明**
|参数名|类型|必填|说明|
|:-|:-|:-|:-|
|scrollTop|Number|是|滚动到页面的目标位置(单位px)|
|duration|Number|否|滚动动画的时长,默认300ms,单位 ms|
|参数名 |类型 |必填 |说明 |
|:- |:- |:- |:- |
|scrollTop|String |否 |滚动到页面的目标位置(单位px) |
|selector |String |否 |选择器,微信小程序2.7.3+ 、支付宝小程序1.20.0+支持 |
|duration |Number |否 |滚动动画的时长,默认300ms,单位 ms |
|success |function |否 |接口调用成功的回调函数 |
|fail |function |否 |接口调用失败的回调函数 |
|complete |function |否 |接口调用结束的回调函数(调用成功、失败都会执行) |
**selector 语法**
selector类似于 CSS 的选择器,但仅支持下列语法。
- ID选择器:#the-id
- class选择器(可以连续指定多个):`.a-class.another-class`
- 子元素选择器:`.the-parent > .the-child`
- 后代选择器:`.the-ancestor .the-descendant`
- 跨自定义组件的后代选择器:`.the-ancestor >>> .the-descendant`
- 多选择器的并集:`#a-node, .some-other-nodes`
**示例**
......
......@@ -6,7 +6,7 @@
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|
|√|√|√|√(钉钉小程序不支持)|√|x|√|
**OBJECT参数说明:**
......@@ -16,7 +16,7 @@
|text|String||否|tab 上的按钮文字||
|iconPath|String||否|图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片||
|selectedIconPath|String||否|选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效||
|pagePath|String||否|页面绝对路径,必须在 [pages](/collocation/pages?id=pages) 中先定义|App(2.8.4+)、H5(2.8.4+)|
|pagePath|String||否|页面绝对路径,必须在 [pages](/collocation/pages?id=pages) 中先定义,被替换掉的 pagePath 不会变成普通页面(仍然需要使用 uni.swichTab 跳转)|App(2.8.4+)、H5(2.8.4+)|
|success|Funtion||否|接口调用成功的回调函数||
|fail|Funtion||否|接口调用失败的回调函数||
|complete|Funtion||否|接口调用结束的回调函数(调用成功、失败都会执行)||
......@@ -216,3 +216,4 @@ uni.setTabBarBadge({
- 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
- 如果想要一个中间带+号的tabbar,在HBuilderX中新建uni-app项目、选择 底部选项卡 模板
- 以上大部分操作 tabbar 的 API 需要在 tabbar 渲染后才能使用,避免在 tabbar 未初始化前使用
......@@ -39,7 +39,7 @@ export default {
},
onLoad() {
// #ifdef APP-PLUS
const currentWebview = this.$mp.page.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里,直接使用plus.webview.currentWebview()无效
const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); //动态重设bounce效果
// #endif
}
......@@ -60,4 +60,4 @@ console.log(currentWebview.isVisible());//查询当前webview是否可见
// #endif
```
uni-app自带的web-view组件,是页面中新插入的一个子webview。获取该对象的方法见:[https://ask.dcloud.net.cn/article/35036](https://ask.dcloud.net.cn/article/35036)
\ No newline at end of file
uni-app自带的web-view组件,是页面中新插入的一个子webview。获取该对象的方法见:[https://ask.dcloud.net.cn/article/35036](https://ask.dcloud.net.cn/article/35036)
......@@ -6,3 +6,4 @@
- 字节跳动小程序:[规范详情](https://developer.toutiao.com/docs/game/worker/tt.createWorker.html)
- QQ小程序:[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/worker/worker.html)
- H5:标准H5的worker仍然可以使用
- App:App的js是在独立的jscore运行的,如果需要在另一个线程运行js,可以使用web-view组件或renderjs,这样的js运行在webview里,和jscore里的js是两个线程。但注意多个webview之间的js是一个进程,使用webview里的js时注意会影响视图层的渲染。
DCloud有**420万**开发者,[uni统计](https://tongji.dcloud.net.cn/)手机端月活**6.5亿**。是开发者数量和案例最丰富的多端开发框架。
DCloud有**500万**开发者,[uni统计](https://tongji.dcloud.net.cn/)手机端月活**10亿**。是开发者数量和案例最丰富的多端开发框架。
欢迎知名开发商提交案例或接入uni统计,[项目案例征集](https://github.com/dcloudio/uni-app/issues/6)提交
欢迎知名开发商[提交案例](https://github.com/dcloudio/uni-app/issues/6)或接入[uni统计](https://tongji.dcloud.net.cn/)
### 新冠抗疫专区案例
......@@ -41,18 +41,58 @@ uni-app助力数百家单位快速上线**抗疫系统**,开源众多项目,
### 第三方开发者案例
<a href="https://zqact.tenpay.com/chaogu/" target="_blank" class="clear-style"><b>腾讯全民模拟炒股大赛:</b></a> 由腾讯金融科技倾力打造的证券投资者教育平台。
#### 推荐案例
<a href="https://m.qinxuan.honor.cn/" target="_blank" class="clear-style"><b>华为荣耀亲选商城:</b></a> 华为公司旗下荣耀品牌精品电商平台。
<div style="display:flex;justify-content: space-around;">
<a href="javascript:;" target="_self" class="clear-style barcode-view">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/60aa65e0-d95c-11ea-b244-a9f5e5565f30.png" width="200"/>
<span style="margin-top:15px;">微信小程序</span>
</a>
<a href="https://m.qinxuan.honor.cn/" target="_blank" class="clear-style barcode-view">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-alicdn/1fa35320-c559-11ea-81ea-f115fe74321c.png" width="200"/>
<span style="margin-top:15px;">H5</span>
</a>
<a href="https://appgallery1.huawei.com/#/app/C100382765" target="_blank" class="clear-style barcode-view">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-alicdn/6933ea80-c55a-11ea-9dfb-6da8e309e0d8.png" width="200"/>
<span style="margin-top:15px;">App(部分栏目使用DCloud SDK)</span>
</a>
</div>
<a href="https://discuz.chat/docs/" target="_blank" class="clear-style"><b>腾讯Discuz! Q:</b></a> 经典论坛新版本,站长利器。
<div style="display:flex;justify-content: space-around;">
<a href="javascript:;" target="_self" class="clear-style barcode-view">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-alicdn/6f1a9a90-c5ad-11ea-81ea-f115fe74321c.png" width="200"/>
<span style="margin-top:15px;">微信小程序</span>
</a>
<a href="https://discuz.chat/" target="_blank" class="clear-style barcode-view">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-alicdn/c7d1be20-c562-11ea-81ea-f115fe74321c.png" width="200"/>
<span style="margin-top:15px;">H5</span>
</a>
</div>
<b>星巴克:</b>全球最大的咖啡连锁店,世界领先的特种咖啡零售商
<div style="display:flex;justify-content: space-around;">
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<img src="https://img.cdn.aliyun.dcloud.net.cn/uni-app/case/tx-chaogu-mp-weixin.jpg" width="200"/>
<span style="margin-top:15px;">微信小程序</span>
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/734f5c50-d3df-11ea-81ea-f115fe74321c.jpg" width="200"/>
<span style="margin-top:15px;">微信小程序</span>
</a>
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<img src="https://img.cdn.aliyun.dcloud.net.cn/uni-app/case/tx-chaogu-h5.png" width="200"/>
<span style="margin-top:15px;">H5码(请使用微信扫码)</span>
</div>
<b>Crimaster犯罪大师:</b>火爆的全球推理侦探专属社区。优秀App案例,Appstore娱乐分类排名曾排**第1位**[报道](https://baijiahao.baidu.com/s?id=1667788917828125742&wfr=spider&for=pc)
<div style="display:flex;justify-content: space-around;">
<a href="https://android.myapp.com/myapp/detail.htm?apkName=com.ultron.crimaster" target="_blank" class="clear-style barcode-view">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-alicdn/83bc24b0-c55c-11ea-b244-a9f5e5565f30.png" width="200"/>
<span style="margin-top:15px;">Android App版</span>
</a>
<a href="https://apps.apple.com/cn/app/crimaster%E7%8A%AF%E7%BD%AA%E5%A4%A7%E5%B8%88/id1501701702" target="_blank" class="clear-style barcode-view">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-alicdn/83bbd690-c55c-11ea-8bd0-2998ac5bbf7e.png" width="200"/>
<span style="margin-top:15px;">iOS App版</span>
</a>
</div>
<!--
<a href="https://www.csdn.net/" target="_blank" class="clear-style"><b>CSDN:</b></a> 专业 IT 技术社区,致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
<div style="display:flex;justify-content: space-around;">
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
......@@ -60,6 +100,7 @@ uni-app助力数百家单位快速上线**抗疫系统**,开源众多项目,
<span style="margin-top:15px;">微信小程序码</span>
</a>
</div>
-->
<a href="https://www.oschina.net/" target="_blank" class="clear-style"><b>开源中国:</b></a> 中文开源技术交流社区,提供最新的开源软件资讯。
<div style="display:flex;justify-content: space-around;">
......@@ -73,6 +114,30 @@ uni-app助力数百家单位快速上线**抗疫系统**,开源众多项目,
</a>
</div>
<b>vivo官方商城:</b> vivo公司旗下的官方自营商城。
<div style="display:flex;justify-content: space-around;">
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/vivo-weixin.jpg" width="200"/>
<span style="margin-top:15px;">微信小程序码</span>
</a>
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<img src="https://img.cdn.aliyun.dcloud.net.cn/uni-app/case/vivo-mall.png" width="200"/>
<span style="margin-top:15px;">支付宝小程序码</span>
</a>
</div>
<a href="https://duolingo.91ddedu.com/" target="_blank" class="clear-style"><b>登登多邻国:</b></a> 外语学习者题库。其服务端整体基于[uniCloud](https://uniapp.dcloud.net.cn/uniCloud/README),前端包括PC和H5网站、微信小程序,均连接uniCloud。日请求量百万级。
<div style="display:flex;justify-content: space-around;">
<a href="https://duolingo.91ddedu.com/" target="_blank" class="clear-style barcode-view">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-alicdn/bda036a0-c55f-11ea-b997-9918a5dda011.png" width="200"/>
<span style="margin-top:15px;">Web及H5码</span>
</a>
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<img src="https://duolingo.91ddedu.com/static/miniapp.4a4ddf6b.jpg" width="200"/>
<span style="margin-top:15px;">微信小程序码</span>
</a>
</div>
<a href="http://ext.dcloud.net.cn/plugin?id=239" target="_blank" class="clear-style"><b>ColorUI:</b></a>ColorUI官方组件库for uni-app,高颜值示例。本项目插件市场地址:[https://ext.dcloud.net.cn/plugin?id=239](https://ext.dcloud.net.cn/plugin?id=239)
<div style="display:flex;justify-content: space-around;">
<a href="http://demo.color-ui.com" target="_blank" class="clear-style barcode-view">
......@@ -89,7 +154,7 @@ uni-app助力数百家单位快速上线**抗疫系统**,开源众多项目,
</a>
</div>
<a href="https://www.cyb520.com/" target="_blank" class="clear-style"><b>宠友帮:</b></a>您身边的宠物服务综合平台
<a href="https://www.cyb520.com/" target="_blank" class="clear-style"><b>宠友帮:</b></a>多端开发的创业公司案例
<div style="display:flex;justify-content: space-around;">
<a href="https://android.myapp.com/myapp/detail.htm?apkName=com.cyb520.app" target="_blank" class="clear-style barcode-view">
<img src="https://a.app.qq.com/o/image/microQr.png?pkgName=com.cyb520.app" width="200"/>
......@@ -133,43 +198,26 @@ uni-app助力数百家单位快速上线**抗疫系统**,开源众多项目,
</a>
</div> -->
<!-- <a href="//m3w.cn/__uni__4c6db6e" target="_blank" class="clear-style"><b>UniApp视频教程:</b></a>视频教育App,帮助开发者学习了解uni-app、h5+、mui等DCloud产品。开发者枫桥。
<div style="display:flex;justify-content: space-around;">
<a href="//m3w.cn/__uni__4c6db6e" target="_blank" class="clear-style barcode-view">
<img src="//img.cdn.aliyun.dcloud.net.cn/stream/qr/__UNI__4C6DB6E.png" width="200"/>
<span style="margin-top:15px;">App及H5的通用快码</span>
</a>
<a href="//m3w.cn/__uni__4c6db6e" target="_blank" class="clear-style barcode-view">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/yuanma.jpg" width="200"/>
<span style="margin-top:15px;">微信小程序码</span>
</a>
</div> -->
<br>
<br>
**极志愿:**专业高考志愿填报。**<span style="color:#42b983">多端获客典型案例,1个月获得400万用户</span>**[详见报道](https://mp.weixin.qq.com/s?__biz=MzU3NTU5NDc0NA==&mid=2247491214&idx=1&sn=7e334d079146d9e31cea407f45bd8624)。体验方式:[App、微信小程序、百度小程序、H5 官网地址](https://www.jizhy.com/home/)
#### 互联网公司
**腾讯:** 微信小程序搜索“腾讯全民模拟炒股大赛”
**华为:** 微信小程序搜索“荣耀亲选商城”、[H5](https://m.qinxuan.honor.cn/)[App部分栏目使用DCloud SDK](https://appgallery1.huawei.com/#/app/C100382765)
**华为:** 微信小程序搜索“荣耀亲选商城”、[H5](https://m.qinxuan.honor.cn/)
**腾讯:** 微信小程序搜索“腾讯全民模拟炒股大赛”、[H5(需使用微信打开)](https://zqact.tenpay.com/chaogu/)
**京东:** 京东开发的新冠抗疫服务平台。[H5](http://yingji-h5.chanye.jdcloud.com/)
**字节跳动:** 抖音小游戏中心。
<div class="scan-code">
<strong>vivo商城官方小程序:</strong> 支付宝搜索 "vivo",或鼠标移此查看[支付宝小程序码]
<div class="scan-code-hover">
<div class="scan-code-hover-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/uni-app/case/vivo-mall.png" alt="二维码获取失败" />
</div>
</div>
</div>
**京东:** 京东开发的新冠抗疫服务平台:[H5](http://yingji-h5.chanye.jdcloud.com/)、京东金融羊羊大作战:[H5](https://u.jr.jd.com/uc-fe-wxgrowing/sheep-fight/)
**vivo官方商城:**微信小程序搜索"vivo",支付宝搜索 "vivo"
<div class="scan-code">
<strong>vivo会员官方小程序:</strong> 微信小程序搜索 "vivo会员",或鼠标移此查看[微信小程序码]
<strong>vivo会员官方小程序:</strong> 微信小程序搜索 "vivo会员",<scan-code-text class="scan-code-text">或鼠标移此查看[微信小程序码]</scan-code-text>
<div class="scan-code-hover">
<div class="scan-code-hover-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/uni-app/vivovip.jpg" alt="二维码获取失败" />
......@@ -177,11 +225,13 @@ uni-app助力数百家单位快速上线**抗疫系统**,开源众多项目,
</div>
</div>
**搜狐狐友圈:**微信、支付宝、百度、头条小程序均支持。
**联想集团官方小程序:** 微信小程序搜索 “联想集团”
**中华英才网:** 百度小程序搜索“中华英才网”
**CSDN:** 微信小程序搜索“CSDN”
<!-- **CSDN:** 微信小程序搜索“CSDN” -->
**开源中国:** 微信小程序搜索“osc+”、百度小程序搜索“开源中国社区”
......@@ -193,10 +243,14 @@ uni-app助力数百家单位快速上线**抗疫系统**,开源众多项目,
**达内在线:** 达内教育的在线培训App。[App官网下载](http://www.tmooc.cn/app/index.shtml)
#### 托管服务商
#### SaaS服务商
**腾讯discuz! Q:** 经典论坛,站长利器。[https://discuz.chat/docs/](https://discuz.chat/docs/)
**搜狐快站:** 可视化拖拽建站,例:[https://yiguob.kuaizhan.com/#/](https://yiguob.kuaizhan.com/#/)
**人人商城:** 客户众多的分销商城 [https://www.rrsc.cn/V5introduce.html](https://www.rrsc.cn/V5introduce.html)
**即速应用:** 微信小程序搜索“即速应用商家版”
**香橙:** 餐馆SaaS服务,为餐馆提供多端的手机点餐、下单、排队叫号、营销推广解决方案。[官网](http://ivcvc.com)
......@@ -380,6 +434,8 @@ uni-app助力数百家单位快速上线**抗疫系统**,开源众多项目,
#### 传统品牌
**星巴克:** 微信小程序搜索 “星巴克”
**同济医院官方App:** [App官网下载页](https://tjhapp.com.cn/app/appdown.html)
**张亮麻辣烫:** 百度小程序搜索 “张亮麻辣烫”
......@@ -416,6 +472,10 @@ uni-app助力数百家单位快速上线**抗疫系统**,开源众多项目,
#### 创业公司
**Crimaster犯罪大师:**火爆的全球推理侦探专属社区。[Android](https://android.myapp.com/myapp/detail.htm?apkName=com.ultron.crimaster)[iOS](https://apps.apple.com/cn/app/crimaster%E7%8A%AF%E7%BD%AA%E5%A4%A7%E5%B8%88/id1501701702)
**仓鼠团:** 囤好货到仓鼠,仓鼠团您身边的购物助手。[App通用链接](http://m3w.cn/cst)
**波比英语课堂:**幼儿英语启蒙,培养国际宝宝。[App、小程序通用链接](http://m3w.cn/bbyykt)
**桂聘:**广西区域招聘。[Android和iOS](http://www.guipin.com/jihui/)
......
......@@ -14,6 +14,14 @@
- [colorUI for uni-app](https://ext.dcloud.net.cn/plugin?id=239):colorUI官方维护的uni-app版本,酷炫漂亮的css库 -- by 文晓港
- [ThorUI](https://ext.dcloud.net.cn/plugin?id=556):组件化的ui库 -- by echo
- [uView UI](https://ext.dcloud.net.cn/plugin?id=1593):完善的组件、sdk工具链及文档 -- by 易瑞文
- [仿抖音短视频示例](https://ext.dcloud.net.cn/plugin?id=860):基于uni-app的nvue编译的高性能原生项目 -- by 林举
- [直播模板](https://ext.dcloud.net.cn/plugin?id=226):直播推流、拉流、镜头切换、美颜等常用功能 -- by 1262880469
- [得推B2C商城](https://ext.dcloud.net.cn/plugin?id=187):一套简洁的B2C商城,全部功能完善,用户、下单、注册 -- by 得推网络科技
- [商城类项目模版](https://ext.dcloud.net.cn/plugin?id=200):漂亮的商城前端模板,可变背景导航栏、购物车、详情模板 -- by MixR
......@@ -22,27 +30,51 @@
- [Simple-store](https://ext.dcloud.net.cn/plugin?id=186):漂亮的淘客前端模板 -- by jalon
- [京东拼多多联盟](https://ext.dcloud.net.cn/plugin?id=1317):-- by chree.cn
- [校园二手交易市场](https://ext.dcloud.net.cn/plugin?id=1363)
- [教务系统](https://ext.dcloud.net.cn/plugin?id=1361)
- [聊天工具](https://ext.dcloud.net.cn/plugin?id=749):前端uni-app,后端php -- by 天然呆
- [WU-App](https://ext.dcloud.net.cn/plugin?id=318):WordPress(可视化后端界面) + uni-app(跨平台App) -- by bawangxx
- [Wordpress网站转APP和小程序](https://ext.dcloud.net.cn/plugin?id=1542): by xiaoa
- [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
- [typecho博客](https://ext.dcloud.net.cn/plugin?id=1494)
- [仿QQ音乐](https://github.com/SuiXiangjun/uniappQQmic):基于uni-app开发仿QQ音乐 -- by SuiXiangjun
- [cloudmusic](https://ext.dcloud.net.cn/plugin?id=1535):仿网易云音乐 -- by liuxy
- [uni-shop](https://github.com/siberiawolf/uni-shop):用 `uni-app` 创建的类微信应用 -- by siberiawolf
- [Iron-video影视项目](https://ext.dcloud.net.cn/plugin?id=1839):在线视频、电影项目模板 -- by Tz张无忌
- [bookstack](https://github.com/TruthHun/BookChatApp):通用书籍阅读APP及多端小程序 -- by www.bookstack.cn
- [小说阅读器模板](https://ext.dcloud.net.cn/plugin?id=519):前端uni-app,后端tp5 -- by burtyang
- [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
- [录音朗读fm](https://ext.dcloud.net.cn/plugin?id=1170):类喜马拉雅FM -- by https://ext.dcloud.net.cn/publisher?id=217187
- [教育APP首页](http://ext.dcloud.net.cn/plugin?id=216):教育APP首页 -- by snice
- [直播模板](https://ext.dcloud.net.cn/plugin?id=226):直播推流、拉流、镜头切换、美颜等常用功能 -- by 1262880469
- [店滴餐饮](https://ext.dcloud.net.cn/plugin?id=1381):饭店外卖系统 -- by http://www.wayfirer.com/
- [碧波世界](https://github.com/qqlcx5/uniapp):通过uni-app实现移动端和IOS端+小程序的碧波世界,主要做虚拟币交易类 -- by qqlcx5
- [生鲜市场](https://ext.dcloud.net.cn/plugin?id=834):基于color ui的生鲜电商系统 -- by https://ext.dcloud.net.cn/publisher?id=113423
- [仿奈雪の茶](https://ext.dcloud.net.cn/plugin?id=1807):线下商铺小程序和H5 -- by tinypuppe
- [jpress-uniapp](https://github.com/xieyushi/jpress-uniapp):搭配jpress后台的uniapp博客 -- by xieyushi
......@@ -50,10 +82,30 @@
- [DCIM管理系统](https://github.com/Airubby/uniapp):用uni-app开发的DCIM管理系统 -- by Airubby
- [tradingview行情K线](https://ext.dcloud.net.cn/plugin?id=817)
- [碧波世界](https://github.com/qqlcx5/uniapp):通过uni-app实现移动端和IOS端+小程序的碧波世界,主要做虚拟币交易类 -- by qqlcx5
- [数字货币交易系统模板](http://ext.dcloud.net.cn/plugin?id=304):用uni-app开发的数字货币交易所移动端UI -- by Airubby
- [FexCoin数子货币钱包](https://ext.dcloud.net.cn/plugin?id=1832): by 麻婆豆腐
- [uniapp-笑一波](https://gitee.com/jameson512/xiaoyibo):用uni-app开发的娱乐应用,包含登录、注册、评论、图片预览、视频播放、文字图片视频投稿等内容 -- by jameson512
- [抗疫物资管理](https://ext.dcloud.net.cn/plugin?id=1804):含uniCloud后端代码
- [学生健康报备系统](https://ext.dcloud.net.cn/plugin?id=1811):含uniCloud后端代码
- [旅游应用仿飞猪](https://ext.dcloud.net.cn/plugin?id=374)
- [星星进销存](https://ext.dcloud.net.cn/plugin?id=1434)
- [美容行业模板](https://ext.dcloud.net.cn/plugin?id=972)
- [漫画](https://ext.dcloud.net.cn/plugin?id=666)
- [发布心情](https://ext.dcloud.net.cn/plugin?id=489)
mpvue的所有开源资源都可以用于uni-app。下文汇总收集了网友开源的各种mpvue项目,涵盖了各种业务场景。
- mpvue 开源项目汇总:[https://ask.dcloud.net.cn/article/34945](https://ask.dcloud.net.cn/article/34945)
......
......@@ -15,9 +15,11 @@ uni统计官网地址:[https://tongji.dcloud.net.cn/](https://tongji.dcloud.ne
### 广告变现
```uni-app``` 支持DCloud的广告联盟,开发者在打包界面简单打几个勾,就可开通开屏、悬浮红包、推送等广告形式,快速实现App变现
```uni-app``` 支持接入`uni-AD`广告联盟,开发者可实现**一次开发,多端变现**
更多广告联盟的介绍,参考 [广告联盟DAD](http://www.dcloud.io/dad.html)
`uni-AD`支持开屏、信息流、激励视频、悬浮红包、推送等丰富的广告形式,且聚合了腾讯广点通、今日头条穿山甲、360联盟等主流广告源,有更高的广告填充率。
更多信息参考 [uni-AD 广告联盟](https://uniad.dcloud.net.cn)
### 制作统一发行页面
......
* 配置
* [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)
<li></li>
* 配置
* [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)
* 自动化测试
* [快速开始](collocation/auto/quick-start.md)
* [API](collocation/auto/api.md)
<li></li>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库:<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a><a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<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>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/uniad-520.png" width="20" height="20"/>
<div class="contact-smg">
<div>uniAD</div>
</div>
</a>
<a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-tongji-icon.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库:<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a><a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<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>群16:719211033 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0SG97jRMTnKLEqkK2qIO7mfxia2zwJoA&jump_from=webapi">点此加入</a></div>
<div>群35:713420817(2000人已满)</div>
<div>群34:530305531(2000人已满)</div>
<div>群33:498071674(2000人已满)</div>
<div>群32:166188631(2000人已满)</div>
<div>群31:567471669(2000人已满)</div>
<div>群30:371046920(2000人已满)</div>
<div>群29:202965481(2000人已满)</div>
<div>群28:166188776(2000人已满)</div>
<div>群27:811363410(2000人已满)</div>
<div>群26:147867597(2000人已满)</div>
<div>群25:165297000(2000人已满)</div>
<div>群24:672494800(2000人已满)</div>
<div>群23:599958679(2000人已满)</div>
<div>群22:687186952(2000人已满)</div>
<div>群21:717019120(2000人已满)</div>
<div>群20:165796402(2000人已满)</div>
<div>群19:165657124(2000人已满)</div>
<div>群18:698592271(2000人已满)</div>
<div>群17:951348804(2000人已满)</div>
<!-- <div>群16:719211033(2000人已满)</div> -->
<div>群15:516984120(2000人已满)</div>
<div>群14:465953250(2000人已满)</div>
<div>群13:699478442(2000人已满)</div>
<div>群12:884860657(2000人已满)</div>
<div>群11:296811328(2000人已满)</div>
<div>群10:959059626(2000人已满)</div>
<div>群9:775128777(2000人已满)</div>
<div>群8:695442854(2000人已满)</div>
<div>群7:942061423(2000人已满)</div>
<div>群6:697264024(2000人已满)</div>
<div>群5:731951419(2000人已满)</div>
<div>群4:942702595(2000人已满)</div>
<div>群3:773794803(2000人已满) </div>
<div>群2:901474938(2000人已满) </div>
<div>群1:531031261(2000人已满)</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
此差异已折叠。
#### uni-app自动化测试
uni-app提供了一批API,这些API可以操控uni-app应用,包括运行、跳转页面、触发点击等,并可以获取页面元素状态、进行截图,从而实现对uni-app项目进行自动化测试的目的。
本功能使用到了业内常见的测试库如jest(MIT协议)。
#### 特性
开发者可以利用API做以下事情:
* 控制跳转到指定页面
* 获取页面数据
* 获取页面元素状态
* 触发元素绑定事件
* 调用 uni 对象上任意接口
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(ios仅支持模拟器)|√|√|x|x|x|x|x|
目前仅 [cli](https://uniapp.dcloud.net.cn/quickstart?id=_2-通过vue-cli命令行) 工程支持。有利于持续集成。
推荐使用方式:研发提交源码到版本库后,持续集成系统自动拉取源码,自动运行自动化测试。
暂不支持百度,先忽略百度相关测试代码
创建 `cli` 工程
```
# 全局安装vue-cli
$ npm install -g @vue/cli
$ cd ... // 切换到工程保存目录
$ vue create -p dcloudio/uni-preset-vue#alpha my-project
```
如果之前是HBuilderX工程,则把HBuilderX工程内的文件(除 unpackage、node_modules 目录)拷贝至 vue-cli 工程的 src 目录。
在 vue-cli 工程内重新安装 npm 依赖(如果之前使用了 npm 依赖的话)
cli创建项目时若选择`hello uni-app`模板,可看到其中已经自带部分测试例。
已有 `cli` 工程
1. 更新依赖包 `@dcloudio/*` >= `2.0.0-alpha-27920200613002`
2. 安装依赖包 `@dcloudio/uni-automator`
```
npm install @dcloudio/uni-automator --save-dev
```
3. package.json script节点新增命令
```
"test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
"test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
"test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
"test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i",
"test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i"
```
#### H5平台测试流程
1. 进入工程目录,安装依赖
```
npm install puppeteer --save-dev
```
注意: 从v3.0.0开始,`Puppeteer` 开始依赖于Node 10.18.1+
2. 根据API编写测试的js代码,参考测试用例
API文档见:[https://uniapp.dcloud.io/collocation/auto/api](https://uniapp.dcloud.io/collocation/auto/api)
测试文件目录配置见 [jest.config.js](collocation/auto/api?id=jestconfigjs)
3. 运行测试
```
npm run test:h5
```
4. 测试结果
```
>> cross-env UNI_PLATFORM=h5 jest -i
...
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 14.995s, estimated 16s
```
更多配置参考 [jest.config.js](collocation/auto/api?id=jestconfigjs)
#### App-Android测试流程
1. 配置全局 `adb` 环境变量
2. 配置 `Hbuilder` 调试基座/自定义基座 `android_base.apk` 目录,参考 `jest.config.js`
3. 创建 `cli` 工程/现有 `cli` 工程
切换到工程目录,安装依赖包 `adbkit`
```
npm install adbkit --save-dev
```
4. 编写测试代码,参考测试用例
5. 运行测试
```
npm run test:android
```
#### App-iOS测试流程
目前仅支持 iOS 模拟器(需要mac电脑安装xcode)
1. 安装依赖 `node-simctl`
```
npm install node-simctl --save-dev
```
2. 配置模拟器id,参考 `jest.config.js`
3. 配置 `Hbuilder` 调试基座/自定义基座 `Pandora_simulator.app` 目录,参考 `jest.config.js`
4. 编写测试代码,参考测试用例
5. 运行测试
```
npm run test:ios
```
#### 微信小程序测试流程
1. 创建cli项目,同H5平台 (必须配置微信小程序 appid, manifest.json -> mp-weixin -> appid)
2. 运行测试(如果微信开发者工具无法成功打开项目,请手动打开)
```
npm run test:mp-weixin
```
3. 测试结果
```
> cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch "--auto-port" "9520"
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 14.995s, estimated 16s
```
#### 测试示例
使用 hello uni-app 工程测试 H5 平台
1. 创建 `cli` 项目,选择 `hello uni-app`
```
$ vue create -p dcloudio/uni-preset-vue#alpha my-hello-uni-app
# 进入项目目录
$ cd my-hello-uni-app
```
2. 安装 `puppeteer`
```
npm install puppeteer
```
3. 创建测试文件 `src/pages/tabBar/component/component.test.js`,复制下面代码
```
describe('pages/tabBar/component/component.nvue', () => {
let page
beforeAll(async () => {
// 重新reLaunch至首页,并获取首页page对象(其中 program 是uni-automator自动注入的全局对象)
page = await program.reLaunch('/pages/tabBar/component/component')
await page.waitFor(1000)
})
it('u-link', async () => {
// 检测首页u-link的文本内容
expect(await (await page.$('.hello-link')).text()).toBe('https://uniapp.dcloud.io/component/')
})
it('视图容器', async () => {
// 检测首个 panel 是视图容器
expect(await (await page.$('.uni-panel-text')).text()).toBe('视图容器')
// 检测首个 panel 切换展开
const panelH = await page.$('.uni-panel-h');
// 不能做完全匹配,百度小程序会生成额外的class
expect(await panelH.attribute('class')).toContain('uni-panel-h')
await panelH.tap()
await page.waitFor(500)
// 已展开
expect(await panelH.attribute('class')).toContain('uni-panel-h-on')
})
it('.uni-panel', async () => {
const lists = await page.$$('.uni-panel')
expect(lists.length).toBe(9)
})
it('.uni-panel action', async () => {
const listHead = await page.$('.uni-panel-h')
expect(await listHead.attribute('class')).toContain('uni-panel-h-on')
await listHead.tap()
await page.waitFor(200)
expect(await listHead.attribute('class')).toContain(
'uni-panel-h',
)
// 展开第一个 panel,点击第一个 item,验证打开的新页面是否正确
await listHead.tap()
await page.waitFor(200)
const item = await page.$('.uni-navigate-item')
await item.tap()
await page.waitFor(500)
expect((await program.currentPage()).path).toBe('pages/component/view/view')
await page.waitFor(500)
// 执行 navigateBack 验证是否返回
expect((await program.navigateBack()).path).toBe('pages/tabBar/component/component')
})
})
```
4. 运行测试
```
npm run test:h5
```
5. 测试结果
```
> cross-env UNI_PLATFORM=h5 jest -i
PASS src/pages/tabBar/component/component.test.js (14.789s)
pages/tabBar/component/component.nvue
√ u-link (8ms)
√ 视图容器 (518ms)
√ .uni-panel (2ms)
√ .uni-panel action (4447ms)
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 14.995s, estimated 16s
```
##### 屏幕截图示例
```
describe('pages/API/set-navigation-bar-title/set-navigation-bar-title.vue', () => {
let page
beforeAll(async () => {
// 重新reLaunch至首页,并获取首页page对象(其中 program 是uni-automator自动注入的全局对象)
page = await program.reLaunch('/pages/API/set-navigation-bar-title/set-navigation-bar-title')
await page.waitFor(3000)
})
it('.uni-hello-text', async () => {
var image = await program.screenshot({
path: "set-navigation-bar-title.png" // 默认项目根目录
})
console.log(image)
})
})
```
更多测试示例见: hello uni-app
GitHub: [https://github.com/dcloudio/hello-uniapp](https://github.com/dcloudio/hello-uniapp)
#### jest.config.js
```
module.exports = {
globalTeardown: '@dcloudio/uni-automator/dist/teardown.js',
testEnvironment: '@dcloudio/uni-automator/dist/environment.js',
testEnvironmentOptions: {
compile: true,
h5: { // 为了节省测试时间,可以指定一个 H5 的 url 地址,若不指定,每次运行测试,会先 npm run dev:h5
url: "http://192.168.x.x:8080/h5/",
options: {
headless: false // 配置是否显示 puppeteer 测试窗口
}
},
"app-plus": { // 需要安装 HBuilderX
android: {
executablePath: "HBuilderX/plugins/launcher/base/android_base.apk" // apk 目录
},
ios: {
// uuid 必须配置,目前仅支持模拟器,可以(xcrun simctl list)查看要使用的模拟器 uuid
id: "",
executablePath: "HBuilderX/plugins/launcher/base/Pandora_simulator.app" // ipa 目录
}
},
"mp-weixin": {
port: 9420, // 默认 9420
account: "", // 测试账号
args: "", // 指定开发者工具参数
cwd: "", // 指定开发者工具工作目录
launch: true; // 是否主动拉起开发者工具
teardown: "disconnect" | "close"; // 可选值 disconnect|close 运行测试结束后,断开开发者工具或关闭开发者工具
remote: boolean; // 是否真机自动化测试
executablePath: "", // 开发者工具cli路径,默认会自动查找, windows: C:/Program Files (x86)/Tencent/微信web开发者工具/cli.bat", mac: /Applications/wechatwebdevtools.app/Contents/MacOS/cli
},
"mp-baidu": {
port: 9430, // 默认 9430
args: "", // 指定开发者工具参数
cwd: "", // 指定开发者工具工作目录
launch: true; // 是否主动拉起开发者工具
teardown: "disconnect" | "close"; // 可选值 disconnect|close 运行测试结束后,断开开发者工具或关闭开发者工具
remote: boolean; // 是否真机自动化测试
executablePath: "", // 开发者工具cli路径,默认会自动查找
}
},
testTimeout: 15000,
reporters: [
'default'
],
watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/.git/'],
moduleFileExtensions: ['js', 'json'],
rootDir: __dirname,
testMatch: ['<rootDir>/src/**/*test.[jt]s?(x)'], // 测试文件目录
testPathIgnorePatterns: ['/node_modules/']
}
```
**注意事项**
1. 如果页面涉及到分包加载问题,`reLaunch` 获取的页面路径可能会出现问题 ,解决方案如下 :
```javascript
// 重新 reLaunch至首页,并获取 page 对象(其中 program 是 uni-automator 自动注入的全局对象)
page = await program.reLaunch('/pages/extUI/calendar/calendar')
// 微信小程序如果是分包页面,需要延迟大概 7s 以上,保证可以正确获取page对象
await page.waitFor(7000)
page = await program.currentPage()
```
2. 微信小程序 element 不能跨组件选择元素,首先要先获取当前组件,在继续查找
```html
<uni-tag>
<view class="test"></view>
</uni-tag>
```
```javascript
// 错误,取不到元素
await page.$('.test')
// 可以取到元素
let tag = await page.$('uni-tag')
await tag.$('.test')
```
3. 微信小程序暂不支持父子选择器
4. 百度小程序选择元素必须有事件的元素才能被选中,否则提示元素不存在
5. 分包中的页面,打开之后要延迟时间长一点,否者不能正确获取到页面信息
......@@ -9,6 +9,9 @@
|onHide|当 ``uni-app`` 从前台进入后台|
|onError|当 ``uni-app`` 报错时触发|
|onUniNViewMessage|对 ``nvue`` 页面发送的数据进行监听,可参考 [nvue 向 vue 通讯](/use-weex?id=nvue-向-vue-通讯)|
|onUnhandledRejection|对未处理的 Promise 拒绝事件监听函数(2.8.1+)|
|onPageNotFound|页面不存在监听函数|
|onThemeChange|监听系统主题变化|
**注意**
......@@ -54,6 +57,8 @@
|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|App、H5|1.6.0|
|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|App、H5|1.6.0|
|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|App、H5|1.6.0|
|onShareTimeline|监听用户点击右上角转发到朋友圈|微信小程序|2.8.1+|
|onAddToFavorites|监听用户点击右上角收藏|微信小程序|2.8.1+|
``onReachBottom``使用注意
可在pages.json里定义具体页面底部的触发距离[onReachBottomDistance](/collocation/pages),比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。
......@@ -72,6 +77,7 @@
- 如果想实现滚动时标题栏透明渐变,在App和H5下,可在pages.json中配置titleNView下的type为transparent,[参考](https://uniapp.dcloud.io/collocation/pages?id=app-titlenview)
- 如果需要滚动吸顶固定某些元素,推荐使用css的粘性布局,参考[插件市场](https://ext.dcloud.net.cn/plugin?id=715)。插件市场也有其他js实现的吸顶插件,但性能不佳,需要时可自行搜索。
- 在App、微信小程序、H5中,也可以使用wxs监听滚动,[参考](https://uniapp.dcloud.io/frame?id=wxs);在app-nvue中,可以使用bindingx监听滚动,[参考](https://uniapp.dcloud.io/use-weex?id=nvue-%e9%87%8c%e4%bd%bf%e7%94%a8-bindingx)
- `onBackPress`上不可使用`async`,会导致无法阻止默认返回
```js
onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替
......@@ -95,7 +101,7 @@ onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代
```js
onTabItemTap : function(e) {
console.log(e);
// e的返回格式为json对象: {"index":0,"text":"首页","pagePath":"pages/index/index.html"}
// e的返回格式为json对象: {"index":0,"text":"首页","pagePath":"pages/index/index"}
},
```
......
......@@ -168,4 +168,5 @@ subNvue.onMessage(function(data){
- 了解更多 `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` 比cover-view和plus.nativeObj.view更强大,也占用更多内存,为了保证更好的性能体验,一个vue页面不要加载太多 `subNVue` 子窗体,建议控制在三个以内
- `getSubNVueById` 需要在页面生命周期 `onReady` 中调用
\ No newline at end of file
......@@ -54,7 +54,7 @@ export default {
},
onLoad() {
// #ifdef APP-PLUS
const currentWebview = this.$mp.page.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里,直接使用plus.webview.currentWebview()无效
const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); //动态重设bounce效果
// #endif
}
......
......@@ -141,6 +141,36 @@ splash(启动封面)是App必然存在的、不可取消的。
|speech|Object|语音识别配置,支持讯飞语音、百度语音,[详见](http://ask.dcloud.net.cn/article/35059),在uni-app中只用 [plus.speech](http://www.html5plus.org/doc/zh_cn/speech.html) 进行调用。|
|maps|Object|原生地图配置,目前仅支持 [高德地图](http://lbs.amap.com/),申请方式可参考:[地图插件配置](http://ask.dcloud.net.cn/article/29)。|
#### optimization@app-vue-optimization
小程序的分包,除了联网分段下载外,还可以减轻启动时加载的js数量,可以提升启动速度。
从uni-app 2.7.12+ 开始,App-vue平台也兼容了小程序的分包配置,但默认并不开启。
在manifest配置以下节点,可以在App端启动分包。
|属性|类型|说明|
|:-|:-|:-|
|subPackages|Boolean|是否开启分包优化|
```
"app-plus": {
"optimization": {
"subPackages": true
},
"runmode" : "liberate" // 开启分包优化后,必须配置资源释放模式
}
```
在manifest中启动分包后,需要在pages.json中配置具体的分包规则,与小程序的配置相同,详见:[https://uniapp.dcloud.io/collocation/pages?id=subpackages](https://uniapp.dcloud.io/collocation/pages?id=subpackages)
也就是一旦在pages.json里配置分包,小程序一定生效,而app是否生效,取决于manifest里是否开启。
注意:
* App开启分包后,每个分包单独编译成一个js文件(都包含在app内,不会联网下载),当App首页是vue时,可减小启动加载文件大小,提升启动速度。
* 首页是nvue时,分包不会提升启动速度,nvue本身启动速度就快于vue,也快于开启分包后的首页为vue的应用。如果追求极致启动速度,还是应该使用nvue做首页并在manifest开启fast模式。
* App页面较少时,分包对启动速度的优化不明显。
#### nvue@nvue
`nvue` 页面布局初始设置
......@@ -210,7 +240,7 @@ H5平台是SPA单页应用,普通的SEO信息即加meta字段只能在,自
|属性|类型|默认值|说明|
|:-|:-|:-|:-|
|mode|String|hash|路由跳转模式,支持 hash、history|
|base|String|/|应用基础路径,例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"|
|base|String|/|应用基础路径,例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/",支持设置为相对路径 "./"|
**注意:**
......@@ -235,6 +265,8 @@ Tips:`uni-app` 中 `manifest.json->h5->devServer` 实际上对应 `webpack`
#### publicPath
配置 publicPath 为 cdn 资源地址前缀,这样编译出来的 html 文件,引用的 js,css 路径会自动变成 cdn 上的地址。
注意:如果想对图片生效,image组件的图片地址需要使用相对路径
**示例**
......@@ -467,6 +499,33 @@ mp-qq只支持自定义组件模式,不存在usingComponents配置
以上面的分包为例,放在每个分包root对应目录下的静态文件会被打包到此分包内。
### 快应用@quickapp-webview
|属性 |类型 |说明|
|:- |:- |:-|
|icon |String |应用图标,华为推荐 192x192|
|package |String |应用包名|
|minPlatformVersion|Number |最小平台运行支持(华为最低 1070,vivo 1063)|
|versionName |String |版本名称|
|versionCode |Number |版本号|
**manifest.json配置**
```
"quickapp-webview": {// 快应用通用配置
"icon": "/static/logo.png",
"package": "com.example.demo",
"versionName": "1.0.0",
"versionCode": 100
},
"quickapp-webview-union": {// 快应用联盟,目前仅支持 vivo、oppo
"minPlatformVersion": 1063 //最小平台支持
},
"quickapp-webview-huawei": {// 快应用华为
"minPlatformVersion": 1070 //最小平台支持
}
```
### 完整 manifest.json
```javascript
......@@ -483,6 +542,9 @@ mp-qq只支持自定义组件模式,不存在usingComponents配置
// app-plus 节点是 App 特有配置,推荐在 HBuilderX 的 manifest.json 可视化界面操作完成配置。
"app-plus": {
// HBuilderX->manifest.json->模块权限配置
"optimization": {
"subPackages": true // HBuilderX 2.7.12+ 支持
},
"modules": {
"Contacts": {},
"Fingerprint": {},
......
......@@ -50,7 +50,8 @@
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"pageOrientation": "portrait"//横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape
"renderingMode": "seperated", // 仅微信小程序,webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait"//横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape
},
"tabBar": {
"color": "#7A7E83",
......@@ -84,7 +85,7 @@
"easycom": {
"autoscan": true, //是否自动扫描组件
"custom": {//自定义扫描规则
"uni-(.*)": "@/components/uni-$1.vue"
"^uni-(.*)": "@/components/uni-$1.vue"
}
}
}
......@@ -100,14 +101,14 @@
|navigationBarTextStyle|String|white|导航栏标题颜色及状态栏前景颜色,仅支持 black/white||
|navigationBarTitleText|String||导航栏标题文字内容||
|navigationStyle|String|default|导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看[使用注意](/collocation/pages?id=customnav)|微信小程序 7.0+、百度小程序、H5、App(2.0.3+)|
|backgroundColor|HexColor|#ffffff|窗口的背景色|微信小程序|
|backgroundColor|HexColor|#ffffff|下拉显示出来的窗口的背景色|微信小程序|
|backgroundTextStyle|String|dark|下拉 loading 的样式,仅支持 dark / light|微信小程序|
|enablePullDownRefresh|Boolean|false|是否开启下拉刷新,详见[页面生命周期](/use?id=页面生命周期)。||
|onReachBottomDistance|Number|50|页面上拉触底事件触发时距页面底部距离,单位只支持px,详见[页面生命周期](/use?id=页面生命周期)||
|backgroundColorTop|HexColor|#ffffff|顶部窗口的背景色(bounce回弹区域)|仅 iOS 平台|
|backgroundColorBottom|HexColor|#ffffff|底部窗口的背景色(bounce回弹区域)|仅 iOS 平台|
|titleImage|String||导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址|支付宝小程序、H5、APP|
|transparentTitle|String|none|导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明|支付宝小程序、H5、APP|
|transparentTitle|String|none|导航栏整体(前景、背景)透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明|支付宝小程序、H5、APP|
|titlePenetrate|String|NO|导航栏点击穿透|支付宝小程序、H5|
|pageOrientation|String|portrait|横屏配置,屏幕旋转设置,仅支持 auto / portrait / landscape 详见 [响应显示区域变化](https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html)|App 2.4.7+、微信小程序|
|animationType|String|pop-in|窗口显示的动画效果,详见:[窗口动画](api/router?id=animation)|App|
......@@ -120,6 +121,7 @@
|mp-toutiao|Object||设置编译到 mp-toutiao 平台的特定样式|字节跳动小程序|
|mp-qq|Object||设置编译到 mp-qq 平台的特定样式|QQ小程序|
|usingComponents|Object| |引用小程序组件,参考 [小程序组件](/frame?id=小程序组件支持)||
|renderingMode|String| |同层渲染,webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层|微信小程序|
**注意**
......@@ -269,13 +271,14 @@
|属性|类型|默认值|描述|平台兼容|
|:-|:-|:-|:-|:-|
|background|HexColor|#FFFFFF|窗体背景色。无论vue页面还是nvue页面,在App上都有一个父级原生窗体,该窗体的背景色生效时间快于页面里的css生效时间|App|
|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效果,仅list、recycle-list、waterfall等滚动组件有bounce效果)|
|softinputNavBar|String|auto|iOS软键盘上完成工具栏的显示模式,设置为 "none" 时关闭工具栏。|仅ios生效|
|softinputMode|String|adjustPan|软键盘弹出模式,支持 adjustResize、adjustPan 两种模式|App|
|pullToRefresh|Object||下拉刷新|App|
|scrollIndicator|String||滚动条显示策略,设置为 "none" 时不显示滚动条。|App|
|scrollIndicator|String||滚动条显示策略,设置为 "none" 时不显示滚动条。|App-vue|
|animationType|String|pop-in|窗口显示的动画效果,详见:[窗口动画](api/router?id=animation)。|App|
|animationDuration|Number|300|窗口显示动画的持续时间,单位为 ms。|App|
**Tips**
......@@ -293,6 +296,8 @@
|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|
|homeButton|Boolean|false|标题栏控件是否显示Home按钮||
|autoBackButton|Boolean|true|标题栏控件是否显示左侧返回按钮|2.6.3|
|backButton|Object||返回按钮的样式,详见:[backButton](/collocation/pages?id=app-titleNView-backButtonStyles)|2.6.3|
|backgroundImage|String||支持以下类型: 背景图片路径 - 如"./img/t.png",仅支持本地文件路径, 相对路径,相对于当前页面的host位置,根据实际标题栏宽高拉伸绘制; 渐变色 - 仅支持线性渐变,两种颜色的渐变,如“linear-gradient(to top, #a80077, #66ff00)”, 其中第一个参数为渐变方向,可取值: "to right"表示从左向右渐变, “to left"表示从右向左渐变, “to bottom"表示从上到下渐变, “to top"表示从下到上渐变, “to bottom right"表示从左上角到右下角, “to top left"表示从右下角到左上角|2.6.3|
|backgroundRepeat|String||仅在backgroundImage设置为图片路径时有效。 可取值: "repeat" - 背景图片在垂直方向和水平方向平铺; "repeat-x" - 背景图片在水平方向平铺,垂直方向拉伸; “repeat-y” - 背景图片在垂直方向平铺,水平方向拉伸; “no-repeat” - 背景图片在垂直方向和水平方向都拉伸。 默认使用 “no-repeat"|2.6.3|
......@@ -307,22 +312,21 @@
|titleIcon|String||标题图标,图标路径如"./img/t.png",仅支持本地文件路径, 相对路径,相对于当前页面的host位置,固定宽高为逻辑像素值"34px"。 要求图片的宽高相同。 注意:设置标题图标后标题将居左显示。|2.6.6|
|titleIconRadius|String|无圆角|标题图标圆角,取值格式为"XXpx",其中XX为像素值(逻辑像素),如"10px"表示10像素半径圆角。|2.6.6|
#### SplitLineStyles@app-titleNView-splitLineStyles
|属性|类型|默认值|描述|版本兼容性|
|:-|:-|:-|:-|:-|
|coloe|String|#CCCCCC|底部分割线颜色,可取值: "#RRGGBB"格式字符串,如"#FF0000"表示绘制红色分割线; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明||
|height|String|"1px"|可取值:像素值(逻辑像素),支持小数点,如"1px"表示1像素高;百分比,如"1%",相对于标题栏控件的高度。||
|color|String|#CCCCCC|底部分割线颜色,可取值: "#RRGGBB"格式字符串,如"#FF0000"表示绘制红色分割线; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明| |
|height|String|"1px"|可取值:像素值(逻辑像素),支持小数点,如"1px"表示1像素高;百分比,如"1%",相对于标题栏控件的高度。| |
**Tips**
- 页面支持通过配置 navigationStyle为custom,或titleNView为false,来禁用原生导航栏。一旦禁用原生导航,请注意阅读[自定义导航注意事项](/collocation/pages?id=customnav)
- `titleNView` 不能设置 `autoBackButton``homeButton`等属性
- `titleNView``type` 值为 `transparent` 时,导航栏为滚动透明渐变导航栏,默认只有button,滚动后标题栏底色和title文字会渐变出现; `type``float` 时,导航栏为悬浮标题栏,此时页面内容上顶到了屏幕顶部,包括状态栏,但导航栏悬浮盖在页面上方,一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。
- `titleNView``type` 值为 `transparent` 时,App-nvue 2.4.4+ 支持
-`titleNView` 配置 `buttons` 后,监听按钮的点击事件,vue 页面及 nvue 的weex编译模式参考:[uni.onNavigationBarButtonTap](/use-weex?id=onnavigationbarbuttontap)
-`titleNView` 配置 `searchInput` 后,相关的事件监听参考:[onNavigationBarSearchInputChanged 等](/frame?id=页面生命周期)
- 可通过 `[<navigation-bar>(/component/navigation-bar)]` 配置
- App下原生导航栏的按钮如果使用字体图标,注意检查字体库的名字(font-family)是否使用了默认的 iconfont,这个名字是保留字,不能作为外部引入的字体库的名字,需要调整为自定义的名称,否则无法显示。
- 想了解各种导航栏的开发方法,请详读[导航栏开发指南](https://ask.dcloud.net.cn/article/34921)
......@@ -399,6 +403,8 @@ searchInput的点击输入框onNavigationBarSearchInputClicked、文本变化onN
**常见titleNView配置代码示例**
以下列出部分配置。关于全面的导航栏配置,这里有一个完善的演示工程,演示了导航栏的各种效果,详见:[https://ext.dcloud.net.cn/plugin?id=1765](https://ext.dcloud.net.cn/plugin?id=1765)
```javascript
{
"pages": [{
......@@ -751,11 +757,14 @@ h5 平台下拉刷新动画,只有 circle 类型。
**自定义easycom配置的示例**
如果需要匹配node_modules内的vue文件,需要使用`packageName/path/to/vue-file-$1.vue`形式的匹配规则,其中`packageName`为安装的包名,`/path/to/vue-file-$1.vue`为vue文件在包内的路径。
```
"easycom": {
"autoscan": true,
"custom": {
"uni-(.*)": "@/components/uni-$1.vue"
"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
}
}
```
......@@ -825,10 +834,9 @@ midButton没有pagePath,需监听点击事件,自行处理点击后的行为
- 代码跳转到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://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,前端自行实现。
- 若App端自定义tabbar,建议使用nvue并做成单页方式,即所有tabbar的页面内容其实写在一个nvue页面里,这样的性能体验更好。
- 微信通过webview自定义tabbar,在uni-app也支持,但仅支持微信。因该功能体验不佳,app上没有实现这个方式,而是推荐使用app提供的自定义tabbar方式,不管是原生tabbar额外的自定义配置还是nvue的单页自定义tabbar。
- 如果是需要先登录、后进入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)
......@@ -898,7 +906,15 @@ midButton没有pagePath,需监听点击事件,自行处理点击后的行为
# subPackages
分包加载配置,此配置为小程序的分包加载机制。在App里始终为整包。
分包加载配置,此配置为小程序的分包加载机制。
因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。
所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据pages.json的配置进行划分。
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。
App默认为整包。从uni-app 2.7.12+ 开始,也兼容了小程序的分包配置。其目的不用于下载提速,而用于首页是vue时的启动提速。App下开启分包,除在pages.json中配置分包规则外,还需要在manifest中设置在app端开启分包设置,详见:[https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization](https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization)
subPackages 节点接收一个数组,数组每一项都是应用的子包,其属性值如下:
......@@ -910,8 +926,10 @@ subPackages 节点接收一个数组,数组每一项都是应用的子包,
**注意:**
- ```subPackages``` 里的pages的路径是 ``root`` 下的相对路径,不是全路径。
- 微信、百度小程序每个分包的大小是2M,总体积一共不能超过8M。
- 微信小程序每个分包的大小是2M,总体积一共不能超过16M。
- 百度小程序每个分包的大小是2M,总体积一共不能超过8M。
- 支付宝小程序每个分包的大小是2M,总体积一共不能超过4M。
- QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
- 分包下支持独立的 ```static``` 目录,用来对静态资源进行分包。
- `uni-app`内支持对微信小程序、QQ小程序、百度小程序分包优化,即将静态资源或者js文件放入分包内不占用主包大小。详情请参考:[关于分包优化的说明](/collocation/manifest?id=关于分包优化的说明)
- 针对`vendor.js`过大的情况可以使用运行时压缩代码
......@@ -983,13 +1001,19 @@ subPackages 节点接收一个数组,数组每一项都是应用的子包,
# preloadRule
分包预载配置,`preloadRule` 中,`key` 是页面路径,`value` 是进入此页面的预下载配置,每个配置有以下几项:
分包预载配置。
配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度
`preloadRule` 中,`key` 是页面路径,`value` 是进入此页面的预下载配置,每个配置有以下几项:
|字段|类型|必填|默认值|说明|
|---|---|---|---|---|
|packages|StringArray |是|无|进入页面后预下载分包的 root 或 name。__APP__ 表示主包。|
|network|String|否 |wifi|在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)|
app的分包,同样支持preloadRule,但网络规则无效。
# FAQ
- Q:为什么在pages.json里配置小程序定位权限描述,无法编译到小程序端,运行后一直提示getLocation需要在app.json中声明
- A:微信小程序的权限描述配置在manifest中,不在pages.json中,具体参考文档:[https://uniapp.dcloud.io/collocation/manifest?id=mp-weixin](https://uniapp.dcloud.io/collocation/manifest?id=mp-weixin)
......@@ -6,6 +6,8 @@ vue.config.js 是一个可选的配置文件,如果项目的根目录中存在
**注意事项**
- 仅vue页面生效
部分配置项会被编译配置覆盖,例如:
* publicPath 不支持,如果需要配置,请在 manifest.json->h5->router->base 中配置,参考文档:[h5-router](collocation/manifest?id=h5-router)
......@@ -16,6 +18,7 @@ vue.config.js 是一个可选的配置文件,如果项目的根目录中存在
* productionSourceMap 固定 false
* css.extract H5 平台固定 false,其他平台固定 true
* parallel 固定 false
* 使用cli项目时,默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在transpileDependencies中列出来。[详情参考](https://cli.vuejs.org/zh/config/#transpiledependencies)
**使用示例**
......@@ -23,7 +26,7 @@ vue.config.js 是一个可选的配置文件,如果项目的根目录中存在
```js
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin') //最新版本copy-webpack-plugin插件暂不兼容,推荐v5.0.0
module.exports = {
configureWebpack: {
......@@ -56,3 +59,28 @@ module.exports = {
}
```
**发布时删除console**
`HBuilderX 2.6.8+`支持
```js
module.exports = {
chainWebpack: (config) => {
// 发行或运行时启用了压缩时会生效
config.optimization.minimizer('terser').tap((args) => {
const compress = args[0].terserOptions.compress
// 非 App 平台移除 console 代码(包含所有 console 方法,如 log,debug,info...)
compress.drop_console = true
compress.pure_funcs = [
'__f__', // App 平台 vue 移除日志代码
// 'console.debug' // 可移除指定的 console 方法
]
return args
})
}
}
```
启用压缩的方法:
- HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
- cli创建的项目可以在`pacakge.json`中添加参数`--minimize`,示例:`"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"`
......@@ -185,19 +185,29 @@ uni统计是优秀的多端统计平台,见[tongji.dcloud.net.cn](https://tong
uni ui的默认风格是中型的,与uni-app基础组件风格一致。但它支持[uni.scss](https://uniapp.dcloud.io/collocation/uni-scss),可以方便的扩展和切换App的风格。
ui是一种需求非常发散的产品,DCloud官方也无意用uni ui压制第三方ui插件的空间,但官方有义务在性能和端方面提供一个开源的标杆给大家。
ui是一种需求非常发散的产品,DCloud官方也无意用uni ui压制第三方ui插件的空间,但官方有义务在性能和端方面提供一个开源的标杆给大家。
我们欢迎更多优秀的ui组件出现,也欢迎更多人贡献uni ui的主题风格,满足更多用户的需求。
uni-ui支持npm安装和zip下载安装2种方式。
#### uni ui的使用方式
uni ui支持npm安装,和HBuilderX单独导入个别组件等多种使用方式
uni ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式
![HBuilderX内创建uni ui项目](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/create-uni-ui-project.jpg)
1. 在HBuilderX新建uni-app项目的模板中,选择uni ui模板
由于uni-app独特的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)技术,可以免引用、注册,直接使用各种符合规则的vue组件。
在代码区键入`u`,拉出各种内置或uni ui的组件列表,选择其中一个,即可使用该组件。
光标放在组件名称上,按F1,可以查阅组件的文档。
![uni ui代码块](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni-ui-snippet.jpg)
1. npm安装参考:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
2. npm安装参考:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
2. 下表为uni-ui的扩展组件清单,点击每个组件可单独安装。
3. 单独安装组件
如果你没有创建uni ui项目模板,也可以在你的工程里,单独安装需要的那个组件。下表为uni-ui的扩展组件清单,点击每个组件在详情页面可以导入组件到项目下,导入后直接使用即可,无需import和注册。
|组件名|说明|
|:-|:-|
......@@ -205,7 +215,7 @@ uni ui支持npm安装,和HBuilderX单独导入个别组件等多种使用方
|[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)| 折叠面板|
|[Combox](https://ext.dcloud.net.cn/plugin?id=1261)| 可选择输入框|
|[Combox](https://ext.dcloud.net.cn/plugin?id=1261)| 可下拉选择的输入框|
|[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)| 悬浮按钮|
......@@ -213,7 +223,7 @@ uni ui支持npm安装,和HBuilderX单独导入个别组件等多种使用方
|[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)| 索引列表|
|[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)| 自定义导航栏|
......
......@@ -61,8 +61,10 @@
* [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)
* [Icon 图标](https://ext.dcloud.net.cn/plugin?id=28)
* [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)
......@@ -72,6 +74,7 @@
* [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)
......@@ -84,74 +87,87 @@
* [page-meta](component/page-meta.md)
* [配置小程序插件](component/mp-weixin-plugin.md)
* [原生组件说明](component/native-component.md)
<li></li>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库:<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a><a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<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>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/uniad-520.png" width="20" height="20"/>
<div class="contact-smg">
<div>uniAD</div>
</div>
</a>
<a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-tongji-icon.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库:<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a><a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<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>群16:719211033 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0SG97jRMTnKLEqkK2qIO7mfxia2zwJoA&jump_from=webapi">点此加入</a></div>
<div>群35:713420817(2000人已满)</div>
<div>群34:530305531(2000人已满)</div>
<div>群33:498071674(2000人已满)</div>
<div>群32:166188631(2000人已满)</div>
<div>群31:567471669(2000人已满)</div>
<div>群30:371046920(2000人已满)</div>
<div>群29:202965481(2000人已满)</div>
<div>群28:166188776(2000人已满)</div>
<div>群27:811363410(2000人已满)</div>
<div>群26:147867597(2000人已满)</div>
<div>群25:165297000(2000人已满)</div>
<div>群24:672494800(2000人已满)</div>
<div>群23:599958679(2000人已满)</div>
<div>群22:687186952(2000人已满)</div>
<div>群21:717019120(2000人已满)</div>
<div>群20:165796402(2000人已满)</div>
<div>群19:165657124(2000人已满)</div>
<div>群18:698592271(2000人已满)</div>
<div>群17:951348804(2000人已满)</div>
<!-- <div>群16:719211033(2000人已满)</div> -->
<div>群15:516984120(2000人已满)</div>
<div>群14:465953250(2000人已满)</div>
<div>群13:699478442(2000人已满)</div>
<div>群12:884860657(2000人已满)</div>
<div>群11:296811328(2000人已满)</div>
<div>群10:959059626(2000人已满)</div>
<div>群9:775128777(2000人已满)</div>
<div>群8:695442854(2000人已满)</div>
<div>群7:942061423(2000人已满)</div>
<div>群6:697264024(2000人已满)</div>
<div>群5:731951419(2000人已满)</div>
<div>群4:942702595(2000人已满)</div>
<div>群3:773794803(2000人已满) </div>
<div>群2:901474938(2000人已满) </div>
<div>群1:531031261(2000人已满)</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
......@@ -7,9 +7,9 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.5.2+)|x|√|x|√|√|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.5.2+)|√(2.8.5+)|√|x|√|√|√|x|x|
**开通配置广告**
......@@ -70,14 +70,20 @@ App和微信小程序的ad组件没有type属性,可以用于banner,也可
- 微信小程序 `<ad>` 组件不支持触发 tap 等触摸相关事件
- Android 平台 nvue的 `<list>` 组件中使用 `<ad>` 时,必须指定宽度属性`<ad width="750rpx" />`,因为 `<list>` 有自动的内存回收机制,不在屏幕范围的组件不被创建,组件内部无法获取大小
- 广点通概率出现重复广告,可根据需求请求广告数据,推荐单次大于1条(plus.ad.getAds) 来降低重复率
- vue 页面使用 `<ad>` 暂不支持非 V3 编译,manifest.json 可配置
- app-vue 页面使用 `<ad>` 不支持非 V3 编译,必须使用v3编译器。
- `<recycle-list>` 暂不支持 `<ad>`
- app-vue|QQ是客户端原生组件,层级最高无法被覆盖,app-nvue|微信|头条没有层级覆盖问题
- app-vue|QQ是客户端[原生组件](https://uniapp.dcloud.io/component/native-component),层级最高无法被覆盖,app-nvue|微信|头条没有层级覆盖问题
- app-vue 无法在 `<swiper>` 组件中使用`<ad>`
- app-vue 不能在 `<scroll-view>` 组件中使用 `<ad>`,仅适用于页面级的滚动
- HBuilderX2.8+版本Android平台更新穿山甲(今日头条)广告SDK后不再支持x86类型CPU,无法运行到x86类型cpu的模拟器。
- `<ad>` 组件测试广告位是上图下文,uniAD后台申请的广告位默认左图右文
- HBuilderX标准基座真机运行测试信息流广告位标识(adpid)为:1111111111
**@error 错误码**
- App端聚合的穿山甲:[错误码](https://ad.oceanengine.com/union/media/doc?id=5de4cc6d78c8690012a90aa5)
- App端聚合的广点通:[错误码](https://developers.adnet.qq.com/doc/ios/union/union_debug#%E9%94%99%E8%AF%AF%E7%A0%81)
- App端聚合的穿山甲(iOS):[错误码](https://ad.oceanengine.com/union/media/union/download/detail?id=16&docId=5de8d574b1afac00129330d5&osType=ios)
- App端聚合的穿山甲(Android):[错误码](https://ad.oceanengine.com/union/media/union/download/detail?id=4&docId=5de8d9b925b16b00113af0ed&osType=android)
- App端聚合的广点通(iOS):[错误码](https://developers.adnet.qq.com/doc/ios/union/union_debug#%E9%94%99%E8%AF%AF%E7%A0%81)
- App端聚合的广点通(Android):[错误码](https://developers.adnet.qq.com/doc/android/union/union_debug#sdk%20%E9%94%99%E8%AF%AF%E7%A0%81)
**@downloadchange status**
......@@ -93,6 +99,37 @@ App和微信小程序的ad组件没有type属性,可以用于banner,也可
|6|已安装|
### H5平台 (2.8.5+)
```html
<template>
<view class="content">
<!-- H5平台 adpid在uniAD后台申请,支持复用 App 平台广告位-->
<view class="ad-view">
<ad adpid=""></ad>
</view>
</view>
</template>
```
**注意:**
- `H5` 广告需要校验域名,开发时不支持使用 localhost/ip,本机调试可配置 `host` 测试
- 不支持 file 协议中使用
### H5平台错误码
|code|message|
|:-|:-|
|3001|非法请求|
|3002|未找到此广告位|
|3003|域名未校验,请先通过uniAD后台 [uniad.dcloud.net.cn](https://uniad.dcloud.net.cn/) 效验域名|
|3004|遇到错误,请稍后重试|
|3005|未找到H5广告配置信息|
|3006|未找到任何广告位|
|3007|域名未校验或包含端口号,请先通过 [uniad.dcloud.net.cn](https://uniad.dcloud.net.cn/) 效验域名|
**示例:**
```html
......@@ -100,6 +137,7 @@ App和微信小程序的ad组件没有type属性,可以用于banner,也可
<view class="content">
<!-- App平台 示例 1 -->
<!-- adpid="1111111111" 此广告位标识仅在HBuilderX标准基座中有效,仅用于测试,替换为自己申请获取的广告位标识 -->
<view class="ad-view">
<ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror" @downloadchange="ondownloadchange"></ad>
</view>
......@@ -159,7 +197,7 @@ export default {
getAdData: function (e) {
// 仅APP平台支持
plus.ad.getAds({
adpid: '', // dcloud 后台创建
adpid: '1111111111', // 替换为自己申请获取的广告位标识,此广告位标识仅在HBuilderX标准基座中有效,仅用于测试
count: 1, // 广告数量,默认 3
width: 300 // 根据宽度获取合适的广告(单位px)
},
......@@ -203,10 +241,10 @@ export default {
```
**激励视频广告**
文档地址:[https://uniapp.dcloud.io/api/ad/rewarded-video-ad](https://uniapp.dcloud.io/api/ad/rewarded-video-ad)
文档地址:[https://uniapp.dcloud.io/api/a-d/rewarded-video](https://uniapp.dcloud.io/api/a-d/rewarded-video)
**注意**
- App端广告开通指南和收益相关问题:[https://ask.dcloud.net.cn/article/36769](https://ask.dcloud.net.cn/article/36769)
- App端除了ad组件,还支持开屏。详见[uni-AD官网](https://uniad.dcloud.net.cn/)
- App端除了ad组件,还支持开屏、激励视频等多种广告形式。详见[uni-AD官网](https://uniad.dcloud.net.cn/)
- App端uni-AD聚合了腾讯广点通、头条穿山甲、360广告联盟等服务,打包时必须勾选相应的sdk,详见:[https://ask.dcloud.net.cn/article/36718](https://ask.dcloud.net.cn/article/36718)
![](https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200115/10b714ce030ce2032a9d9b0bdd0ae03a.jpg)
......@@ -11,6 +11,8 @@
app-nvue也不支持此组件。
如果需要带ui的样式,可以自己做,也可以在插件市场搜索相关[插件](https://ext.dcloud.net.cn/search?q=audio)
**属性说明**
|属性名|类型|默认值|说明|
......@@ -37,7 +39,7 @@ app-nvue也不支持此组件。
|3|解码错误|
|4|不合适资源|
**示例:** [查看示例](https://uniapp.dcloud.io/h5/pages/component/audio/audio)
**示例:** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/audio/audio)
```html
<template>
......
......@@ -44,7 +44,7 @@
|值|说明|
|:-|:-|
|primary|微信小程序为绿色,App、H5、百度小程序、支付宝小程序为蓝色,字节跳动小程序为红色,QQ小程序为浅蓝色|
|primary|微信小程序、360小程序为绿色,App、H5、百度小程序、支付宝小程序、快应用为蓝色,字节跳动小程序为红色,QQ小程序为浅蓝色。如想在多端统一颜色,请改用default,然后自行写样式|
|default|白色|
|warn|红色|
......@@ -61,9 +61,9 @@
|:-|:-|:-|
|feedback|打开“意见反馈”页面,用户可提交反馈内容并上传日志|App、微信小程序、QQ小程序|
|share|触发用户转发|微信小程序、百度小程序、支付宝小程序、字节跳动小程序、QQ小程序|
|getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息|微信小程序、百度小程序、QQ小程序|
|getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括头像、昵称等信息|微信小程序、百度小程序、QQ小程序|
|contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |微信小程序、百度小程序|
|getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、字节跳动小程序 |
|getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、字节跳动小程序、支付宝小程序 |
|launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数|[微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html)[QQ小程序](https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_app.html)|
|openSetting | 打开授权设置页 |微信小程序、百度小程序|
|getAuthorize | 支持小程序授权 | 支付宝小程序 |
......@@ -78,9 +78,11 @@
- 支付宝小程序平台,获取用户手机号时,建议先通过条件编译的方式,调用支付宝原生API,[参考](https://docs.alipay.com/mini/api/getphonenumber)
**示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/button/button)
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/button/button)
以下示例代码,来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp),推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
```html
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
......@@ -106,3 +108,12 @@
```
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/button.png?t=201857)
**注意**
事件务必使用vue语法,比如下面的获取手机号示例
```html
<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button>
```
......@@ -3,13 +3,11 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|√|x|
* 在 App 和 H5 端,可以使用API方式来调用全屏摄像头,而不是组件内嵌方式。并且App端和H5端目前无法通过cover-view覆盖摄像头,有相关需求见下方插件。
* [uni.chooseImage](/api/media/image?id=chooseimage)[uni.chooseVideo](/api/media/video?id=choosevideo) 可以拍照或录像,但它们会同时允许用户选择相册。
* 使用`plus.camera`的API可以直接调起全屏的摄像头,详见:[https://www.html5plus.org/doc/zh_cn/camera.html](http://www.html5plus.org/doc/zh_cn/camera.html) 调用原生摄像头进行相关操作。
* 在 App 和 H5 端,可以使用API方式来调用全屏摄像头,而不是组件内嵌方式,详见:[uni.chooseImage](/api/media/image?id=chooseimage)[uni.chooseVideo](/api/media/video?id=choosevideo) *
* 如开发身份证扫描、银行卡识别等ocr识别需求,在微信小程序和百度小程序中使用本camera组件,将图片发送给服务器识别,插件市场有封装好的[模板](https://ext.dcloud.net.cn/search?q=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E6%9C%BA);在App端使用[原生插件](https://ext.dcloud.net.cn/search?q=ocr)
* 活体检测、人脸识别另见文档[生物认证](/api/other/authentication)
* app-nvue下支持barcode组件,可实现自定义扫码。[参考](https://uniapp.dcloud.io/component/barcode)
......@@ -18,11 +16,11 @@
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|mode|String|normal |有效值为 normal, scanCode |微信小程序|
|mode|String|normal |有效值为 normal, scanCode |微信小程序、QQ小程序、快应用|
|resolution|string|medium|分辨率,不支持动态修改|微信小程序2.10.0|
|device-position|String |back |前置或后置,值为front, back| |
|device-position|String |back |前置或后置摄像头,值为front, back| |
|flash |String |auto |闪光灯,值为auto, on, off| |
|frame-size|string|medium|指定期望的相机帧数据尺寸|微信小程序2.7.0|
|frame-size|string|medium|指定期望的相机帧数据尺寸|微信小程序2.7.0、快应用|
|@stop |EventHandle | |摄像头在非正常终止时触发,如退出后台等情况| |
|@error |EventHandle | |用户不允许使用摄像头时触发| |
|@initdone|eventhandle||相机初始化完成时触发,e.detail = {maxZoom}|微信小程序2.7.0|
......
......@@ -6,6 +6,7 @@
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|type|String||指定 canvas 类型,支持 2d (2.9.0) 和 webgl|微信小程序 2.7.0+|
|canvas-id|String||canvas 组件的唯一标识符||
|disable-scroll|Boolean|false|当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新|字节跳动小程序不支持|
|@touchstart|EventHandle||手指触摸动作开始|字节跳动小程序不支持|
......@@ -20,18 +21,18 @@
* 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 仍然为 webview 中的 canvas。
* app-vue 中的 canvas 仍然是 webview 的 canvas。app-nvue下如需使用canvas,需下载插件,暂未封装为uni API,可参考[文档](https://github.com/dcloudio/NvueCanvasDemo)使用。目前对nvue的开发者仍然建议在使用canvas时单独起一个vue页面,或者用web-view组件
* app-vue 中的 canvas 仍然是 webview 的 canvas。app-nvue下如需使用canvas,需下载插件,详见文档底部章节
* app-vue的canvas虽然是webview自带的canvas,但却比nvue和微信小程序的原生canvas性能更高。注意并非原生=更快。canvas动画的流畅,关键不在于渲染引擎的速度,而在于减少从逻辑层向视图层频繁通信造成的折损。
* 小程序、app-nvue,因为通信阻塞,难以绘制非常流畅的canvas动画。h5和app-vue不存在此问题。但注意,app-vue下若想流畅的绘制canvas动画,需要使用[renderjs](https://uniapp.dcloud.io/frame?id=renderjs)技术,把操作canvas的js逻辑放到视图层运行,避免逻辑层和视图层频繁通信。hello uni-app的canvas示例很典型,在相同手机运行该示例,可以看出在h5端和app端非常流畅,而小程序端做不到这么流畅的动画。
* 小程序、app-nvue,因为通信阻塞,难以绘制非常流畅的canvas动画。h5和app-vue不存在此问题。但注意,app-vue下若想流畅的绘制canvas动画,需要使用[renderjs](https://uniapp.dcloud.io/frame?id=renderjs)技术,把操作canvas的js逻辑放到视图层运行,避免逻辑层和视图层频繁通信。hello uni-app的canvas示例很典型,在相同手机运行该示例,可以看出在h5端和app端非常流畅,而小程序端由于没有renderjs技术,做不到这么流畅的动画。
**示例:**
**示例:** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/canvas/canvas)
```html
<template>
<view>
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" @error="canvasIdErrorCallback"></canvas>
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas"></canvas>
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas" @error="canvasIdErrorCallback"></canvas>
</view>
</template>
```
......@@ -83,3 +84,5 @@ canvas的常用用途有图表和图片处理,在uni-app插件市场有大量
HBuilderX 2.2.5(alpha)开始 nvue 页面支持 Canvas,支持 W3C WebGL API [WebGL 1.0](https://www.khronos.org/registry/webgl/specs/latest/1.0/)
示例工程地址:[NvueCanvasDemo](https://github.com/dcloudio/NvueCanvasDemo)
在App端,从性能来讲,由于通讯阻塞的问题,nvue的canvas性能不可能达到使用renderjs的vue页面的canvas。在App端,推荐使用vue的canvas。
......@@ -11,8 +11,6 @@ Cell 支持添加任意类型的组件作为自己的子组件,但是请不要
#### 属性
- keep-scroll-position boolean. 控制当 Cell 被添加到列表中时,列表的滚动位置是否要保持不变。
- insert-animation string, cell 的插入动画。当前只支持 `none``default`
- delete-animation string, cell 的删除动画。当前只支持 `none``default`
......
......@@ -19,9 +19,11 @@
|checked|Boolean|false|当前是否选中,可用来设置默认选中|
|color|Color||checkbox的颜色,同css的color|
**示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/checkbox/checkbox)
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/checkbox/checkbox)
以下示例代码,来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp),推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
```html
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
......@@ -127,10 +129,7 @@
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/checkbox.png?t=201857)
示例代码说明:以上示例代码从hello uni-app示例中复制,涉及的css样式在hello uni-app的app.vue和uni.css中
预览H5效果:使用浏览器的手机模式访问[https://uniapp.dcloud.io/h5/pages/component/checkbox/checkbox](https://uniapp.dcloud.io/h5/pages/component/checkbox/checkbox)
**注意**
- checkbox的默认颜色,在不同平台不一样。微信小程序是绿色的,字节跳动小程序为红色,其他平台是蓝色的。更改颜色使用color属性。
- checkbox的默认颜色,在不同平台不一样。微信小程序、360小程序是绿色的,字节跳动小程序为红色,其他平台是蓝色的。更改颜色使用color属性。
- 如需调节checkbox大小,可通过css的scale方法调节,如缩小到70%`style="transform:scale(0.7)"`
此差异已折叠。
......@@ -2,6 +2,8 @@
富文本编辑器,可以对图片、文字格式进行编辑和混排。
在web开发时,可以使用`contenteditable`来实现内容编辑。但这是一个dom API,在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了`editor`组件来实现这个功能,并且在uni-app的H5平台也提供了兼容。从技术本质来讲,这个组件仍然运行在视图层webview中,利用的也是浏览器的`contenteditable`功能。
编辑器导出内容支持带标签的 `html`和纯文本的 `text`,编辑器内部采用 `delta` 格式进行存储。
通过`setContents`接口设置内容时,解析插入的 `html` 可能会由于一些非法标签导致解析错误,建议开发者在应用内使用时通过 delta 进行插入。
......@@ -14,13 +16,11 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|2.0.0+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843),不含nvue|2.4.5+|基础库 2.7.0+|x|x|x|x|
本功能自HBuilderX2.0起支持。运行到微信小程序工具时,注意在微信工具里选择最新的基础库。
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|2.0+,app-vue|2.4.5+|基础库 2.7.0+|x|x|x|x|
editor组件目前只有H5、App的vue页面和微信支持,其他端的富文本编辑解决方案,可使用web-view加载web页面,也可搜索[插件市场](https://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91) 获取简单的markdown富文本编辑器
editor组件目前只有H5、App的vue页面和微信支持,其他端平台自身为提供editor组件,只能使用web-view加载web页面,也可搜索[插件市场](https://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91) 获取简单的markdown富文本编辑器
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| --- | --- | --- | --- | --- |
......@@ -57,13 +57,15 @@ editor组件目前只有H5、App的vue页面和微信支持,其他端的富文
**注意事项**
1. 插入的 html 中事件绑定会被移除
2. formats 中的 color 属性会统一以 hex 格式返回
3. 粘贴时仅纯文本内容会被拷贝进编辑器
4. 插入 html 到编辑器内时,编辑器会删除一些不必要的标签,以保证内容的统一。例如`<p><span>xxx</span></p>`会改写为`<p>xxx</p>`
5. 编辑器聚焦时页面会被上推,系统行为以保证编辑区可见
* 插入的 html 中事件绑定会被移除
* formats 中的 color 属性会统一以 hex 格式返回
* 粘贴时仅纯文本内容会被拷贝进编辑器
* 插入 html 到编辑器内时,编辑器会删除一些不必要的标签,以保证内容的统一。例如`<p><span>xxx</span></p>`会改写为`<p>xxx</p>`
* 编辑器聚焦时页面会被上推,系统行为以保证编辑区可见
* H5端会动态引入依赖 [quill.min.js](https://unpkg.com/quill@1.3.7/dist/quill.min.js)、[image-resize.min.js](https://unpkg.com/quill-image-resize-mp@3.0.1/image-resize.min.js),依赖从 [unpkg.com](https://unpkg.com) 加载,如过依赖加载较慢,可以下载下来放在自己的服务器或 CDN 服务商,然后在 [自定义模板](/collocation/manifest?id=h5-template) head 内引入。
**示例代码**
**示例代码** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/editor/editor)
```html
<template>
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
......@@ -28,6 +28,7 @@
|scroll-duration|number|300|否|滚动动画时长|微信基础库 2.9.0|
|page-style|string|""|否|页面根节点样式,页面根节点是所有页面节点的祖先节点,相当于 HTML 中的 body 节点|微信基础库 2.9.0|
|root-font-size|string|""|否|页面的根字体大小,页面中的所有 rem 单位,将使用这个字体大小作为参考值,即 1rem 等于这个字体大小|微信基础库 2.9.0|
|enable-pull-down-refresh|Boolean|""|否|是否开启下拉刷新|App 2.6.7|
|@resize|eventhandle||否|页面尺寸变化时会触发 resize 事件, event.detail = { size: { windowWidth, windowHeight } }|微信基础库 2.9.0|
|@scroll|eventhandle||否|页面滚动时会触发 scroll 事件, event.detail = { scrollTop }|微信基础库 2.9.0|
|@scrolldone|eventhandle||否|如果通过改变 scroll-top 属性来使页面滚动,页面滚动结束后会触发 scrolldone 事件|微信基础库 2.9.0|
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册