提交 d9d25858 编写于 作者: Q qiang

Merge branch 'master' into dev

# Conflicts:
#	docs/collocation/manifest.md
#	packages/uni-app-plus/dist/index.v3.js
#	packages/uni-app-plus/dist/view.css
#	packages/uni-app-plus/dist/view.umd.min.js
#	packages/uni-h5/dist/index.css
#	packages/uni-h5/dist/index.umd.min.js
......@@ -6,7 +6,7 @@
# uni-app的特点
- 开发者和案例更多:HBuilder装机量380万台,开发者社区月活百万,70多个QQ微信群承载10万人。案例众多,uni统计月活2亿+[详见](https://uniapp.dcloud.io/case)
- 开发者和案例更多:HBuilder装机量420万台,开发者社区月活百万,70多个QQ微信群承载10万人。案例众多,uni统计月活4.5亿[详见](https://uniapp.dcloud.io/case)
- 性能更高(见[评测](https://juejin.im/post/5ca1736af265da30ae314248)
- 更丰富的周边生态,[插件市场](https://ext.dcloud.net.cn/)数千款插件
- 提供比小程序原生开发更好的开发体验、更高的工程化效率
......@@ -48,7 +48,9 @@
## 插件市场
`uni-app`有丰富的插件生态,众多开发者提交了各种组件、sdk、项目模板,详见:[https://ext.dcloud.net.cn/](https://ext.dcloud.net.cn/)
`uni-app`有丰富的插件生态,众多开发者提交了数千款组件、sdk、项目模板,详见:[https://ext.dcloud.net.cn/](https://ext.dcloud.net.cn/)
除了众多三方ui库,官方还提供了uni-ui,在性能和跨端兼容方面有更强的优势。详见:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
## 现有项目如何迁移到uni-app体系
......@@ -71,7 +73,7 @@
- 答:不是。大量开发者用uni-app只做一个端,详见[案例](https://uniapp.dcloud.io/case)。对于开发者而言,一个优秀工具在手,做什么都不愁。
- 问:uni-app以后会不会变更开源协议,转向收费?
- 答:官方承诺永远不会变更开源协议。无论HBuilderX、uni-app、5+app,面向中国人永久免费。
- 答:官方承诺永远不会变更开源协议。无论HBuilderX、uni-app、App,面向中国人永久免费。
## 更多资料
......
```uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
`DCloud`公司拥有380万开发者,几十万应用案例、8.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`公司拥有420万开发者,几十万应用案例、10.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)),开发者可以放心选择。
`uni-app`在手,做啥都不愁。即使不跨端,```uni-app```也是更好的小程序开发框架([详见](https://ask.dcloud.net.cn/article/35947))、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
......@@ -74,7 +74,7 @@
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">开发者/案例数量更多</h5>
<p class="uniapp-home-content-item-text">10万+案例、uni统计月活过2亿、70+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">10万+案例、uni统计月活过3亿、70+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">跨端完善度更高,真正落地的提高生产力</p>
</div>
</div>
......@@ -96,7 +96,7 @@
<h5 class="uniapp-home-content-item-title">性能体验优秀</h5>
<p class="uniapp-home-content-item-text">体验更好的Hybrid框架,加载新页面速度更快。</p>
<p class="uniapp-home-content-item-text">App端支持weex原生渲染,可支撑更流畅的用户体验。</p>
<p class="uniapp-home-content-item-text">小程序端的性能优于市场其他框架。<a href="https://ask.dcloud.net.cn/article/35947">评测</a></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">
......@@ -105,7 +105,7 @@
</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">插件市场</a>数千款插件。</p>
<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、兼容mpvue组件和项目、兼容weex组件。</p>
<p class="uniapp-home-content-item-text">微信生态的各种sdk可直接用于跨平台App。</p>
</div>
......@@ -150,14 +150,14 @@
从下面```uni-app```功能框架图可看出,```uni-app```在跨平台的过程中,不牺牲平台特色,可优雅的调用平台专有能力,真正做到海纳百川、各取所长。
![](https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/uni-app/doc/uni0124.png)
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni0124.png)
### 一套代码,运行到多个平台
```uni-app```实现了一套代码,同时运行到多个平台;如下图所示,一套代码,同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具(底部8个终端选项卡代表8个终端模拟器):
![](https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/uni-app/doc/dev1x8.jpg)
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/dev1x8.jpg)
实际运行效果如下(点击图片可放大):
![](https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/uni-app/doc/run1x9.jpg)
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/run1x9.jpg)
......@@ -2,6 +2,7 @@
* [框架](collocation/pages.md)
* [组件](component/README.md)
* [API](api/README.md)
* [uniCloud](uniCloud/README.md)
* [其它规范](javascript:;)
- [App扩展规范HTML5 Plus](http://www.html5plus.org/doc/h5p.html)
- [微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/)
......@@ -21,4 +22,4 @@
<a href="//github.com/dcloudio/uni-app" target="_blank">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/github.svg">
</a>
</div>
\ No newline at end of file
</div>
......@@ -11,10 +11,12 @@
* [高效开发技巧](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)
* [从其他项目转uni-app](translate.md)
* [选型评估指南](select.md)
* [常见问题](faq.md)
* [更新日志](release.md)
......@@ -38,48 +40,48 @@
</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/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>群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>群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>群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>群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(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">
......
......@@ -103,6 +103,8 @@
* [uni.canvasGetImageData](api/canvas/canvasGetImageData.md)
* [CanvasContext](api/canvas/CanvasContext.md)
* [CanvasGradient](api/canvas/CanvasGradient.md)
* 广告
* [激励视频广告](api/ad/rewarded-video-ad.md)
* 第三方服务
* [获取服务供应商](api/plugins/provider.md)
* [登录](api/plugins/login.md)
......@@ -123,10 +125,12 @@
* [统计](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)
* [广告](api/other/advertisement.md)
<li></li>
<div class="contact-box">
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
......
### 激励视频广告
- app端的广告源由腾讯广点通、头条穿山甲广告联盟提供,DCloud负责聚合
- 小程序端的广告由小程序平台提供
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.5.11+)|x|√|x|x|x|x|
**开通配置广告**
开通广告步骤:
1. 开通广告
需在广告平台后台操作:
* App平台:[https://uniad.dcloud.net.cn/](https://uniad.dcloud.net.cn/)
* 小程序平台:在各自的小程序管理后台操作。
2. 申请广告位id
在各位后台申请广告位id
3. App端打包后生效,打包时必须选择要集成的广告SDK(穿山甲、广点通)。
激励视频广告组件是由客户端原生的图片、文本、视频控件组成的,层级最高,会覆盖在普通组件上。
### 广告创建
开发者可以调用 uni.createRewardedVideoAd 创建激励视频广告组件。该方法返回的是一个单例,该实例仅对当前页面有效,不允许跨页面使用。
激励视频广告组件默认是隐藏的,因此可以提前创建,以提前初始化组件。开发者可以在页面的 `onReady` 事件回调中创建广告实例,并在该页面的生命周期内重复调用该广告实例。
```
<script>
let rewardedVideoAd = null;
export default {
data() {
return {
title: 'createRewardedVideoAd'
}
},
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)
})
}
},
methods: {
}
}
</script>
```
为避免滥用广告资源,目前每个用户每天可观看激励式视频广告的次数有限,建议展示广告按钮前先判断广告是否拉取成功。
### 显示/隐藏
激励视频广告组件默认是隐藏的,在用户主动触发广告后,开发者需要调用 RewardedVideoAd.show() 进行显示。
```
rewardedVideoAd.show()
```
只有在用户点击激励视频广告组件上的 关闭广告 按钮时,广告才会关闭。开发者不可控制激励视频广告组件的隐藏。
### 广告拉取成功与失败
激励视频广告组件是自动拉取广告并进行更新的。在组件创建后会拉取一次广告,用户点击 关闭广告 后会去拉取下一条广告。
如果拉取成功,通过 `RewardedVideoAd.onLoad()` 注册的回调函数会执行,`RewardedVideoAd.show()` 返回的 Promise 也会是一个 resolved Promise。两者的回调函数中都没有参数传递。
```
rewardedVideoAd.onLoad(() => {
console.log('激励视频 广告加载成功')
})
rewardedVideoAd.show()
.then(() => console.log('激励视频 广告显示'))
```
如果拉取失败,通过 `RewardedVideoAd.onError()` 注册的回调函数会执行,回调函数的参数是一个包含错误信息的对象。常见异常错误参考文档
```
rewardedVideoAd.onError(err => {
console.log(err)
})
```
`RewardedVideoAd.show()` 返回的 Promise 也会是一个 rejected Promise。
```
rewardedVideoAd.show()
.catch(err => console.log(err))
```
### 拉取失败,重新拉取
如果组件的某次自动拉取失败,那么之后调用的 show() 将会被 reject。此时可以调用 `RewardedVideoAd.load()` 手动重新拉取广告。
```
rewardedVideoAd.show()
.catch(() => {
rewardedVideoAd.load()
.then(() => rewardedVideoAd.show())
.catch(err => {
console.log('激励视频 广告显示失败')
})
})
```
如果组件的自动拉取是成功的,那么调用 `load()` 方法会直接返回一个 resolved Promise,而不会去拉取广告。
```
rewardedVideoAd.load()
.then(() => rewardedVideoAd.show())
```
### 监听用户关闭广告
只有在用户点击激励视频广告组件上的 关闭广告 按钮时,广告才会关闭。这个事件可以通过 `RewardedVideoAd.onClose()` 监听。
`RewardedVideoAd.onClose()` 的回调函数会传入一个参数 res,res.isEnded 描述广告被关闭时的状态。
|属性|类型|说明|
|:-:|:-:|:-:|
|isEnded|boolean|视频是否是在用户完整观看的情况下被关闭的,true 表示用户是在视频播放完以后关闭的视频,false 表示用户在视频播放过程中关闭了视频
开发者需要根据 res.isEnded 判断是否视频是否播放结束、可以向用户下发奖励。
```
rewardedVideoAd.onClose(res => {
// 用户点击了【关闭广告】按钮
if (res && res.isEnded) {
// 正常播放结束
} else {
// 播放中途退出
}
})
```
**注意事项**
多次调用 `RewardedVideoAd.onLoad()``RewardedVideoAd.onError()``RewardedVideoAd.onClose()` 等方法监听广告事件会产生多次事件回调,建议在创建广告后监听一次即可,或者先取消原有的监听事件再重新监听。
**AD组件**
文档地址:[https://uniapp.dcloud.io/component/ad](https://uniapp.dcloud.io/component/ad)
......@@ -65,7 +65,7 @@ App-nvue下如需使用canvas,暂未封装为uni API,可参考[文档](https
在绘制新形状时应用的合成操作的类型。目前安卓版本只适用于 `fill` 填充块的合成,用于 `stroke` 线段的合成效果都是 `source-over`
目前支持的操作有
* 5+App和H5端:source-over、destination-over、source-in、destination-in、source-out、destination-out、source-atop、destination-atop、lighter、darker、xor、copy
* App和H5端:source-over、destination-over、source-in、destination-in、source-out、destination-out、source-atop、destination-atop、lighter、darker、xor、copy
* 微信小程序安卓端:xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light
* 微信小程序iOS端:xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity
......@@ -73,7 +73,7 @@ App-nvue下如需使用canvas,暂未封装为uni API,可参考[文档](https
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|
......
#### uni.canvasToTempFilePath(OBJECT, this)
#### uni.canvasToTempFilePath(object, component)
把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。在自定义组件下,第二个参数传入自定义组件实例 this,以操作组件内 `<canvas>` 组件。
把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。在自定义组件下,第二个参数传入自定义组件实例,以操作组件内 `<canvas>` 组件。
**OBJECT参数说明:**
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x([CanvasContext.toTempFilePath](https://opendocs.alipay.com/mini/api/rod3ti))|√|√|√|
**object参数说明:**
|参数 |类型 |必填 |说明 |
|---|---|---|---|---|
......@@ -30,9 +36,13 @@ uni.canvasToTempFilePath({
destWidth: 100,
destHeight: 100,
canvasId: 'myCanvas',
success: function(res) {
// 在H5平台下,tempFilePath 为 base64
success: function(res) {
// 在H5平台下,tempFilePath 为 base64
console.log(res.tempFilePath)
}
})
```
**Tips**
- H5端 Canvas 内绘制的图像需要支持跨域访问才能成功。
\ No newline at end of file
......@@ -4,7 +4,7 @@
平台差异说明:
* 5+App
* App
自 HXuilderX1.4 版本起,``uni-app`` 支持引入原生插件,使用方式如下:
......
......@@ -3,7 +3,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
......@@ -45,7 +45,7 @@ uni.chooseImage({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
......@@ -87,7 +87,7 @@ uni.getSavedFileList({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|x|√|
......@@ -125,7 +125,7 @@ uni.getSavedFileInfo({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
......@@ -160,7 +160,7 @@ uni.getSavedFileList({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
......@@ -187,7 +187,7 @@ uni.getSavedFileList({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
......@@ -223,11 +223,12 @@ uni.downloadFile({
|平台|打开方式|
|:-|:-|
|小程序|在小程序的入口应用内打开|
|5+App iOS|在当前应用内打开|
|5+App Android|调用系统相关应用打开,无相关应用则不能打开|
|App iOS|在当前应用内打开|
|App Android|调用系统相关应用打开,无相关应用则不能打开|
|H5|使用浏览器打开,当前浏览器不支持则不能打开|
**Tips**
- App端,io操作还可以用更强大的plus.io API。[https://www.html5plus.org/doc/zh_cn/io.html](https://www.html5plus.org/doc/zh_cn/io.html)
- App端,打开各种格式的文件,如office、pdf等,还可以用更强大的三方插件,详见[插件市场](https://ext.dcloud.net.cn/search?q=pdf)
- 选择文件上传,uni-app有自带的api:[uni.chooseImage](https://uniapp.dcloud.io/api/media/image?id=chooseimage)[uni.chooseVideo](https://uniapp.dcloud.io/api/media/video?id=choosevideo)。App端如需选择非媒体文件,可在插件市场搜索[文件选择](https://ext.dcloud.net.cn/search?q=文件选择),其中Android端可以使用Native.js,无需原生插件,而iOS端需要原生插件。
......@@ -54,10 +54,11 @@ uni.getLocation({
#### 注意
- H5:在较新的手机浏览器上,H5 端获取定位信息,要求部署在 **https** 服务上,本地预览(localhost)仍然可以使用 http 协议。
- H5:国产安卓手机上,H5若无定位,检查手机是否开通位置服务、GPS,ROM是否给该浏览器位置权限、浏览器是否对网页弹出请求给予定位的询问框。
- H5:在较新的浏览器上,H5 端获取定位信息,要求部署在 **https** 服务上,本地预览(localhost)仍然可以使用 http 协议。
- H5:国产安卓手机上,H5若无定位,检查手机是否开通位置服务、GPS,ROM是否给该浏览器位置权限、浏览器是否对网页弹出请求给予定位的询问框。
- H5:安卓手机在原生App内嵌H5时,无法定位需要原生App处理Webview。
- H5:无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候,位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败。
- H5:移动端浏览器普遍仅支持GPS定位,在GPS信号弱的地方可能定位失败。
- 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、证书信息必须匹配。
......
......@@ -3,7 +3,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|√|√|
......@@ -95,3 +95,7 @@ innerAudioContext.onError((res) => {
console.log(res.errCode);
});
```
**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)
......@@ -3,7 +3,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|√|√|√|
......
### uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
另外选择和上传非图像、视频文件参考:[https://ask.dcloud.net.cn/article/35547](https://ask.dcloud.net.cn/article/35547)
App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考[plus.camera](https://www.html5plus.org/doc/zh_cn/camera.html)
**OBJECT 参数说明**
......@@ -10,17 +8,19 @@ App端如需要更丰富的相机拍照API(如直接调用前置摄像头)
|参数名|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|count|Number|否|最多可以选择的图片张数,默认9|见下方说明|
|sizeType|Array&lt;String&gt;|否|original 原图,compressed 压缩图,默认二者都有|5+App、微信小程序、支付宝小程序、百度小程序|
|sizeType|Array&lt;String&gt;|否|original 原图,compressed 压缩图,默认二者都有|App、微信小程序、支付宝小程序、百度小程序|
|sourceType|Array&lt;String&gt;|否|album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项||
|success|Function|是|成功则返回图片的本地文件路径列表 tempFilePaths||
|fail|Function|否|接口调用失败的回调函数|小程序、5+App|
|fail|Function|否|接口调用失败的回调函数|小程序、App|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
**Tips**
- count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。
- count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。
- sourceType 在H5端对应`input``capture`属性,设置为`['album']`无效,依然可以使用相机。
- 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
- App端如需选择非媒体文件,可在插件市场搜索[文件选择](https://ext.dcloud.net.cn/search?q=文件选择),其中Android端可以使用Native.js,无需原生插件,而iOS端需要原生插件。
**注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 [uni.saveFile](api/file/file?id=savefile),在应用下次启动时才能访问得到。**
......@@ -61,9 +61,9 @@ uni.chooseImage({
|:-|:-|:-|:-|:-|
|current|String/Number|详见下方说明|详见下方说明||
|urls|Array&lt;String&gt;|是|需要预览的图片链接列表||
|indicator|String|否|图片指示器样式,可取值:"default" - 底部圆点指示器; "number" - 顶部数字指示器; "none" - 不显示指示器。|5+App|
|loop|Boolean|否|是否可循环预览,默认值为 false|5+App|
|longPressActions|Object|否|长按图片显示操作菜单,如不填默认为**保存相册**,1.9.5 起支持。|5+App|
|indicator|String|否|图片指示器样式,可取值:"default" - 底部圆点指示器; "number" - 顶部数字指示器; "none" - 不显示指示器。|App|
|loop|Boolean|否|是否可循环预览,默认值为 false|App|
|longPressActions|Object|否|长按图片显示操作菜单,如不填默认为**保存相册**|App 1.9.5+|
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
......@@ -135,7 +135,7 @@ uni.chooseImage({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|
......@@ -194,9 +194,9 @@ uni.chooseImage({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|√|√|
|√|x|√||√|√|
**OBJECT 参数说明**
......@@ -240,7 +240,7 @@ uni.chooseImage({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序
|:-:|:-:|:-:|:-:|:-:|:-:|
|1.9.7+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|√|√|√(基础库版本>=3.110.3)|√|
......
......@@ -54,7 +54,7 @@ App平台的直播播放,不使用此API,而直接使用video的API。
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|见下|x|√|x|x|x|x|
|见下|x|√|x|x|x||
- app-nvue 平台 2.2.5+ 支持 uni.createLivePusherContext(livePusherId, this)
- app-nvue 平台 2.2.5以下,需要同时设置组件属性id和ref ``<live-pusher id="livepusher1" ref="livepusher1"></live-pusher>``,或者直接使用 ref,例如 ``this.$refs.livepusher1``
......
......@@ -3,7 +3,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|√|√|√|
......@@ -18,7 +18,7 @@
|onStart|callback|录音开始事件||
|onPause|callback|录音暂停事件||
|onStop|callback|录音停止事件,会回调文件地址||
|onFrameRecorded|callback|已录制完指定帧大小的文件,会回调录音分片结果数据。如果设置了 frameSize ,则会回调此事件|5+App 暂不支持|
|onFrameRecorded|callback|已录制完指定帧大小的文件,会回调录音分片结果数据。如果设置了 frameSize ,则会回调此事件|App 暂不支持|
|onError|callback|录音错误事件, 会回调错误信息|&nbsp;|
**start(options) 说明**
......
......@@ -74,7 +74,7 @@ export default {
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|√|√|√|
|√|x|√||√|√|√|
**OBJECT 参数说明**
......
### uni.authorize(OBJECT)
提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。
提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。如果用户之前拒绝了授权,此接口会直接进入失败回调,一般搭配`uni.getSetting``uni.openSetting`使用。
**平台差异说明**
......
......@@ -4,9 +4,9 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|x|
|x|x|√||√|√|x|
**OBJECT参数说明**
......
......@@ -4,7 +4,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|x|
......@@ -45,7 +45,7 @@ if (uni.getExtConfig) {
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|x|
......
......@@ -5,7 +5,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|
......
......@@ -6,7 +6,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|x|
......
......@@ -46,7 +46,7 @@ uni.navigateToMiniProgram({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√|√|
......
#### wx.reportAnalytics(string eventName, Object data)
#### uni.reportAnalytics(string eventName, Object data)
自定义分析数据上报接口。使用前,需要在小程序管理后台自定义分析中新建事件,配置好事件名与字段。。
仅微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.reportAnalytics.html)
\ No newline at end of file
微信小程序平台[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.reportAnalytics.html)
QQ小程序平台[规范详情](https://q.qq.com/wiki/develop/game/API/open-port/port_dataanalysis.html#qq-reportanalytics)
\ No newline at end of file
#### wx.reportMonitor()
#### uni.reportMonitor()
自定义业务数据监控上报接口。
仅微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.reportMonitor.html)
\ No newline at end of file
微信小程序平台[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.reportMonitor.html)
QQ小程序平台[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/open_port/port_dataup.html#qq-reportmonitor)
### uni.requestSubscribeMessage(Object object)
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |头条小程序 |QQ小程序 |
|:-: |:-:|:-: |:-: |:-: |:-: |:-: |
|x |x |基础库版本>=2.8.2|x |x |x |x |
**object参数说明**
|属性 |类型 |默认值 |必填 |说明 |
|:-: |:-: |:-: |:-: |:-: |
|tmplIds |Array | |是 |需要订阅的消息模板的id的集合,一次调用最多可订阅3条消息(注意:iOS客户端7.0.6版本、Android客户端7.0.7版本之后的一次性订阅/长期订阅才支持多个模板消息,iOS客户端7.0.5版本、Android客户端7.0.6版本之前的一次订阅只支持一个模板消息)消息模板id在[微信公众平台(mp.weixin.qq.com)-功能-订阅消息]中配置 |
|success |function | |否 |接口调用成功的回调函数 |
|fail |function | |否 |接口调用失败的回调函数 |
|complete |function | |否 |接口调用结束的回调函数(调用成功、失败都会执行) |
**注意**
- 用户发生点击行为或者发起支付回调后,才可以调起订阅消息界面
**平台说明**
- [微信小程序订阅消息参考文档](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html)
**object.success 返回值**
|属性 |类型 |说明 |
|:-: |:-: |:-: |
|errMsg |String |接口调用成功时errMsg值为'requestSubscribeMessage:ok' |
|TEMPLATE_ID|String| [TEMPLATE_ID]是动态的键,即模板id,值包括'accept'、'reject'、'ban'。'accept'表示用户同意订阅该条id对应的模板消息,'reject'表示用户拒绝订阅该条id对应的模板消息,'ban'表示已被后台封禁。例如 { errMsg: "requestSubscribeMessage:ok", zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: "accept"} 表示用户同意订阅zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE这条消息|
**object.fail 返回值**
|属性 |类型 |说明 |
|:-: |:-: |:-: |
|errMsg |String |接口调用失败错误信息 |
|errCode|Number |接口调用失败错误码 |
**示例代码**
```
uni.requestSubscribeMessage({
tmplIds: [''],
success (res) { }
})
```
\ No newline at end of file
......@@ -4,7 +4,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|
......
......@@ -4,7 +4,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√|√|
......@@ -35,7 +35,7 @@ uni.openSetting({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√|√|
......
......@@ -4,7 +4,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|x|
......@@ -66,7 +66,7 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templateadd?access_tok
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|x|
......@@ -120,7 +120,7 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templatedel?access_tok
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|x|
......@@ -229,7 +229,7 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/libraryget?access_toke
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|x|
......@@ -318,7 +318,7 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/librarylist?access_tok
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|x|
......@@ -416,7 +416,7 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templatelist?access_to
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|x|
......@@ -549,7 +549,7 @@ POST https://openapi.baidu.com/rest/2.0/smartapp/template/templatedel?access_tok
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|x|√|x|x|x|
......
......@@ -8,7 +8,7 @@ App的更新不使用本API,另见文档:
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√|√|
......
......@@ -3,7 +3,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
......@@ -33,11 +33,11 @@ H5平台登陆注意事项:
各个平台的登录流程存在差异,详细请参考相关平台的文档说明:
* [微信小程序登录](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html)
* [支付宝小程序用户授权](https://docs.alipay.com/mini/introduce/auth)
* [支付宝小程序用户授权](https://docs.alipay.com/mini/introduce/authcode)
* [百度小程序登录](https://smartprogram.baidu.com/docs/develop/api/open_log/#%E6%8E%88%E6%9D%83%E6%B5%81%E7%A8%8B%E8%AF%B4%E6%98%8E/)
* [头条小程序登录](https://developer.toutiao.com/dev/cn/mini-app/develop/open-capacity/log-in/login)
* [Apple登录](https://ask.dcloud.net.cn/article/36651)
* [头条小程序登录](https://developer.toutiao.com/dev/cn/mini-app/develop/open-capacity/log-in/login)
* [Apple登录、苹果登录、Sign in with Apple](https://ask.dcloud.net.cn/article/36651)
**示例**
......@@ -58,7 +58,7 @@ uni.login({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|√|
......@@ -75,7 +75,7 @@ uni.login({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
......@@ -87,7 +87,7 @@ uni.login({
|:-|:-|:-|:-|:-|:-|
|provider|String|否|登录服务提供商,通过 uni.getProvider 获取||
|withCredentials|Boolean|否|是否带上登录态信息。|微信小程序、头条小程序|
|lang|Number|否|指定返回用户信息的语言,默认为 en。更多值请参考下面的说明。|微信小程序|
|lang|String|否|指定返回用户信息的语言,默认为 en。更多值请参考下面的说明。|微信小程序|
|timeout|Number|否|超时时间,单位 ms。|微信小程序|
|success|Function|否|接口调用成功的回调||
|fail|Function|否|接口调用失败的回调函数||
......@@ -101,7 +101,7 @@ uni.login({
|zh_TW|繁体中文|
|en|英文|
**注意:**在小程序 withCredentials 为 true 时或是在 5+App 调用 uni.getUserInfo,要求此前有调用过 uni.login 且登录态尚未过期。
**注意:**在小程序 withCredentials 为 true 时或是在 App 调用 uni.getUserInfo,要求此前有调用过 uni.login 且登录态尚未过期。
**success 返回参数说明**
......@@ -119,7 +119,7 @@ uni.login({
|参数|类型|说明|平台差异说明|
|:-|:-|:-||
|nickName|String|用户昵称||
|openId|String|该服务商唯一用户标识|5+App|
|openId|String|该服务商唯一用户标识|App|
|avatarUrl|String|用户头像|&nbsp;|
除了以上三个必有的信息外,不同服务供应商返回的其它信息会存在差异。
......
......@@ -11,7 +11,7 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|[说明](/api/plugins/payment?id=h5-payment)|√|√|√|√|√|
......@@ -20,7 +20,7 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在
|参数名|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-||
|provider|String|是|服务提供商,通过 [uni.getProvider](/api/plugins/provider) 获取。||
|orderInfo|String/Object|是|订单数据,[注意事项](/api/plugins/payment?id=orderinfo)|5+App、支付宝小程序、百度小程序、头条小程序|
|orderInfo|String/Object|是|订单数据,[注意事项](/api/plugins/payment?id=orderinfo)|App、支付宝小程序、百度小程序、头条小程序|
|timeStamp|String|微信小程序必填|时间戳从1970年1月1日至今的秒数,即当前的时间。|微信小程序|
|nonceStr|String|微信小程序必填|随机字符串,长度为32个字符以下。|微信小程序|
|package|String|微信小程序必填|统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=xx。|微信小程序|
......@@ -41,9 +41,10 @@ uni.requestPayment是一个统一各平台的客户端支付API,不管是在
#### orderInfo 注意事项@orderInfo
1. 百度小程序的 orderInfo 为 Object 类型,详细的数据结构,参考:[百度收银台支付](https://smartprogram.baidu.com/docs/develop/api/open_payment/#requestPolymerPayment/)
2. 支付宝小程序的 orderInfo(支付宝的规范为 tradeNO) 为 String 类型,表示支付宝交易号。
3. 头条小程序的 orderInfo(头条的规范为 data) 为 Object 类型,详见:[发起头条支付](https://developer.toutiao.com/dev/cn/mini-app/develop/open-capacity/payment/pay)
4. App端,支付宝支付和微信支付 orderInfo 均为 String 类型。
5. App端,苹果应用内支付 orderInfo 为Object 类型,{productid: 'productid'}。
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 类型。
6. App端,苹果应用内支付 orderInfo 为Object 类型,{productid: 'productid'}。
#### H5 平台@h5-payment
- 普通浏览器平台的支付,仍然是常规web做法。uni-app未封装。
......
### uni.getProvider(OBJECT)
获取服务供应商。仅App平台支持。
获取服务供应商。
在App平台,可用的服务商,是打包环境中配置的服务商,与手机端安装了什么app没有关系。
在App平台,可用的服务商,是打包环境中配置的服务商,与手机端是否安装了该服务商的App没有关系。
云打包在manifest中配置相关模块和SDK信息,离线打包在原生工程中配置。某个服务商配置被打包进去,运行时就能得到相应的服务供应商。
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-|:-|:-|:-|:-|:-|:-|
|√|x|√|√|√|√|√|
**OBJECT 参数说明**
......@@ -45,8 +45,8 @@
|oauth|weixin|微信登录||
||qq|QQ登录||
||sinaweibo|新浪微博登录||
||xiaomi|小米登录||
||apple|[Apple登录](https://ask.dcloud.net.cn/article/36651)||
||xiaomi|小米登录||
||apple|[Apple登录](https://ask.dcloud.net.cn/article/36651)|仅iOS13支持,HBuilderX 2.4.7+|
|share|sinaweibo|新浪微博分享||
||qq|分享到QQ好友||
||weixin|分享微信消息、朋友圈及微信小程序||
......@@ -79,4 +79,4 @@ uni.getProvider({
}
}
});
```
\ No newline at end of file
```
......@@ -49,7 +49,7 @@
开启推送
平台差异说明:
- 5+App
- App
**OBJECT 参数说明**
......@@ -87,7 +87,7 @@ uni.getProvider({
**平台差异说明**
- 5+App
- App
**OBJECT 参数说明**
......@@ -115,7 +115,7 @@ uni.unsubscribePush({
**平台差异说明**
- 5+App
- App
**OBJECT 参数说明**
......@@ -147,7 +147,7 @@ uni.onPush({
**平台差异说明**
- 5+App
- App
**OBJECT 参数说明**
......
......@@ -5,8 +5,8 @@
|平台|说明|
|:-|:-|
|App|使用 ``uni.share`` 进行分享,需要在 `manifest.json` 里配置各平台分享所必需的的字段,如appid、appsecret等|
|小程序|不支持方法调用,只能用户主动点击触发分享,可使用 <button open-type="share"> 和 onShareAppMessage 进行自定义|
|App|使用 ``uni.share`` 进行分享,需要在 `manifest.json` 里配置各平台分享所必需的的字段,如appid等|
|小程序|不支持方法调用,只能用户主动点击触发分享,可使用 &lt;button open-type="share"&gt; 和 onShareAppMessage 进行自定义|
|H5|如果是普通浏览器,浏览器自带分享按钮;如果是在微信内嵌浏览器中调用js-sdk,[参考](https://ask.dcloud.net.cn/article/35380)|
......@@ -20,7 +20,7 @@
|scene|String|provider 为 weixin 时必选|场景,可取值参考下面说明。|
|summary|String|type 为 1 时必选|摘要|
|href|String|type 为 0 时必选|跳转链接|
|imageUrl|String|type 为 0、2、5 时必选|图片地址,type为0时,图片大小于 20Kb|
|imageUrl|String|type 为 0、2、5 时必选|图片地址。type为0时,推荐使用小于20Kb的图片|
|mediaUrl|String|type 为 3、4 时必选|音视频地址|
|miniProgram|Object|type 为 5 时必选|分享小程序必要参数|
|success|Function|否|接口调用成功的回调|
......@@ -215,7 +215,7 @@ uni.share({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√|
......@@ -263,7 +263,7 @@ export default {
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|
......@@ -283,7 +283,7 @@ export default {
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|x|√|
......@@ -307,9 +307,14 @@ uni.hideShareMenu()
#### 微信分享
在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 申请步骤可参考:[https://ask.dcloud.net.cn/article/208](https://ask.dcloud.net.cn/article/208)
在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写 appid,如需在iOS平台使用还需要配置通用链接。
**参考文档**
- 微信 appid 申请步骤:[https://ask.dcloud.net.cn/article/208](https://ask.dcloud.net.cn/article/208)
- iOS平台微信SDK配置通用链接:[https://ask.dcloud.net.cn/article/36445](https://ask.dcloud.net.cn/article/36445)
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni2019022501.png)
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/mp-weixin-manifest-share.png)
#### 新浪微博分享
在 manifest.json 的 App SDK 配置里,勾选勾选新浪微博,并填写相关appkey,新浪微博 appkey 申请步骤可参考:[https://ask.dcloud.net.cn/article/209](https://ask.dcloud.net.cn/article/209)
......
......@@ -9,7 +9,7 @@
|参数名|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|url|String|是|开发者服务器 url||
|files|Array|否|需要上传的文件列表。**使用 files 时,filePath 和 name 不生效。**|5+App|
|files|Array|否|需要上传的文件列表。**使用 files 时,filePath 和 name 不生效。**|App|
|fileType|String|见平台差异说明|文件类型,image/video/audio|仅支付宝小程序,且必填。|
|filePath|String|是|要上传文件资源的路径。||
|name|String|是|文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容||
......@@ -21,7 +21,7 @@
**注意**
- 5+App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
- 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)
......@@ -86,12 +86,12 @@ uploadTask.abort();
**uploadTask 对象的方法列表**
|方法|参数|说明|
|:-|:-|:-|
|:-|:-|:-|
|abort||中断上传任务|
|onProgressUpdate|callback|监听上传进度变化|
|onHeadersReceived|callback|监听 HTTP Response Header 事件。会比请求完成事件更早,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/UploadTask.onHeadersReceived.html)|
|offProgressUpdate|callback|取消监听上传进度变化事件,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/UploadTask.offProgressUpdate.html)|
|offHeadersReceived|callback|取消监听 HTTP Response Header 事件,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/UploadTask.offHeadersReceived.html)|
|onProgressUpdate|callback|监听上传进度变化|
|onHeadersReceived|callback|监听 HTTP Response Header 事件。会比请求完成事件更早,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/UploadTask.onHeadersReceived.html)|
|offProgressUpdate|callback|取消监听上传进度变化事件,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/UploadTask.offProgressUpdate.html)|
|offHeadersReceived|callback|取消监听 HTTP Response Header 事件,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/UploadTask.offHeadersReceived.html)|
**onProgressUpdate 返回参数说明**
......@@ -192,12 +192,12 @@ downloadTask.abort();
**downloadTask 对象的方法列表**
|方法|参数|说明|最低版本|
|:-|:-|:-|:-|
|:-|:-|:-|:-|
|abort||中断下载任务|*|
|onProgressUpdate|callback|监听下载进度变化|*|
|onHeadersReceived|callback|监听 HTTP Response Header 事件,会比请求完成事件更早,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/DownloadTask.onHeadersReceived.html)|
|offProgressUpdate|callback|取消监听下载进度变化事件,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/DownloadTask.offProgressUpdate.html)|
|offHeadersReceived|callback|取消监听 HTTP Response Header 事件,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/DownloadTask.offHeadersReceived.html)|
|onHeadersReceived|callback|监听 HTTP Response Header 事件,会比请求完成事件更早,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/DownloadTask.onHeadersReceived.html)|
|offProgressUpdate|callback|取消监听下载进度变化事件,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/DownloadTask.offProgressUpdate.html)|
|offHeadersReceived|callback|取消监听 HTTP Response Header 事件,仅`微信小程序平台`支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/DownloadTask.offHeadersReceived.html)|
**onProgressUpdate 返回参数说明**
......
......@@ -8,13 +8,13 @@
|参数名|类型|必填|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|:-|
|url|String|是||开发者服务器接口地址||
|data|Object/String/ArrayBuffer|否||请求的参数|5+App(自定义组件编译模式)不支持ArrayBuffer类型|
|data|Object/String/ArrayBuffer|否||请求的参数|App(自定义组件编译模式)不支持ArrayBuffer类型|
|header|Object|否||设置请求的 header,header 中不能设置 Referer。||
|method|String|否|GET|有效值详见下方说明||
|timeout|Number|否|30000|超时时间,单位 ms|支付宝小程序|
|dataType|String|否|json |如果设为 json,会尝试对返回的数据做一次 JSON.parse||
|responseType|String|否|text |设置响应的数据类型。合法值:text、arraybuffer|5+App和支付宝小程序不支持|
|sslVerify|Boolean|否|true|验证 ssl 证书|仅5+App安卓端支持(HBuilderX 2.3.3+)|
|responseType|String|否|text |设置响应的数据类型。合法值:text、arraybuffer|App和支付宝小程序不支持|
|sslVerify|Boolean|否|true|验证 ssl 证书|仅App安卓端支持(HBuilderX 2.3.3+)|
|success|Function|否||收到开发者服务成功返回的回调函数||
|fail|Function|否||接口调用失败的回调函数||
|complete|Function|否||接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
......@@ -23,7 +23,7 @@
必须大写,有效值在不同平台差异说明不同。
|method|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|method|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|GET|√|√|√|√|√|√|
|POST|√|√|√|√|√|√|
......
......@@ -7,8 +7,8 @@
|参数|类型|必填|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|:-|
|url|String|是||需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数|:-|
|animationType|String|否|pop-in|窗口显示的动画效果,详见:[窗口动画](api/router?id=animation)|5+App|
|animationDuration|Number|否|300|窗口动画持续时间,单位为 ms|5+App|
|animationType|String|否|pop-in|窗口显示的动画效果,详见:[窗口动画](api/router?id=animation)|App|
|animationDuration|Number|否|300|窗口动画持续时间,单位为 ms|App|
|success|Function|否||接口调用成功的回调函数||
|fail|Function|否||接口调用失败的回调函数||
|complete|Function|否||接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
......@@ -145,8 +145,8 @@ uni.switchTab({
|参数|类型|必填|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|:-|
|delta|Number|否|1|返回的页面数,如果 delta 大于现有页面数,则返回到首页。||
|animationType|String|否|pop-out|窗口关闭的动画效果,详见:[窗口动画](api/router?id=animation)|5+App|
|animationDuration|Number|否|300|窗口关闭动画的持续时间,单位为 ms|5+App|
|animationType|String|否|pop-out|窗口关闭的动画效果,详见:[窗口动画](api/router?id=animation)|App|
|animationDuration|Number|否|300|窗口关闭动画的持续时间,单位为 ms|App|
**示例**
......
......@@ -28,7 +28,7 @@ uni.onAccelerometerChange(function (res) {
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|√|
......
......@@ -3,7 +3,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
......@@ -22,9 +22,9 @@
|参数|说明|平台差异说明|
|:-|:-|:-|
|result|所扫码的内容||
|scanType|所扫码的类型|5+App、微信小程序、百度小程序、QQ小程序|
|charSet|所扫码的字符集|5+App、微信小程序、百度小程序、QQ小程序|
|path|当所扫的码为当前应用的合法二维码时,会返回此字段,内容为二维码携带的 path。|5+App、微信小程序、百度小程序、QQ小程序|
|scanType|所扫码的类型|App、微信小程序、百度小程序、QQ小程序|
|charSet|所扫码的字符集|App、微信小程序、百度小程序、QQ小程序|
|path|当所扫的码为当前应用的合法二维码时,会返回此字段,内容为二维码携带的 path。|App、微信小程序、百度小程序、QQ小程序|
**示例**
......@@ -44,7 +44,7 @@ uni.scanCode({
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
}
});
});
// 调起条码扫描
uni.scanCode({
......@@ -59,8 +59,8 @@ uni.scanCode({
**Tip**
- App-vue如果想自定义扫码,可参考[uni-app中如何使用5+的原生界面控件](http://ask.dcloud.net.cn/article/35036)[plus.barcode API](https://www.html5plus.org/doc/zh_cn/barcode.html)
- App-nvue,支持barcode组件,可自定义扫码界面。[详见](https://uniapp.dcloud.io/component/barcode)
- App-nvue,支持barcode组件,可自定义扫码界面。[详见](https://uniapp.dcloud.io/component/barcode)。App端自定义扫码界面,建议使用nvue方式。
- 微信小程序自定义扫码界面,可使用camera组件。[详见](https://uniapp.dcloud.io/component/camera)
- 微信内嵌浏览器运行H5版时,可通过js sdk实现扫码,需要引入一个单独的js,[详见](https://ask.dcloud.net.cn/article/35380)
- 在扫码界面点击返回也会进入 `fail` 回调中
- 在扫码界面点击返回也会进入 `fail` 回调中
- 支付宝小程序不支持 `success` 回调中的 `scanType``charSet``path`
**低功耗蓝牙 API 平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|x|x|x|
......
**蓝牙 API 平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|x|x|x|
......
......@@ -3,7 +3,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|x|√|
......@@ -32,7 +32,7 @@ uni.setScreenBrightness({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|x|√|
......@@ -65,7 +65,7 @@ uni.getScreenBrightness({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
......
......@@ -4,7 +4,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|√|√|√|
......
**剪贴板 API 平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
### uni.setClipboardData(OBJECT)
......
......@@ -23,7 +23,7 @@ uni.onCompassChange(function (res) {
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|√|√|
......
......@@ -6,7 +6,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|x|x|
......@@ -30,7 +30,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|x|x|
......@@ -47,7 +47,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|√|x|x|
......
**iBeacon API 平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|x|x|x|
......
......@@ -13,15 +13,15 @@
|参数|说明|平台差异说明|
|:-|:-|:-|
|brand|手机品牌|5+App、微信小程序、百度小程序、头条小程序、QQ小程序|
|brand|手机品牌|App、微信小程序、百度小程序、头条小程序、QQ小程序|
|model|手机型号||
|pixelRatio|设备像素比||
|screenWidth|屏幕宽度||
|screenHeight|屏幕高度||
|windowWidth|可使用窗口宽度||
|windowHeight|可使用窗口高度||
|windowTop|可使用窗口的顶部位置|5+App、H5|
|windowBottom|可使用窗口的底部位置|5+App、H5|
|windowTop|可使用窗口的顶部位置|App、H5|
|windowBottom|可使用窗口的底部位置|App、H5|
|statusBarHeight|状态栏的高度|头条小程序不支持|
|navigationBarHeight|导航栏的高度|百度小程序|
|titleBarHeight|标题栏高度|支付宝小程序|
......@@ -50,8 +50,8 @@
|bluetoothEnabled | 蓝牙的系统开关 |微信小程序|
|locationEnabled | 地理位置的系统开关 |微信小程序|
|wifiEnabled | Wi-Fi 的系统开关 |微信小程序|
|safeArea|在竖屏正方向下的安全区域|5+App、H5、微信小程序|
|safeAreaInsets|在竖屏正方向下的安全区域插入位置(2.5.3+)|5+App、H5、微信小程序|
|safeArea|在竖屏正方向下的安全区域|App、H5、微信小程序|
|safeAreaInsets|在竖屏正方向下的安全区域插入位置(2.5.3+)|App、H5、微信小程序|
**Tips**
- 屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生tabbar高度
......@@ -102,15 +102,15 @@ uni.getSystemInfo({
|参数|说明|平台差异说明|
|:-|:-|:-|
|brand|手机品牌|5+App、微信小程序、百度小程序、头条小程序、QQ小程序|
|brand|手机品牌|App、微信小程序、百度小程序、头条小程序、QQ小程序|
|model|手机型号||
|pixelRatio|设备像素比||
|screenWidth|屏幕宽度||
|screenHeight|屏幕高度||
|windowWidth|可使用窗口宽度||
|windowHeight|可使用窗口高度||
|windowTop|可使用窗口的顶部位置|5+App、H5|
|windowBottom|可使用窗口的底部位置|5+App、H5|
|windowTop|可使用窗口的顶部位置|App、H5|
|windowBottom|可使用窗口的底部位置|App、H5|
|statusBarHeight|状态栏的高度|头条小程序不支持|
|navigationBarHeight|导航栏的高度|百度小程序|
|titleBarHeight|标题栏高度|支付宝小程序|
......@@ -139,8 +139,8 @@ uni.getSystemInfo({
|bluetoothEnabled | 蓝牙的系统开关 |微信小程序|
|locationEnabled | 地理位置的系统开关 |微信小程序|
|wifiEnabled | Wi-Fi 的系统开关 |微信小程序|
|safeArea|在竖屏正方向下的安全区域|5+App、H5、微信小程序|
|safeAreaInsets|在竖屏正方向下的安全区域插入位置(2.5.3+)|5+App、H5、微信小程序|
|safeArea|在竖屏正方向下的安全区域|App、H5、微信小程序|
|safeAreaInsets|在竖屏正方向下的安全区域插入位置(2.5.3+)|App、H5、微信小程序|
**Tips**
- 使用注意同上getSystemInfo
......@@ -211,7 +211,7 @@ Android10以上,部分国产手机支持OAID,详见[匿名设备标识符(
平台差异说明
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|
......
......@@ -6,9 +6,9 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|
|x|x|√||√|x|√|
**CALLBACK返回参数:**
......
......@@ -23,7 +23,7 @@
|2g|2g 网络||
|3g|3g 网络||
|4g|4g 网络||
|ethernet|有线网络|5+App|
|ethernet|有线网络|App|
|unknown|Android 下不常见的网络类型||
|none|无网络|&nbsp;|
......
......@@ -4,12 +4,12 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|HBuilderX 2.0.4+|√|√|√|√|√|
|√|HBuilderX 2.0.4+|√|√|√|√|√|
**注意:**
- export 方法每次调用后会清掉之前的动画操作
**注意:**
- export 方法每次调用后会清掉之前的动画操作
- nvue 暂不支持
**OBJECT参数说明:**
......
......@@ -4,7 +4,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|
......@@ -35,7 +35,7 @@ uni.setBackgroundColor({
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|
......
......@@ -2,6 +2,10 @@
### uni.createIntersectionObserver([this], [options])
创建并返回一个 ``IntersectionObserver`` 对象实例。
**this说明:**
自定义组件实例。**支付宝小程序不支持此参数,传入仅为抹平写法差异**
**options 的可选参数为:**
......@@ -31,7 +35,7 @@
下面的示例代码中,如果目标节点 ``".test"`` 进入 ``".scroll"`` 区域以下 100px 时,就会触发回调函数。
```
uni.createIntersectionObserver(this).relativeTo('.scroll',{bottom: 100}}).observe('.test', (res) => {
uni.createIntersectionObserver(this).relativeTo('.scroll',{bottom: 100}).observe('.test', (res) => {
console.log(res);
})
```
......
......@@ -2,30 +2,31 @@
在小程序平台,如果原生导航栏被隐藏,仍然在右上角会有一个悬浮按钮,微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息,方便开发者布局顶部内容时避开该按钮。
坐标信息以屏幕左上角为原点。
**平台差异说明**
|5+App |H5 |微信小程序 |支付宝小程序 |百度小程序 |头条小程序 |QQ小程序 |
|:-: |:-:|:-: |:-: |:-: |:-: |:-: |
坐标信息以屏幕左上角为原点。
**平台差异说明**
|App |H5 |微信小程序 |支付宝小程序 |百度小程序 |头条小程序 |QQ小程序 |
|:-: |:-:|:-: |:-: |:-: |:-: |:-: |
|x |x |√ |x |√ |√ |√ |
**返回值说明**
|属性 |类型 |说明 |
|width |number |宽度,单位:px |
|height |number |高度,单位:px |
|top |number |上边界坐标,单位:px |
|right |number |右边界坐标,单位:px |
|bottom |number |下边界坐标,单位:px |
|left |number |左边界坐标,单位:px |
**示例**
```javascript
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
**返回值说明**
|属性 |类型 |说明 |
|:-: |:-: |:-: |
|width |number |宽度,单位:px |
|height |number |高度,单位:px |
|top |number |上边界坐标,单位:px |
|right |number |右边界坐标,单位:px |
|bottom |number |下边界坐标,单位:px |
|left |number |左边界坐标,单位:px |
**示例**
```javascript
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
```
**注意**
**注意**
- 支付宝小程序:其逻辑与微信小程序不同,它提供了菜单点击后按钮的自定义功能,可以选择显示那些系统按钮,[规范详情](https://docs.alipay.com/mini/api/optionmenuitem)
......@@ -28,20 +28,20 @@ uni.setNavigationBarTitle({
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|
|√|√|√|√|√||√|
**OBJECT参数说明**
|参数|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|frontColor|String|是|前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000|5+App、H5、微信小程序、百度小程序|
|frontColor|String|是|前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000|App、H5、微信小程序、百度小程序|
|backgroundColor|String|是|背景颜色值,有效值为十六进制颜色||
|animation|Object|否|动画效果,{duration,timingFunc}|微信小程序、百度小程序|
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
**注意**
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
**注意**
- Android 上的 backgroundColor 参数有限制,黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)
**animation 结构**
......@@ -130,11 +130,11 @@ App平台调用此API时会关闭屏幕中间悬浮显示的loading
```javascript
uni.hideNavigationBarLoading()
```
### uni.hideHomeButton(OBJECT)
在当前页面隐藏导航条加载动画
隐藏返回首页按钮
**平台差异说明**
......@@ -142,7 +142,6 @@ uni.hideNavigationBarLoading()
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|x|x|x|
隐藏返回首页按钮。
**OBJECT参数说明**
......@@ -157,7 +156,7 @@ uni.hideNavigationBarLoading()
```javascript
uni.hideHomeButton()
```
**说明**
- 微信小程序自基础库版本2.8.3开始支持
- 当用户打开的小程序最底层页面是非首页时,默认展示“返回首页”按钮,开发者可在页面`onShow`中调用`hideHomeButton`进行隐藏。
\ No newline at end of file
**说明**
- 微信小程序自基础库版本2.8.3开始支持
- 当用户打开的小程序最底层页面是非首页时,默认展示“返回首页”按钮,开发者可在页面`onShow`中调用`hideHomeButton`进行隐藏。
......@@ -24,6 +24,10 @@ query.select('#id').boundingClientRect(data => {
}).exec();
```
**注意**
- 支付宝小程序不支持in(component),使用无效果
### selectorQuery.select(selector)
在当前页面下选择第一个匹配选择器 ``selector`` 的节点,返回一个 ``NodesRef`` 对象实例,可以用于获取节点信息。
......@@ -126,7 +130,7 @@ query.select('#id').boundingClientRect(data => {
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
||x|√|x|x|x|√|
|x|x|√|x|x|x|√|
**callback 返回参数**
......
......@@ -102,8 +102,8 @@ setTimeout(function () {
|参数|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|title|String||提示的标题||
|content|String||提示的内容||
|title|String||提示的标题||
|content|String||提示的内容||
|showCancel|Boolean|否|是否显示取消按钮,默认为 true||
|cancelText|String|否|取消按钮的文字,默认为"取消",最多 4 个字符||
|cancelColor|HexColor|否|取消按钮的文字颜色,默认为"#000000"|H5、微信小程序、百度小程序|
......@@ -112,6 +112,10 @@ setTimeout(function () {
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|&nbsp;|
**注意**
- 钉钉小程序真机与模拟器表现有差异,真机title,content均为必填项
**success返回参数说明**
......
......@@ -5,7 +5,7 @@
**平台差异说明**
|5+App|H5|微信小程序 |支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序 |支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(nvue不支持)|√|√|x|x|x|√|
......@@ -35,7 +35,7 @@ uni.onWindowResize((res) => {
平台差异说明
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|x|x|
......
......@@ -9,7 +9,7 @@
|方法|描述|平台说明|
|---|---|---|
|page.$getAppWebview()|获取当前页面的webview对象实例|5+App|
|page.$getAppWebview()|获取当前页面的webview对象实例|App|
|page.route|获取当前页面的路由|&nbsp;|
Tips:
......@@ -25,9 +25,9 @@ Tips:
但`uni-app`框架有自己的窗口管理机制,请不要自己创建和销毁webview,如有需求覆盖子窗体上去,请使用[原生子窗体subNvue](/api/window/subNVues)。
**注意:此方法仅 5+app 支持**
**注意:此方法仅 App 支持**
**示例:**
**示例:**
获取当前页面 webview 的对象实例
```javascript
......@@ -44,8 +44,8 @@ export default {
// #endif
}
}
```
```
获取指定页面 webview 的对象实例
`getCurrentPages()`可以得到所有页面对象,然后根据数组,可以取指定的页面webview对象
......
此差异已折叠。
......@@ -46,11 +46,11 @@
|onResize|监听窗口尺寸变化|App、微信小程序||
|onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)|||
|onReachBottom|页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项|||
|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、App(自定义组件模式)||
|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、支付宝小程序、百度小程序、H5、App(自定义组件模式)||
|onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、头条小程序、支付宝小程序||
|onPageScroll|监听页面滚动,参数为Object|nvue暂不支持||
|onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|App、H5||
|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|app、H5||
|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|app、H5、支付宝小程序||
|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|App、H5|1.6.0|
|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|App、H5|1.6.0|
|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|App、H5|1.6.0|
......@@ -90,6 +90,7 @@ onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代
**注意**
- onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。
- 如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用[plus.nativeObj.view](http://www.html5plus.org/doc/zh_cn/nativeobj.html)放一个区块盖住原先的tabitem,并拦截点击事件。
- 支付宝小程序平台onTabItemTap表现为点击非当前tabitem后触发,因此不能用于实现点击返回顶部这种操作
```js
onTabItemTap : function(e) {
......@@ -115,7 +116,7 @@ onNavigationBarButtonTap : function (e) {
|属性|类型|说明|
|---|---|---|
|from|String|触发返回行为的来源:'backbutton'——左上角导航栏按钮及安卓返回键;'navigateBack'——uni.navigateBack() 方法。|
|from|String|触发返回行为的来源:'backbutton'——左上角导航栏按钮及安卓返回键;'navigateBack'——uni.navigateBack() 方法。**支付宝小程序端不支持返回此字段**|
```javascript
export default {
data() {
......
......@@ -12,66 +12,67 @@ console.log(app.globalData)
**注意:**
- 不要在定义于 `App()` 内的函数中,或调用 `App` 前调用 `getApp()` ,可以通过 `this.$scope` 获取对应的app实例
- 通过 `getApp()` 获取实例之后,不要私自调用生命周期函数。
### getCurrentPages()
```getCurrentPages()``` 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
**注意:** ``getCurrentPages()``仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。
每个页面实例的方法属性列表:
|方法|描述|平台说明|
|---|---|---|
|page.$getAppWebview()|获取当前页面的webview对象实例|5+App|
|page.route|获取当前页面的路由|&nbsp;|
Tips:
* ``navigateTo``, ``redirectTo`` 只能打开非 tabBar 页面。
* ``switchTab`` 只能打开 ``tabBar`` 页面。
* ``reLaunch`` 可以打开任意页面。
* 页面底部的 ``tabBar`` 由页面决定,即只要是定义为 ``tabBar`` 的页面,底部都有 ``tabBar``。
* 不能在 ```App.vue``` 里面进行页面跳转。
### $getAppWebview()
```uni-app``` 在 ```getCurrentPages()```获得的页面里内置了一个方法 ```$getAppWebview()``` 可以得到当前webview的对象实例,从而实现对 webview 更强大的控制。在 html5Plus 中,plus.webview具有强大的控制能力,可参考:[WebviewObject](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject)。
但`uni-app`框架有自己的窗口管理机制,请不要自己创建和销毁webview,如有需求覆盖子窗体上去,请使用[原生子窗体subNvue](/api/window/subNVues)。
**注意:此方法仅 5+app 支持**
- v3模式加速了首页`nvue`的启动速度,当在首页`nvue`中使用`getApp()`不一定可以获取真正的`App`对象。对此v3版本提供了`const app = getApp({allowDefault: true})`用来获取原始的`App`对象,可以用来在首页对`globalData`等初始化
### getCurrentPages()
```getCurrentPages()``` 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
**注意:** ``getCurrentPages()``仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。
每个页面实例的方法属性列表:
|方法|描述|平台说明|
|---|---|---|
|page.$getAppWebview()|获取当前页面的webview对象实例|App|
|page.route|获取当前页面的路由|&nbsp;|
Tips:
* ``navigateTo``, ``redirectTo`` 只能打开非 tabBar 页面。
* ``switchTab`` 只能打开 ``tabBar`` 页面。
* ``reLaunch`` 可以打开任意页面。
* 页面底部的 ``tabBar`` 由页面决定,即只要是定义为 ``tabBar`` 的页面,底部都有 ``tabBar``。
* 不能在 ```App.vue``` 里面进行页面跳转。
### $getAppWebview()
```uni-app``` 在 ```getCurrentPages()```获得的页面里内置了一个方法 ```$getAppWebview()``` 可以得到当前webview的对象实例,从而实现对 webview 更强大的控制。在 html5Plus 中,plus.webview具有强大的控制能力,可参考:[WebviewObject](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject)。
但`uni-app`框架有自己的窗口管理机制,请不要自己创建和销毁webview,如有需求覆盖子窗体上去,请使用[原生子窗体subNvue](/api/window/subNVues)。
**注意:此方法仅 App 支持**
**示例:**
获取当前页面 webview 的对象实例
```javascript
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
// #ifdef APP-PLUS
const currentWebview = this.$mp.page.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里,直接使用plus.webview.currentWebview()无效
currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); //动态重设bounce效果
// #endif
}
}
获取当前页面 webview 的对象实例
```javascript
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
// #ifdef APP-PLUS
const currentWebview = this.$mp.page.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里,直接使用plus.webview.currentWebview()无效
currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); //动态重设bounce效果
// #endif
}
}
```
获取指定页面 webview 的对象实例
`getCurrentPages()`可以得到所有页面对象,然后根据数组,可以取指定的页面webview对象
```javascript
var pages = getCurrentPages();
var page = pages[pages.length - 1];
// #ifdef APP-PLUS
var currentWebview = page.$getAppWebview();
console.log(currentWebview.id);//获得当前webview的id
console.log(currentWebview.isVisible());//查询当前webview是否可见
);
// #endif
```
获取指定页面 webview 的对象实例
`getCurrentPages()`可以得到所有页面对象,然后根据数组,可以取指定的页面webview对象
```javascript
var pages = getCurrentPages();
var page = pages[pages.length - 1];
// #ifdef APP-PLUS
var currentWebview = page.$getAppWebview();
console.log(currentWebview.id);//获得当前webview的id
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
......@@ -12,7 +12,8 @@
|transformPx|Boolean|true|是否转换项目的px,为true时将px转换为rpx,为false时,px为传统的实际像素||
|networkTimeout|Object||网络超时时间,[详见](/collocation/manifest?id=networktimeout)||
|debug|Boolean|false|是否开启 debug 模式,开启后调试信息以 ``info`` 的形式给出,其信息有页面的注册,页面路由,数据更新,事件触发等||
|app-plus|Object||[5+App 特有配置](/collocation/manifest?id=app-plus)||
|uniStatistics|Object||[是否开启 uni 统计,全局配置](/collocation/manifest?id=uniStatistics)|2.2.3+|
|app-plus|Object||[App 特有配置](/collocation/manifest?id=app-plus)||
|h5|Object||[H5 特有配置](/collocation/manifest?id=h5)||
|quickapp|Object||快应用特有配置,即将支持||
|mp-weixin|Object||[微信小程序特有配置](/collocation/manifest?id=mp-weixin)||
......@@ -33,22 +34,36 @@
|属性|类型|必填|默认值|说明|
|--|--|--|--|--|
|request|Number|否|6000|uni.request 的超时时间,单位毫秒。|
|connectSocket|Number|否|6000|uni.connectSocket 的超时时间,单位毫秒。|
|uploadFile|Number|否|6000|uni.uploadFile 的超时时间,单位毫秒。|
|downloadFile|Number|否|6000|uni.downloadFile 的超时时间,单位毫秒。|
|request|Number|否|60000|uni.request 的超时时间,单位毫秒。|
|connectSocket|Number|否|60000|uni.connectSocket 的超时时间,单位毫秒。|
|uploadFile|Number|否|60000|uni.uploadFile 的超时时间,单位毫秒。|
|downloadFile|Number|否|60000|uni.downloadFile 的超时时间,单位毫秒。|
`HBuilderX 2.5.10`起,上述默认超时时间由6秒改为60秒,对齐微信小程序平台。
### uniStatistics
uni 统计配置项
|属性|类型|必填|默认值|说明|
|--|--|--|--|--|
|enable|Boolean|是|true|是否开启uni统计|
### app-plus
|属性|类型|说明|最低版本|
|:-|:-|:-|:-|
|splashscreen|Object|5+App 启动界面信息,[详见](/collocation/manifest?id=splashscreen)||
|splashscreen|Object|App 启动界面信息,[详见](/collocation/manifest?id=splashscreen)||
|modules|Object|权限模块,[详见](/collocation/manifest?id=modules)||
|distribute|Object|5+App 发布信息,[详见](/collocation/manifest?id=distribute)||
|usingComponents|Boolean|是否启用自定义组件模式,默认为false,[编译模式区别详情](https://ask.dcloud.net.cn/article/35843)|1.9.0|
|nvueCompiler|String|切换 nvue 编译模式,可选值,`weex` :老编译模式,`uni-app`: 新编译模式,默认为 `weex`[编译模式区别详情](http://ask.dcloud.net.cn/article/36074)|2.0.3|
|distribute|Object|App 发布信息,[详见](/collocation/manifest?id=distribute)||
|usingComponents|Boolean|是否启用自定义组件模式,默认为false,[编译模式区别详情](https://ask.dcloud.net.cn/article/35843)|1.9.0+|
|nvueCompiler|String|切换 nvue 编译模式,可选值,`weex` :老编译模式,`uni-app`: 新编译模式,默认为 `weex`[编译模式区别详情](http://ask.dcloud.net.cn/article/36074)|2.0.3+|
|renderer|String|可不加载基于 webview 的运行框架,减少包体积、提升启动速度。可选值 `native`| App-nvue 2.2.0+|
|nvue|Object|nvue 页面布局初始配置,[详见](/collocation/manifest?id=nvue)|2.0.3|
|compilerVersion|Number|编译器版本,可选值:2、3 默认 2 [详见](https://ask.dcloud.net.cn/article/36599)|HBuilderX alpha 2.4.4+或HBuilderX 2.5.0+|
|nvueLaunchMode|Number|Nvue 首页启动模式,在 compilerVersion 值为 3 时生效,可选值:normal、fast 默认 normal(HBuilderX alpha 2.4.4-2.4.9 固定为 fast) [详见](https://ask.dcloud.net.cn/article/36749)|2.5.0+|
|nvue|Object|nvue 页面布局初始配置,[详见](/collocation/manifest?id=nvue)|2.0.3+|
|uniStatistics|Object|[App 是否开启 uni 统计,配置方法同全局配置](/collocation/manifest?id=uniStatistics)|2.2.3+|
PS:这里只列出了核心部分,更多内容请参考 [完整的 manifest.json](/collocation/manifest?id=完整-manifestjson)
**Tips**
......@@ -146,7 +161,7 @@ splash(启动封面)是App必然存在的、不可取消的。
|publicPath|String|引用资源的地址前缀,仅发布时生效。参考:[publicPath](collocation/manifest?id=publicPath)|
|sdkConfigs|String|SDK配置,例如地图... 参考:[sdkConfigs](collocation/manifest?id=h5sdkconfig)|
|optimization|Object|打包优化配置(HBuilderX 2.1.5 以上支持),参考[optimization](collocation/manifest?id=optimization)|
|uniStatistics|Object|[H5 是否开启 uni 统计,配置方法同全局配置](/collocation/manifest?id=uniStatistics)||
#### 自定义模板@h5-template
需要使用自定义模板的场景,通常有以下几种情况:
......@@ -171,7 +186,7 @@ splash(启动封面)是App必然存在的、不可取消的。
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
......@@ -197,7 +212,10 @@ H5平台是SPA单页应用,普通的SEO信息即加meta字段只能在,自
|mode|String|hash|路由跳转模式,支持 hash、history|
|base|String|/|应用基础路径,例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"|
**注意:**`history` 模式发行需要后台配置支持,详见:[history 模式的后端配置](https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90)
**注意:**
* `history` 模式部分浏览器器不支持,iOS微信内置浏览器无法观测到URL变动,默认分享(不使用微信[JSSDK](https://ask.dcloud.net.cn/article/35380)的情况下)的链接为入口页链接。
* `history` 模式发行需要后台配置支持,详见:[history 模式的后端配置](https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90)
#### async@h5-async
|属性|类型|默认值|说明|
......@@ -299,6 +317,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
|workers|String|Worker 代码放置的目录。 [详见](https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html)|
|optimization|Object| 对微信小程序的优化配置 |
|cloudfunctionRoot|String| 配置云开发目录,参考[setting](/collocation/manifest?id=cloudfunctionRoot)|
|uniStatistics|Object|[微信小程序是否开启 uni 统计,配置方法同全局配置](/collocation/manifest?id=uniStatistics)||
#### setting
......@@ -351,9 +370,19 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
### mp-alipay
|属性|类型|说明|
|:-|:-|:-|
|usingComponents|Boolean| 是否启用自定义组件模式,`v2.0+`,默认为false,[编译模式区别详情](https://ask.dcloud.net.cn/article/35843)|
|属性 |类型 |说明 |
|:- |:- |:- |
|usingComponents |Boolean| 是否启用自定义组件模式,`v2.0+`,默认为false,[编译模式区别详情](https://ask.dcloud.net.cn/article/35843) |
|plugins |Object |使用到的插件,[详见](https://opendocs.alipay.com/mini/plugin/plugin-usage) |
|component2 |Boolean| 是否启用 `component2` 编译,默认为false,[查看详情](https://docs.alipay.com/mini/framework/custom-component-overview) |
|axmlStrictCheck |Boolean| 是否启用 `axml` 严格语法检查,默认为false |
|enableParallelLoader |Boolean| 是否启用多进程编译,默认为false |
|enableDistFileMinify |Boolean| 是否压缩编译产物(仅在真机预览/真机调试时生效),默认为false |
|uniStatistics |Object |[支付宝小程序是否开启 uni 统计,配置方法同全局配置](/collocation/manifest?id=uniStatistics) |
**注意**
- 以上选项对应支付宝小程序内的`mini.project.json`,但是在支付宝小程序IDE启动的情况下中修改这个文件可能并不会生效,后续支付宝应该会修复这个问题
### mp-baidu
......@@ -364,6 +393,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
|requiredBackgroundModes|Array|小程序需要在后台使用的能力,目前支持背景音频播放,"requiredBackgroundModes": ["audio"],[详见](https://smartprogram.baidu.com/docs/develop/tutorial/process/#requiredBackgroundModes) |
|prefetches|Array|预请求的所有url的列表,[详见](https://smartprogram.baidu.com/docs/develop/tutorial/process/#prefetches) |
|optimization|Object| 对百度小程序的优化配置 |
|uniStatistics|Object|[百度小程序是否开启 uni 统计,配置方法同全局配置](/collocation/manifest?id=uniStatistics)|
#### optimization
......@@ -381,6 +411,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
|setting|Object|头条小程序项目设置,参考[头条小程序项目设置](/collocation/manifest?id=mp-toutiao-setting)|
|usingComponents|Boolean| 是否启用自定义组件模式,`v2.0+`,默认为false,[编译模式区别详情](https://ask.dcloud.net.cn/article/35843)|
|navigateToMiniProgramAppIdList |Array|需要跳转的小程序列表,[详见](https://developer.toutiao.com/dev/cn/mini-app/develop/framework/basic-reference/general-configuration) |
|uniStatistics|Object|[头条小程序是否开启 uni 统计,配置方法同全局配置](/collocation/manifest?id=uniStatistics)|
#### 头条小程序项目设置@mp-toutiao-setting
......@@ -402,6 +433,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http
|workers |String |Worker 代码放置的目录。 [详见](https://q.qq.com/wiki/develop/miniprogram/frame/dispose.html#workers) |
|groupIdList |String Array |需要打开群资料卡的群号列表,详见button的open-type |
|optimization|Object| 对QQ小程序的优化配置 |
|uniStatistics|Object|[QQ小程序是否开启 uni 统计,配置方法同全局配置](/collocation/manifest?id=uniStatistics)|
#### optimization
......@@ -418,10 +450,22 @@ mp-qq只支持自定义组件模式,不存在usingComponents配置
- 在对应平台的配置下添加`"optimization":{"subPackages":true}`开启分包优化
- 目前只支持`mp-weixin``mp-qq``mp-baidu`的分包优化
- 分包优化具体逻辑:
+ 静态文件:分包下支持 static 等静态资源拷贝
+ 静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用
+ js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)
+ 自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息
**分包内静态文件示例**
```
"subPackages": [{
"root": "pages/sub",
"pages": [{
"path": "index/index"
}]
}]
```
以上面的分包为例,放在每个分包root对应目录下的静态文件会被打包到此分包内。
### 完整 manifest.json
......@@ -432,7 +476,11 @@ mp-qq只支持自定义组件模式,不存在usingComponents配置
"description": "应用描述",
"versionName": "1.0.0",
"versionCode": "100",
// app-plus 节点是 5+App 特有配置,推荐在 HBuilderX 的 manifest.json 可视化界面操作完成配置。
// 是否全局关闭uni统计
"uniStatistics": {
"enable": false//全局关闭
},
// app-plus 节点是 App 特有配置,推荐在 HBuilderX 的 manifest.json 可视化界面操作完成配置。
"app-plus": {
// HBuilderX->manifest.json->模块权限配置
"modules": {
......@@ -711,7 +759,10 @@ mp-qq只支持自定义组件模式,不存在usingComponents配置
"quickapp": {},
// 微信小程序特有配置
"mp-weixin": {
"appid": "wx开头的微信小程序appid"
"appid": "wx开头的微信小程序appid",
"uniStatistics": {
"enable": false//仅微信小程序关闭uni统计
},
},
// 百度小程序特有配置
"mp-baidu": {
......@@ -737,7 +788,7 @@ mp-qq只支持自定义组件模式,不存在usingComponents配置
}
}
```
更多配置相关的说明,请参考 [manifest.json文档说明](https://ask.dcloud.net.cn/article/94) 中的描述。可能节点的位置与普通的 5+App 有差异,请按照配置的名称进行对应。
更多配置相关的说明,请参考 [manifest.json文档说明](https://ask.dcloud.net.cn/article/94) 中的描述。可能节点的位置与普通的 App 有差异,请按照配置的名称进行对应。
# FAQ
Q:iOS 应用调用相机等权限时,弹出的提示语如何修改?
......
......@@ -8,6 +8,7 @@
|:-|:-|:-|:-|:-|
|[globalStyle](/collocation/pages?id=globalstyle)|Object|否|设置默认页面的窗口表现||
|[pages](/collocation/pages?id=pages)|Object Array|是|设置页面路径及窗口表现||
|[easycom](/collocation/pages?id=easycom)|Object|否|组件自动引入规则|2.5.5+|
|[tabBar](/collocation/pages?id=tabbar)|Object|否|设置底部 tab 的表现||
|[condition](/collocation/pages?id=condition)|Object|否|启动模式配置||
|[subPackages](/collocation/pages?id=subPackages)|Object Array|否|分包加载配置||
......@@ -48,8 +49,8 @@
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"pageOrientation": "portrait"//全局屏幕旋转设置(仅微信/QQ小程序),支持 auto / portrait / landscape
},
"pageOrientation": "portrait"//横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape
},
"tabBar": {
"color": "#7A7E83",
......@@ -79,7 +80,13 @@
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
}
},
"easycom": {
"autoscan": true, //是否自动扫描组件
"custom": {//自定义扫描规则
"uni-(.*)": "@/components/uni-$1.vue"
}
}
}
```
......@@ -89,7 +96,7 @@
|属性|类型|默认值|描述|平台差异说明|
|:-|:-|:-|:-|:-|
|navigationBarBackgroundColor|HexColor|#F7F7F7|导航栏背景颜色(同状态栏背景色)|APP与H5为#F7F7F7,小程序平台请参考相应小程序文档||
|navigationBarBackgroundColor|HexColor|#F7F7F7|导航栏背景颜色(同状态栏背景色)|APP与H5为#F7F7F7,小程序平台请参考相应小程序文档|
|navigationBarTextStyle|String|white|导航栏标题颜色及状态栏前景颜色,仅支持 black/white||
|navigationBarTitleText|String||导航栏标题文字内容||
|navigationStyle|String|default|导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看[使用注意](/collocation/pages?id=customnav)|微信小程序 7.0+、百度小程序、H5、App(2.0.3+)|
......@@ -102,7 +109,7 @@
|titleImage|String||导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址|支付宝小程序、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+、微信小程序|
|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|
|animationDuration|Number|300|窗口显示动画的持续时间,单位为 ms|App|
|app-plus|Object||设置编译到 App 平台的特定样式,配置项参考下方 [app-plus](/collocation/pages?id=app-plus)|App|
......@@ -291,9 +298,9 @@
- 页面支持通过配置 navigationStyle为custom,或titleNView为false,来禁用原生导航栏。一旦禁用原生导航,请注意阅读[自定义导航注意事项](/collocation/pages?id=customnav)
- `titleNView` 不能设置 `autoBackButton``homeButton`等属性
- `titleNView``type` 值为 `transparent` 时,导航栏为滚动透明渐变导航栏,默认只有button,滚动后标题栏底色和title文字会渐变出现; `type``float` 时,导航栏为悬浮标题栏,此时页面内容上顶到了屏幕顶部,包括状态栏,但导航栏悬浮盖在页面上方,一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。
- `titleNView``type` 值为 `transparent` 时,导航栏为滚动透明渐变导航栏,默认只有button,滚动后标题栏底色和title文字会渐变出现; `type``float` 时,导航栏为悬浮标题栏,此时页面内容上顶到了屏幕顶部,包括状态栏,但导航栏悬浮盖在页面上方,一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。
- `titleNView``type` 值为 `transparent` 时,App-nvue 2.4.4+ 支持
-`titleNView` 配置 `buttons` 后,监听按钮的点击事件,vue 页面及 nvue 的uni-app编译模式参考:[onNavigationBarButtonTap](/frame?id=页面生命周期)、nvue 的weex编译模式参考:[uni.onNavigationBarButtonTap](/use-weex?id=onnavigationbarbuttontap)
-`titleNView` 配置 `buttons` 后,监听按钮的点击事件,vue 页面及 nvue 的weex编译模式参考:[uni.onNavigationBarButtonTap](/use-weex?id=onnavigationbarbuttontap)
-`titleNView` 配置 `searchInput` 后,相关的事件监听参考:[onNavigationBarSearchInputChanged 等](/frame?id=页面生命周期)
- App下原生导航栏的按钮如果使用字体图标,注意检查字体库的名字(font-family)是否使用了默认的 iconfont,这个名字是保留字,不能作为外部引入的字体库的名字,需要调整为自定义的名称,否则无法显示。
- 想了解各种导航栏的开发方法,请详读[导航栏开发指南](https://ask.dcloud.net.cn/article/34921)
......@@ -647,14 +654,74 @@ h5 平台下拉刷新动画,只有 circle 类型。
**注意事项**
- ```titleImage```仅支持https地址,设置了```titleImage```会替换页面文字标题
- ```backgroundImageUrl```支持网络地址和本地地址,尽量使用绝对地址
- `titleImage`仅支持https地址,设置了`titleImage`会替换页面文字标题
- `backgroundImageUrl`支持网络地址和本地地址,尽量使用绝对地址
- 部分配置可能会只在真机运行的时候生效,支付宝未来应该会改善
# FAQ
## FAQ
- Q:如何取消原生导航栏?或自定义导航
- A:参考[导航栏开发指南](http://ask.dcloud.net.cn/article/34921)
# easycom
> `HBuilderX 2.5.5`起支持`easycom`组件模式。
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。`easycom`将其精简为一步。
只要组件安装在项目的components目录下,并符合`components/组件名称/组件名称.vue`目录结构。就可以不用引用、注册,直接在页面中使用。
如下:
```html
<template>
<view class="container">
<uni-list>
<uni-list-item title="第一行"></uni-list-item>
<uni-list-item title="第二行"></uni-list-item>
</uni-list>
</view>
</template>
<script>
// 这里不用import引入,也不需要在components内注册uni-list组件。template里就可以直接用
export default {
data() {
return {
}
}
}
</script>
```
不管components目录下安装了多少组件,`easycom`打包后会自动剔除没有使用的组件,对组件库的使用尤为有好。
组件库批量安装,随意使用,自动按需打包。以官方的`uni-ui`为例,在HBuilderX新建项目界面选择`uni-ui`项目模板,只需在页面中敲u,拉出大量组件代码块,直接选择,即可使用。大幅提升开发效率,降低使用门槛。
[uni-app插件市场](https://ext.dcloud.net.cn/)下载符合`components/组件名称/组件名称.vue`目录结构的组件,均可直接使用。
`easycom`是自动开启的,不需要手动开启,有需求时可以在`pages.json``easycom`节点进行个性化设置,如关闭自动扫描,或自定义扫描匹配组件的策略。设置参数如下:
|属性 |类型 |默认值 |描述 |
|:- |:- |:- |:- |
|autoscan |Boolean|true |是否开启自动扫描,开启后将会自动扫描符合`components/组件名称/组件名称.vue`目录结构的组件 |
|custom |Object |- |以正则方式自定义组件匹配规则。如果`autoscan`不能满足需求,可以使用`custom`自定义匹配规则 |
**自定义easycom配置的示例**
```
"easycom": {
"autoscan": true,
"custom": {
"uni-(.*)": "@/components/uni-$1.vue"
}
}
```
**说明**
- `easycom`方式引入的组件无需在页面内`import`,也不需要在`components`内声明,即可在任意页面使用
- `easycom`方式引入组件不是全局引入,而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件
- 在组件名完全一致的情况下,`easycom`引入的优先级低于手动引入(区分连字符形式与驼峰形式)
- 考虑到编译速度,直接在`pages.json`内修改`easycom`不会触发重新编译,需要改动页面内容触发。
- `easycom`只处理vue组件,不处理小程序组件。暂不处理后缀为.nvue的组件,建议参考uni ui,使用vue后缀,同时兼容nvue页面。
- `nvue`页面里的`.vue`后缀的组件,同样支持`easycom`
# tabBar
如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。
......@@ -673,7 +740,8 @@ h5 平台下拉刷新动画,只有 circle 类型。
|color|HexColor|是||tab 上的文字默认颜色||
|selectedColor|HexColor|是||tab 上的文字选中时的颜色||
|backgroundColor|HexColor|是||tab 的背景色||
|borderStyle|String|否|black|tabbar 上边框的颜色,仅支持 black/white|App 2.3.4+ 支持其他颜色值|
|borderStyle|String|否|black|tabbar 上边框的颜色,可选值 black/white|App 2.3.4+ 支持其他颜色值|
|blurEffect|String|否|none|iOS 高斯模糊效果,可选值 dark/extralight/light/none(参考:[使用说明](https://ask.dcloud.net.cn/article/36617))|App 2.4.0+ 支持|
|list|Array|是||tab 的列表,详见 list 属性说明,最少2个、最多5个 tab||
|position|String|否|bottom|可选值 bottom、top|top 值仅微信小程序支持|
|fontSize|String|否|10px|文字默认大小|App 2.3.4+|
......@@ -687,7 +755,7 @@ h5 平台下拉刷新动画,只有 circle 类型。
|属性|类型|必填|说明|
|:-|:-|:-|:-|
|pagePath|String|是|页面路径,必须在 pages 中先定义|
|text|String|是|tab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标|
|text|String|是|tab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标|
|iconPath|String|否|图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标|
|selectedIconPath|String|否|选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效|
......@@ -758,7 +826,7 @@ midButton没有pagePath,需监听点击事件,自行处理点击后的行为
|path|String|是|启动页面路径|
|query|String|否|启动参数,可在页面的 [onLoad](use?id=页面生命周期) 函数里获得|
**注意:**5+App 里真机运行可直接打开配置的页面,微信开发者工具里需要手动改变编译模式,如下图:
**注意:** 在 App 里真机运行可直接打开配置的页面,微信开发者工具里需要手动改变编译模式,如下图:
<div style="text-align:center;">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/condition.png" />
......@@ -784,11 +852,7 @@ midButton没有pagePath,需监听点击事件,自行处理点击后的行为
# subPackages
分包加载配置
**注意:**此配置为小程序的分包加载机制。在5+App里始终为整包。
- 微信、百度小程序每个分包的大小是2M,总体积一共不能超过8M。
- 支付宝小程序每个分包的大小是2M,总体积一共不能超过4M。
分包加载配置,此配置为小程序的分包加载机制。在App里始终为整包。
subPackages 节点接收一个数组,数组每一项都是应用的子包,其属性值如下:
......@@ -797,12 +861,15 @@ subPackages 节点接收一个数组,数组每一项都是应用的子包,
|root|String|是|子包的根目录|
|pages|Array|是|子包由哪些页面组成,参数同 [pages](/collocation/pages?id=pages)|
**注意:**
- ```subPackages``` 里的pages的路径是 ``root`` 下的相对路径,不是全路径。
- `uni-app`内支持对微信小程序、QQ小程序、百度小程序分包优化,[关于分包优化的说明](/collocation/manifest?id=关于分包优化的说明)
- 针对`vendor.js`过大的情况可以使用运行时压缩代码
+ `HBuilderX`创建的项目勾选`运行-->运行到小程序模拟器-->运行时是否压缩代码`
**注意:**
- ```subPackages``` 里的pages的路径是 ``root`` 下的相对路径,不是全路径。
- 微信、百度小程序每个分包的大小是2M,总体积一共不能超过8M。
- 支付宝小程序每个分包的大小是2M,总体积一共不能超过4M。
- 分包下支持独立的 ```static``` 目录,用来对静态资源进行分包。
- `uni-app`内支持对微信小程序、QQ小程序、百度小程序分包优化,[关于分包优化的说明](/collocation/manifest?id=关于分包优化的说明)
- 针对`vendor.js`过大的情况可以使用运行时压缩代码
+ `HBuilderX`创建的项目勾选`运行-->运行到小程序模拟器-->运行时是否压缩代码`
+ `cli`创建的项目可以在`pacakge.json`中添加参数`--minimize`,示例:`"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"`
**使用方法:**
......@@ -816,9 +883,11 @@ subPackages 节点接收一个数组,数组每一项都是应用的子包,
│ └─login
│ └─login.vue
├─pagesA
│ ├─static
│ └─list
│ └─list.vue
├─pagesB
│ ├─static
│ └─detail
│ └─detail.vue
├─static
......
......@@ -205,6 +205,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)| 可选择输入框|
|[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)| 悬浮按钮|
......
......@@ -39,16 +39,17 @@
* [canvas](component/canvas.md)
* webview
* [web-view](component/web-view.md)
* 小程序开放能力组件
* 广告
* [ad](component/ad.md)
* 小程序开放能力组件
* [official-account](component/official-account.md)
* [open-data](component/open-data.md)
* App nvue专用组件
* [barcode](component/barcode.md)
* [list](component/list.md)
* [barcode](component/barcode.md)
* [list](component/list.md)
* [cell](component/cell.md)
* [recycle-list](component/recycle-list.md)
* [waterfall](component/waterfall.md)
* [recycle-list](component/recycle-list.md)
* [waterfall](component/waterfall.md)
* [refresh](component/refresh.md)
* 扩展组件(uni ui)
* [uni-ui整体介绍](component/README?id=uniui)
......@@ -56,6 +57,7 @@
* [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)
* [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)
......@@ -76,6 +78,8 @@
* [SwiperDot 轮播图指示点](https://ext.dcloud.net.cn/plugin?id=284)
* [Tag 标签](https://ext.dcloud.net.cn/plugin?id=35)
* [更多插件市场的组件](https://ext.dcloud.net.cn/?cat1=2)
* 页面属性配置节点
* [page-meta](component/page-meta.md)
* [配置微信小程序插件](component/mp-weixin-plugin.md)
* [原生组件说明](component/native-component.md)
<div class="contact-box">
......
### 激励视频广告
文档地址已迁移至:[https://uniapp.dcloud.io/api/ad/rewarded-video-ad/](https://uniapp.dcloud.io/api/ad/rewarded-video-ad)
\ No newline at end of file
#### ad
广告组件
应用内展示的广告组件,可用于banner或信息流。
广告能力在不同小程序端实现不同,使用时需注意用[条件编译](https://uniapp.dcloud.io/platform)调用不同平台的代码。
- app端的广告源由腾讯广点通、头条穿山甲、360广告联盟提供,DCloud负责聚合
- 小程序端的广告由小程序平台提供
- App平台:无需编码,在打包App时可直接勾选广告位,[详见](https://dcloud.io/dad.html)
- 微信小程序:[规范文档](https://developers.weixin.qq.com/miniprogram/dev/component/ad.html)
- 百度小程序:[规范文档](https://smartprogram.baidu.com/docs/develop/component/ad/)
- 支付宝小程序:不支持此能力
- 头条小程序:仅小游戏可用,小程序不可用,不适用于uni-app
- QQ小程序:[规范文档](https://q.qq.com/wiki/develop/miniprogram/component/open-ability/ad.html)
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.5.2+)|x|√|x|√|√|√|
**开通配置广告**
开通广告步骤:
1. 开通广告
需在广告平台后台操作:
* App平台:[https://uniad.dcloud.net.cn/](https://uniad.dcloud.net.cn/)
* 小程序平台:在各自的小程序管理后台操作。
2. 申请广告位id
在各位后台申请广告位id
3. 在页面合适位置编写代码,放置ad组件,配上广告位id(app是adpid,微信、头条、qq小程序是unit-id,百度小程序是apid)
4. App端打包后生效,打包时必须选择要集成的广告SDK(穿山甲、广点通、360联盟)。
**属性说明**
|属性名|类型|默认值|说明|平台差异|
|:-|:-|:-|:-|:-|
|data|Object|可选|广告数据,通过 plus.ad.getAds (参考示例代码),设置后adpid将无效|App|
|adpid|String||uni-AD App广告位id,在[uni-AD官网](https://uniad.dcloud.net.cn/)申请广告位|App|
|unit-id|String||广告单元id,可在小程序管理后台的流量主模块新建|微信小程序、头条小程序(最低版本1.19.0+)、QQ小程序|
|ad-intervals|number||广告自动刷新的间隔时间,单位为秒,参数值必须大于等于30(该参数不传入时 Banner 广告不会自动刷新)|微信小程序(基础库2.3.1+)|
|appid|String||小程序应用 ID|百度小程序|
|apid|String||小程序广告位 ID|百度小程序|
|ad-left|Number||type为feeds时广告左边距(px),必须大于0|QQ小程序|
|ad-top|Number||type为feeds时广告上边距(px),必须大于0|QQ小程序|
|ad-width|Number||type为feeds时广告宽度(px),默认100%,最大值为屏幕宽度,最小值为265|QQ小程序|
|ad-height|Number||type为feeds时广告高度(px),最小85,最大160|QQ小程序|
|type|String|feed||QQ小程序、百度小程序、头条小程序|
|@load|EventHandle||广告加载成功的回调||
|@error|EventHandle||广告加载失败的回调,event.detail = {errCode: }||
|@close|EventHandle||广告关闭的回调||
|@downloadchange|EventHandle||下载类广告的状态, event.detail = {status: }|仅App Android 支持|
**type属性 百度**
广告类型:banner/feed,需和百青藤平台上的代码位类型相匹配。
**type属性 头条**
广告的类型,默认 bannner,具体类型有:banner、video(视频)、large(大图)、lImg(左图右文)、rImg(右图左文),默认值为 banner
**type属性 QQ**
|值|说明|
|:-|:-|
|banner|banner广告 分 1 图和 3 图 1 文。3 图 1 文广告的背景色、文字颜色会根据祖先节点的背景色调整,分三种情况深色背景、浅色背景和白色背景|
|swip|翻页广告,1 图 1 文,会覆盖整个小程序,显示、隐藏逻辑需开发者自行控制|
|card|卡片广告,1 图,可关闭|
|feeds|自定义广告,可灵活控制广告上、左边距和宽高,以适应界面其他内容。可监听size事件获取实际宽高|
App和微信小程序的ad组件没有type属性,可以用于banner,也可以用于信息流。
**注意**
- 无广告时没有高度,关闭广告时释放高度,宽度由父容器决定
- App 平台,因广告组件内部获得广告数据计算后设置组件大小,会出现界面抖动问题,可以提前通过 plus.ad.getAds 获得广告数据,设置 data 后 adpid 将无效
- 微信小程序 `<ad>` 组件不支持触发 tap 等触摸相关事件
- Android 平台 nvue的 `<list>` 组件中使用 `<ad>` 时,必须指定宽度属性`<ad width="750rpx" />`,因为 `<list>` 有自动的内存回收机制,不在屏幕范围的组件不被创建,组件内部无法获取大小
- 广点通概率出现重复广告,可根据需求请求广告数据,推荐单次大于1条(plus.ad.getAds) 来降低重复率
- vue 页面使用 `<ad>` 暂不支持非 V3 编译,manifest.json 可配置
- `<recycle-list>` 暂不支持 `<ad>`
- app-vue|QQ是客户端原生组件,层级最高无法被覆盖,app-nvue|微信|头条没有层级覆盖问题
**@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)
**@downloadchange status**
|代码|说明|
|:-|:-|
|-1| 非下载|
|0|未开始下载|
|1|下载中|
|2|下载暂停|
|3|下载完成后|
|4|下载失败|
|5| 下载取消|
|6|已安装|
**示例:**
```html
<template>
<view class="content">
<!-- App平台 示例 1 -->
<view class="ad-view">
<ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror" @downloadchange="ondownloadchange"></ad>
</view>
<!-- App平台 示例 2 -->
<!-- 需要时可自定义属性,监听到 error 回调后(e.target可以取到),开发者可以针对性的处理,比如隐藏广告组件的父容器,以保证用户体验 -->
<view class="ad-view" v-for="adItem in adList" :key="adItem.id">
<ad :adpid="adItem.adpid" :data-xx="adItem.id"></ad>
</view>
<!-- App平台 示例 3 (手动请求广告数据 仅App平台支持) -->
<view>
<button @click="getAdData">Get ad data</button>
</view>
<view class="ad-view">
<ad :data="adData"></ad>
</view>
<!-- 微信小程序 -->
<view class="ad-view">
<ad unit-id="" ad-intervals="100"></ad>
</view>
<!-- 百度小程序 -->
<view class="ad-view">
<ad appid="" apid="" type="feed"></ad>
</view>
<!-- 多平台兼容 -->
<view class="ad-view">
<ad adpid="1111111111" unit-id="" appid="" apid="" type="feed"></ad>
</view>
</view>
</template>
```
```javascript
export default {
data() {
return {
title: 'uni-app ad',
adList: [],
adData: {}
}
},
onReady: function (e) {
// 显示 4 个广告
for (let i = 0; i < 4; i++) {
this.adList.push({
id: i,
adpid: "1111111111"
})
}
},
methods: {
getAdData: function (e) {
// 仅APP平台支持
plus.ad.getAds({
adpid: '', // dcloud 后台创建
count: 1, // 广告数量,默认 3
width: 300 // 根据宽度获取合适的广告(单位px)
},
(res) => {
this.adData = res.ads[0];
console.log(this.adData);
},
(err) => {
console.log(err);
}
)
},
onload(e) {
console.log("onload");
},
onclose(e) {
console.log("onclose: " + e.detail);
},
onerror(e) {
console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
},
ondownloadchange(e) {
console.log("downloadchanged: " + JSON.stringify(e.detail));
}
}
}
```
``` css
<style>
.content {
background-color: #DBDBDB;
padding: 10px;
}
.ad-view {
background-color: #FFFFFF;
margin-bottom: 10px;
}
</style>
```
**激励视频广告**
文档地址:[https://uniapp.dcloud.io/api/ad/rewarded-video-ad](https://uniapp.dcloud.io/api/ad/rewarded-video-ad)
**注意**
- 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端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)
......@@ -3,7 +3,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|x|x|
......
......@@ -66,7 +66,7 @@ Boolean| 是| 是否开启闪光灯|可取值true或false,true表示打开闪
##### 事件
##### marked
> 条码识别成功事件
> 条码识别成功事件 {event.detail}
###### 返回参数说明
参数|类型 |说明
......
......@@ -3,7 +3,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|
......
......@@ -19,8 +19,10 @@
* canvas 标签默认宽度 300px、高度 225px,动态修改 canvas 大小后需要重新绘制。
* 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。
* canvas 在微信小程序、百度小程序、QQ小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,参考 [native-component](/component/native-component)
* canvas 在App端 vue 页面不是原生组件。App-nvue下如需使用canvas,暂未封装为uni API,可参考[文档](https://github.com/dcloudio/NvueCanvasDemo)使用。目前对nvue的开发者仍然建议在使用canvas时单独起一个vue页面,或者用web-view组件。
* 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,但却比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端非常流畅,而小程序端做不到这么流畅的动画。
**示例:**
......@@ -70,4 +72,14 @@ export default {
canvas的常用用途有图表和图片处理,在uni-app插件市场有大量基于canvas的插件,可搜索 [图表](https://ext.dcloud.net.cn/search?q=图表)[头像裁剪](https://ext.dcloud.net.cn/search?q=头像裁剪)[海报](https://ext.dcloud.net.cn/search?q=海报)[二维码](https://ext.dcloud.net.cn/search?q=%E4%BA%8C%E7%BB%B4%E7%A0%81)
关于图表,H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足,推荐使用[uChart组件](https://ext.dcloud.net.cn/plugin?id=271)。但由于小程序和App在跟手操作和js操作帧动画方面性能不如web,如果这方面的需求,建议在web-view组件中使用html内嵌原版echart。
关于图表
- H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足。如考虑小程序,推荐使用全端可用的[uChart](https://ext.dcloud.net.cn/plugin?id=271)
- 如只考虑H5端,也可以继续使用echart、f2等常规web图表。
- 如不考虑小程序,那么App端和H5,也可以通过renderjs技术来使用echart、f2等web图表,功能性能比uchart更好。[什么是renderjs](https://uniapp.dcloud.io/frame?id=renderjs)[基于renderjs使用echart的示例](https://ext.dcloud.net.cn/plugin?id=1207)
**nvue页面如何使用canvas**
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)
......@@ -18,7 +18,7 @@
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|x|√|
|√|√|√||√|x|√|
**属性说明**
......@@ -74,7 +74,7 @@
<template>
<view class="page">
<video class="video" id="demoVideo" :controls="disable" :show-fullscreen-btn="disable" :show-play-btn="disable"
:show-center-play-btn="disable" :enable-progress-gesture="disable" @fullscreenchange="fullscreenchange" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4">
:show-center-play-btn="disable" :enable-progress-gesture="disable" @fullscreenchange="fullscreenchange" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4">
<cover-view class="controls-title">简单的自定义 controls</cover-view>
<cover-image class="controls-play img" @click="play" src="../../../static/play.png"></cover-image>
<cover-image class="controls-pause img" @click="pause" src="../../../static/pause.png"></cover-image>
......
......@@ -4,7 +4,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√(2.2.3+)|√|√|√|√|√|
......@@ -24,7 +24,7 @@
|平台|type 有效值|
|:-:|:-:|
|5+App、H5、微信小程序、QQ小程序|success, success_no_circle, info, warn, waiting, cancel, download, search, clear|
|App、H5、微信小程序、QQ小程序|success, success_no_circle, info, warn, waiting, cancel, download, search, clear|
|支付宝小程序|info, warn, waiting, cancel, download, search, clear, success, success_no_circle,loading|
|百度小程序|success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect|
......
......@@ -6,7 +6,7 @@
|:-|:-|:-|:-|:-|
|src|String||图片资源地址||
|mode|String|'scaleToFill'|图片裁剪、缩放的模式|<div style="width:68px;"></div>|
|lazy-load|Boolean|false|图片懒加载。只针对page与scroll-view下的image有效|微信小程序、5+APP、百度小程序、头条小程序|
|lazy-load|Boolean|false|图片懒加载。只针对page与scroll-view下的image有效|微信小程序、App、百度小程序、头条小程序|
|fade-show|Boolean|true|图片显示动画效果|仅App-nvue 2.3.4+ Android有效|
|@error|HandleEvent||当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}||
|@load|HandleEvent||当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}|&nbsp;|
......
......@@ -15,7 +15,7 @@
|disabled|Boolean|false|是否禁用||
|maxlength|Number|140|最大输入长度,设置为 -1 的时候不限制最大长度||
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|App、微信小程序、百度小程序、QQ小程序|
|focus|Boolean|false|获取焦点。在 H5 平台聚焦后软键盘是否跟随弹出,取决于当前浏览器本身的规范(策略)。||
|focus|Boolean|false|获取焦点。|在 H5 平台能否聚焦以及软键盘是否跟随弹出,取决于当前浏览器本身的实现。|
|confirm-type|String|done|设置键盘右下角按钮的文字,仅在 type="text" 时生效。||
|confirm-hold|Boolean|false|点击键盘右下角按钮时是否保持键盘不收起|App、微信小程序、支付宝小程序、百度小程序、QQ小程序|
|cursor|Number||指定focus时的光标位置||
......
......@@ -32,7 +32,7 @@ app端nvue专用组件。在app-nvue下,如果是长列表,使用list组件
> - 相同方向 `<list>` 或者 `<scroll-view>` 互相嵌套时,Android 平台子 `<list>` 不可滚动,iOS 可以,iOS 有Bounce效果, Android仅可滚动时有
> - `<list>` 需要显式的设置其宽高,可使用 position: absolute; 定位或 width、height 设置其宽高值。
> - list是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
> - Android 平台,因 `<list>` 高效内存回收机制,不在屏幕可见区域的组件不会被创建,导致一些内部需要计算宽高的组件无法正常工作,例如 `<slider>`、`<progress>`、`<swiper>`
#### 子组件
`<list>` 的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。
......@@ -64,6 +64,33 @@ app端nvue专用组件。在app-nvue下,如果是长列表,使用list组件
- `loadmore` 事件
如果列表滚动到底部将会立即触发这个事件,你可以在这个事件的处理函数中加载下一页的列表项。 如果未触发,请检查是否设置了loadmoreoffset的值,建议此值设置大于0
如何重置 loadmore
```
<template>
<list ref="list">
<cell v-for="num in lists">
<text>{{num}}</text>
</cell>
</list>
</template>
<script>
export default {
data () {
return {
lists: ['A', 'B', 'C', 'D', 'E']
}
},
methods: {
// 重置 loadmore
resetLoadMore() {
this.$refs["list"].resetLoadmore();
}
}
}
</script>
```
- `scroll` 事件
列表发生滚动时将会触发该事件,事件的默认抽样率为 10px,即列表每滚动 10px 触发一次,可通过属性 offset-accuracy 设置抽样率。
......
......@@ -6,9 +6,9 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x(见下)|x|√|x|√|x|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序
|:-: |:-:|:-:|:-:|:-:|:-:|:-:|
|x(见下)|x |√ |x |√ |√(基础库版本>=1.52.0) |√ |
- App的实时音视频播放,不是使用 live-player,而是直接使用 video 组件。
- H5 下可用 video 播放符合 HTML5 规范的流媒体,rtmp 等非 HTML5 标准的流媒体格式,仅在部分支持 flash 的国内手机浏览器上可播放。在 pc 浏览器上,需要安装 flash 插件才能播放 rtmp 等格式。
......
......@@ -23,7 +23,8 @@
属性|类型 |默认值|必填|说明 :--|:--|:--|:--|:--|
url|string| |是|推流地址,支持RTMP协议。
mode |string| |否|推流视频模式,可取值:SD(标清), HD(高清), FHD(超清)。
mode |string|SD|否|推流视频模式,可取值:SD(标清), HD(高清), FHD(超清)。
aspect |string|3:2|否|视频宽高比例
muted|Boolean|false|否|是否静音。
enable-camera|Boolean|true|否|开启摄像头。
auto-focus|Boolean|true|否|自动聚集。
......@@ -34,10 +35,9 @@ whiteness|Number|0|否|美白,取值范围 0-9(iOS取值范围为1) ,0
```html
<template>
<view>
<live-pusher id='livePusher1' class="livePusher" ref="livePusher" url=""
<live-pusher id='livePusher1' ref="livePusher" class="livePusher" url=""
mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
aspect="9:16" postition="absolute"
@statechange="statechange" @netstatus="netstatus" @error = "error"
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
></live-pusher>
<button class="btn" @click="start">开始推流</button>
<button class="btn" @click="pause">暂停推流</button>
......@@ -57,7 +57,8 @@ whiteness|Number|0|否|美白,取值范围 0-9(iOS取值范围为1) ,0
data: {
fil: true
},
onReady() {
onReady() {
// 注意:需要在onReady中 或 onLoad 延时
this.context = uni.createLivePusherContext("livePusher", this);
},
methods: {
......
......@@ -50,7 +50,7 @@
|width|标注图标宽度|Number|否|默认为图片实际宽度|App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序|
|height|标注图标高度|Number|否|默认为图片实际高度|App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序|
|callout|自定义标记点上方的气泡窗口|Object|否|支持的属性见下表,可识别换行符。|App-nvue 2.1.5+|
|label|为标记点旁边增加标签|Object|否|支持的属性见下表,可识别换行符。|App-nvue 2.1.5+、微信小程序、H5、5+APP、百度小程序|
|label|为标记点旁边增加标签|Object|否|支持的属性见下表,可识别换行符。|App-nvue 2.1.5+、微信小程序、H5、App、百度小程序|
|anchor|经纬度在标注图标的锚点,默认底边中点|Object|否|{x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
**marker 上的气泡 callout**
......
......@@ -34,19 +34,19 @@
|:-|:-|:-|:-|:-|
|direction|String|none|movable-view的移动方向,属性值有all、vertical、horizontal、none||
|inertia|Boolean|false|movable-view是否带有惯性|微信小程序、App、H5、百度小程序|
|out-of-bounds|Boolean|false|超过可移动区域后,movable-view是否还可以移动|微信小程序、5+App、H5、百度小程序|
|out-of-bounds|Boolean|false|超过可移动区域后,movable-view是否还可以移动|微信小程序、App、H5、百度小程序|
|x|Number / String||定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画||
|y|Number / String||定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画||
|damping|Number|20|阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快|微信小程序、5+App、H5、百度小程序|
|friction|Number|2|摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值|微信小程序、5+App、H5、百度小程序|
|damping|Number|20|阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快|微信小程序、App、H5、百度小程序|
|friction|Number|2|摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值|微信小程序、App、H5、百度小程序|
|disabled|Boolean|false|是否禁用||
|scale|Boolean|false|是否支持双指缩放,默认缩放手势生效区域是在movable-view内|微信小程序、5+App、H5|
|scale-min|Number|0.5|定义缩放倍数最小值|微信小程序、5+App、H5|
|scale-max|Number|10|定义缩放倍数最大值|微信小程序、5+App、H5|
|scale-value|Number|1|定义缩放倍数,取值范围为 0.5 - 10|微信小程序、5+App、H5|
|animation|Boolean|true|是否使用动画|微信小程序、5+App、H5、百度小程序|
|scale|Boolean|false|是否支持双指缩放,默认缩放手势生效区域是在movable-view内|微信小程序、App、H5|
|scale-min|Number|0.5|定义缩放倍数最小值|微信小程序、App、H5|
|scale-max|Number|10|定义缩放倍数最大值|微信小程序、App、H5|
|scale-value|Number|1|定义缩放倍数,取值范围为 0.5 - 10|微信小程序、App、H5|
|animation|Boolean|true|是否使用动画|微信小程序、App、H5、百度小程序|
|@change|EventHandle||拖动过程中触发的事件,event.detail = {x: x, y: y, source: source},其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData)||
|@scale|EventHandle||缩放过程中触发的事件,event.detail = {x: x, y: y, scale: scale},|微信小程序、5+App、H5、百度小程序|
|@scale|EventHandle||缩放过程中触发的事件,event.detail = {x: x, y: y, scale: scale},|微信小程序、App、H5、百度小程序|
除了基本事件外,movable-view提供了两个特殊事件
......
......@@ -107,6 +107,8 @@ nvue页面全部都是原生组件,互相之间没有层级问题。
部分小程序通过修改了自带的webview内核,实现了webview也可以使用rom主题字体,比如微信、qq、支付宝;其他小程序及app-vue下,webview仍然无法渲染为rom主题字体。
app端若在意字体不一致的问题,建议直接使用nvue
不管Android字体问题、还是同层渲染问题,微信小程序都是依靠自带一个几十M的定制webview实现的,这对于App而言增加了太大的体积,不现实
不管Android字体问题、还是同层渲染问题,微信小程序都是依靠自带一个几十M的定制webview实现的,这对于App而言增加了太大的体积,不如使用nvue解决这类问题。
app端若在意字体不一致的问题,有2种解决建议:
1. 直接使用nvue。nvue是纯原生渲染,不存在webview渲染和原生字体不一致的问题。
2. app端不使用系统webview,而是使用x5浏览器内核。详见:[https://ask.dcloud.net.cn/article/36806](https://ask.dcloud.net.cn/article/36806)
......@@ -9,7 +9,7 @@
|url|String||应用内的跳转链接,值为相对路径或绝对路径,如:"../first/first","/pages/first/first",注意不能加 ``.vue`` 后缀||
|open-type|String|navigate|跳转方式||
|delta|Number||当 open-type 为 'navigateBack' 时有效,表示回退的层数||
|animation-type|String|pop-in/out|当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果,详见:[窗口动画](api/router?id=animation)|5+App|
|animation-type|String|pop-in/out|当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果,详见:[窗口动画](api/router?id=animation)|App|
|animation-duration|Number|300|当 open-type 为 navigate、navigateBack 时有效,窗口显示/关闭动画的持续时间。|App|
|hover-class|String|navigator-hover|指定点击时的样式类,当hover-class="none"时,没有点击态效果||
|hover-stop-propagation|Boolean|false|指定是否阻止本节点的祖先节点出现点击态|微信小程序|
......
......@@ -4,7 +4,7 @@
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|x|√|
......
#### page-meta
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.6.3+)|√(2.6.3+)|√|x|x|x|x|
页面属性配置节点,用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。
|属性|类型|默认值|必填|说明|最低版本
|:-|:-|:-|:-|:-|:-|
|background-text-style|string||否|下拉背景字体、loading 图的样式,仅支持 dark 和 light|微信基础库 2.9.0|
|background-color|string||否|窗口的背景色,必须为十六进制颜色值|微信基础库 2.9.0|
|background-color-top|string||否|顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持|微信基础库 2.9.0|
|background-color-bottom|string||否|底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持|微信基础库 2.9.0|
|scroll-top|string|""|否|滚动位置,可以使用 px 或者 rpx 为单位,在被设置时,页面会滚动到对应位置|微信基础库 2.9.0|
|scroll-duration|number|300|否|滚动动画时长|微信基础库 2.9.0|
|page-style|string|""|否|页面根节点样式,页面根节点是所有页面节点的祖先节点,相当于 HTML 中的 body 节点|微信基础库 2.9.0|
|root-font-size|string|""|否|页面的根字体大小,页面中的所有 rem 单位,将使用这个字体大小作为参考值,即 1rem 等于这个字体大小|微信基础库 2.9.0|
|@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|
#### 示例代码
```
<template>
<page-meta
:background-text-style="bgTextStyle"
:background-color="bgColor"
:background-color-top="bgColorTop"
:background-color-bottom="bgColorBottom"
:scroll-top="scrollTop"
page-style="color: green"
root-font-size="16px"
>
<navigation-bar
:title="nbTitle"
:loading="nbLoading"
:front-color="nbFrontColor"
:background-color="nbBackgroundColor"
/>
</page-meta>
</template>
<script>
export default {
data() {
return {
bgTextStyle: 'dark',
scrollTop: '200rpx',
bgColor: '#ff0000',
bgColorTop: '#00ff00',
bgColorBottom: '#0000ff',
nbTitle: '标题',
nbLoading: false,
nbFrontColor: '#000000',
nbBackgroundColor: '#ffffff'
}
},
onLoad() {
},
methods: {
}
}
</script>
```
......@@ -64,8 +64,8 @@
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|value|String||表示选中的时间,格式为"hh:mm"||
|start|String||表示有效时间范围的开始,字符串格式为"hh:mm"|5+App 不支持|
|end|String||表示有效时间范围的结束,字符串格式为"hh:mm"|5+App 不支持|
|start|String||表示有效时间范围的开始,字符串格式为"hh:mm"|App 不支持|
|end|String||表示有效时间范围的结束,字符串格式为"hh:mm"|App 不支持|
|@change|EventHandle||value 改变时触发 change 事件,event.detail = {value: value}||
|@cancel|EventHandle||取消选择时触发||
|disabled|Boolean|false|是否禁用|&nbsp;|
......
......@@ -16,9 +16,18 @@
|scroll-with-animation |Boolean |false |在设置滚动条位置时使用动画过渡 | |
|enable-back-to-top |Boolean |false |iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 |微信小程序 |
|show-scrollbar |Boolean |false |控制是否出现滚动条| App-nvue 2.1.5+ |
|refresher-enabled |Boolean |false |开启自定义下拉刷新|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|refresher-threshold |number |45 |设置自定义下拉刷新阈值|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|refresher-default-style|string |"black"|设置自定义下拉刷新默认样式,支持设置 black,white,none,none 表示不使用默认样式|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|refresher-background |string |"#FFF" |设置自定义下拉刷新区域背景颜色|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|refresher-triggered |boolean |false |设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|@scrolltoupper |EventHandle| |滚动到顶部/左边,会触发 scrolltoupper 事件 | |
|@scrolltolower |EventHandle| |滚动到底部/右边,会触发 scrolltolower 事件 | |
|@scroll |EventHandle| |滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |&nbsp;|
|@refresherpulling |EventHandle| |自定义下拉刷新控件被下拉|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|@refresherrefresh |EventHandle| |自定义下拉刷新被触发|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|@refresherrestore |EventHandle| |自定义下拉刷新被复位|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|@refresherabort |EventHandle| |自定义下拉刷新被中止|app-vue 2.5.12+,微信小程序基础库2.10.1+|
使用竖向滚动时,需要给 ``<scroll-view>`` 一个固定高度,通过 css 设置 height。
......@@ -92,7 +101,57 @@ export default {
}
}
```
**自定义下拉刷新**
```html
<template>
<view>
<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
:refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"></scroll-view>
</view>
</template>
```
```javascript
<script>
export default {
data() {
return {
triggered: false
}
},
onLoad() {
this._freshing = false;
setTimeout(() => {
this.triggered = true;
}, 1000)
},
methods: {
onPulling(e) {
console.log("onpulling", e);
},
onRefresh() {
if (this._freshing) return;
this._freshing = true;
setTimeout(() => {
this.triggered = false;
this._freshing = false;
}, 3000)
},
onRestore() {
this.triggered = 'restore'; // 需要重置
console.log("onRestore");
},
onAbort() {
console.log("onAbort");
}
}
}
</script>
```
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/scroll-view.png)
**Tips**
......
......@@ -23,13 +23,12 @@
|acceleration|Boolean|false|当开启时,会根据滑动速度,连续滑动多屏|支付宝小程序|
|disable-programmatic-animation|Boolean|false|是否禁用代码变动触发 swiper 切换时使用动画。|支付宝小程序|
|display-multiple-items|Number|1|同时显示的滑块数量|支付宝小程序不支持|
|skip-hidden-item-layout|Boolean|false|是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息|5+App、微信小程序|
|disable-touch|Boolean|false|是否禁止用户 touch 操作|App 2.5.5+、H5 2.5.5+、支付宝小程序|
|skip-hidden-item-layout|Boolean|false|是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息|App、微信小程序|
|disable-touch|Boolean|false|是否禁止用户 touch 操作|App 2.5.5+、H5 2.5.5+、支付宝小程序、头条小程序(只在初始化时有效,不能动态变更)|
|touchable|Boolean|true|是否监听用户的触摸事件,只在初始化时有效,不能动态变更|头条小程序(uni-app 2.5.5+ 推荐统一使用 disable-touch)|
|easing-function|String|default|指定 swiper 切换缓动动画类型,有效值:default、linear、easeInCubic、easeOutCubic、easeInOutCubic|微信小程序|
|@change|EventHandle||current 改变时会触发 change 事件,event.detail = {current: current, source: source}||
|@transition|EventHandle||swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}|5+App、H5、微信小程序、支付宝小程序、头条小程序、QQ小程序|
|@transition|EventHandle||swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}|App、H5、微信小程序、支付宝小程序、头条小程序、QQ小程序|
|@animationfinish|EventHandle||动画结束时会触发 animationfinish 事件,event.detail = {current: current, source: source}|头条小程序不支持|
change 事件返回 detail 中包含一个 source 字段,表示导致变更的原因,可能值如下:
......
......@@ -6,8 +6,8 @@
|属性名 |类型 |默认值 |说明 |平台差异说明 |
|:-|:- |:- |:- |:- |:- |
|selectable |Boolean|false |文本是否可选 | |
|space |String | |显示连续空格 |5+APP、H5、微信小程序 |
|decode |Boolean|false |是否解码 |5+APP、H5、微信小程序 |
|space |String | |显示连续空格 |App、H5、微信小程序 |
|decode |Boolean|false |是否解码 |App、H5、微信小程序 |
**space 值说明**
......
......@@ -12,16 +12,16 @@
|placeholder-class|String|textarea-placeholder|指定 placeholder 的样式类|头条小程序不支持|
|disabled|Boolean|false|是否禁用||
|maxlength|Number|140|最大输入长度,设置为 -1 的时候不限制最大长度||
|focus|Boolean|false|获取焦点||
|focus|Boolean|false|获取焦点|在 H5 平台能否聚焦以及软键盘是否跟随弹出,取决于当前浏览器本身的实现。|
|auto-height|Boolean|false|是否自动增高,设置auto-height时,style.height不生效||
|fixed|Boolean|false|如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true|微信小程序、百度小程序、头条小程序、QQ小程序|
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|5+App、微信小程序、百度小程序、头条小程序、QQ小程序|
|cursor|Number||指定focus时的光标位置|微信小程序、5+App、H5、百度小程序、头条小程序、QQ小程序|
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|App、微信小程序、百度小程序、头条小程序、QQ小程序|
|cursor|Number||指定focus时的光标位置|微信小程序、App、H5、百度小程序、头条小程序、QQ小程序|
|show-confirm-bar|Boolean|true|是否显示键盘上方带有”完成“按钮那一栏|微信小程序、百度小程序、QQ小程序|
|selection-start|Number|-1|光标起始位置,自动聚焦时有效,需与selection-end搭配使用|微信小程序、5+App、H5、百度小程序、头条小程序、QQ小程序|
|selection-end|Number|-1|光标结束位置,自动聚焦时有效,需与selection-start搭配使用|微信小程序、5+App、H5、百度小程序、头条小程序、QQ小程序|
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|5+App、微信小程序、百度小程序、QQ小程序|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|仅微信小程序、5+App(HBuilderX 2.0+ [nvue uni-app模式](http://ask.dcloud.net.cn/article/36074)) 、QQ小程序支持 height|
|selection-start|Number|-1|光标起始位置,自动聚焦时有效,需与selection-end搭配使用|微信小程序、App、H5、百度小程序、头条小程序、QQ小程序|
|selection-end|Number|-1|光标结束位置,自动聚焦时有效,需与selection-start搭配使用|微信小程序、App、H5、百度小程序、头条小程序、QQ小程序|
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|App、微信小程序、百度小程序、QQ小程序|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|仅微信小程序、App(HBuilderX 2.0+ [nvue uni-app模式](http://ask.dcloud.net.cn/article/36074)) 、QQ小程序支持 height|
|@blur|EventHandle||输入框失去焦点时触发,event.detail = {value, cursor}||
|@linechange|EventHandle||输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}|头条小程序不支持|
|@input|EventHandle||当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上||
......@@ -67,9 +67,10 @@ export default {
- 小程序端 css 动画对 textarea 组件无效。
- H5 平台只能在用户交互时修改 focus 生效。
- 如果遇到 focus 属性设置不生效的问题参考:[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- 软键盘的弹起和收齐逻辑,详见[input的文档](/component/input?id=app%E5%B9%B3%E5%8F%B0ios%E7%AB%AF%E8%BD%AF%E9%94%AE%E7%9B%98%E4%B8%8A%E6%96%B9%E6%A8%AA%E6%9D%A1%E5%8E%BB%E9%99%A4%E6%96%B9%E6%A1%88)
- 软键盘的弹出和收起逻辑,详见[input的文档](/component/input?id=app%E5%B9%B3%E5%8F%B0ios%E7%AB%AF%E8%BD%AF%E9%94%AE%E7%9B%98%E4%B8%8A%E6%96%B9%E6%A8%AA%E6%9D%A1%E5%8E%BB%E9%99%A4%E6%96%B9%E6%A1%88)
**富文本编辑的解决方案**
在输入框里图文混排内容,在web上该功能依赖document,而小程序和app的正常页面又没有document。
- 方式一是采用markdown编辑器方案,输入区输入markdown语法,预览区提供预览。插件市场搜[富文本编辑](https://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91),有不少插件。
- 方式二是在vue页面里内嵌web-view组件,该组件支持完整html语法,此时可使用web中常见的各种富文本编辑器,插件市场也有这类插件。
- 方式一:使用uni-app自带的`editor`组件,该组件支持App、H5、微信小程序,其他家小程序自身未提供这类解决方案。
- 方式二:采用markdown编辑器方案,输入区输入markdown语法,预览区提供预览。这种方式可以跨端。插件市场搜[富文本编辑](https://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91),有不少插件。
- 方式三:使用web-view组件,挂在html页面,此时可使用web中常见的各种富文本编辑器,插件市场也有这类插件。
......@@ -59,7 +59,7 @@
<view>
<view class="uni-padding-wrap uni-common-mt">
<view>
<video id="myVideo" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4"
<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
</view>
<!-- #ifndef MP-ALIPAY -->
......
#### web-view
`web-view` 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面。
`web-view` 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指的宽高)
> 各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次 iframe 内嵌的其他 url 。
......@@ -9,12 +9,12 @@
|属性名|类型|说明|平台差异说明|
|:-|:-|:-|:|
|src|String|webview 指向网页的链接|&nbsp;|
|webview-styles|Object|webview 的样式|5+App|
|webview-styles|Object|webview 的样式|App|
|@message|EventHandler|网页向应用 `postMessage` 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。|H5 暂不支持|
**src**
|来源|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|来源|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|网络|√|√|√|√|√|√|√|
|本地|√|暂不支持|x|x|x|x|x|
......@@ -61,7 +61,9 @@
- 小程序仅支持加载网络网页,不支持本地html
- 小程序端 web-view 组件一定有原生导航栏,下面一定是全屏的 web-view 组件,navigationStyle: custom 对 web-view 组件无效。
- App 端使用 `自定义组件模式` 时,uni.web-view.js 的最低版为 [uni.webview.1.5.2.js](https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js)
- App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在 `uni-app 项目根目录->hybrid->html` 文件夹下,如下为一个加载本地网页的`uni-app`项目文件目录示例:
- App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在 `uni-app 项目根目录->hybrid->html` 文件夹下,如下为一个加载本地网页的`uni-app`项目文件目录示例:
- nvue `web-view` 必须指定样式宽高, @message 暂时写成 @onPostMessage,示例: <web-view @message="onmessage" @onPostMessage="onmessage"></web-view>
- V3 编译模式,网页向应用 `postMessage` 为实时消息
<pre v-pre="" data-lang="">
<code class="lang-" style="padding:0">
......@@ -121,7 +123,7 @@
|属性|类型|说明|
|:-|:-|:-|
|plus|Boolean|5+App|
|plus|Boolean|App|
|miniprogram|Boolean|微信小程序|
|smartprogram|Boolean|百度小程序|
|miniprogram|Boolean|支付宝小程序|
......@@ -131,29 +133,29 @@
`<web-view>` 加载的 HTML 中,添加以下代码:
```html
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<!-- uni 的 SDK -->
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
```
待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
......@@ -264,7 +266,7 @@ web-view组件在App和小程序中层级较高,如需要在vue页面中写代
- App端,web-view加载的html页面可以运行plus的api,但注意如果该页面调用了plus.key的API监听了back按键(或使用mui的封装),会造成back监听冲突。需要该html页面移除对back的监听。或按照上面的示例代码禁止网页使用plus对象
- `uni.webview.js` 最新版地址:[https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js](https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js)
- 小程序平台,个人类型与海外类型的小程序使用 `web-view` 组件,提交审核时注意微信等平台是否允许使用
- 小程序平台, `src` 指向的链接需登录小程序管理后台配置域名白名单。`5+App``H5` 无此限制。
- 小程序平台, `src` 指向的链接需登录小程序管理后台配置域名白名单。`App``H5` 无此限制。
##### FAQ
......
```uni-app``` 积极拥抱前端社区,创建了开放、兼容的生态系统。
```uni-app``` 积极拥抱社区,创建了开放、兼容的生态系统。
- [uni-app插件市场](https://ext.dcloud.net.cn),有数千款插件,支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型,并为插件作者提供了荣誉+经济回报的双激励模式,打造最强大的开放生态
- [uni-app插件市场](https://ext.dcloud.net.cn),有数千款插件,支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型。在生态建设上远远领先于竞品
- 兼容微信小程序 JS SDK,丰富的小程序生态内容可直接引入```uni-app```,并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK,由于大量SDK厂商均原厂维护小程序SDK,使得```uni-app```成为跨平台开发框架里生态最丰富的平台[参考](https://ask.dcloud.net.cn/article/35070)
- 兼容 微信小程序 JS SDK
丰富的小程序生态内容可直接引入```uni-app```,并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK,由于大量SDK厂商均原厂维护小程序SDK,使得```uni-app```成为跨平台开发框架里生态最丰富的平台[参考](https://ask.dcloud.net.cn/article/35070)
- 兼容微信小程序自定义组件,并且App侧通用,[参考](https://uniapp.dcloud.io/frame?id=小程序组件支持)
- 兼容 微信小程序自定义组件
小程序自定义组件是一种ui组件,uni-app里可以在App、H5、微信小程序、QQ小程序同时兼容微信小程序自定义组件,[参考](https://uniapp.dcloud.io/frame?id=小程序组件支持)
- 支持 NPM 包管理系统,[参考](https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81)
- 兼容 NPM 包管理系统
uni-app完整支持 NPM ,[详见](https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81)
- 支持 mpvue 项目及组件,全端通用,[参考](https://ask.dcloud.net.cn/article/34945)
- 兼容 mpvue 项目及组件
mpvue同样基于vue语法,但支持完善度不如`uni-app`,是`uni-app`的子集。mpvue的组件可以在uni-app里直接使用并全端通用。项目代码可以快速移植到uni-app,[参考](https://ask.dcloud.net.cn/article/34945)
- 支持通用 HTML 和 js 库,虽然小程序不支持通用 HTML 和 DOM,但```uni-app```的web-view组件支持load本地 HTML,可以在需要时引入相关库(注意 HTML 的性能不如 vue 页面)。参考[https://uniapp.dcloud.io/component/web-view](https://uniapp.dcloud.io/component/web-view)
- 兼容 weex 插件生态
uni-app内置了`weex`,`weex`的原生插件或ui库均可使用。注意`weex`的生态不如`uni-app`丰富,一般情况建议使用`uni-app`的插件市场。
- App端支持和原生混合编码,支持 [Native.js](https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88) 直接调用原生api、支持 [第三方原生sdk](https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/104)
- 兼容 普通 web 库
```uni-app```的H5端支持所有浏览器API。但众所周知,由于小程序的js不运行在浏览器里,所以小程序里不支持 HTML 和 DOM 的 API。
- App端支持 ```weex``` ,```uni-app``` 内置了 ```weex``` ,并在 ```weex``` 引擎中实现了常用的 uni api 的封装,比如 uni.request 可以在 ```weex``` 引擎中联网。这样的文件后缀名为 nvue。```uni-app```还支持 nvue 和 vue 复用 js 和 css。
`uni-app`的App端虽然和小程序是相同的架构,逻辑层也运行在独立jscore而不是浏览器里,但一方面可通过web-view组件加载HTML,引入web相关库;
另一方面可通过[renderjs](frame?id=renderjs)实现在渲染层执行js,此时完整echart、threejs等web库均可使用。
(但为了全端使用,仍然建议减少对dom库的依赖,在uni-app的插件市场可寻找全端可以的库来替代)
- App端支持各种调用原生能力的方式
1. 支持 原生[混合开发](hybrid)
2. 支持 比小程序能力更多的[plus JSAPI](http://www.html5plus.org/doc/h5p.html)
3. 支持 [Native.js](https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88) 直接调用原生api
4. 支持 [原生插件扩展](https://ask.dcloud.net.cn/article/35428)
5. 支持 [云打包原生插件](https://ask.dcloud.net.cn/article/35412)
- App端支持双渲染引擎
`uni-app`逻辑层在独立jscore,而渲染层可选webview渲染和weex引擎渲染。
1. 使用webview渲染则整个架构与小程序相同,此时页面后缀为vue文件。
2. 使用weex引擎(经过改造)渲染,则整个架构与快应用相同,此时页面后缀为nvue文件。使用webview渲染时,可以指定由系统webview渲染还是由x5引擎渲染。
- App端支持原生插件云打包,[参考](https://ask.dcloud.net.cn/article/35412)
......@@ -38,6 +38,8 @@
**App初期启动的引导轮播:** 因为是App专用,为了更好的性能,推荐使用nvue制作。参考插件市场已经封装的插件[https://ext.dcloud.net.cn/plugin?id=676](https://ext.dcloud.net.cn/plugin?id=676)
**原生App和uni-app混合开发:** [详见](hybrid)
## H5常见问题
**uni-app 的 H5 版使用注意事项:**[https://ask.dcloud.net.cn/article/35232](https://ask.dcloud.net.cn/article/35232)
......
......@@ -43,7 +43,7 @@
|有效目录|说明|
|:-:|:-:|
|app-plus|5+App|
|app-plus|App|
|h5|H5|
|mp-weixin|微信小程序|
|mp-alipay|支付宝小程序|
......@@ -80,17 +80,17 @@
|onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发|||
|onHide|监听页面隐藏|||
|onUnload|监听页面卸载|||
|onResize|监听窗口尺寸变化|5+App、微信小程序||
|onResize|监听窗口尺寸变化|App、微信小程序||
|onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)|||
|onReachBottom|页面上拉触底事件的处理函数|||
|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、5+App(自定义组件模式)||
|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、App(自定义组件模式)||
|onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、头条小程序、支付宝小程序||
|onPageScroll|监听页面滚动,参数为Object|||
|onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|5+ App、H5||
|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|5+App、H5||
|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|5+App、H5|1.6.0|
|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|5+App、H5|1.6.0|
|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|5+App、H5|1.6.0|
|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|App、H5||
|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|App、H5|1.6.0|
|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|App、H5|1.6.0|
|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|App、H5|1.6.0|
``onPageScroll`` 参数说明:
......@@ -139,11 +139,11 @@ export default {
## 路由
``uni-app``路由全部交给框架统一管理,开发者需要在[pages.json](/collocation/pages?id=pages)里配置每个路由页面的路径及页面样式,不支持 ``Vue Router``
``uni-app``页面路由为框架统一管理,开发者需要在[pages.json](/collocation/pages?id=pages)里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 `uni-app` 的路由用法与 ``Vue Router`` 不同,如仍希望采用 `Vue Router` 方式管理路由,可在插件市场搜索 [Vue-Router](https://ext.dcloud.net.cn/search?q=vue-router)
### 路由跳转
``uni-app`` 有两种路由跳转方式:使用[navigator](/component/navigator)组件跳转、调用[API](/api/router)跳转。
``uni-app`` 有两种页面路由跳转方式:使用[navigator](/component/navigator)组件跳转、调用[API](/api/router)跳转。
### 页面栈
......@@ -324,8 +324,8 @@ rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应
|#id|#firstname|选择拥有 id="firstname" 的组件|
|element|view|选择所有 view 组件|
|element, element|view, checkbox|选择所有文档的 view 组件和所有的 checkbox 组件|
|::after|view::after|在 view 组件后边插入内容,**仅微信小程序和5+App生效**|
|::before|view::before|在 view 组件前边插入内容,**仅微信小程序和5+App生效**|
|::after|view::after|在 view 组件后边插入内容,**仅微信小程序和App生效**|
|::before|view::before|在 view 组件前边插入内容,**仅微信小程序和App生效**|
**注意:**
- 在 ```uni-app``` 中不能使用 ```*``` 选择器。
......@@ -349,7 +349,7 @@ page {
uni-app 提供内置 CSS 变量
|CSS变量|描述|5+App|小程序|H5|
|CSS变量|描述|App|小程序|H5|
|:-|:-|:-|:-|:-|
|--status-bar-height|系统状态栏高度|[系统状态栏高度](http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight)、nvue注意见下|25px|0|
|--window-top|内容区域距离顶部的距离|0|0|NavigationBar 的高度|
......@@ -357,7 +357,7 @@ uni-app 提供内置 CSS 变量
**注意:**
- ``var(--status-bar-height)`` 此变量在微信小程序环境为固定 ``25px``,在 5+App 里为手机实际状态栏高度。
- ``var(--status-bar-height)`` 此变量在微信小程序环境为固定 ``25px``,在 App 里为手机实际状态栏高度。
- 当设置 ``"navigationStyle":"custom"`` 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 ``var(--status-bar-height)`` 的 view 放在页面顶部,避免页面内容出现在状态栏。
- 由于在H5端,不存在原生导航栏和tabbar,也是前端div模拟。如果设置了一个固定位置的居底view,在小程序和App端是在tabbar上方,但在H5端会与tabbar重叠。此时可使用`--window-bottom`,不管在哪个端,都是固定在tabbar上方。
- 目前 nvue 在App端,还不支持 `--status-bar-height`变量,替代方案是在页面onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度,然后通过style绑定方式给占位view设定高度。下方提供了示例代码
......@@ -439,15 +439,15 @@ uni-app 提供内置 CSS 变量
### 背景图片
``uni-app`` 支持使用在 css 里设置背景图片,使用方式与普通 ``web`` 项目相同,需要注意以下几点:
``uni-app`` 支持使用在 css 里设置背景图片,使用方式与普通 ``web`` 项目大体相同,但需要注意以下几点:
- 支持 base64 格式图片。
- 支持网络路径图片。
- 小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前,也有相同限制。v3编译模式起支持直接使用本地背景图和字体。
- 使用本地路径背景图片需注意:
1. 图片小于 40kb,``uni-app`` 会自动将其转化为 base64 格式
2. 图片大于等于 40kb, 需开发者自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。
1. 为方便开发者,在背景图片小于 40kb 时,``uni-app`` 编译到不支持本地背景图的平台时,会自动将其转化为 base64 格式;
2. 图片大于等于 40kb,会有性能问题,不建议使用太大的背景图,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。
3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
4. `uni-app v3`版本设定为不自动将图片转 base64 格式
```css
.test2 {
background-image: url('~@/static/logo.png');
......@@ -456,7 +456,7 @@ uni-app 提供内置 CSS 变量
**注意**
- 微信小程序不支持相对路径(真机不支持,开发工具支持)
- 其他端使用本地背景图片作为背景图没有限制
### 字体图标
......@@ -464,11 +464,12 @@ uni-app 提供内置 CSS 变量
- 支持 base64 格式字体图标。
- 支持网络路径字体图标。
- 小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前,也有相同限制。v3编译模式起支持直接使用本地背景图和字体。
- 网络路径必须加协议头 ``https``。
- 从 [http://www.iconfont.cn](http://www.iconfont.cn) 上拷贝的代码,默认是没加协议头的。
- ``uni-app`` 本地路径图标字体支持情况
1. 字体文件小于 40kb,``uni-app`` 会自动将其转化为 base64 格式;
2. 字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效
- 使用本地路径图标字体需注意
1. 为方便开发者,在字体文件小于 40kb 时,``uni-app`` 会自动将其转化为 base64 格式;
2. 字体文件大于等于 40kb,仍转换为 base64 方式使用的话可能有性能问题,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用
3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
```css
@font-face {
......@@ -731,13 +732,13 @@ const package = require('packageName')
```
## 小程序组件支持
``uni-app`` 支持在 App 和 小程序 中使用**小程序自定义组件**。
``uni-app`` 支持在 App 和 小程序 中使用**小程序自定义组件**,从HBuilderX2.4.7起,H5端也可以运行微信小程序组件
**平台差异说明**
|平台|支持情况|小程序组件存放目录|
|---|---|---|
|H5|不支持||
|H5|支持微信小程序组件(2.4.7+)|wxcomponents|
|App(不含nvue)|支持微信小程序组件|wxcomponents|
|微信小程序|支持微信小程序组件|wxcomponents|
|支付宝小程序|支持支付宝小程序组件|mycomponents|
......@@ -964,7 +965,7 @@ WXS是一套运行在视图层的脚本语言,[微信端的规范详见](https
它的特点是运行在视图层。当需要避免逻辑层和渲染层交互通信折损时,可采用wxs。
uni-app可以将wxs代码编译到微信小程序、QQ小程序、APP、H5上(`HBuilderX 2.2.5`及以上版本)
uni-app可以将wxs代码编译到微信小程序、QQ小程序、app-vue、H5上(`uni-app 2.2.5`及以上版本)
与wxs类似,百度小程序提供了Filter、阿里小程序提供了SJS,uni-app也支持使用这些功能,并将它们编译到百度和阿里的小程序端。不过它们的功能还不如wxs强大。此外头条系小程序自身不支持类似功能。
......@@ -1177,12 +1178,25 @@ export default {
- `nvue`页面暂不支持wxs、sjs、filter.js
- 各个`script`标签会分别被打包至对应支持平台,不需要额外写条件编译
- 自`HBuilderX 2.2.5`开始,不推荐使用各个小程序自有的引入方式,推荐使用`script`标签引入
- App和H5端,提供了wxs的升级版,更加强大,见下面的 [renderjs](?id=renderjs) 章节
## renderjs
`renderjs`是一个运行在视图层的js。它比[WXS](?id=wxs)更加强大。它只支持app-vue和h5。
`renderjs`的主要作用有2个:
- 大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
- 在视图层操作dom,运行for web的js库
uni-app 2.5.5+ 在 [WXS](?id=wxs) 的基础上扩展了 renderjs,以 vue 组件的写法运行在 view 层。仅支持 App([V3](https://ask.dcloud.net.cn/article/36599) 且不含 nvue)、H5。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.5.5+,仅支持vue,并要求v3编译器)|√|x|x|x|x|x|
renderjs,以 vue 组件的写法运行在 view 层。
### 使用方式
设置 script 节点的 lang 为 renderjs
```html
<script module="test" lang="renderjs">
......@@ -1199,22 +1213,41 @@ uni-app 2.5.5+ 在 [WXS](?id=wxs) 的基础上扩展了 renderjs,以 vue 组
### 示例
* [echarts 示例](https://ext.dcloud.net.cn/plugin?id=1207)
* [通过renderjs,在app和h5端使用完整的 `echarts`](https://ext.dcloud.net.cn/plugin?id=1207)
### 功能详解
- 大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
逻辑层和视图层分离有很多好处,但也有一个副作用是在造成了两层之间通信阻塞。尤其是小程序和App的Android端阻塞问题影响了高性能应用的制作。
`renderjs`运行在视图层,可以直接操作视图层的元素,避免通信折损。
在hello uni-app的canvas示例中,App端使用了`renderjs`,由运行在视图层的`renderjs`直接操作视图层的canvas,实现了远超微信小程序的流畅canvas动画示例。具体在[hello uni-app](https://m3w.cn/uniapp)示例中体验,对比App端和小程序端的性能差异。
- 在视图层操作dom,运行for web的js库
官方不建议在uni-app里操作dom,但如果你不开发小程序,想使用一些操作了dom、window的库,其实可以使用`renderjs`来解决。
在app-vue环境下,视图层由webview渲染,而`renderjs`运行在视图层,自然可以操作dom和window。
这是一个基于`renderjs`运行echart完整版的示例:[renderjs版echart](https://ext.dcloud.net.cn/plugin?id=1207)
同理,`f2`、`threejs`等库都可以这么用。
### 注意事项
* 可以使用 dom、bom API 不可直接访问 service 层数据
* view 层和 service 层通讯方式与 [WXS](?id=wxs) 一致
* 可以使用 dom、bom API 不可直接访问逻辑层数据
* 视图层和逻辑层通讯方式与 [WXS](?id=wxs) 一致
* 观测更新的数据在 view 层可以直接访问到
* 不要直接引用大型类库,推荐通过动态创建 script 方式引用
* view 层的页面引用资源的路径相对于根目录计算,例如:./static/test.js
* view 层的页面引用资源的路径相对于根目录计算,例如:./static/test.js
* 目前仅支持内联使用
## 致谢
```uni-app```的设计使用了 ```vue + 自定义组件``` 的模式;开发者使用```Vue```语法,了解```uni-app```的组件,就可以开发跨端App;感谢```Vue```团队
```uni-app```使用 ```vue``` 语法,开发多端应用,感谢```Vue```团队!
为了照顾开发者的已有学习积累,```uni-app```的组件和api设计,基本参考了微信小程序,学过微信小程序开发,了解```vue```,就能直接上手```uni-app```;感谢微信小程序团队!
为了减少开发者的学习成本,```uni-app```的组件和api设计,基本参考了微信小程序,学过微信小程序开发,了解```vue```,就能直接上手```uni-app```;感谢微信小程序团队!
```uni-app``` 在小程序端,学习参考了[mpvue](https://mpvue.com/)[Megalo](https://megalojs.org/),感谢美团点评技术团队、网易考拉团队!
**uni-app和原生App混合开发问题:**
首先务必确认uni-app和原生代码,谁是主谁是从的问题。
- 如果你的应用是uni-app开发的,需要扩展一些原生能力,那么请参考[插件市场](https://ext.dcloud.net.cn/)右上角的原生插件开发教程。
- 如果你的App是原生开发的,部分功能栏目想通过uni-app实现,有2种方式
* 在原生App里集成uni小程序sdk,[参考](https://ask.dcloud.net.cn/docs/#https://ask.dcloud.net.cn/article/36941)
* 如果不想集成原生sdk,那就把uni-app代码发布成H5方式,在原生App里通过webview打开。
如果应用是uni-app开发为主,只是想离线打包,那么不应该使用uni小程序sdk,请在HBuilderX的发行菜单里点击离线打包。
另注意离线打包无法享受插件市场的付费原生插件,如有相关需求需自己进行原生插件开发,参考[插件市场](https://ext.dcloud.net.cn/)右上角的原生插件开发教程。
**uni-app和原生小程序混合开发问题:**
uni-app编译后的wxml代码没有可维护性,不便于整合到原生小程序里。如果想复用原生小程序的代码:
- 方式1:把原生小程序的代码变成组件,uni-app支持使用小程序wxml组件,[参考](frame.md?id=小程序组件支持)
- 方式2:把原生小程序转换为uni-app源码,有各种转换工具,[详见](translate.md)
......@@ -7,15 +7,18 @@ body的元素选择器请改为page,同样,div和ul和li等改为view、span
- webview浏览器兼容性
vue页面在App端是被系统的webview渲染的(不是手机自带浏览器,是rom的webview),在较老的手机上,比如Android4.4、5.0或iOS8,很多css是不支持的,所以不要使用太新的css,会导致界面异常。
vue页面在App端,默认是被系统的webview渲染的(不是手机自带浏览器,是rom的webview),在较老的手机上,比如Android4.4、5.0或iOS8,很多css是不支持的,所以不要使用太新的css,会导致界面异常。
注意这不意味着不能使用flex,Android4.4也支持flex,只是不要使用太新的css。
可以找Android4.4手机或使用pc模拟器实际测试下,大多数国产Android模拟器都是4.4或5.0。
从 uni-app 2.5.3 起,Android端支持引入腾讯x5浏览器内核,可以抹平低端Android的浏览器兼容性问题,[详见x5使用指南](https://ask.dcloud.net.cn/article/36806)
小程序不存在此情况。所以如果你的H5和小程序界面正常,而App界面异常,大多是因为css兼容性。解决这类问题,可以在caniuse查询,也可以使用一个较低版本的chrome浏览器在H5端测试。
Android4.4对应的webview是chrome37,如找不到老版chrome,也可以下载老版HBuilder(在HBuilderX下载页面底部有“上一代HBuilder下载”),在老HBuilder的右上角边改边看模式里是chrome37内核,可以把uni-app的H5版运行起来,将url粘贴到边改边看的浏览器中,点右键可以审查元素,排查不支持的css。
app端nvue页面,不存在浏览器兼容问题,它自带一个统一的原生渲染引擎,不依赖webview。
Android4.4对应的webview是chrome37。各端浏览器内核的详情查阅,参考:[关于手机webview内核、默认浏览器、各家小程序的渲染层浏览器的区别和兼容性](https://ask.dcloud.net.cn/article/1318)
- 原生组件层级问题
H5没有原生组件概念问题,非H5端有原生组件并引发了原生组件层级高于前端组件的概念,要遮挡video、map等原生组件,请使用cover-view组件。
......@@ -190,10 +193,10 @@ H5没有原生组件概念问题,非H5端有原生组件并引发了原生组
### 各家小程序的浏览器内核不同,会造成css兼容性问题
查阅细节参考:[https://ask.dcloud.net.cn/article/1318](https://ask.dcloud.net.cn/article/1318)
### vendor.js过大的处理方式
- 使用运行时代码压缩
+ `HBuilderX`创建的项目勾选`运行-->运行到小程序模拟器-->运行时是否压缩代码`
+ `cli`创建的项目可以在`pacakge.json`中添加参数`--minimize`,示例:`"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"`
- 使用分包优化,[关于分包优化的说明](/collocation/manifest?id=关于分包优化的说明)
\ No newline at end of file
### vendor.js过大的处理方式
- 使用运行时代码压缩
+ `HBuilderX`创建的项目勾选`运行-->运行到小程序模拟器-->运行时是否压缩代码`
+ `cli`创建的项目可以在`pacakge.json`中添加参数`--minimize`,示例:`"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"`
- 使用分包优化,[关于分包优化的说明](/collocation/manifest?id=关于分包优化的说明)
......@@ -31,7 +31,7 @@ Android上小程序大多自带了一个几十M的chromium webview,而App端
逻辑层和视图层分离,好处是js运算不卡渲染,最简单直接的感受就是:窗体动画稳。
如果开发者使用过5+App,应该有概念,webview新窗体一边做进入动画,一边自身渲染,很容易卡动画。而uni-app则无需写预载代码,新窗体渲染快且动画稳定。
如果开发者使用过App,应该有概念,webview新窗体一边做进入动画,一边自身渲染,很容易卡动画。而uni-app则无需写预载代码,新窗体渲染快且动画稳定。
但是两层分离也带来一个坏处,这两层互相通信,其实是有损耗的。
......@@ -52,7 +52,7 @@ iOS还好,但Android低端机上,每次通信都要耗时几十毫秒。平
wxs中可以监听手势,以uni ui的swiperAction组件为例,手指拖动,侧边的列表菜单项要跟手滑出,此时就需要使用wxs才能实现流畅效果。
至于canvas动画,微信的canvas是原生的,无法运用wxs操作,且一样有通信折,所以绘制动画的性能不佳。而uni-app的app-vue的canvas是webview的,并且支持wxs操作,开发者可以在普通js中传递数据和指令给wxs,在wxs里绘制动画,将不再有通信折损,实现更流畅的效果(app端需v3编译器)
至于canvas动画,微信的canvas是原生的,无法运用wxs操作,且一样有通信折,所以绘制动画的性能不佳。而uni-app的app-vue的canvas是webview的,并且支持wxs操作,开发者可以在普通js中传递数据和指令给wxs,在wxs里绘制动画,将不再有通信折损,实现更流畅的效果(app端需v3编译器)
- 原生渲染的视图层
......@@ -145,7 +145,7 @@ app-nvue和h5不存在此问题。造成差异的原因是小程序目前只提
##### 优化包体积
* uni-app发行到小程序时,自带引擎只有几十K,主要是一个定制过的vue.js核心库。如果使用了es6转es5、css对齐的功能,可能会增大代码体积,可以配置这些编译功能是否开启。
* uni-app的H5端,自带了vue.js、vue-rooter及部分es6 polyfill库,这部分的体积gzip后只有92k,和web开发使用vue基本一致。而内置组件ui库(如picker、switch等)、小程序的对齐js api等,相当于一个完善的大型ui库。但大多数应用不会用到所有内置组件和API。由此uni-app提供了摇树优化机制,未摇树优化前的uni-app整体包体积约500k,服务器部署gzip后162k。开启摇树优化需在manifest配置,[详情](https://uniapp.dcloud.io/collocation/manifest?id=optimization)
* uni-app的H5端,自带了vue.js、vue-router及部分es6 polyfill库,这部分的体积gzip后只有92k,和web开发使用vue基本一致。而内置组件ui库(如picker、switch等)、小程序的对齐js api等,相当于一个完善的大型ui库。但大多数应用不会用到所有内置组件和API。由此uni-app提供了摇树优化机制,未摇树优化前的uni-app整体包体积约500k,服务器部署gzip后162k。开启摇树优化需在manifest配置,[详情](https://uniapp.dcloud.io/collocation/manifest?id=optimization)
* uni-app的App端,因为自带了一个独立v8引擎和小程序框架,所以比HTML5Plus或mui等普通hybrid的App引擎体积要大。Android基础引擎约15M。App还提供了扩展模块,比如地图、蓝牙等,打包时如不需要这些模块,可以裁剪掉,以缩小发行包体积。在 manifest.json-App模块权限 里可以选择。
* App端支持如果选择纯nvue项目(manifest里设置app-plus下的renderer:"native"),包体积可以进一步减少2M左右。
* uni-app的App端默认包含arm32和x86两个cpu的支持so库。这会增大包体积。如果你在意体积控制,可以在manifest里去掉x86 cpu的支持(manifest可视化界面-App其他设置里选择cpu),这可以减少包体积到9M。但代价是不支持intel的cpu了。一般手机都是arm的,仅个别少见的Android pad使用x86 cpu。另外as的模拟器里如果选择x86时也无法运行这种apk。
......@@ -2,158 +2,158 @@
uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。
但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
- 大量写 if else,会造成代码执行性能低下和管理混乱。
- 编译到不同的工程后二次修改,会让后续升级变的很麻烦。
在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。
但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
- 大量写 if else,会造成代码执行性能低下和管理混乱。
- 编译到不同的工程后二次修改,会让后续升级变的很麻烦。
在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。
``uni-app`` 参考这个思路,为 ``uni-app`` 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。
## 条件编译
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
**写法:**<span style="color:#859900;"> #ifdef</span><span style="color:#859900;"> #ifndef</span><b style="color:#268BD2"> %PLATFORM%</b> 开头,以 <span style="color:#859900;">#endif</span> 结尾。
* <span style="color:#859900;"> #ifdef</span>:if defined 仅在某平台存在
* <span style="color:#859900;"> #ifndef</span>:if not defined 除了某平台均存在
* <b style="color:#268BD2"> %PLATFORM%</b>:平台名称
<table><thead><tr><th>条件编译写法</th><th>说明</th></tr></thead><tbody><tr><td><div class="code"><span class="token comment"><span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> APP-PLUS</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>仅出现在 5+App 平台下的代码</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifndef</span><b style="color:#268BD2"> H5</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>除了 H5 平台,其它平台均存在的代码</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> H5</b></span><span style="color:#859900;"> || </span><b style="color:#268BD2">MP-WEIXIN</b><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>仅在 H5 平台或微信小程序平台存在的代码</td></tr></tbody></table>
<b style="color:#268BD2"> %PLATFORM%</b> **可取值如下:**
|值|平台|参考文档|
|:-|:-|:-|
|APP-PLUS|5+App|[HTML5+ 规范](http://www.html5plus.org/doc/)|
|APP-PLUS-NVUE|5+App nvue|[Weex 规范](https://weex.apache.org/cn/guide/)|
|H5|H5||
|MP-WEIXIN|微信小程序|[微信小程序](https://developers.weixin.qq.com/miniprogram/dev/api/)|
|MP-ALIPAY|支付宝小程序|[支付宝小程序](https://docs.alipay.com/mini/developer/getting-started)|
|MP-BAIDU|百度小程序|[百度小程序](https://smartprogram.baidu.com/docs/develop/tutorial/codedir/)|
|MP-TOUTIAO|头条小程序|[头条小程序](https://developer.toutiao.com/dev/cn/mini-app/develop/framework/basic-reference/introduction)|
|MP-QQ|QQ小程序| (目前仅cli版支持)|
|MP|微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序|&nbsp;|
**支持的文件**
* .vue
* .js
* .css
* pages.json
* 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug
**注意:** 条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 ``// 注释``、css 使用 ``/* 注释 */``、vue/nvue 模板里使用 ``<!-- 注释 -->``
### API 的条件编译
<pre v-pre="" data-lang="javascript"><code class="lang-javascript code"><span class="token comment">//<span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> %PLATFORM%</b></span>
平台特有的API实现
<span class="token comment">//<span style="color:#859900;"> #endif</span></span></code></pre>
示例,如下代码仅在 5+App 下出现:
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-7.png)
示例,如下代码不会在 H5 平台上出现:
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-6.png)
除了支持单个平台的条件编译外,还支持**多平台**同时编译,使用 || 来分隔平台名称。
示例,如下代码会在 5+App 和 H5 平台上出现:
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-5.png)
## 条件编译
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
**写法:**<span style="color:#859900;"> #ifdef</span><span style="color:#859900;"> #ifndef</span><b style="color:#268BD2"> %PLATFORM%</b> 开头,以 <span style="color:#859900;">#endif</span> 结尾。
* <span style="color:#859900;"> #ifdef</span>:if defined 仅在某平台存在
* <span style="color:#859900;"> #ifndef</span>:if not defined 除了某平台均存在
* <b style="color:#268BD2"> %PLATFORM%</b>:平台名称
<table><thead><tr><th>条件编译写法</th><th>说明</th></tr></thead><tbody><tr><td><div class="code"><span class="token comment"><span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> APP-PLUS</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>仅出现在 App 平台下的代码</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifndef</span><b style="color:#268BD2"> H5</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>除了 H5 平台,其它平台均存在的代码</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> H5</b></span><span style="color:#859900;"> || </span><b style="color:#268BD2">MP-WEIXIN</b><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)</td></tr></tbody></table>
<b style="color:#268BD2"> %PLATFORM%</b> **可取值如下:**
|值|平台|参考文档|
|:-|:-|:-|
|APP-PLUS|App|[HTML5+ 规范](http://www.html5plus.org/doc/)|
|APP-PLUS-NVUE|App nvue|[Weex 规范](https://weex.apache.org/cn/guide/)|
|H5|H5||
|MP-WEIXIN|微信小程序|[微信小程序](https://developers.weixin.qq.com/miniprogram/dev/api/)|
|MP-ALIPAY|支付宝小程序|[支付宝小程序](https://docs.alipay.com/mini/developer/getting-started)|
|MP-BAIDU|百度小程序|[百度小程序](https://smartprogram.baidu.com/docs/develop/tutorial/codedir/)|
|MP-TOUTIAO|头条小程序|[头条小程序](https://developer.toutiao.com/dev/cn/mini-app/develop/framework/basic-reference/introduction)|
|MP-QQ|QQ小程序| (目前仅cli版支持)|
|MP|微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序|&nbsp;|
**支持的文件**
* .vue
* .js
* .css
* pages.json
* 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug
**注意:** 条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 ``// 注释``、css 使用 ``/* 注释 */``、vue/nvue 模板里使用 ``<!-- 注释 -->``
### API 的条件编译
<pre v-pre="" data-lang="javascript"><code class="lang-javascript code"><span class="token comment">//<span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> %PLATFORM%</b></span>
平台特有的API实现
<span class="token comment">//<span style="color:#859900;"> #endif</span></span></code></pre>
示例,如下代码仅在 App 下出现:
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-7.png)
示例,如下代码不会在 H5 平台上出现:
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-6.png)
除了支持单个平台的条件编译外,还支持**多平台**同时编译,使用 || 来分隔平台名称。
示例,如下代码会在 App 和 H5 平台上出现:
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-5.png)
### 组件的条件编译
<pre v-pre="" data-lang="html"><code class="lang-html code"><span class="token comment">&lt;!-- <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> %PLATFORM%</b> --&gt;</span>
平台特有的组件
<span class="token comment">&lt;!-- <span style="color:#859900;"> #endif</span> --&gt;</span></code></pre>
<pre v-pre="" data-lang="html"><code class="lang-html code"><span class="token comment">&lt;!-- <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> %PLATFORM%</b> --&gt;</span>
平台特有的组件
<span class="token comment">&lt;!-- <span style="color:#859900;"> #endif</span> --&gt;</span></code></pre>
示例,如下广告组件仅会在微信小程序中出现:
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-1.1.png)
### 样式的条件编译
<pre v-pre="" data-lang="css"><code class="lang-css code"><span class="token comment">/* <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> %PLATFORM% </b> */</span>
平台特有样式
<span class="token comment">/* <span style="color:#859900;"> #endif </span> */</span></code></pre>
**注意:** 样式的条件编译,无论是 css 还是 sass/scss/less/stylus 等预编译语言中,必须使用 `/*注释*/` 的写法。
正确写法
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-2.png)
错误写法
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-3.png)
### pages.json 的条件编译
下面的页面,只有运行至 5+App 时才会编译进去。
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-4.png)
不同平台下的特有功能,以及小程序平台的分包,都可以通过 pages.json 的条件编译来更好地实现。这样,就不会在其它平台产生多余的资源,进而减小包体积。
json的条件编译,如不同平台的key名称相同,cli项目下开发者自己安装的校验器会报错,需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器,无需在意此问题,HBuilderX的语法校验器为此优化过。
### static 目录的条件编译
在不同平台,引用的静态资源可能也存在差异,通过 static 的的条件编译可以解决此问题,static 目录下新建不同平台的专有目录(目录名称同 `%PLATFORM%` 值域,但字母均为小写),专有目录下的静态资源只有在特定平台才会编译进去。
如以下目录结构,``a.png`` 只有在微信小程序平台才会编译进去,``b.png`` 在所有平台都会被编译。
<pre v-pre="" data-lang="">
<code class="lang-" style="padding:0">
┌─static
│ ├─mp-weixin
│ │ └─a.png
│ └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json
</code>
</pre>
### 整体目录条件编译
如果想把各平台的页面文件更彻底的分开,也可以在uni-app项目根目录创建`platforms`目录,然后在下面进一步创建APP-PLUS、MP-WEIXIN等子目录,存放不同平台的文件。
### HBuilderX 支持
HBuilderX 为 ``uni-app`` 的条件编译提供了丰富的支持:
**代码块支持**
在 HBuilderX 中开发 ``uni-app`` 时,通过输入 **ifdef** 可快速生成条件编译的代码片段
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-022402.png)
**语法高亮**
在 HBuilderX 中对条件编译的代码注释部分提供了语法高亮,可分辨出写法是否正确,使得代码更加清晰(独立js文件需在编辑器右下角切换javascript es6+编辑器,独立css文件暂不支持高亮,但不高亮不影响使用)
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-012403.png)
**正确注释和快速选中**
在 HBuilderX 中,ctrl+alt+/ 即可生成正确注释(js:``// 注释``、css:``/* 注释 */``、vue/nvue模板: ``<!-- 注释 -->``)。
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni2019012801.png)
点击 **ifdef****endif** 可快速选中条件编译部分;点击左侧的折叠图标,可折叠条件编译部分代码。
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-012501.png)
### 注意
* Android 和 iOS 平台不支持通过条件编译来区分,如果需要区分 Android、iOS 平台,请通过调用 uni.getSystemInfo 来获取平台信息。在HBuilderX1.9.10起,支持`ifios``ifAndroid`代码块,可方便编写判断。
* 有些跨端工具可以提供js的条件编译或多态,但这对于实际开发远远不够。uni-app不止是处理js,任何代码都可以多端条件编译,才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码,很不利于复用和维护。举例,微信小程序主题色是绿色,而百度支付宝小程序是蓝色,你的应用想分平台适配颜色,只有条件编译是代码量最低、最容易维护的。
* 有些公司的产品运营总是给不同平台提不同需求,但这不是拒绝uni-app的理由。关键在于项目里,复用的代码多还是个性的代码多,正常都是复用的代码多,所以仍然应该多端。而个性的代码放到不同平台的目录下,差异化维护。
\ No newline at end of file
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-1.1.png)
### 样式的条件编译
<pre v-pre="" data-lang="css"><code class="lang-css code"><span class="token comment">/* <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> %PLATFORM% </b> */</span>
平台特有样式
<span class="token comment">/* <span style="color:#859900;"> #endif </span> */</span></code></pre>
**注意:** 样式的条件编译,无论是 css 还是 sass/scss/less/stylus 等预编译语言中,必须使用 `/*注释*/` 的写法。
正确写法
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-2.png)
错误写法
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-3.png)
### pages.json 的条件编译
下面的页面,只有运行至 App 时才会编译进去。
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-4.png)
不同平台下的特有功能,以及小程序平台的分包,都可以通过 pages.json 的条件编译来更好地实现。这样,就不会在其它平台产生多余的资源,进而减小包体积。
json的条件编译,如不同平台的key名称相同,cli项目下开发者自己安装的校验器会报错,需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器,无需在意此问题,HBuilderX的语法校验器为此优化过。
### static 目录的条件编译
在不同平台,引用的静态资源可能也存在差异,通过 static 的的条件编译可以解决此问题,static 目录下新建不同平台的专有目录(目录名称同 `%PLATFORM%` 值域,但字母均为小写),专有目录下的静态资源只有在特定平台才会编译进去。
如以下目录结构,``a.png`` 只有在微信小程序平台才会编译进去,``b.png`` 在所有平台都会被编译。
<pre v-pre="" data-lang="">
<code class="lang-" style="padding:0">
┌─static
│ ├─mp-weixin
│ │ └─a.png
│ └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json
</code>
</pre>
### 整体目录条件编译
如果想把各平台的页面文件更彻底的分开,也可以在uni-app项目根目录创建`platforms`目录,然后在下面进一步创建APP-PLUS、MP-WEIXIN等子目录,存放不同平台的文件。
### HBuilderX 支持
HBuilderX 为 ``uni-app`` 的条件编译提供了丰富的支持:
**代码块支持**
在 HBuilderX 中开发 ``uni-app`` 时,通过输入 **ifdef** 可快速生成条件编译的代码片段
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-022402.png)
**语法高亮**
在 HBuilderX 中对条件编译的代码注释部分提供了语法高亮,可分辨出写法是否正确,使得代码更加清晰(独立js文件需在编辑器右下角切换javascript es6+编辑器,独立css文件暂不支持高亮,但不高亮不影响使用)
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-012403.png)
**正确注释和快速选中**
在 HBuilderX 中,ctrl+alt+/ 即可生成正确注释(js:``// 注释``、css:``/* 注释 */``、vue/nvue模板: ``<!-- 注释 -->``)。
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni2019012801.png)
点击 **ifdef****endif** 可快速选中条件编译部分;点击左侧的折叠图标,可折叠条件编译部分代码。
![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-012501.png)
### 注意
* Android 和 iOS 平台不支持通过条件编译来区分,如果需要区分 Android、iOS 平台,请通过调用 uni.getSystemInfo 来获取平台信息。在HBuilderX1.9.10起,支持`ifios``ifAndroid`代码块,可方便编写判断。
* 有些跨端工具可以提供js的条件编译或多态,但这对于实际开发远远不够。uni-app不止是处理js,任何代码都可以多端条件编译,才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码,很不利于复用和维护。举例,微信小程序主题色是绿色,而百度支付宝小程序是蓝色,你的应用想分平台适配颜色,只有条件编译是代码量最低、最容易维护的。
* 有些公司的产品运营总是给不同平台提不同需求,但这不是拒绝uni-app的理由。关键在于项目里,复用的代码多还是个性的代码多,正常都是复用的代码多,所以仍然应该多端。而个性的代码放到不同平台的目录下,差异化维护。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册