提交 e2da2d8f 编写于 作者: Q qiang

Merge branch 'master' into dev

# Conflicts:
#	packages/uni-cli-shared/components/unicloud-db.vue
#	packages/vue-cli-plugin-uni/packages/uni-cloud/dist/index.js
......@@ -2,7 +2,7 @@
`uni-app` 是一个使用 `Vue.js` 开发小程序、H5、App的统一前端框架。官网地址:[https://uniapp.dcloud.io](https://uniapp.dcloud.io)
开发者使用 `Vue` 语法编写代码,`uni-app` 框架将其编译到 小程序(微信/支付宝/百度/字节跳动/QQ/钉钉)、App(iOS/Android)、H5等多个平台,保证其正确运行并达到优秀体验。
开发者使用 `Vue` 语法编写代码,`uni-app` 框架将其编译到 小程序(微信/支付宝/百度/字节跳动/QQ/快手/钉钉)、App(iOS/Android)、H5等多个平台,保证其正确运行并达到优秀体验。
# uni-app的特点
......@@ -15,9 +15,9 @@
## 扫码体验
开发一次,编译到10个平台。依次扫描10个二维码,亲自体验最全面的跨平台效果!
开发一次,编译到11个平台。依次扫描11个二维码,亲自体验最全面的跨平台效果!
<img src="https://img.cdn.aliyun.dcloud.net.cn/uni-app/uni-app-qr-all.jpg"/>
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/d6c073b7-9233-411d-b143-a74af382422c.jpg"/>
*注: 某些平台不能提交简单demo,补充了一些其他功能。*
......
<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、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
`DCloud`公司拥有800万开发者、数百万应用、12亿手机端月活用户、数千款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>一套代码编到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://bjetxgzv.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://bjetxgzv.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>Web版</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>
</div>
<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://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/30112940-bcf2-11ea-a30b-e311646dfaf2.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://bjetxgzv.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-qa-union.png" width="160" />
</div>
<b>快应用</b>
</a>
</div>
<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://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qq.png" width="160" />
</div>
<b>QQ小程序版</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>
<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-a90b5f95-90ba-4d30-a6a7-cd4d057327db/3c756de5-cd3b-4134-974b-6b41d8ea86d7.jpg" width="160" /></div>
<b>快手小程序版</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>
### uni-app视频介绍
我们精心准备了一个简单的十分钟介绍视频,方便你快速了解```uni-app```的主要特征:
<!-- <video id="video" onplay="videoPlay()" preload="none" controls="controls" width="100%" poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/78e4ebc0-54be-11eb-a16f-5b3e54966275.mp4"></video> -->
<video id="video" onplay="videoPlay()" preload="none" controls="controls" width="100%" poster="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/9d299680-555d-11eb-8a36-ebb87efcf8c0.jpg" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"></video>
### 为什么要选择uni-app?
```uni-app```在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
<!-- ![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190418.png) -->
<div class="uniapp-home-content">
<div class="uniapp-home-content-item">
<div class="uniapp-home-content-item-image">
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/9c70d280-4f36-11eb-8a36-ebb87efcf8c0.png">
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">开发者/案例数量更多</h5>
<p class="uniapp-home-content-item-text">数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">跨端完善度更高,真正落地的提高生产力</p>
</div>
</div>
<div class="uniapp-home-content-item">
<div class="uniapp-home-content-item-image">
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/9d2b6ff0-4f36-11eb-b680-7980c8a877b8.png">
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">平台能力不受限</h5>
<p class="uniapp-home-content-item-text">在跨端的同时,通过条件编译+平台特有API调用,可以优雅的为某平台写个性化代码,调用专有能力而不影响其他平台。</p>
<p class="uniapp-home-content-item-text">支持原生代码混写和原生sdk集成。</p>
</div>
</div>
<div class="uniapp-home-content-item">
<div class="uniapp-home-content-item-image">
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/9e0d6b80-4f36-11eb-97b7-0dc4655d6e68.png">
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">性能体验优秀</h5>
<p class="uniapp-home-content-item-text">加载新页面速度更快、自动diff更新数据。</p>
<p class="uniapp-home-content-item-text">App端支持原生渲染,可支撑更流畅的用户体验。</p>
<p class="uniapp-home-content-item-text">小程序端的性能优于市场其他框架。<a href="https://ask.dcloud.net.cn/article/35947" target="_blank">评测</a></p>
</div>
</div>
<div class="uniapp-home-content-item">
<div class="uniapp-home-content-item-image">
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/9f01dda0-4f36-11eb-8a36-ebb87efcf8c0.png">
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">周边生态丰富</h5>
<p class="uniapp-home-content-item-text"><a href="https://ext.dcloud.net.cn/?orderBy=WeekDownload" target="_blank">插件市场</a>数千款插件。</p>
<p class="uniapp-home-content-item-text">支持NPM、支持小程序组件和SDK。</p>
<p class="uniapp-home-content-item-text">微信生态的各种sdk可直接用于跨平台App。</p>
</div>
</div>
<div class="uniapp-home-content-item">
<div class="uniapp-home-content-item-image">
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/9fc22060-4f36-11eb-bdc1-8bd33eb6adaa.png">
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">学习成本低</h5>
<p class="uniapp-home-content-item-text">基于通用的前端技术栈,采用vue语法+微信小程序api,无额外学习成本。</p>
</div>
</div>
<div class="uniapp-home-content-item">
<div class="uniapp-home-content-item-image">
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a09723a0-4f36-11eb-97b7-0dc4655d6e68.png">
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">开发成本低</h5>
<p class="uniapp-home-content-item-text">不止开发成本,招聘、管理、测试各方面成本都大幅下降。</p>
<p class="uniapp-home-content-item-text">HBuilderX是高效开发神器,熟练掌握后研发效率至少翻倍(即便只开发一个平台)。</p>
</div>
</div>
</div>
<!-- ```uni-app``` 使用```Vue.js```的语法 + 微信小程序的API,均为通用技术。
有一定 ```Vue.js``` 和小程序开发经验的开发者可快速上手 ```uni-app``` ,开发出兼容多端的应用。
```uni-app```提供了条件编译机制,在跨端的同时,可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。这是能落地的真正一套代码的解决方案,而不是仅仅统一技术栈,实际项目仍然多套代码、各自升级。
```uni-app```打包到App时使用了使用独立v8引擎,渲染层支持原生渲染和webview渲染双选,内置大量常用原生功能,支持原生插件扩展,并且插件市场有丰富的插件生态,无需懂原生开发亦可完成复杂应用。
`uni-app`提供了`uni小程序sdk`,支持以sdk方式嵌入原生项目中混合开发,帮助原生App得到小程序能力,并可享受`uni-app`的开发者生态。
```uni-app```被DCloud定义为**终极跨平台开发框架**,拥有极强的竞争优势。
- 对于技术人员而言:不用学那么多的平台开发技术、研究那么多前端框架,学会基于vue的```uni-app```就够了。
- 对于公司而言:更低成本,覆盖更多用户,```uni-app```是高效利器。 -->
### 功能框架
从下面```uni-app```功能框架图可看出,```uni-app```在跨平台的过程中,不牺牲平台特色,可优雅的调用平台专有能力,真正做到海纳百川、各取所长。
![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/87a0a0d0-60aa-11eb-8ff1-d5dcf8779628.png)
### 一套代码,运行到多个平台
```uni-app```实现了一套代码,同时运行到多个平台;如下图所示,一套代码,同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具(底部8个终端选项卡代表8个终端模拟器):
![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/efd8e280-60a9-11eb-a16f-5b3e54966275.jpg)
实际运行效果如下(点击图片可放大):
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/ec6e95dd-77ad-4d14-aafa-ca503f5b9e53.jpg)
* [简体中文](https://github.com/dcloudio/unidocs-zh)
* [English](https://github.com/dcloudio/unidocs-en)
* [介绍](README.md)
* [框架](collocation/pages.md)
* [组件](component/README.md)
* [API](api/README.md)
* [uniCloud](uniCloud/README.md)
* [其它规范](http://www.html5plus.org/doc/h5p.html)
- [App扩展规范HTML5 Plus](http://www.html5plus.org/doc/h5p.html)
- [微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/)
- [支付宝小程序](https://docs.alipay.com/mini/developer/getting-started)
- [百度小程序](https://smartprogram.baidu.com/docs/develop/tutorial/codedir/)
- [字节跳动小程序](https://developer.toutiao.com/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">
<li class="ext-link"><a href="//ext.dcloud.net.cn/" target="__blank">插件市场</a></li>
<li><a href="//dev.dcloud.net.cn/wish/?channel=uniapp" target="__blank">需求墙</a></li>
<li><a href="//dev.dcloud.net.cn/sponsor/?channel=uniapp" target="__blank" style="color:#FF6600!important;"><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/45e691f0-4f3d-11eb-b680-7980c8a877b8.png" class="heart">赞助我们</a></li>
</ul>
<div class="github">
<a href="//github.com/dcloudio/uni-app" target="_blank">
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/44f8d690-4f3d-11eb-b680-7980c8a877b8.svg">
</a>
</div>
* [什么是 uni-app](README.md)
* 快速上手
* [1. 通过 HBuilderX 可视化界面](quickstart-hx.md)
* [2. 通过vue-cli命令行](quickstart-cli.md)
* [uni-app的由来](history.md)
* [如何学习](resource.md)
* [框架简介](frame.md)
* vue教程
* [基础](vue-basics.md)
* [组件](vue-components.md)
* [API](vue-api.md)
* [vuex](vue-vuex.md)
* nvue教程
* [综述](nvue-outline.md)
* [样式](nvue-css.md)
* [API](nvue-api.md)
* [事件](nvue-event.md)
* [使用 HTML5+ 注意事项](use-html5plus.md)
* [条件编译 解决各端差异](platform.md)
* [uni-app 跨端开发注意](matter.md)
* [高效开发技巧](snippet.md)
* [性能优化建议](performance.md)
* [宽屏适配指南](adapt.md)
* [开放生态](ecosystem.md)
* [uni_modules插件规范](uni_modules.md)
* [从其他项目转uni-app](translate.md)
* [混合开发](hybrid.md)
* [uni小程序sdk](https://nativesupport.dcloud.net.cn/README)
* 运营服务
* [App升级中心](uniCloud/upgrade-center.md)
* [uni一键登录](univerify.md)
* [统一推送uniPush](unipush.md)
* [uni统计](uni-stat.md)
* [广告变现](uni-ad.md)
* [统一发行页面](m3w.md)
* [案例](case.md)
* [选型评估指南](select.md)
* [应用市场上架](store.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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7962e8e0-4f2d-11eb-a16f-5b3e54966275.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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/73fc4f90-4f2d-11eb-a16f-5b3e54966275.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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/765d9820-4f2d-11eb-bd01-97bc1429a9ff.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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/77159d80-4f2d-11eb-a16f-5b3e54966275.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/74cda950-4f2d-11eb-a16f-5b3e54966275.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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/759713d0-4f2d-11eb-a16f-5b3e54966275.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群12:884860657 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=JsogY994PmSrFzeSEZ6vC5dgsy3kQ-Fz&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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/77df7d30-4f2d-11eb-bd01-97bc1429a9ff.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/78a8e7b0-4f2d-11eb-8ff1-d5dcf8779628.jpg" width="90" height="90"/>
</div>
</div>
</div>
#### 宽屏适配指南
uni-app是以移动为先的理念诞生的。从uni-app 2.9起,提供了PC等宽屏的适配方案,完成了全端统一。
PC适配和屏幕适配略有差异。PC适配包含`宽屏适配``uni-app内置组件适配PC`两方面的工作。
uni-app内置组件的PC适配,又包括`PC交互习惯的UI调整``非webkit浏览器适配`这两部分。这块工作不在本文的讨论范围内,尤其是开发者在PC端可以随意使用普通html元素和组件,不局限于uni-app内置组件。所以本文重点讨论屏幕适配。
uni-app提供的屏幕适配方案,包括3部分:
#### 1. 页面窗体级适配方案:leftWindow、rightWindow、topWindow
以目前手机屏幕为主window,在左右上,可新扩展 leftWindow、rightWindow、topWindow,这些区域可设定在一定屏幕宽度范围自动出现或消失。这些区域各自独立,切换页面支持在各自的window内刷新,而不是整屏刷新。
各个window之间可以交互通信。
这里有2个例子:
- hello uni-app:[https://hellouniapp.dcloud.net.cn/](https://hellouniapp.dcloud.net.cn/)
- 分栏式的新闻模板:[https://static-7d133019-9a7e-474a-b7c2-c01751f00ca5.bspapp.com/#/](https://static-7d133019-9a7e-474a-b7c2-c01751f00ca5.bspapp.com/#/),这个示例对应的源码在:[https://github.com/dcloudio/uni-template-news](https://github.com/dcloudio/uni-template-news)
以上示例建议使用最新版的chrome、Safari、或firefox访问。可以在PC模式和手机模式分别体验。以上示例源码的运行需使用HBuilderX 2.9+
这些例子特点如下:
- hello uni-app使用了topWindow和leftWindow,分为上左右3栏。新闻模板使用了rightWindow区域,分为左右2栏。宽屏下点击左边的列表在右边显示详情内容。而窄屏下仍然是点击列表后新开一个页面显示详情内容。
- leftWindow或rightWindow 里的页面是复用的,不需要重写新闻详情页面,支持把已有详情页面当组件放到 leftWindow或rightWindow 页面中。
这套方案是已知的、最便捷的分栏式宽屏应用适配方案。
__H5 宽屏下 tabBar(选项卡) 与窗体的关系__
> 目前做如下调整:leftWindow、rightWindow、topWindow 中有其一存在,则 tabBar 隐藏;不存在,则不隐藏。
leftWindow等配置,在pages.json里进行。文档见:[https://uniapp.dcloud.net.cn/collocation/pages?id=topwindow](https://uniapp.dcloud.net.cn/collocation/pages?id=topwindow)
pages.json 配置样例
```json
{
"globalStyle": {
},
"topWindow": {
"path": "responsive/top-window.vue", // 指定 topWindow 页面文件
"style": {
"height": "44px"
}
},
"leftWindow": {
"path": "responsive/left-window.vue", // 指定 leftWindow 页面文件
"style": {
"width": 300
}
},
"rightWindow": {
"path": "responsive/right-window.vue", // 指定 rightWindow 页面文件
"style": {
"width": "calc(100vw - 400px)" // 页面宽度
},
"matchMedia": {
"minWidth": 768 //生效条件,当窗口宽度大于768px时显示
}
}
}
```
- leftWindow等方案的使用教程
如果已经有了一个为小屏设计的uni-app,在使用leftWindow等窗体适配大屏时,需理清一个思路:现有的小屏内容,放在哪个window里?
如果应用的首页是列表,二级页是详情,此时适合的做法是,将原有的小屏列表作为主window,在右边扩展rightWindow来显示详情。
以新闻示例项目为例,预览地址[https://static-7d133019-9a7e-474a-b7c2-c01751f00ca5.bspapp.com/#/](https://static-7d133019-9a7e-474a-b7c2-c01751f00ca5.bspapp.com/#/)。这个项目的源码已经内置于HBuilderX 2.9中,新建uni-app项目时选择新闻/资讯模板。
首先在这个项目的`pages.json`文件中,配置[`rightWindow`选项](https://uniapp.dcloud.net.cn/collocation/pages?id=rightwindow),放置一个新页面`right-window.vue`
```json
# pages.json
"rightWindow": {
"path": "responsive/right-window.vue",
"style": {
"width": "calc(100vw - 450px)"
},
"matchMedia": {
"minWidth": 768
}
}
```
`rightWindow`对应的页面不需要重写一遍新闻详情的页面逻辑,只需要引入之前的详情页面组件(详情页面`/pages/detail/detail`可自动转化为`pages-detail-detail`组件使用)。
```html
<!--responsive/right-window.vue-->
<template>
<view>
<!-- 这里将 /pages/detail/detail.nvue 页面作为一个组件使用 -->
<!-- 路径 “/pages/detail/detail” 转为 “pages-detail-detail” 组件 -->
<pages-detail-detail ref="detailPage"></pages-detail-detail>
</view>
</template>
<script>
export default {
created(e) {
//监听自定义事件,该事件由详情页列表的点击触发
uni.$on('updateDetail', (e) => {
// 执行 detailPage组件,即:/pages/detail/detail.nvue 页面的load方法
this.$refs.detailPage.load(e.detail);
})
},
onLoad() {},
methods: {}
}
</script>
```
然后在新闻列表页面,处理点击列表后与rightWindow交互通信的逻辑。
```js
// pages/news/news-page.nvue
goDetail(detail) {
if (this._isWidescreen) { //若为宽屏,则触发右侧详情页的自定义事件,通知右侧窗体刷新新闻详情
uni.$emit('updateDetail', {
detail: encodeURIComponent(JSON.stringify(detail))
})
} else { // 若为窄屏,则打开新窗体,在新窗体打开详情页面
uni.navigateTo({
url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))
});
}
},
```
可以看到,无需太多工作量,就可以快速把一个为手机窄屏开发的应用,快速适配为PC宽屏应用。并且以后的代码维护,仍然是同一套,当业务迭代时不需要多处升级。
rightWindow适用于分栏式应用,那leftWindow一般用于什么场景?
leftWindow比较适合放置导航页面。如果你的应用首页有很多tab和宫格导航,那么可以把它们重组,放在leftWindow作为导航。之前在手机竖屏上依靠多级tab和宫格导航的场景,可以在leftWindow里通过tree或折叠面板方式导航。
leftWindow除了适用于手机应用适配大屏,也适用于重新开发的PC应用,尤其是PC Admin管理控制台。
DCloud官方基于uni-app的pc版,推出了unicloud Admin:[https://uniapp.dcloud.net.cn/uniCloud/admin](https://uniapp.dcloud.net.cn/uniCloud/admin)
目前的leftWindow、rightWindow、topWindow 只支持web端。计划后续在Pad App上实现该配置。小程序无法支持该配置。
#### 2. 组件级适配方案:match-media组件
leftWindow等方案是页面窗体级适配方案。适于独立的页面。那么在同一个页面中,是否可以适配不同屏宽?当然可以,此时可以使用组件级适配方案。
uni-app提供了 [match-media组件](https://uniapp.dcloud.net.cn/component/match-media) 和配套的 [uni.createMediaQueryObserver](https://uniapp.dcloud.net.cn/api/ui/media-query-observer) 方法。
这是一个媒体查询适配组件,可以更简单的用于动态屏幕适配。
`match-media`组件中放置内容,并为组件指定一组 media query 媒体查询规则,如屏幕宽度。运行时,如屏幕宽度满足查询条件,这个组件就会被展示,反之则隐藏。
`match-media`组件的优势包括:
1. 开发者能够更方便、显式地使用 Media Query 能力,而不是耦合在 CSS 文件中,难以复用。
2. 能够在模板中结合数据绑定动态地使用,不仅能做到组件的显示或隐藏,在过程式 API 中可塑性更高,例如能够根据尺寸变化动态地添加 class 类名,改变样式。
3. 能够嵌套式地使用 Media Query 组件,即能够满足局部组件布局样式的改变。
4. 组件化之后,封装性更强,能够隔离样式、模版以及绑定在模版上的交互事件,还能够提供更高的可复用性。
它的详细文档参考:[https://uniapp.dcloud.net.cn/component/match-media](https://uniapp.dcloud.net.cn/component/match-media)
当然,开发者也可以继续使用css媒体查询来适配屏幕,或者使用一些类似mobilehide、pcshow之类的css样式。
uni-app的屏幕适配推荐方案是运行时动态适配,而不是为PC版单独条件编译(虽然您也可以通过自定义条件编译来实现单独的PC版)。这样设计的好处是在ipad等设备的浏览器上可以方便的横竖屏切换。
#### 3. 内容缩放拉伸的处理
除了根据屏宽动态显示和隐藏内容,其实还有一大类屏幕适配需求,即:内容不会根据屏宽动态显示隐藏,而是缩放或拉伸。
具体来说,内容适应又有两种细分策略:
1. 局部拉伸:页面内容划分为固定区域和长宽动态适配区域,固定区域使用固定的px单位约定宽高,长宽适配区域则使用flex自动适配。当屏幕大小变化时,固定区域不变,而长宽适配区域跟着变化
2. 等比缩放:根据页面屏幕宽度缩放。rpx其实属于这种类型。在宽屏上,rpx变大,窄屏上rpx变小。
举个实际的例子,比如一个列表页面,左边有一个图标,右边是2行文字。
- 如果使用策略1,即局部拉伸,那么左边的图标部分固定一个宽高,右边的2行文字的大小也固定,但2行文字的宽度自适应,占满屏幕右侧的空间。也就是屏宽宽度变化后,只有2行文字的宽度在变化,其他一切不变。
- 如果使用策略2,即等比缩放,那么整个列表均使用rpx,在宽屏上,图标变大、右边的2行文字变大,列表项行高变大。而在窄屏上,一切又都变小。
策略2省事,设计师按750px屏宽出图,程序员直接按rpx写代码即可。但策略2的实际效果不如策略1好。程序员使用策略1,分析下界面,设定好局部拉伸区域,这样可以有更好的用户体验。
这里需要对rpx的使用特别强调一下。
在移动设备上也有很多屏幕宽度,设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于,各种移动设备的屏幕宽度差异不是很大,相对于750px微调缩放后的效果,尽可能的还原了设计师的设计。
但是,一旦脱离移动设备,在pc屏幕,或者pad横屏状态下,因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期,大的惨不忍睹。
为此,在uni-app 2.9+起,新增了 rpx 按750px做基准屏宽的生效范围控制,并且将 rpx 的默认最大适配宽度设为了 960 px。
也就是设计师按750px出具的设计图,可适配的最大屏幕宽度为960px,在这个范围内,rpx可以根据屏幕宽度缩放。一旦超过960,rpx再根据屏幕宽度缩放就变的没有意义了。按如下配置,在超过960宽的屏幕上,会按375px作为基准宽度,这是最大程度上保持界面不失真的策略。
当然这些配置您都可以自己定义调整,在 pages.json 的 globeStyle 里配置 rpx 的如下参数。
```json
{
"globalStyle": {
"rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960
"rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375
"rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750
},
}
```
通过上述配置中的前2个,即rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth,即可有效解决使用了rpx后,在宽屏下界面变的奇大无比的问题。如果你不需要特别定义这2个参数的数值,则无需在`pages.json`中配置它们,保持默认的960和375即可。
但是,rpx的最大适配宽度被限定后,会带来一个新问题:如果您的代码中把750rpx当做100%来使用(官方强烈不推荐这种写法,即便是nvue不支持百分比,也应该使用flex来解决撑满问题),此时不管屏幕宽度为多少,哪怕超过了960px,您的预期仍然是要占满整个屏幕宽度,但如果按rpxCalcBaseDeviceWidth的375px的策略执行将不再占满屏宽。
此时您有两种解决方案,一种是修改代码,将里面把rpx当做百分比的代码改掉;另一种是配置rpxCalcIncludeWidth,设置某个特定数值不受rpxCalcMaxDeviceWidth约束。如上述例子中的"rpxCalcIncludeWidth": 750,代表着如果写了 750rpx,始终将按屏幕宽度百分百占满来计算。
- 关于 rpx 转 px
不少开发者之前对rpx的使用过于没有节制,后来为了适配宽屏,想要改用“局部拉伸:页面内容划分为固定区域和长宽动态适配区域”的策略,此时将回归px。
比如[DCloud社区的宽屏适配示例](https://static-1afcc27f-ce2f-4a6d-9416-c65a6f87d24e.bspapp.com/#/)[新闻模板](https://static-7d133019-9a7e-474a-b7c2-c01751f00ca5.bspapp.com)都没有使用rpx。
如果想把rpx转px,可以在源码里正则替换,也可以使用三方已经写好的单位转换库。下面介绍下三方库的用法。
项目根目录新增文件 `postcss.config.js`,内容如下。则在编译时,编译器会自动转换rpx单位为px。
** 注意:将rpx作为百分比的用法需要手动处理
```js
// postcss.config.js
const path = require('path')
module.exports = {
parser: 'postcss-comment',
plugins: {
'postcss-import': {
resolve(id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
},
'autoprefixer': {
overrideBrowserslist: ["Android >= 4", "ios >= 8"],
remove: process.env.UNI_PLATFORM !== 'h5'
},
// 借助postcss-px-to-viewport插件,实现rpx转px,文档:https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
// 以下配置,可以将rpx转换为1/2的px,如20rpx=10px,如果要调整比例,可以调整 viewportWidth 来实现
'postcss-px-to-viewport': {
unitToConvert: 'rpx',
viewportWidth: 200,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'px',
fontViewportUnit: 'px',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: undefined,
include: undefined,
landscape: false
},
'@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
}
}
```
#### 非webkit浏览器适配
uni-app理论上不限定浏览器。在HBuilderX 2.9发版时,就新闻示例项目,在chrome、Safari、firefox、edge的最新版上均测试过,可以正常使用。
一般国内的浏览器,如360浏览器、搜狗浏览器,均支持chrome内核,只要版本够新,应该都可以访问。
如果你的应用在其他PC浏览器下异常,请检查自己代码的浏览器兼容问题。
如果你发现了uni-app框架层面、内置组件有浏览器兼容问题,欢迎在github上给我们提交pr。
一般情况下,只要基础框架没有浏览器兼容问题,那么组件层面的问题也可以通过更换组件来解决。当uni-app编译到PC浏览器端时,支持所有的vue组件,包含那些操作了dom、window的ui库,比如elementUI等。
#### 一个让手机版网页临时可用于pc浏览器的方案
如果你的h5版已经开发完毕,还没来得及适配pc,但想在pc上先用起来。那么可以在pc网页里使用iframe,约定好宽度,在里面套用uni-app的窄屏版。
当然还可以在iframe旁边放置二维码,提供手机版扫码地址,例如:
![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/979f7940-12ba-11eb-b680-7980c8a877b8.png)
#### 通过electron打包为windows、mac、linux客户端
有了宽屏适配,uni-app的应用就可以方便的通过electron打包为电脑客户端应用,windows、mac、linux均支持。
开发者可以随意调用electron的API,以调用更多操作系统的能力(为方便多端兼容,可以将这些特殊API写在自定义的条件编译里)
插件市场有已经封装好的一些插件,详见:[https://ext.dcloud.net.cn/search?q=electron](https://ext.dcloud.net.cn/search?q=electron)
#### 响应式布局组件:uni-row
流式栅格系统,随着屏幕或视口分为 24 份,可以迅速简便地创建布局。
该插件将屏幕分为五个档位:`<768px``>=768px``>=992px``>=1200px``>=1920px`
对应的可以使用`xs``sm``md``lg``xl`来控制在不同分辨率下的显示效果。详情可在插件市场查看。
插件地址:https://ext.dcloud.net.cn/plugin?id=3958
此差异已折叠。
* 基础
* [日志打印](api/log.md)
* [定时器](api/timer.md)
* [uni.base64ToArrayBuffer](api/base64ToArrayBuffer?id=base64toarraybuffer)
* [uni.arrayBufferToBase64](api/arrayBufferToBase64?id=arraybuffertobase64)
* [生命周期](api/lifecycle.md)
* [应用级事件](api/application.md)
* [拦截器](api/interceptor.md)
* [全局API](api/global.md)
* 网络
* [发起请求](api/request/request.md)
* [上传、下载](api/request/network-file.md)
* [WebSocket](api/request/websocket.md)
* [SocketTask](api/request/socket-task.md)
* [mDNS](api/request/mDNS.md)
* [UDP 通信](api/request/UDP.md)
* 路由与页面跳转
* [uni.navigateTo](/api/router?id=navigateto)
* [uni.redirectTo](/api/router?id=redirectto)
* [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)
* [uni.setStorageSync](/api/storage/storage?id=setStorageSync)
* [uni.getStorage](/api/storage/storage?id=getStorage)
* [uni.getStorageSync](/api/storage/storage?id=getStorageSync)
* [uni.getStorageInfo](/api/storage/storage?id=getStorageInfo)
* [uni.getStorageInfoSync](/api/storage/storage?id=getStorageInfoSync)
* [uni.removeStorage](/api/storage/storage?id=removeStorage)
* [uni.removeStorageSync](/api/storage/storage?id=removeStorageSync)
* [uni.clearStorage](/api/storage/storage?id=clearStorage)
* [uni.clearStorageSync](/api/storage/storage?id=clearstoragesync)
* 位置
* [获取位置](api/location/location.md)
* [查看位置](api/location/open-location.md)
* [地图组件控制](api/location/map.md)
* 媒体
* [图片](api/media/image.md)
* [文件](api/media/file.md)
* [录音管理](api/media/record-manager.md)
* [背景音频播放管理](api/media/background-audio-manager.md)
* [音频组件控制](api/media/audio-context.md)
* [视频](api/media/video.md)
* [视频组件控制](api/media/video-context.md)
* [相机组件控制](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)
* [网络状态](api/system/network.md)
* [系统主题](api/system/theme.md)
* [加速度计](api/system/accelerometer.md)
* [罗盘](api/system/compass.md)
* [陀螺仪](api/system/gyroscope.md)
* [拨打电话](api/system/phone.md)
* [扫码](api/system/barcode.md)
* [剪贴板](api/system/clipboard.md)
* [屏幕](api/system/brightness.md)
* [用户截屏事件](api/system/capture-screen.md)
* [振动](api/system/vibrate.md)
* [手机联系人](api/system/contact.md)
* [蓝牙](api/system/bluetooth.md)
* [低功耗蓝牙](api/system/ble.md)
* [iBeacon](api/system/ibeacon.md)
* [Wi-Fi](api/system/wifi.md)
* [电量](api/system/batteryInfo.md)
* [NFC](api/system/nfc.md)
* [设备方向](api/system/deviceMotion.md)
* [生物认证](api/system/authentication.md)
* [Worker](api/worker.md)
* 键盘
* [uni.hideKeyboard](/api/key?id=hidekeyboard)
* [uni.onKeyboardHeightChange](/api/key?id=onkeyboardheightchange)
* [uni.offKeyboardHeightChange](/api/key?id=offkeyboardheightchange)
* 界面
* [交互反馈](api/ui/prompt.md)
* [设置导航条](api/ui/navigationbar.md)
* [设置TabBar](api/ui/tabbar.md)
* [背景](api/ui/bgcolor.md)
* [动画](api/ui/animation?id=unicreateanimationobject)
* [滚动](api/ui/scroll)
* [窗口](api/ui/window.md)
* [宽屏适配](api/ui/adapt.md)
* [字体](api/ui/font.md)
* [下拉刷新](api/ui/pulldown.md)
* [节点信息](api/ui/nodes-info.md)
* [节点布局相交状态](api/ui/intersection-observer.md)
* [媒体查询](api/ui/media-query-observer.md)
* [自定义组件](api/ui/nextTick.md)
* [菜单](api/ui/menuButton.md)
* [语言](api/ui/locale.md)
* 页面和窗体
* [页面](api/window/window.md)
* [页面通讯](api/window/communication.md)
* [subNVue原生子窗体](api/window/subNVues.md)
* 文件
* [uni.saveFile](/api/file/file?id=savefile)
* [uni.getSavedFileList](/api/file/file?id=getSavedFileList)
* [uni.getSavedFileInfo](/api/file/file?id=getSavedFileInfo)
* [uni.removeSavedFile](/api/file/file?id=removeSavedFile)
* [uni.getFileInfo](/api/file/file?id=getFileInfo)
* [uni.openDocument](/api/file/file?id=openDocument)
* [uni.getFileSystemManager](/api/file/getFileSystemManager)
* 绘画
* [uni.createOffscreenCanvas](api/canvas/createOffscreenCanvas.md)
* [uni.createCanvasContext](api/canvas/createCanvasContext.md)
* [uni.canvasToTempFilePath](api/canvas/canvasToTempFilePath.md)
* [uni.canvasPutImageData](api/canvas/canvasPutImageData.md)
* [uni.canvasGetImageData](api/canvas/canvasGetImageData.md)
* [CanvasContext](api/canvas/CanvasContext.md)
* [CanvasGradient](api/canvas/CanvasGradient.md)
* 广告
* [激励视频广告](api/a-d/rewarded-video.md)
* [全屏视频广告](api/a-d/full-screen-video.md)
* [内容联盟广告](api/a-d/content-page.md)
* [插屏广告](api/a-d/interstitial.md)
* [互动游戏](api/a-d/interactive.md)
* 第三方服务
* [获取服务供应商](api/plugins/provider.md)
* [登录](api/plugins/login.md)
* [分享](api/plugins/share.md)
* [支付](api/plugins/payment.md)
* [推送](api/plugins/push.md)
* [语音](api/plugins/voice.md)
* [一键生成iOS通用链接](api/plugins/universal-links.md)
* [uniCloud](api/uniCloud.md)
* 平台扩展
* [App原生插件](api/extend/native-plugin.md)
* 其他
* [授权](api/other/authorize.md)
* [设置](api/other/setting.md)
* [收货地址](api/other/choose-address.md)
* [获取发票抬头](api/other/invoice-title.md)
* [小程序跳转](api/other/open-miniprogram.md)
* [账号信息](api/other/getAccountInfoSync.md)
* [运动(计步器)](api/other/sport.md)
* [统计](api/other/report.md)
* [卡券](api/other/card.md)
* [模板消息](api/other/template.md)
* [订阅消息](api/other/requestSubscribeMessage.md)
* [小程序更新](api/other/update.md)
* [调试](api/other/set-enable-debug.md)
* [获取第三方平台数据](api/other/get-extconfig.md)
<li></li>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7962e8e0-4f2d-11eb-a16f-5b3e54966275.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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/73fc4f90-4f2d-11eb-a16f-5b3e54966275.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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/765d9820-4f2d-11eb-bd01-97bc1429a9ff.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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/77159d80-4f2d-11eb-a16f-5b3e54966275.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/74cda950-4f2d-11eb-a16f-5b3e54966275.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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/759713d0-4f2d-11eb-a16f-5b3e54966275.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群8:695442854 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=ojVbbaSsh9pdCVIgFcruPk1mcbxzG8co&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="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/77df7d30-4f2d-11eb-bd01-97bc1429a9ff.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/78a8e7b0-4f2d-11eb-8ff1-d5dcf8779628.jpg" width="90" height="90"/>
</div>
</div>
</div>
### 短视频内容联盟广告
简介
⼀个视频内容频道,支持上下滑动切换视频内容
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/673f23ff-0924-4302-8467-9c1c1fd03b96.png)
内容联盟广告是一个原生全屏组件,大小不可控制
如果需要嵌入到页面控制大小请使用 [短视频内容联盟组件<ad-content-page>](https://uniapp.dcloud.net.cn/component/ad-content-page)
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(3.1.5+)|x|x|x|x|x|x|x|
**开通配置广告**
开通广告步骤:
1. 开通广告
需在广告平台后台操作:
* App平台:[https://uniad.dcloud.net.cn/](https://uniad.dcloud.net.cn/)
2. 申请广告位id
在各位后台申请广告位id
3. App端打包后生效,打包时必须选择要集成的广告SDK(目前仅支持快手内容联盟)。
### 语法
`plus.ad.showContentPage(options, success, fail)`
### 参数说明
`options` 为 object 类型,属性如下:
|属性名 |类型 |必填 |描述 |
|:-:|:-:|:-:|:-:|
|adpid |string | 是|广告位 id |
|background |string | 否|背景颜色,不支持透明度 |
`success` 为 function 类型,加载成功后的回调
`fail` 为 function 类型,加载失败后的回调
HBuilder 基座的测试广告位 `adpid``1111111112`
示例代码
```html
<template>
<view>
<button :loading="loading" :disabled="loading" type="primary" class="btn" @click="showAd">显示广告</button>
</view>
</template>
<script>
export default {
data() {
return {
loading: false
}
},
onLoad() {
// HBuilderX 标准基座真机运行测试内容联盟广告位标识(adpid)为:1111111112
// adpid: 1111111112 仅用于测试,发布时需要改为广告后台(https://uniad.dcloud.net.cn/)申请的 adpid
// 广告后台申请的广告位(adpid)需要自定义基座/云打包/本地打包后生效
this.adOptions = {
adpid: 1111111112
}
},
methods: {
showAd() {
if (this.loading == true) {
return;
}
this.loading = true;
plus.ad.showContentPage(this.adOptions, (res) => {
this.loading = false;
}, (err) => {
this.loading = false;
console.log(err);
});
}
}
}
</script>
```
### 全屏视频广告
全屏视频广告是一个原生组件,层级比普通组件高。全屏视频广告每次创建都会返回一个全新的实例,默认是隐藏的,需要调用 FullScreenVideoAd.show() 将其显示。
如何开通参考激励视频广告 [https://uniapp.dcloud.net.cn/api/a-d/rewarded-video](https://uniapp.dcloud.net.cn/api/a-d/rewarded-video)
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.9.5+)|x|x|x|x|x|x|x|
uni.createFullScreenVideoAd(Object)
|属性|类型|必填|说明|
|:-:|:-:|:-:|:-:|
|adpid|string|是|广告位 id|
#### 方法
加载全屏视频广告。
`Promise FullScreenVideoAd.load()`
显示全屏视频广告。
`Promise FullScreenVideoAd.show()`
销毁全屏视频广告实例。
`FullScreenVideoAd.destroy()`
监听全屏视频广告加载事件。
`FullScreenVideoAd.onLoad(function callback)`
监听全屏视频错误事件。
`FullScreenVideoAd.onError(function callback)`
监听全屏视频广告关闭事件。
`FullScreenVideoAd.onClose(function callback)`
示例代码
```html
<template>
<view>
<button :loading="loading" :disabled="loading" type="primary" @click="showFullScreenVideoAd">显示广告</button>
</view>
</template>
<script>
export default {
data() {
return {
title: '全屏视频广告',
loading: false
}
},
onReady() {
// HBuilderX标准基座真机运行测试全屏视频广告位标识(adpid)为:1507000611
// adpid: 1507000611 仅用于测试,发布时需要改为广告后台(https://uniad.dcloud.net.cn/)申请的 adpid
// 广告后台申请的广告位(adpid)需要自定义基座/云打包/本地打包后生效
this.adOption = {
adpid: '1507000611'
};
// 创建广告实例
this.createFullScreenVideoAd();
},
methods: {
createFullScreenVideoAd() {
var fullScreenVideoAd = this.fullScreenVideoAd = uni.createFullScreenVideoAd(this.adOption);
fullScreenVideoAd.onLoad(() => {
// 广告数据加载成功
this.loading = false;
console.log("onLoad");
});
fullScreenVideoAd.onClose((e) => {
// 用户点击了关闭或返回键(仅Android有返回键)
console.log("onClose " + e.isEnded);
});
fullScreenVideoAd.onError((err) => {
console.log("onError", JSON.stringify(err));
// 广告数据加载失败
this.loading = false;
uni.showToast({
title: `${err.code} : ${err.errMsg}`
})
});
},
showFullScreenVideoAd() {
// 调用 fullScreenVideoAd.show(),如果数据正在加载中不会显示广告,加载成功后才显示
// 在数据没有加载成功时,需要防止用户频繁点击显示广告
if (this.loading == true) {
return
}
this.loading = true;
this.fullScreenVideoAd.show().then(() => {
this.loading = false;
}).catch((err) => {
console.log(err.message);
this.loading = false;
uni.showToast({
title: `${err.code} : ${err.errMsg}`
})
});
}
},
onUnload() {
this.fullScreenVideoAd.destroy()
}
}
</script>
```
# 互动游戏
## 简介
互动游戏是DCloud联合三方服务商为开发者提供新的广告场景增值服务。开发者在App中放置入口,用户点击入口参与权益化、趣味性的活动。通过观看激励视频广告加速获取权益。沉浸的游戏体验能够降低对广告的抵触心理,增加激励视频广告展示的同时有效提高广告收益。
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/c19c9518-c953-49c3-89a0-33a1e595be7f.png)
## 活动场景类型:
共抽奖类、游戏类、养成类3种场景类型,开发者可根据自身情况选择活动类型:
1. 抽奖类活动:通过转盘、扭蛋、摇骰子等抽奖玩法获得奖品碎片或红包奖励
2. 游戏类活动:通过合成游戏、成语答题、捕鱼等游戏玩法获得金币或红包奖励
3. 养成类活动:果园、农场、养牛等长期活动,用户通过连续签到、道具收集、任务体系等玩法提升养成对象的等级,升级后可获得红包奖励或兑换奖品
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/994e3f54-d498-4642-8e61-3177dcfef63a.jpg)
### 活动分类表
<table>
<thead style="background-color: #f8f8f8;">
<tr>
<td>活动分类</td>
<td>活动名称</td>
<td>发放奖励</td>
<td>活动周期</td>
<td>是否支持积分打通</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">抽奖</td>
<td>集碎片</td>
<td>多奖品</td>
<td>7天</td>
<td></td>
</tr>
<tr>
<td>印钞机</td>
<td>现金</td>
<td>7天</td>
<td></td>
</tr>
<tr>
<td>扭蛋机</td>
<td>多奖品</td>
<td>7天</td>
<td></td>
</tr>
<tr>
<td rowspan="4">游戏</td>
<td>大富翁</td>
<td>现金</td>
<td>7天</td>
<td>支持</td>
</tr>
<tr>
<td>成语大赢家</td>
<td>现金</td>
<td>7天</td>
<td></td>
</tr>
<tr>
<td>合成招财猫</td>
<td>现金</td>
<td>7天</td>
<td></td>
</tr>
<tr>
<td>捕鱼达人</td>
<td>现金</td>
<td>长期</td>
<td>新增支持</td>
</tr>
<tr>
<td rowspan="5">养成</td>
<td>福牛</td>
<td>现金</td>
<td>7天</td>
<td></td>
</tr>
<tr>
<td>果园</td>
<td>水果</td>
<td>长期</td>
<td></td>
</tr>
<tr>
<td>农场</td>
<td>现金</td>
<td>30天</td>
<td></td>
</tr>
<tr>
<td>养鸡</td>
<td>现金</td>
<td>长期</td>
<td></td>
</tr>
<tr>
<td>走路赚</td>
<td>现金</td>
<td>7天</td>
<td>支持</td>
</tr>
</tbody>
</table>
注:活动名称在开通时不能选择,如需修改,请邮件联系[uniad@dcloud.io](mailto:uniad@dcloud.io)
## 关于奖励发放的说明
互动游戏的目的是吸引用户参与活动,引导用户观看广告,通过活动获取奖励,满足特定条件后需要向用户发放奖励。目前有两种奖励发放方式,一种是由DCloud联合三方服务商为开发者提供用户奖励线下代发;一种是由开发者对接App自身积分系统,将用户奖励转换为App积分,提高用户参与度和体验。
### 用户奖励线下代发服务
默认使用用户奖励线下代发服务,具体说明如下:
1. 用户参与以上活动达到一定资产时(奖品碎片或金币到达兑换门槛,红包金额到达提现门槛),可发起兑奖申请。如用户申请提现,需要填写收款的支付宝或微信账号;如用户申请兑换虚拟或者实物奖品,需要填写联系人联系方式和收货地址等;具体以兑奖弹窗为准。
2. 用户提交兑奖申请后,客服将在5个工作日内确认,确认后将尽快为您进行发货,如实物奖品有发货时间较长等问题请联系客服。
3. 如实物奖品(水果生鲜等)因为时令问题、疫情区域或者新疆、西藏等偏远地区暂时无法寄送,客服将联系用户赠送奖品价值相等的现金奖励。
4. 实物奖品发放后,快递配送请在24小时内收货,如有质量问题,请于签收后48小时内进行售后申请,超出时间不予赔付。
5. 用户不得使用任何外挂、插件以及其他破坏破坏活动规则、违背活动公平原则的方式参加本次活动,否则服务商有权取消用户参与活动的资格以及清空获得的奖励。
### 用户奖励对接App积分
积分对接需要开发者业务系统与三方服务商的互动游戏进行对接,需要一定的开发工作量,请邮件联系[uniad@dcloud.io](mailto:uniad@dcloud.io)
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|App 3.1.15+|x|x|x|x|x|x|x|
**开通配置广告**
开通广告步骤:
1. 开通广告
需在广告平台后台操作:
* App平台:[https://uniad.dcloud.net.cn/](https://uniad.dcloud.net.cn/)
2. 申请广告位id
在各位后台申请广告位id
3. App端打包后生效,打包时必须选择要集成的广告SDK互动游戏(变现猫),优量汇、穿山甲、快手至少选择其中一个。
### 语法
`uni.createInteractiveAd(options)`
### 参数说明
`options` 为 object 类型,属性如下:
|属性名 |类型 |必填 |描述 |
|:-:|:-:|:-:|:-:|
|adpid |string | 是 |广告位 id |
|provider |string | 是 |服务商标识,即插件id |
|userData |object | 否 |对接App积分系统参数 |
### 广告创建
广告组件默认是隐藏的,因此可以提前创建,以提前初始化组件。开发者可以在页面的 onReady 事件回调中创建广告实例,并在该页面的生命周期内重复调用该广告实例。
### 显示/隐藏
广告组件默认是隐藏的,开发者需要调用 CreateInteractiveAd.show() 进行显示。如果广告拉取失败或触发频率限制,CreateInteractiveAd.show() 方法会返回一个rejected Promise,开发者可自行监听错误信息
```js
CreateInteractiveAd.show().catch((err) => {
console.error(err)
})
```
用户可以主动关闭广告。开发者不可控制广告组件的隐藏。
### 监听广告加载成功事件
如果广告加载成功,通过 CreateInteractiveAd.onLoad() 注册的回调函数会执行,回调函数返回广告素材参数。
|属性名 |类型 |描述 |
|:-:|:-:|:-:|
|imgUrl |string | 广告素材图片的url地址 |
```js
CreateInteractiveAd.onLoad(res => {
console.log('图片素材地址', res.imgUrl);
console.log('广告加载成功');
})
```
HBuilder基座的测试广告位 adpid: `1042956255` (游戏); `1620839118` (抽奖); `1064042976` (养成)
示例代码
```html
<template>
<view>
<image class="ad-icon" v-if="imgUrl" :src="imgUrl" @click="showInteractiveAd"></image>
</view>
</template>
<script>
export default {
data() {
return {
title: '互动游戏',
loading: false,
imgUrl: ""
}
},
onReady() {
this.adOption = {
adpid: '1042956255',
provider: "BXM-AD"
};
// 创建广告实例
this.createInteractiveAd();
},
methods: {
createInteractiveAd() {
var interactiveAd = this.interactiveAd = uni.createInteractiveAd(this.adOption);
interactiveAd.onLoad((e) => {
this.loading = false;
this.imgUrl = e.imgUrl;
console.log("广告加载成功");
// 如果有广告图片素材, 通过 e.imgUrl 获取
});
interactiveAd.onClose(() => {
// 用户点击了关闭或返回键(仅Android有返回键)
console.log("广告关闭");
});
interactiveAd.onError((err) => {
this.loading = false;
console.log("广告加载失败");
});
// 广告实例创建成功后默认会执行一次 load,加载广告数据
// 如果界面有 "显示广告" 按钮,需要先禁用掉,防止用户点击,等待广告数据加载成功后在放开
this.loading = true;
},
showInteractiveAd() {
// 调用 interactiveAd.show(),如果数据正在加载中不会显示广告,加载成功后才显示
// 在数据没有加载成功时,需要防止用户频繁点击显示广告
if (this.loading == true) {
return
}
this.loading = true;
this.interactiveAd.show().then(() => {
this.loading = false;
});
}
},
onUnload() {
// 页面关闭后销毁实例
this.interactiveAd.destroy();
}
}
</script>
<style>
.ad-icon {
display: block;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
```
#### 方法
`Promise CreateInteractiveAd.load()`
加载广告。
`Promise CreateInteractiveAd.show()`
显示广告。
`CreateInteractiveAd.reportExposure()`
场景入口曝光打点。
`CreateInteractiveAd.destroy()`
销毁广告实例。
`CreateInteractiveAd.onLoad(function callback)`
监听广告加载事件。
`CreateInteractiveAd.offLoad(function callback)`
取消监听广告加载事件
`CreateInteractiveAd.onError(function callback)`
监听错误事件。
`CreateInteractiveAd.offError(function callback)`
取消监听错误事件
### 积分对接
### 开通
1. 开发者需要提供广告位 `adpid`
2. 开发者需要提供服务器接口
1. 获取积分接口
2. 操作积分接口
4. 三方服务商需要提供 `secretKey` 让开发者来验签请求来源
### 获取积分
简要描述:
该接口用于获取用户总积分数量;
开发者提供url用户查询积分
请求方式 `GET`
参数:
|参数名|必选|类型|说明|
|:-:|:-:|:-:|:-:|
|appUserId|是|String|app用户Id|
|appId|是|String|SSP后台注册的appId|
|timestamp|是|String|时间戳(自1970年起,精确到毫秒)|
|sign|是|String|签名,用于验证身份。按照按 secretKey + timestamp 的进行MD5加密(注意加密后字符串要转大写,不要加上“+”号)|
返回参数说明
|参数名|类型|说明|
|:-:|:-:|:-:|
|appUserId|String|app用户Id|
|avatar|String|用户头像|
|nickname|String|用户昵称|
|amount|Long|用户总积分|
示例
```json
{
"appUserId" : "dcloud",
"avatar": "https://xxx.yyy.com/xxxx.jpg",
"nickname": "jack",
"amount": 100
}
```
### 操作积分
简要描述:
此接口用于操作用户积分数量,如增加、扣除;
请求参数放在body里,以JSON格式提交;
考虑到接口的安全,建议开发者采用IP白名单+签名的方式校验来源,以防备被第三方利用。
失败情况:
- URL存在特殊字符或无法通过外网访问;
- 没有按照响应格式要求返回的内容;
- 接口返回状态码非`200`的情况;
- 接口响应时间超过`3`秒。
开发者提供url用户查询积分
请求方式 `POST`
参数:
|参数名|必选|类型|说明|
|:-:|:-:|:-:|:-:|
|appUserId|是|String|App用户Id(唯一标识)|
|appId|是|String|SSP后台注册的appId|
|operateType|是|Long|操作类型:1.增加 2.扣除|
|amount|是|Long|本次操作的积分值|
|timestamp|是|String|时间戳(自1970年起,精确到毫秒)|
|sign|是|String|签名,用于验证身份。按照按 secretKey + timestamp 进行MD5加密(注意加密后字符串要转大写,不要加上“+”号)|
返回参数说明
|参数名|类型|说明|
|:-:|:-:|:-:|
|appUserId|String|App用户Id(唯一标识)|
|status|int|状态码:0. 处理失败 1. 处理成功|
|message|String|失败原因|
|amount|Long|操作后的用户总积分|
返回结果示例
```json
{
"appUserId": "dcloud",
"status": 1,
"amount": 100
}
```
### 插屏广告
插屏广告组件是由客户端原生的图片、文本、视频控件组成的;插屏广告与信息流或横幅广告相比展现尺寸更大,同样能够满足您对大量曝光和用户转化的需求。
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/5dc1ce6b-b786-4175-aec5-dd2ab4a5e34c.png)
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|App 3.1.10+|x|√|x|x|x|√|x|
- app端的广告源由腾讯优量汇、头条穿山甲、快手等广告联盟提供,DCloud负责聚合
- 小程序端的广告由小程序平台提供
**开通配置广告**
开通广告步骤:
1. 开通广告
需在广告平台后台操作:
* App平台:[https://uniad.dcloud.net.cn/](https://uniad.dcloud.net.cn/)
* 小程序平台:在各自的小程序管理后台操作。
2. 申请广告位id
在各位后台申请广告位id
3. App端打包后生效,打包时必须选择要集成的广告SDK(优量汇、穿山甲、快手)。
### 语法
`uni.createInterstitialAd(options)`
### 参数说明
`options` 为 object 类型,属性如下:
|属性名 |类型 |必填 |描述 |最低支持版本 |
|:-:|:-:|:-:|:-:|:-:|
|adpid |string | 是|广告位 id |App 3.1.10+|
|adUnitId |string | 是|广告位 id |微信小程序2.6.0+, QQ0.1.26+|
HBuilder 基座的测试广告位 `adpid``1111111113`
### 广告创建
插屏广告组件默认是隐藏的,因此可以提前创建,以提前初始化组件。开发者可以在页面的 onReady 事件回调中创建广告实例,并在该页面的生命周期内重复调用该广告实例。
### 显示/隐藏
插屏广告组件默认是隐藏的,开发者需要调用 InterstitialAd.show() 进行显示。如果广告拉取失败或触发频率限制,InterstitialAd.show() 方法会返回一个rejected Promise,开发者可自行监听错误信息
```js
interstitialAd.show().catch((err) => {
console.error(err)
})
```
用户可以主动关闭插屏广告。开发者不可控制插屏广告组件的隐藏。
### 监听用户关闭广告
如果广告被关闭,通过 InterstitialAd.onClose() 注册的回调函数会执行,回调函数没有参数传递。
```js
interstitialAd.onClose(res => {
console.log('插屏 广告关闭')
})
```
示例代码
```html
<template>
<view>
<view>
<button :loading="loading" :disabled="loading" type="primary" @click="showInterstitialAd">显示广告</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '插屏广告',
loading: false
}
},
onReady() {
this.adOption = {
adpid: '1111111113' // HBuilder基座的测试广告位
};
// 创建广告实例
this.createInterstitialAd();
},
methods: {
createInterstitialAd() {
var interstitialAd = this.interstitialAd = uni.createInterstitialAd(this.adOption);
interstitialAd.onLoad(() => {
this.loading = false;
console.log("插屏 广告加载成功");
});
interstitialAd.onClose(() => {
// 用户点击了关闭或返回键(仅Android有返回键)
console.log("插屏 广告关闭");
});
interstitialAd.onError((err) => {
this.loading = false;
console.log("插屏 广告加载失败");
});
// 广告实例创建成功后默认会执行一次 load,加载广告数据
// 如果界面有 "显示广告" 按钮,需要先禁用掉,防止用户点击,等待广告数据加载成功后在放开
this.loading = true;
},
showInterstitialAd() {
// 调用 interstitialAd.show(),如果数据正在加载中不会显示广告,加载成功后才显示
// 在数据没有加载成功时,需要防止用户频繁点击显示广告
if (this.loading == true) {
return
}
this.loading = true;
this.interstitialAd.show().then(() => {
this.loading = false;
});
}
},
onUnload() {
// 页面关闭后销毁实例
this.interstitialAd.destroy()
}
}
</script>
```
#### 方法
`Promise InterstitialAd.load()`
加载插屏广告。
`Promise InterstitialAd.show()`
显示插屏广告。
`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)`
取消监听插屏广告关闭事件
### 注意事项
在插屏广告展示过程中如果快速切换页面,可能会出现插屏广告展示在非调用页面的情况,如有需要请在页面切换完成后进行插屏广告展示。
此差异已折叠。
### uni.onPageNotFound(function 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(function 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(function 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**
应用切后台事件的回调函数
## uni.arrayBufferToBase64(arrayBuffer)
将 ArrayBuffer 对象转成 Base64 字符串
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|x|x|√|
**参数说明**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|arrayBuffer|ArrayBuffer|是|要转换成 Base64 字符串的 ArrayBuffer 对象|
**示例**
```javascript
const arrayBuffer = new Uint8Array([55, 55, 55])
const base64 = uni.arrayBufferToBase64(arrayBuffer)
```
\ No newline at end of file
## uni.base64ToArrayBuffer(base64)
将 Base64 字符串转成 ArrayBuffer 对象
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|x|x|√|
**参数说明**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|base64|String|是|要转化成 ArrayBuffer 对象的 Base64 字符串|
**示例**
```javascript
const base64 = 'test'
const arrayBuffer = uni.base64ToArrayBuffer(base64)
```
\ No newline at end of file
此差异已折叠。
### CanvasGradient.addColorStop(stop,color)
创建一个颜色的渐变点。
- 小于最小 stop 的部分会按最小 stop 的 color 来渲染,大于最大 stop 的部分会按最大 stop 的 color 来渲染。
- 需要使用 ```addColorStop()``` 来指定渐变点,至少要两个。
#### 参数
|参数|类型 |定义 |
|---|---|--- |
|stop |Number(0-1)|表示渐变点在起点和终点中的位置 |
|color |Color |渐变点的颜色|
**示例代码**
```javascript
const ctx = uni.createCanvasContext('myCanvas')
// Create circular gradient
const grd = ctx.createLinearGradient(30, 10, 120, 10)
grd.addColorStop(0, 'red')
grd.addColorStop(0.16, 'orange')
grd.addColorStop(0.33, 'yellow')
grd.addColorStop(0.5, 'green')
grd.addColorStop(0.66, 'cyan')
grd.addColorStop(0.83, 'blue')
grd.addColorStop(1, 'purple')
// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
```
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d1e88440-4f26-11eb-bd01-97bc1429a9ff.png)
#### uni.canvasGetImageData(OBJECT,this)
返回一个数组,用来描述 canvas 区域隐含的像素数据,在自定义组件下,第二个参数传入自定义组件实例 this,以操作组件内 `<canvas>` 组件。
**OBJECT参数说明:**
|参数|类型|必填|说明|
|---|---|---|---|
|canvasId|String|是|画布标识,传入 ```<canvas />``` 的 canvas-id(支付宝小程序是id、其他平台是canvas-id)|
|x|Number|是|将要被提取的图像数据矩形区域的左上角 x 坐标|
|y|Number|是|将要被提取的图像数据矩形区域的左上角 y 坐标|
|width|Number|是|将要被提取的图像数据矩形区域的宽度|
|height|Number|是|将要被提取的图像数据矩形区域的高度|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
**success回调返回参数:**
|参数|类型|说明|
|---|---|---|
|errMsg|String||
|width|Number|图像数据矩形的宽度|
|height|Number|图像数据矩形的高度|
|data|Uint8ClampedArray|图像像素点数据,一维数组,每四项表示一个像素点的rgba|
**示例代码**
```javascript
uni.canvasGetImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 100,
height: 100,
success(res) {
console.log(res.width) // 100
console.log(res.height) // 100
console.log(res.data instanceof Uint8ClampedArray) // true
console.log(res.data.length) // 100 * 100 * 4
}
})
```
#### uni.canvasPutImageData(OBJECT,this)
将像素数据绘制到画布的方法,在自定义组件下,第二个参数传入自定义组件实例 this,以操作组件内 `<canvas>` 组件
**OBJECT参数说明:**
|参数|类型|必填|说明|最低版本|
|---|---|---|---|--|
|canvasId|String|是|画布标识,传入 ```<canvas />``` 的 canvas-id(支付宝小程序是id、其他平台是canvas-id)||
|data|Uint8ClampedArray|是|图像像素点数据,一维数组,每四项表示一个像素点的rgba||
|x|Number|是|源图像数据在目标画布中的位置偏移量(x 轴方向的偏移量)||
|y|Number|是|源图像数据在目标画布中的位置偏移量(y 轴方向的偏移量)||
|width|Number|是|源图像数据矩形区域的宽度||
|height|Number|否|源图像数据矩形区域的高度||
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
**示例代码**
```javascript
const data = new Uint8ClampedArray([255, 0, 0, 255])
uni.canvasPutImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 1,
data: data,
success(res) {}
})
```
#### uni.canvasToTempFilePath(object, component)
把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。在自定义组件下,第二个参数传入自定义组件实例,以操作组件内 `<canvas>` 组件。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x([CanvasContext.toTempFilePath](https://opendocs.alipay.com/mini/api/rod3ti))|√|√|√|√|
**object参数说明:**
|参数 |类型 |必填 |说明 |
|---|---|---|---|---|
|x |Number |否 |画布x轴起点(默认0)|
|y |Number |否 |画布y轴起点(默认0)|
|width |Number |否 |画布宽度(默认为canvas宽度-x)|
|height |Number |否 |画布高度(默认为canvas高度-y)|
|destWidth |Number |否 |输出图片宽度(默认为 width * 屏幕像素密度)|
|destHeight |Number |否 |输出图片高度(默认为 height * 屏幕像素密度)|
|canvasId |String |是 |画布标识,传入 ``<canvas/>`` 的 canvas-id(支付宝小程序是id、其他平台是canvas-id)|
|fileType |String |否 |目标文件的类型,只支持 'jpg' 或 'png'。默认为 'png'|
|quality |Number |否 |图片的质量,取值范围为 (0, 1],不在范围内时当作1.0处理|
|success |Function |否 |接口调用成功的回调函数|
|fail |Function |否 |接口调用失败的回调函数|
|complete |Function |否 |接口调用结束的回调函数(调用成功、失败都会执行) |
**示例代码**
```javascript
uni.canvasToTempFilePath({
x: 100,
y: 200,
width: 50,
height: 50,
destWidth: 100,
destHeight: 100,
canvasId: 'myCanvas',
success: function(res) {
// 在H5平台下,tempFilePath 为 base64
console.log(res.tempFilePath)
}
})
```
**Tips**
- H5端 Canvas 内绘制的图像需要支持跨域访问才能成功。
\ No newline at end of file
#### uni.createCanvasContext(canvasId, this)
#### 定义
创建 ```canvas``` 绘图上下文(指定 canvasId)。在自定义组件下,第二个参数传入组件实例this,以操作组件内 ```<canvas/>``` 组件
**Tip:** 需要指定 canvasId,该绘图上下文只作用于对应的 `<canvas/>`
#### 参数
|参数|类型|说明|
|----|----|-----|
|canvasId|String |画布表示,传入定义在 `<canvas/>` 的 canvas-id或id(支付宝小程序是id、其他平台是canvas-id) |
|componentInstance|Object |自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id 的 `<canvas/>` ,如果省略,则不在任何自定义组件内查找 |
#### 返回值
[CanvasContext](/api/canvas/CanvasContext.md)
\ No newline at end of file
#### uni.createOffscreenCanvas()
创建离屏 canvas 实例
仅微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.createOffscreenCanvas.html)
此差异已折叠。
此差异已折叠。
#### uni.getFileSystemManager()
获取全局唯一的文件管理器
- 微信小程序平台,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.getFileSystemManager.html)
- 字节跳动小程序平台,[规范详情](https://developer.toutiao.com/dev/cn/mini-app/develop/api/file/getfilesystemmanager)
- QQ小程序平台,[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/file/qq.getFileSystemManager.html)
\ No newline at end of file
## uniIDHasRole
新增于`HBuilderX 3.1.15-alpha`,判断当前用户是否拥有某角色。
> 需要在token内缓存角色权限才可使用,请参考:[缓存角色权限](https://uniapp.dcloud.net.cn/uniCloud/uni-id?id=cachepermissionintoken)
**在模板内使用**
```html
<template>
<view v-if="uniIDHasRole('admin')">仅管理员可见</view>
</template>
```
**在页面/组件js代码中使用**
```html
<template>
<view>xxx</view>
</template>
<script>
export default {
onLoad(){
console.log('当前用户是否拥有管理员角色:', this.uniIDHasRole('admin'))
}
}
</script>
```
## uniIDHasPermission
新增于`HBuilderX 3.1.15-alpha`,判断当前用户是否拥有某权限,注意:admin角色的用户拥有所有权限
> 需要在token内缓存角色权限才可使用,请参考:[缓存角色权限](https://uniapp.dcloud.net.cn/uniCloud/uni-id?id=cachepermissionintoken)
**在模板内使用**
```html
<template>
<view v-if="uniIDHasPermission('edit')">拥有编辑权限时可见</view>
</template>
```
**在页面/组件js代码中使用**
```html
<template>
<view>xxx</view>
</template>
<script>
export default {
onLoad(){
console.log('当前用户是否拥有编辑权限:', this.uniIDHasPermission('edit'))
}
}
</script>
```
\ No newline at end of file
此差异已折叠。
此差异已折叠。
### 应用生命周期
``uni-app`` 支持 onLaunch、onShow、onHide 等应用生命周期函数,详情请参考[应用生命周期](/collocation/frame/lifecycle?id=应用生命周期)
### 页面生命周期
``uni-app`` 支持 onLoad、onShow、onReady 等生命周期函数,详情请参考[页面生命周期](/collocation/frame/lifecycle?id=页面生命周期)
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
#### 广告
广告API
广告能力在不同小程序端实现不同,使用时需注意用[条件编译](https://uniapp.dcloud.io/platform)调用不同平台的代码。
- App平台:无需编码,在打包App时可直接勾选广告位,[详见](https://dcloud.io/dad.html)
- 微信小程序:[规范文档](https://developers.weixin.qq.com/miniprogram/dev/api/wx.createRewardedVideoAd.html)
- 百度小程序:有组件但无API
- 支付宝小程序:不支持此能力
- 字节跳动小程序:仅小游戏可用,小程序不可用,不适用于uni-app
- QQ小程序:[规范文档](https://q.qq.com/wiki/develop/miniprogram/API/ad/qq.createRewardedVideoAd.html)
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
#### UDP 通信
仅微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/network/udp/wx.createUDPSocket.html)
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册