Skip to content

U
uni-app

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

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

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

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

Merge branch 'next' into dev

上级 e0f172ef 528dddad
隐藏空白更改
内联 并排
Showing with 374 addition and 195 deletion
.gitignore
浏览文件 @ 31d00592
...@@ -2,4 +2,5 @@ node_modules/ ...@@ -2,4 +2,5 @@ node_modules/
.project .project
unpackage/ unpackage/
.vscode/ .vscode/
.idea
.DS_Store .DS_Store
README.md
浏览文件 @ 31d00592
...@@ -14,9 +14,9 @@ ...@@ -14,9 +14,9 @@
## 扫码体验 ## 扫码体验
一套代码编译到7个平台，开发一次、多处运行，这不是梦想，而是现实。依次扫描7个二维码，亲自体验最全面的跨平台效果！ 一套代码编译到8个平台，开发一次、多处运行，这不是梦想，而是现实。依次扫描8个二维码，亲自体验最全面的跨平台效果！
<img src="http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/barcode-20190131.png"/> <img src="https://img-cdn-qiniu.dcloud.net.cn/uni-app-qr-all.jpg"/>
*注： Appstore、百度、头条平台不能提交简单demo，故iOS、百度小程序、头条小程序版补充了一些其他功能。* *注： Appstore、百度、头条平台不能提交简单demo，故iOS、百度小程序、头条小程序版补充了一些其他功能。*
...@@ -29,17 +29,17 @@ ...@@ -29,17 +29,17 @@
## 项目案例 ## 项目案例
案例：[uniapp.dcloud.io/case](https://uniapp.dcloud.io/case) 案例展示：[uniapp.dcloud.io/case](https://uniapp.dcloud.io/case)
欢迎广大开发者踊跃提交自己的应用案例，[uni-app案例征集](https://github.com/dcloudio/uni-app/issues/6) 欢迎提交你的应用，[uni-app案例征集](https://github.com/dcloudio/uni-app/issues/6)
## 需求墙 ## 需求墙
`uni-app`计划支持的功能点，会在需求墙上进行展示，并允许开发者对需求进行投票，[前往投票](https://dev.dcloud.net.cn/wish/)。 `uni-app`计划支持的功能点，会在需求墙上进行展示，征集开发者的投票意见，[前往投票](https://dev.dcloud.net.cn/wish/)。
## 更新日志 ## 更新日志
`uni-app`一直保持极高的开发活跃度，详见[uni-app 更新日志](docs/release.md)。 `uni-app`一直保持高频的更新迭代，详见[uni-app 更新日志](docs/release.md)。
## 论坛 ## 论坛
......
docs/README.md
浏览文件 @ 31d00592
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="quick"> <div class="quick">
<h3 id="快速体验"><a href="/README?id=%e5%bf%ab%e9%80%9f%e4%bd%93%e9%aa%8c" data-id="快速体验" class="anchor"><span>快速体验</span></a></h3> <h3 id="快速体验"><a href="/README?id=%e5%bf%ab%e9%80%9f%e4%bd%93%e9%aa%8c" data-id="快速体验" class="anchor"><span>快速体验</span></a></h3>
<p>一套代码编到7个平台，这不是梦想。眼见为实，扫描7个二维码，亲自体验最全面的跨平台效果！</p> <p>一套代码编到8个平台，这不是梦想。眼见为实，扫描8个二维码，亲自体验最全面的跨平台效果！</p>
<div class="flex-img-group-view"> <div class="flex-img-group-view">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"> <div class="barcode-img-box">
...@@ -45,6 +45,12 @@ ...@@ -45,6 +45,12 @@
</div> </div>
<b>头条小程序版</b> <b>头条小程序版</b>
</a> </a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qq.png" width="160"/>
</div>
<b>QQ小程序版</b>
</a>
</div> </div>
<p> <p>
<em>注：Appstore、百度、头条平台不能提交简单demo，故补充了一些其他功能。</em></br> <em>注：Appstore、百度、头条平台不能提交简单demo，故补充了一些其他功能。</em></br>
......
docs/api/media/image.md
浏览文件 @ 31d00592
### uni.chooseImage(OBJECT) ### uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。另外选择和上传非图像、视频文件参考：[https://ask.dcloud.net.cn/article/35547](https://ask.dcloud.net.cn/article/35547)。 从本地相册选择图片或使用相机拍照。
另外选择和上传非图像、视频文件参考：[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 参数说明** **OBJECT 参数说明**
...@@ -55,7 +59,7 @@ uni.chooseImage({ ...@@ -55,7 +59,7 @@ uni.chooseImage({
|current|String/Number|详见下方说明|详见下方说明|| |current|String/Number|详见下方说明|详见下方说明||
|urls|Array&lt;String&gt;|是|需要预览的图片链接列表|| |urls|Array&lt;String&gt;|是|需要预览的图片链接列表||
|indicator|String|否|图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。|5+App| |indicator|String|否|图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。|5+App|
|loop|Boolean|否|是否可循环预览，默认值为 false|5+App| |loop|Boolean|否|是否可循环预览，默认值为 false|5+App|
|longPressActions|Object|否|长按图片显示操作菜单，如不填默认为**保存相册**，1.9.5 起支持。|5+App| |longPressActions|Object|否|长按图片显示操作菜单，如不填默认为**保存相册**，1.9.5 起支持。|5+App|
|success|Function|否|接口调用成功的回调函数|| |success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数|| |fail|Function|否|接口调用失败的回调函数||
...@@ -78,47 +82,47 @@ current 为当前显示图片的链接/索引值，不填或填写的值无效 ...@@ -78,47 +82,47 @@ current 为当前显示图片的链接/索引值，不填或填写的值无效
- 传 B2 的链接，预览的结果是 B1，前一张是 A，下一张是 C。 - 传 B2 的链接，预览的结果是 B1，前一张是 A，下一张是 C。
- 传 B2 的索引值 3，预览的结果是 B2，前一张是 C，下一张是 D。此时在微信/百度/头条小程序平台，最终传入的 urls 是 `[A, C, B2, D]`，过滤掉了与 B2 重复的 B1。 - 传 B2 的索引值 3，预览的结果是 B2，前一张是 C，下一张是 D。此时在微信/百度/头条小程序平台，最终传入的 urls 是 `[A, C, B2, D]`，过滤掉了与 B2 重复的 B1。
**longPressActions 参数说明** **longPressActions 参数说明**
|参数|类型|必填|说明| |参数|类型|必填|说明|
|:-|:-|:-|:-| |:-|:-|:-|:-|
|itemList|Array&lt;String&gt;|是|按钮的文字数组| |itemList|Array&lt;String&gt;|是|按钮的文字数组|
|itemColor|String|否|按钮的文字颜色，字符串格式，默认为"#000000"| |itemColor|String|否|按钮的文字颜色，字符串格式，默认为"#000000"|
|success|Function|否|接口调用成功的回调函数，详见返回参数说明| |success|Function|否|接口调用成功的回调函数，详见返回参数说明|
|fail|Function|否|接口调用失败的回调函数| |fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| |complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）|
**success 返回参数说明** **success 返回参数说明**
|参数|类型|说明| |参数|类型|说明|
|:-|:-|:-| |:-|:-|:-|
|index|Number|用户长按图片的索引值| |index|Number|用户长按图片的索引值|
|tapIndex|Number|用户点击按钮列表的索引值| |tapIndex|Number|用户点击按钮列表的索引值|
**示例** **示例**
```javascript ```javascript
// 从相册选择6张图 // 从相册选择6张图
uni.chooseImage({ uni.chooseImage({
count: 6, count: 6,
sizeType: ['original', 'compressed'], sizeType: ['original', 'compressed'],
sourceType: ['album'], sourceType: ['album'],
success: function(res) { success: function(res) {
// 预览图片 // 预览图片
uni.previewImage({ uni.previewImage({
urls: res.tempFilePaths, urls: res.tempFilePaths,
longPressActions: { longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'], itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) { success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
}, },
fail: function(err) { fail: function(err) {
console.log(err.errMsg); console.log(err.errMsg);
} }
} }
}); });
} }
}); });
``` ```
...@@ -221,54 +225,54 @@ uni.chooseImage({ ...@@ -221,54 +225,54 @@ uni.chooseImage({
}); });
} }
}); });
``` ```
# uni.compressImage(OBJECT) # uni.compressImage(OBJECT)
压缩图片接口，可选压缩质量 压缩图片接口，可选压缩质量
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序 |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|
|1.9.7+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|√|√|x|x| |1.9.7+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|√|√|x|x|
**OBJECT 参数说明** **OBJECT 参数说明**
| 属性 | 类型 | 默认值 | 必填 | 说明 | | 属性 | 类型 | 默认值 | 必填 | 说明 |
| :- | :- | :- | :- | :- | | :- | :- | :- | :- | :- |
| src | String | | 是 | 图片路径，图片的路径，可以是相对路径、临时文件路径、存储文件路径 | | src | String | | 是 | 图片路径，图片的路径，可以是相对路径、临时文件路径、存储文件路径 |
| quality | Number | 80 | 否 | 压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效） | | quality | Number | 80 | 否 | 压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效） |
| success | Function | | 否 | 接口调用成功的回调函数 | | success | Function | | 否 | 接口调用成功的回调函数 |
| fail | Function | | 否 | 接口调用失败的回调函数 | | fail | Function | | 否 | 接口调用失败的回调函数 |
| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | | complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
**success 返回参数说明** **success 返回参数说明**
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| :- | :- | :- | | :- | :- | :- |
| tempFilePath | String | 压缩后图片的临时文件路径 | | tempFilePath | String | 压缩后图片的临时文件路径 |
**示例代码：** **示例代码：**
```js ```js
uni.compressImage({ uni.compressImage({
src: '/static/logo.jpg', src: '/static/logo.jpg',
quality: 80, quality: 80,
success: res => { success: res => {
console.log(res.tempFilePath) console.log(res.tempFilePath)
} }
}) })
``` ```
# wx.chooseMessageFile(OBJECT) # wx.chooseMessageFile(OBJECT)
从客户端会话选择文件。 从客户端会话选择文件。
**平台差异说明** **平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|x|x| |x|x|√|x|x|x|
docs/api/request/websocket.md
浏览文件 @ 31d00592
...@@ -47,15 +47,17 @@ var socketTask = uni.connectSocket({ ...@@ -47,15 +47,17 @@ var socketTask = uni.connectSocket({
如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象：[Promise 封装](/api/README?id=promise-%E5%B0%81%E8%A3%85) 如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象：[Promise 封装](/api/README?id=promise-%E5%B0%81%E8%A3%85)
**注意** **注意事项**
- 网络请求的 ``超时时间`` 可以统一在 ``manifest.json`` 中配置 [networkTimeout](/collocation/manifest?id=networktimeout)。
- 网络请求的 ``超时时间`` 可以统一在 ``manifest.json`` 中配置 [networkTimeout](/collocation/manifest?id=networktimeout)。
自定义组件模式下是基于 `weex` 的 `v8` 引擎运行，所有 `vue` 页面的 `js` 都是在同一个 `weex` 的 `js` 环境中运行。目前 `weex` 限制一个 `js` 环境中只支持一个 `websocket` 连接，所以导致所有 `vue` 页面只能使用一个 `websocket` 连接。 - 目前不支持 ``ArrayBuffer`` 类型的数据收发，可以使用 [plus-websocket](http://ext.dcloud.net.cn/plugin?id=647) 插件替代。
- 自定义组件模式下是基于 `weex` 的 `v8` 引擎运行，所有 `vue` 页面的 `js` 都是在同一个 `weex` 的 `js` 环境中运行。目前 `weex` 限制一个 `js` 环境中只支持一个 `websocket` 连接，所以导致所有 `vue` 页面只能使用一个 `websocket` 连接。
**临时解决方案：** **临时解决方案：**
- 回退使用非自定义组件模式（不推荐） - 回退使用非自定义组件模式（不推荐）
- 多个websocket在独立的nvue页面中使用 - 多个 websocket 在独立的 nvue 页面中使用
- 使用 [plus-websocket](http://ext.dcloud.net.cn/plugin?id=647) 插件替代
后续我们会修改 `weex` 的限制，以支持多个 `websocket` 连接 后续我们会修改 `weex` 的限制，以支持多个 `websocket` 连接
......
docs/api/router.md
浏览文件 @ 31d00592
...@@ -16,12 +16,13 @@ ...@@ -16,12 +16,13 @@
**示例** **示例**
```javascript ```javascript
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({ uni.navigateTo({
url: 'test?id=1&name=uniapp' url: 'test?id=1&name=uniapp'
}); });
``` ```
```javascript ```javascript
// test.vue // 在test.vue页面接受参数
export default { export default {
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数 onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。 console.log(option.id); //打印出上个页面传递的参数。
...@@ -30,11 +31,20 @@ export default { ...@@ -30,11 +31,20 @@ export default {
} }
``` ```
url有长度限制，太长的字符串会传递失败，可使用[窗体通信](https://uniapp.dcloud.io/collocation/frame/communication)、[全局变量](https://ask.dcloud.net.cn/article/35021)，或`encodeURIComponent`等多种方式解决，如下为`encodeURIComponent`示例。
```html
<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
```
```javascript
// 在test.vue页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}
```
**注意：** **注意：**
* 页面跳转路径有层级限制，不能无限制跳转新页面 * 页面跳转路径有层级限制，不能无限制跳转新页面
* 跳转到 tabBar 页面只能使用 switchTab 跳转 * 跳转到 tabBar 页面只能使用 switchTab 跳转
* ```App.vue``` 的onlaunch里进行页面跳转，如遇白屏报错，请参考[https://ask.dcloud.net.cn/article/35942](https://ask.dcloud.net.cn/article/35942)
* 路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url，在App平台可以使用 [plus.runtime.openURL](http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.openURL)或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。在hello uni-app中有个组件ulink.vue已对多端进行封装，可参考。 * 路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url，在App平台可以使用 [plus.runtime.openURL](http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.openURL)或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。在hello uni-app中有个组件ulink.vue已对多端进行封装，可参考。
#### uni.redirectTo(OBJECT) #### uni.redirectTo(OBJECT)
......
docs/api/system/info.md
浏览文件 @ 31d00592
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
|参数|说明|平台差异说明| |参数|说明|平台差异说明|
|:-|:-|:-| |:-|:-|:-|
|brand|手机品牌|微信小程序| |brand|手机品牌|微信小程序、百度小程序、头条小程序、QQ小程序|
|model|手机型号|| |model|手机型号||
|pixelRatio|设备像素比|| |pixelRatio|设备像素比||
|screenWidth|屏幕宽度|| |screenWidth|屏幕宽度||
...@@ -22,30 +22,51 @@ ...@@ -22,30 +22,51 @@
|windowHeight|可使用窗口高度|| |windowHeight|可使用窗口高度||
|windowTop|可使用窗口的顶部位置|5+App、H5| |windowTop|可使用窗口的顶部位置|5+App、H5|
|windowBottom|可使用窗口的底部位置|5+App、H5| |windowBottom|可使用窗口的底部位置|5+App、H5|
|statusBarHeight|状态栏的高度|| |statusBarHeight|状态栏的高度|头条小程序不支持|
|language|应用设置的语言|| |navigationBarHeight|导航栏的高度|百度小程序|
|version|引擎版本号|微信小程序、5+App| |titleBarHeight|标题栏高度|支付宝小程序|
|language|应用设置的语言|头条小程序不支持|
|version|引擎版本号|H5不支持|
|storage|设备磁盘容量|支付宝小程序|
|currentBattery|当前电量百分比|支付宝小程序|
|appName|宿主APP名称|头条小程序|
|AppPlatform|App平台|QQ小程序|
|host|宿主平台|百度小程序|
|app|当前运行的客户端|支付宝小程序|
|cacheLocation|上一次缓存的位置信息|百度小程序|
|system|操作系统版本|| |system|操作系统版本||
|platform|客户端平台，值域为：`ios`、`android`|| |platform|客户端平台，值域为：`ios`、`android`||
|fontSizeSetting|用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px|微信小程序| |fontSizeSetting|用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px|微信小程序、支付宝小程序、百度小程序、QQ小程序|
|SDKVersion|客户端基础库版本|微信小程序、5+App| |SDKVersion|客户端基础库版本|支付宝小程序和H5不支持|
|safeArea|在竖屏正方向下的安全区域|微信小程序| |swanNativeVersion|宿主平台版本号|百度小程序|
|albumAuthorized | 允许微信使用相册的开关（仅 iOS 有效） |微信小程序|
|cameraAuthorized | 允许微信使用摄像头的开关 |微信小程序|
|locationAuthorized | 允许微信使用定位的开关 |微信小程序|
|microphoneAuthorized | 允许微信使用麦克风的开关 |微信小程序|
|notificationAuthorized | 允许微信通知的开关 |微信小程序|
|notificationAlertAuthorized | 允许微信通知带有提醒的开关（仅 iOS 有效） |微信小程序|
|notificationBadgeAuthorized | 允许微信通知带有标记的开关（仅 iOS 有效） |微信小程序|
|notificationSoundAuthorized | 允许微信通知带有声音的开关（仅 iOS 有效） |微信小程序|
|bluetoothEnabled | 蓝牙的系统开关 |微信小程序|
|locationEnabled | 地理位置的系统开关 |微信小程序|
|wifiEnabled | Wi-Fi 的系统开关 |微信小程序|
|safeArea|在竖屏正方向下的安全区域|5+App、H5、微信小程序|
**Tips** **Tips**
- 屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生tabbar高度 - 屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生tabbar高度
- H5端，windowHeight不包含NavigationBar和TabBar的高度，windowTop等于NavigationBar高度，windowBottom等于TabBar高度，statusBarHeight为0 - H5端，windowHeight不包含NavigationBar和TabBar的高度，windowTop等于NavigationBar高度，windowBottom等于TabBar高度，statusBarHeight为0
**safeArea 的结构**
**safeArea 的结构**
|参数 |类型 |说明 | |参数 |类型 |说明 |
|:- |:- | |:- |:- |:- |
|left |Number |安全区域左上角横坐标 | |left |Number |安全区域左上角横坐标 |
|right |Number |安全区域右下角横坐标 | |right |Number |安全区域右下角横坐标 |
|top |Number |安全区域左上角纵坐标 | |top |Number |安全区域左上角纵坐标 |
|bottom |Number |安全区域右下角纵坐标 | |bottom |Number |安全区域右下角纵坐标 |
|width |Number |安全区域的宽度，单位逻辑像素 | |width |Number |安全区域的宽度，单位逻辑像素 |
|height |Number |安全区域的高度，单位逻辑像素 | |height |Number |安全区域的高度，单位逻辑像素 |
**示例** **示例**
...@@ -70,7 +91,7 @@ uni.getSystemInfo({ ...@@ -70,7 +91,7 @@ uni.getSystemInfo({
|参数|说明|平台差异说明| |参数|说明|平台差异说明|
|:-|:-|:-| |:-|:-|:-|
|brand|手机品牌|微信小程序、百度小程序| |brand|手机品牌|微信小程序、百度小程序、头条小程序、QQ小程序|
|model|手机型号|| |model|手机型号||
|pixelRatio|设备像素比|| |pixelRatio|设备像素比||
|screenWidth|屏幕宽度|| |screenWidth|屏幕宽度||
...@@ -79,28 +100,50 @@ uni.getSystemInfo({ ...@@ -79,28 +100,50 @@ uni.getSystemInfo({
|windowHeight|可使用窗口高度|| |windowHeight|可使用窗口高度||
|windowTop|可使用窗口的顶部位置|5+App、H5| |windowTop|可使用窗口的顶部位置|5+App、H5|
|windowBottom|可使用窗口的底部位置|5+App、H5| |windowBottom|可使用窗口的底部位置|5+App、H5|
|statusBarHeight|状态栏的高度|5+App、微信小程序、百度小程序| |statusBarHeight|状态栏的高度|头条小程序不支持|
|language|应用设置的语言|5+App、微信小程序、支付宝小程序、百度小程序| |navigationBarHeight|导航栏的高度|百度小程序|
|version|引擎版本号|5+App、微信小程序| |titleBarHeight|标题栏高度|支付宝小程序|
|language|应用设置的语言|头条小程序不支持|
|version|引擎版本号|H5不支持|
|storage|设备磁盘容量|支付宝小程序|
|currentBattery|当前电量百分比|支付宝小程序|
|appName|宿主APP名称|头条小程序|
|AppPlatform|App平台|QQ小程序|
|host|宿主平台|百度小程序|
|app|当前运行的客户端|支付宝小程序|
|cacheLocation|上一次缓存的位置信息|百度小程序|
|system|操作系统版本|| |system|操作系统版本||
|platform|客户端平台|| |platform|客户端平台，值域为：`ios`、`android`||
|fontSizeSetting|用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px|微信小程序、支付宝小程序、百度小程序| |fontSizeSetting|用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px|微信小程序、支付宝小程序、百度小程序、QQ小程序|
|SDKVersion|客户端基础库版本|5+App、微信小程序、百度小程序、头条小程序| |SDKVersion|客户端基础库版本|支付宝小程序和H5不支持|
|safeArea|在竖屏正方向下的安全区域|微信小程序| |swanNativeVersion|宿主平台版本号|百度小程序|
|albumAuthorized | 允许微信使用相册的开关（仅 iOS 有效） |微信小程序|
|cameraAuthorized | 允许微信使用摄像头的开关 |微信小程序|
|locationAuthorized | 允许微信使用定位的开关 |微信小程序|
|microphoneAuthorized | 允许微信使用麦克风的开关 |微信小程序|
|notificationAuthorized | 允许微信通知的开关 |微信小程序|
|notificationAlertAuthorized | 允许微信通知带有提醒的开关（仅 iOS 有效） |微信小程序|
|notificationBadgeAuthorized | 允许微信通知带有标记的开关（仅 iOS 有效） |微信小程序|
|notificationSoundAuthorized | 允许微信通知带有声音的开关（仅 iOS 有效） |微信小程序|
|bluetoothEnabled | 蓝牙的系统开关 |微信小程序|
|locationEnabled | 地理位置的系统开关 |微信小程序|
|wifiEnabled | Wi-Fi 的系统开关 |微信小程序|
|safeArea|在竖屏正方向下的安全区域|5+App、H5、微信小程序|
**Tips** **Tips**
- 使用注意同上getSystemInfo - 使用注意同上getSystemInfo
**safeArea 的结构**
**safeArea 的结构**
|参数 |类型 |说明 | |参数 |类型 |说明 |
|:- |:- | |:- |:- |:- |
|left |Number |安全区域左上角横坐标 | |left |Number |安全区域左上角横坐标 |
|right |Number |安全区域右下角横坐标 | |right |Number |安全区域右下角横坐标 |
|top |Number |安全区域左上角纵坐标 | |top |Number |安全区域左上角纵坐标 |
|bottom |Number |安全区域右下角纵坐标 | |bottom |Number |安全区域右下角纵坐标 |
|width |Number |安全区域的宽度，单位逻辑像素 | |width |Number |安全区域的宽度，单位逻辑像素 |
|height |Number |安全区域的高度，单位逻辑像素 | |height |Number |安全区域的高度，单位逻辑像素 |
**示例** **示例**
...@@ -137,9 +180,9 @@ Android已经改进用户隐私保护，在很多新手机上，获取imei等信 ...@@ -137,9 +180,9 @@ Android已经改进用户隐私保护，在很多新手机上，获取imei等信
平台差异说明 平台差异说明
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ程序|
|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√| |√|x|√|√|√|√|√|
**String 参数说明** **String 参数说明**
......
docs/case.md
浏览文件 @ 31d00592
...@@ -43,9 +43,13 @@ uni-app已经有几十万开发者，创建了几十万个项目，是开发者 ...@@ -43,9 +43,13 @@ uni-app已经有几十万开发者，创建了几十万个项目，是开发者
</a> </a>
</div> </div>
<a href="https://www.oschina.net/" target="_blank" class="clear-style"><b>开源中国：</b></a> 开源中国（oschina）百度小程序，提供最新的开源软件资讯。 <a href="https://www.oschina.net/" target="_blank" class="clear-style"><b>开源中国：</b></a> 中文开源技术交流社区，提供最新的开源软件资讯。
<div style="display:flex;justify-content: space-around;"> <div style="display:flex;justify-content: space-around;">
<a href="javascript:;" target="_blank" class="clear-style barcode-view"> <a href="javascript:;" target="_blank" class="clear-style barcode-view">
<img src="http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/oschina_weixin.jpg" width="200"/>
<span style="margin-top:15px;">微信小程序码</span>
</a>
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/onchina.png" width="200"/> <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/onchina.png" width="200"/>
<span style="margin-top:15px;">百度小程序码</span> <span style="margin-top:15px;">百度小程序码</span>
</a> </a>
...@@ -91,10 +95,22 @@ uni-app已经有几十万开发者，创建了几十万个项目，是开发者 ...@@ -91,10 +95,22 @@ uni-app已经有几十万开发者，创建了几十万个项目，是开发者
</a> </a>
</div> </div>
<a href="#" target="_blank" class="clear-style"><b>分秒律师：</b></a>律师咨询类应用。 <b>垃圾分类：</b>垃圾分一分，环境美十分。参与垃圾分类，保护地球家园，共创美好世界。（作者：怎么会这样）
<div style="display:flex;justify-content: space-around;"> <div style="display:flex;justify-content: space-around;">
<a href="https://www.cyb520.com/" target="_blank" class="clear-style barcode-view"> <a href="#" class="clear-style barcode-view">
<img src="http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/case-toutiao-fenmiaolvshi.png" width="200"/> <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/wastesep-mp-weixin.png" width="200"/>
<span style="margin-top:15px;">微信小程序码</span>
</a>
<a href="#" class="clear-style barcode-view">
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/wastesep-mp-qq.png" width="200"/>
<span style="margin-top:15px;">QQ小程序码</span>
</a>
<a href="#" class="clear-style barcode-view">
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/wastesep-mp-douyin.png" width="200"/>
<span style="margin-top:15px;">抖音小程序码</span>
</a>
<a href="#" class="clear-style barcode-view">
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/wastesep-mp-toutiao.png" width="200"/>
<span style="margin-top:15px;">头条小程序码</span> <span style="margin-top:15px;">头条小程序码</span>
</a> </a>
</div> </div>
......
docs/component/_sidebar.md
浏览文件 @ 31d00592
...@@ -44,8 +44,12 @@ ...@@ -44,8 +44,12 @@
* [official-account](component/official-account.md) * [official-account](component/official-account.md)
* [open-data](component/open-data.md) * [open-data](component/open-data.md)
* App nvue专用组件 * App nvue专用组件
* [barcode](component/barcode.md) * [barcode](component/barcode.md)
* [recycle-list](component/recycle-list.md) * [list](component/list.md)
* [cell](component/cell.md)
* [recycle-list](component/recycle-list.md)
* [waterfall](component/waterfall.md)
* [refresh](component/refresh.md)
* 扩展组件（uni ui） * 扩展组件（uni ui）
* [uni-ui整体介绍](component/README?id=uniui) * [uni-ui整体介绍](component/README?id=uniui)
* [Badge 数字角标](https://ext.dcloud.net.cn/plugin?id=21) * [Badge 数字角标](https://ext.dcloud.net.cn/plugin?id=21)
......
docs/component/button.md
浏览文件 @ 31d00592
...@@ -48,21 +48,22 @@ ...@@ -48,21 +48,22 @@
|:-|:-|:-| |:-|:-|:-|
|feedback|打开“意见反馈”页面，用户可提交反馈内容并上传日志|5+App、微信小程序| |feedback|打开“意见反馈”页面，用户可提交反馈内容并上传日志|5+App、微信小程序|
|share|触发用户转发|微信小程序、百度小程序、支付宝小程序、头条小程序| |share|触发用户转发|微信小程序、百度小程序、支付宝小程序、头条小程序|
|getUserInfo|获取用户信息，可以从@getuserinfo回调中获取到用户信息，包括手机号、头像、昵称等信息|微信小程序、百度小程序| |getUserInfo|获取用户信息，可以从@getuserinfo回调中获取到用户信息，包括手机号、头像、昵称等信息|微信小程序、百度小程序|
| contact | 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息 |微信小程序| | contact | 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息 |微信小程序|
| getPhoneNumber | 获取用户手机号，可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、头条小程序 | | getPhoneNumber | 获取用户手机号，可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、头条小程序 |
| launchApp | 打开APP，可以通过app-parameter属性设定向APP传的参数|微信小程序| | launchApp | 打开APP，可以通过app-parameter属性设定向APP传的参数|微信小程序|
| openSetting | 打开授权设置页 |微信小程序、百度小程序| | openSetting | 打开授权设置页 |微信小程序、百度小程序|
| getAuthorize | 支持小程序授权 | 支付宝小程序 | | getAuthorize | 支持小程序授权 | 支付宝小程序 |
| contactShare | 分享到通讯录好友 | 支付宝小程序 | | contactShare | 分享到通讯录好友 | 支付宝小程序 |
| lifestyle | 关注生活号 | 支付宝小程序 | | lifestyle | 关注生活号 | 支付宝小程序 |
**注意** **注意**
- 在小程序中，开发者可以登录 [小程序管理后台](https://mp.weixin.qq.com/) 后进入左侧菜单“客服反馈”页面获取反馈内容。 - 在小程序中，开发者可以登录 [小程序管理后台](https://mp.weixin.qq.com/) 后进入左侧菜单“客服反馈”页面获取反馈内容。
- 在 App 中，开发者登录 [DCloud开发者中心](https://dev.dcloud.net.cn/) 后点击应用名称，进入左侧菜单“用户反馈”页面获取反馈内容。 - 在 App 中，开发者登录 [DCloud开发者中心](https://dev.dcloud.net.cn/) 后点击应用名称，进入左侧菜单“用户反馈”页面获取反馈内容。
- 点击 share 分享按钮时会触发 [onShareAppMessage](/api/plugins/share) - 点击 share 分享按钮时会触发 [onShareAppMessage](/api/plugins/share)
- 支付宝小程序平台，获取用户手机号时，建议先通过条件编译的方式，调用支付宝原生API，[参考](https://docs.alipay.com/mini/api/getphonenumber)
**示例** **示例**
......
docs/component/canvas.md
浏览文件 @ 31d00592
...@@ -15,12 +15,12 @@ ...@@ -15,12 +15,12 @@
|@longtap|EventHandle||手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动|头条小程序不支持| |@longtap|EventHandle||手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动|头条小程序不支持|
|@error|EventHandle||当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}|头条小程序不支持| |@error|EventHandle||当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}|头条小程序不支持|
**注：** **注意事项：**
1. canvas 标签默认宽度 300px、高度 225px。 * canvas 标签默认宽度 300px、高度 225px，动态修改 canvas 大小后需要重新绘制。
2. 同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。 * 同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。
3. canvas在微信、百度小程序中为原生组件，层级高于前端组件，请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖，[参考](/component/native-component)。canvas在App端vue页面不是原生组件，目前App端nvue还不支持canvas组件。 * canvas 在微信小程序、百度小程序中为原生组件，层级高于前端组件，请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖，参考 [native-component](/component/native-component)。
- App-nvue 暂不支持 canvas 组件 * canvas 在App端 vue 页面不是原生组件，目前App端 nvue 还不支持 canvas 组件。
**示例：** **示例：**
......
docs/component/input.md
浏览文件 @ 31d00592
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
|cursor|Number||指定focus时的光标位置|| |cursor|Number||指定focus时的光标位置||
|selection-start|Number|-1|光标起始位置，自动聚集时有效，需与selection-end搭配使用|| |selection-start|Number|-1|光标起始位置，自动聚集时有效，需与selection-end搭配使用||
|selection-end|Number|-1|光标结束位置，自动聚集时有效，需与selection-start搭配使用|| |selection-end|Number|-1|光标结束位置，自动聚集时有效，需与selection-start搭配使用||
|adjust-position|Boolean|true|键盘弹起时，是否自动上推页面|5+App、微信小程序、百度小程序、QQ小程序| |adjust-position|Boolean|true|键盘弹起时，是否自动上推页面|5+App（softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序|
|@input|EventHandle||当键盘输入时，触发input事件，event.detail = {value}|差异见下方 Tips| |@input|EventHandle||当键盘输入时，触发input事件，event.detail = {value}|差异见下方 Tips|
|@focus|EventHandle||输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度|仅微信小程序、5+App（HBuilderX 2.0+ [nvue uni-app模式](http://ask.dcloud.net.cn/article/36074)） 、QQ小程序支持 height| |@focus|EventHandle||输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度|仅微信小程序、5+App（HBuilderX 2.0+ [nvue uni-app模式](http://ask.dcloud.net.cn/article/36074)） 、QQ小程序支持 height|
|@blur|EventHandle||输入框失去焦点时触发，event.detail = {value: value}|| |@blur|EventHandle||输入框失去焦点时触发，event.detail = {value: value}||
...@@ -99,34 +99,16 @@ this.$mp.page.$getAppWebview().setStyle({ ...@@ -99,34 +99,16 @@ this.$mp.page.$getAppWebview().setStyle({
#### 关于软键盘弹出的逻辑说明 #### 关于软键盘弹出的逻辑说明
App平台，软键盘弹出有adjustResize|adjustPan 两种模式 App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adjustPan 模式，小程序平台只支持 adjustPan 模式，H5平台因不同浏览器而异
- adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度 - adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度
- adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住 - adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住
除了App平台，其他平台只支持adjustPan模式。App平台两种模式都支持，具体如下： 配置方式，在 pages.json 中配置 style
- Android：默认为adjustResize。配置修改只能在manifest中修改，全局生效。如果改为adjustPan，无法顺利上推窗体，底部的input会被软键盘盖住
- iOS平台：默认为adjustPan。配置可以在manifest中全局修改，也可以单独页面设置style。没有类似Android的局限。
如下为全局或页面的配置方式：
- 在manifest中配置
```json ```json
"app-plus": { "app-plus": {
"softinput": { "softinputMode": "adjustResize"
"mode": "adjustResize|adjustPan" // 软键盘弹出模式 }
}
}
```
- 如需要单个页面配置，则在pages.json中配置
```json
{
"path": "pages/component/input/input",
"style": {
"app-plus":{
"softinputMode": "adjustResize" //仅iOS支持单个页面配置
}
}
}
``` ```
App端开发聊天类应用时，目前推荐改为adjustResize模式。在hello uni-app的模板-聊天中有详细示例。 App端开发聊天类应用时，目前推荐改为adjustResize模式。在hello uni-app的模板-聊天中有详细示例。
......
docs/component/list.md
浏览文件 @ 31d00592
...@@ -32,7 +32,7 @@ app端nvue专用组件。 ...@@ -32,7 +32,7 @@ app端nvue专用组件。
`<list>` 的子组件只能包括以下四种组件或是 fix 定位的组件，其他形式的组件将不能被正确渲染。 `<list>` 的子组件只能包括以下四种组件或是 fix 定位的组件，其他形式的组件将不能被正确渲染。
- `<cell>`<br> - `<cell>`<br>
用于定义列表中的子列表项，类似于 HTML 中的 ul 之于 li。Weex 会对 `<cell>` 进行高效的内存回收以达到更好的性能。 用于定义列表中的子列表项，类似于 HTML 中的 ul 之于 li。`<list>` 会对 `<cell>` 进行高效的内存回收以达到更好的性能。
- `<header>`<br>当 `<header>` 到达屏幕顶部时，吸附在屏幕顶部。 - `<header>`<br>当 `<header>` 到达屏幕顶部时，吸附在屏幕顶部。
- `<refresh>`<br>用于给列表添加下拉刷新的功能。 - `<refresh>`<br>用于给列表添加下拉刷新的功能。
- `<loading>`<br> - `<loading>`<br>
...@@ -50,6 +50,8 @@ app端nvue专用组件。 ...@@ -50,6 +50,8 @@ app端nvue专用组件。
`loadmoreoffset` 示意图： `loadmoreoffset` 示意图：
<img src="https://img-cdn-qiniu.dcloud.net.cn/app-nvue-component-list.png" />
#### 事件 #### 事件
......
docs/component/navigator.md
浏览文件 @ 31d00592
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
|reLaunch|对应 uni.reLaunch 的功能|头条小程序不支持| |reLaunch|对应 uni.reLaunch 的功能|头条小程序不支持|
|navigateBack|对应 uni.navigateBack 的功能|&nbsp;| |navigateBack|对应 uni.navigateBack 的功能|&nbsp;|
**注意** **注意**
- navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, ``<navigator>`` 的子节点背景色应为透明色。** - navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, ``<navigator>`` 的子节点背景色应为透明色。**
- app-nvue 平台暂不支持 `<navigator>` - app-nvue 平台暂不支持 `<navigator>`
**示例** **示例**
...@@ -49,5 +49,26 @@ ...@@ -49,5 +49,26 @@
</template> </template>
``` ```
```javascript
// navigate.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
```
url有长度限制，太长的字符串会传递失败，可使用[窗体通信](https://uniapp.dcloud.io/collocation/frame/communication)、[全局变量](https://ask.dcloud.net.cn/article/35021)，或`encodeURIComponent`等多种方式解决，如下为`encodeURIComponent`示例。
```html
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
```
```javascript
// navigate.vue页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}
```
**注意** **注意**
- 跳转tabbar页面，必须设置open-type="switchTab" - 跳转tabbar页面，必须设置open-type="switchTab"
\ No newline at end of file
docs/component/refresh.md 0 → 100644
浏览文件 @ 31d00592
#### refresh
app端nvue专用组件。
`<refresh>` 为容器提供下拉刷新功能。
> 注意
> - `<refresh>` 是 `<scroll-view>`、`<list>`、`<waterfall>` 的子组件，只能在被它们包含时才能被正确渲染。
```
<scroll-view>
<refresh>
<text>Refreshing...</text>
</refresh>
<div v-for="num in lists">
<text>{{num}}</text>
</div>
</scroll-view>
```
#### 子组件
- 诸如 `<text>`、`<image>` 之类的任何组件，都可以放到 `<loading>` 进行渲染。
- 特殊子组件 `<loading-indicator>`: 只能作为 `<refresh>` 和 `<loading>` 的子组件使用，拥有默认的动画效果实现。
```
<refresh>
<text>Refreshing</text>
<loading-indicator></loading-indicator>
</refresh>
```
#### 属性
`display`
控制 `<refresh>` 组件显示、隐藏。`display` 的设置必须成对出现，即设置 `display="show"`, 必须有对应的 `display="hide"`。可选值为 `show / hide`，默认值为 `show`。
#### 事件
- refresh 事件：当 `<scroll-view>`、`<list>`、`<waterfall>` 被下拉完成时触发。
- pullingdown 事件：当 `<scroll-view>`、`<list>`、`<waterfall>` 被下拉时触发。 可以从 `event` 参数对象中获取以下数据：
- `dy`: 前后两次回调滑动距离的差值
- `pullingDistance`: 下拉的距离
- `viewHeight`: refresh 组件高度
- `type`: “pullingdown” 常数字符串
```
<refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<text>Refreshing ...</text>
<loading-indicator></loading-indicator>
</refresh>
```
docs/component/waterfall.md
浏览文件 @ 31d00592
...@@ -29,10 +29,11 @@ app端nvue专用组件。 ...@@ -29,10 +29,11 @@ app端nvue专用组件。
和 `<list>` 组件一样, `<waterfall>` 组件的子组件只能包括以下四种组件或是 fix 定位的组件，其他形式的组件将不能被正确渲染。 和 `<list>` 组件一样, `<waterfall>` 组件的子组件只能包括以下四种组件或是 fix 定位的组件，其他形式的组件将不能被正确渲染。
- `<cell>`：用于定义列表中的子列表项，类似于 HTML 中的 ul 之于 li。Weex 会对 `<cell>` 进行高效的内存回收以达到更好的性能。 - `<cell>`：用于定义列表中的子列表项，类似于 HTML 中的 ul 之于 li。`<waterfall>` 会对 `<cell>` 进行高效的内存回收以达到更好的性能。
- `<header>`：当 `<header>` 到达屏幕顶部时，吸附在屏幕顶部。 - `<header>`：当 `<header>` 到达屏幕顶部时，吸附在屏幕顶部。
- `<refresh>`：用于给列表添加下拉刷新的功能。 - `<refresh>`：用于给列表添加下拉刷新的功能。
- `<loading>`：`<loading>` 用法与特性和 `<refresh>` 类似，用于给列表添加上拉加载更多的功能。 - `<loading>`：`<loading>` 用法与特性和 `<refresh>` 类似，用于给列表添加上拉加载更多的功能。
<img src="https://img-cdn-qiniu.dcloud.net.cn/app-nvue-component-waterfall-01.png" />
#### 属性 #### 属性
...@@ -46,6 +47,7 @@ app端nvue专用组件。 ...@@ -46,6 +47,7 @@ app端nvue专用组件。
- column-gap: [可选]列与列的间隙. 如果指定了 `normal` ，则对应 32. - column-gap: [可选]列与列的间隙. 如果指定了 `normal` ，则对应 32.
- left-gap: [可选]左边cell和列表的间隙. 如果未指定 ，则对应 `0` - left-gap: [可选]左边cell和列表的间隙. 如果未指定 ，则对应 `0`
- right-gap: [可选]右边cell和列表的间隙. 如果未指定，则对应 `0` - right-gap: [可选]右边cell和列表的间隙. 如果未指定，则对应 `0`
<img src="https://img-cdn-qiniu.dcloud.net.cn/app-nvue-component-waterfall-02.png" />
其他支持的属性参见 `<list>` 组件属性部分 其他支持的属性参见 `<list>` 组件属性部分
......
docs/use.md
浏览文件 @ 31d00592
...@@ -11,12 +11,6 @@ ...@@ -11,12 +11,6 @@
详见Vue官方文档：[生命周期钩子](https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90)。 详见Vue官方文档：[生命周期钩子](https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90)。
**注意**
* 不要在选项属性或回调上使用箭头函数，比如 ``created: () => console.log(this.a)`` 或 ``vm.$watch('a', newValue => this.myMethod())``。因为箭头函数是和父级上下文绑定在一起的，``this`` 不会是如你做预期的 ``Vue`` 实例，且 ``this.a`` 或 ``this.myMethod`` 也会是未定义的。
* 建议使用 `uni-app` 的 `onReady`代替 `vue` 的 `mounted`。
* 建议使用 `uni-app` 的 `onLoad` 代替 `vue` 的 `created`。
## 模板语法 ## 模板语法
......
package.json
浏览文件 @ 31d00592
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
}, },
"dependencies": { "dependencies": {
"base64-arraybuffer": "^0.2.0", "base64-arraybuffer": "^0.2.0",
"intersection-observer": "^0.7.0" "intersection-observer": "^0.7.0",
"safe-area-insets": "^1.4.1"
}, },
"private": true, "private": true,
"devDependencies": { "devDependencies": {
......
src/platforms/app-plus/service/api/device/system.js
浏览文件 @ 31d00592
...@@ -23,10 +23,19 @@ export function getSystemInfo () { ...@@ -23,10 +23,19 @@ export function getSystemInfo () {
const screenHeight = plus.screen.resolutionHeight const screenHeight = plus.screen.resolutionHeight
// 横屏时 iOS 获取的状态栏高度错误，进行纠正 // 横屏时 iOS 获取的状态栏高度错误，进行纠正
var landscape = Math.abs(plus.navigator.getOrientation()) === 90 var landscape = Math.abs(plus.navigator.getOrientation()) === 90
var statusBarHeight = plus.navigator.getStatusbarHeight() var statusBarHeight = Math.round(plus.navigator.getStatusbarHeight())
if (ios && landscape) { if (ios && landscape) {
statusBarHeight = Math.min(20, statusBarHeight) statusBarHeight = Math.min(20, statusBarHeight)
} }
var safeAreaInsets
function getSafeAreaInsets () {
return {
left: 0,
right: 0,
top: titleNView ? 0 : statusBarHeight,
bottom: 0
}
}
// 判断是否存在 titleNView // 判断是否存在 titleNView
var titleNView var titleNView
var webview = getLastWebview() var webview = getLastWebview()
...@@ -36,7 +45,22 @@ export function getSystemInfo () { ...@@ -36,7 +45,22 @@ export function getSystemInfo () {
titleNView = style && style.titleNView titleNView = style && style.titleNView
titleNView = titleNView && titleNView.type === 'default' titleNView = titleNView && titleNView.type === 'default'
} }
safeAreaInsets = ios ? webview.getSafeAreaInsets() : getSafeAreaInsets()
} else {
safeAreaInsets = ios ? plus.navigator.getSafeAreaInsets() : getSafeAreaInsets()
}
var windowHeight = Math.min(screenHeight - (titleNView ? (statusBarHeight + TITLEBAR_HEIGHT)
: 0) - (isTabBarPage() && tabBar.visible ? TABBAR_HEIGHT : 0), screenHeight)
var windowWidth = screenWidth
var safeArea = {
left: safeAreaInsets.left,
right: windowWidth - safeAreaInsets.right,
top: safeAreaInsets.top,
bottom: windowHeight - safeAreaInsets.bottom,
width: windowWidth - safeAreaInsets.left - safeAreaInsets.right,
height: windowHeight - safeAreaInsets.top - safeAreaInsets.bottom
} }
return { return {
errMsg: 'getSystemInfo:ok', errMsg: 'getSystemInfo:ok',
brand: '', brand: '',
...@@ -44,11 +68,8 @@ export function getSystemInfo () { ...@@ -44,11 +68,8 @@ export function getSystemInfo () {
pixelRatio: plus.screen.scale, pixelRatio: plus.screen.scale,
screenWidth, screenWidth,
screenHeight, screenHeight,
// 安卓端 webview 宽度有时比屏幕多 1px，相比取最小值 windowWidth,
// TODO screenWidth,screenHeight windowHeight,
windowWidth: screenWidth,
windowHeight: Math.min(screenHeight - (titleNView ? (statusBarHeight + TITLEBAR_HEIGHT)
: 0) - (isTabBarPage() && tabBar.visible ? TABBAR_HEIGHT : 0), screenHeight),
statusBarHeight, statusBarHeight,
language: plus.os.language, language: plus.os.language,
system: plus.os.version, system: plus.os.version,
...@@ -57,6 +78,7 @@ export function getSystemInfo () { ...@@ -57,6 +78,7 @@ export function getSystemInfo () {
platform, platform,
SDKVersion: '', SDKVersion: '',
windowTop: 0, windowTop: 0,
windowBottom: 0 windowBottom: 0,
safeArea
} }
} }
src/platforms/h5/service/api/context/inner-audio.js
浏览文件 @ 31d00592
...@@ -5,7 +5,7 @@ import getRealPath from 'uni-platform/helpers/get-real-path' ...@@ -5,7 +5,7 @@ import getRealPath from 'uni-platform/helpers/get-real-path'
*/ */
const innerAudioContextEventNames = ['onCanplay', 'onPlay', 'onPause', 'onStop', 'onEnded', 'onTimeUpdate', 'onError', 'onWaiting', 'onSeeking', 'onSeeked'] const innerAudioContextEventNames = ['onCanplay', 'onPlay', 'onPause', 'onStop', 'onEnded', 'onTimeUpdate', 'onError', 'onWaiting', 'onSeeking', 'onSeeked']
const innerAudioContextOffEventNames = ['offCanplay', 'offPlay', 'offPause', 'offStop', 'offEnded', 'offTimeUpdate', 'offError', 'offWaiting', 'offSeeking', 'offSeeke'] const innerAudioContextOffEventNames = ['offCanplay', 'offPlay', 'offPause', 'offStop', 'offEnded', 'offTimeUpdate', 'offError', 'offWaiting', 'offSeeking', 'offSeeked']
/** /**
* 音频上下文对象 * 音频上下文对象
......
src/platforms/h5/service/api/device/get-system-info.js
浏览文件 @ 31d00592
import getWindowOffset from 'uni-platform/helpers/get-window-offset' import getWindowOffset from 'uni-platform/helpers/get-window-offset'
import safeAreaInsets from 'safe-area-insets'
const ua = navigator.userAgent const ua = navigator.userAgent
/** /**
...@@ -71,6 +72,14 @@ export function getSystemInfoSync () { ...@@ -71,6 +72,14 @@ export function getSystemInfoSync () {
var system = `${osname} ${osversion}` var system = `${osname} ${osversion}`
var platform = osname.toLocaleLowerCase() var platform = osname.toLocaleLowerCase()
var safeArea = {
left: safeAreaInsets.left,
right: windowWidth - safeAreaInsets.right,
top: safeAreaInsets.top,
bottom: windowHeight - safeAreaInsets.bottom,
width: windowWidth - safeAreaInsets.left - safeAreaInsets.right,
height: windowHeight - safeAreaInsets.top - safeAreaInsets.bottom
}
const { const {
top: windowTop, top: windowTop,
...@@ -92,7 +101,8 @@ export function getSystemInfoSync () { ...@@ -92,7 +101,8 @@ export function getSystemInfoSync () {
statusBarHeight, statusBarHeight,
system, system,
platform, platform,
model model,
safeArea
} }
} }
/** /**
......
yarn.lock
浏览文件 @ 31d00592
...@@ -7760,6 +7760,10 @@ rxjs@^6.4.0: ...@@ -7760,6 +7760,10 @@ rxjs@^6.4.0:
dependencies: dependencies:
tslib "^1.9.0" tslib "^1.9.0"
safe-area-insets@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/safe-area-insets/-/safe-area-insets-1.4.1.tgz#89309e01a516dcd7d2fe012a9c4115182957bd8b"
safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1: safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2" version "5.1.2"
resolved "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz?cache=0&sync_timestamp=1562349888578&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsafe-buffer%2Fdownload%2Fsafe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" resolved "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz?cache=0&sync_timestamp=1562349888578&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsafe-buffer%2Fdownload%2Fsafe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或