diff --git a/.gitignore b/.gitignore index 617b82aa26819573350a1236386cc6d2f8263018..7a3e1957fd8bc61075b9a680c04da301e4ca39f9 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ node_modules/ .project unpackage/ .vscode/ +.idea .DS_Store diff --git a/README.md b/README.md index 0cd25d6bea3a21867d1973bfec495a2f795ffa27..bd9b4b4a23e7ca083d78d59ef0239aef434a877b 100644 --- a/README.md +++ b/README.md @@ -14,9 +14,9 @@ ## 扫码体验 -一套代码编译到7个平台,开发一次、多处运行,这不是梦想,而是现实。依次扫描7个二维码,亲自体验最全面的跨平台效果! +一套代码编译到8个平台,开发一次、多处运行,这不是梦想,而是现实。依次扫描8个二维码,亲自体验最全面的跨平台效果! - + *注: Appstore、百度、头条平台不能提交简单demo,故iOS、百度小程序、头条小程序版补充了一些其他功能。* @@ -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)。 ## 论坛 diff --git a/docs/README.md b/docs/README.md index f19ee09f45abacca10e39facc7be991de8c60ad2..febd45430d4b8cefc7afb4c66ee461edbab90905 100644 --- a/docs/README.md +++ b/docs/README.md @@ -7,7 +7,7 @@

快速体验

-

一套代码编到7个平台,这不是梦想。眼见为实,扫描7个二维码,亲自体验最全面的跨平台效果!

+

一套代码编到8个平台,这不是梦想。眼见为实,扫描8个二维码,亲自体验最全面的跨平台效果!

@@ -45,6 +45,12 @@
头条小程序版
+ +
+ +
+ QQ小程序版 +

注:Appstore、百度、头条平台不能提交简单demo,故补充了一些其他功能。
diff --git a/docs/api/media/image.md b/docs/api/media/image.md index f7fe4aebdfe56d00c8767cb12cdb1318c6b11c8e..3f4f6274727ae6fd33440542c6db108dbf717306 100644 --- a/docs/api/media/image.md +++ b/docs/api/media/image.md @@ -1,5 +1,9 @@ ### 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 参数说明** @@ -55,7 +59,7 @@ uni.chooseImage({ |current|String/Number|详见下方说明|详见下方说明|| |urls|Array<String>|是|需要预览的图片链接列表|| |indicator|String|否|图片指示器样式,可取值:"default" - 底部圆点指示器; "number" - 顶部数字指示器; "none" - 不显示指示器。|5+App| -|loop|Boolean|否|是否可循环预览,默认值为 false|5+App| +|loop|Boolean|否|是否可循环预览,默认值为 false|5+App| |longPressActions|Object|否|长按图片显示操作菜单,如不填默认为**保存相册**,1.9.5 起支持。|5+App| |success|Function|否|接口调用成功的回调函数|| |fail|Function|否|接口调用失败的回调函数|| @@ -78,47 +82,47 @@ current 为当前显示图片的链接/索引值,不填或填写的值无效 - 传 B2 的链接,预览的结果是 B1,前一张是 A,下一张是 C。 - 传 B2 的索引值 3,预览的结果是 B2,前一张是 C,下一张是 D。此时在微信/百度/头条小程序平台,最终传入的 urls 是 `[A, C, B2, D]`,过滤掉了与 B2 重复的 B1。 - -**longPressActions 参数说明** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|itemList|Array<String>|是|按钮的文字数组| -|itemColor|String|否|按钮的文字颜色,字符串格式,默认为"#000000"| -|success|Function|否|接口调用成功的回调函数,详见返回参数说明| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| - + +**longPressActions 参数说明** + +|参数|类型|必填|说明| +|:-|:-|:-|:-| +|itemList|Array<String>|是|按钮的文字数组| +|itemColor|String|否|按钮的文字颜色,字符串格式,默认为"#000000"| +|success|Function|否|接口调用成功的回调函数,详见返回参数说明| +|fail|Function|否|接口调用失败的回调函数| +|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| + **success 返回参数说明** |参数|类型|说明| -|:-|:-|:-| +|:-|:-|:-| |index|Number|用户长按图片的索引值| -|tapIndex|Number|用户点击按钮列表的索引值| - +|tapIndex|Number|用户点击按钮列表的索引值| + **示例** ```javascript // 从相册选择6张图 -uni.chooseImage({ - count: 6, - sizeType: ['original', 'compressed'], - sourceType: ['album'], - success: function(res) { - // 预览图片 - uni.previewImage({ - urls: res.tempFilePaths, - longPressActions: { - itemList: ['发送给朋友', '保存图片', '收藏'], - success: function(data) { - console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); - }, - fail: function(err) { - console.log(err.errMsg); - } - } - }); - } +uni.chooseImage({ + count: 6, + sizeType: ['original', 'compressed'], + sourceType: ['album'], + success: function(res) { + // 预览图片 + uni.previewImage({ + urls: res.tempFilePaths, + longPressActions: { + itemList: ['发送给朋友', '保存图片', '收藏'], + success: function(data) { + console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); + }, + fail: function(err) { + console.log(err.errMsg); + } + } + }); + } }); ``` @@ -221,54 +225,54 @@ uni.chooseImage({ }); } }); -``` - -# uni.compressImage(OBJECT) - -压缩图片接口,可选压缩质量 - +``` + +# uni.compressImage(OBJECT) + +压缩图片接口,可选压缩质量 + **平台差异说明** |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序 |:-:|:-:|:-:|:-:|:-:|:-:| -|1.9.7+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|√|√|x|x| - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| :- | :- | :- | :- | :- | -| src | String | | 是 | 图片路径,图片的路径,可以是相对路径、临时文件路径、存储文件路径 | -| quality | Number | 80 | 否 | 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效) | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) | - -**success 返回参数说明** - -| 属性 | 类型 | 说明 | -| :- | :- | :- | -| tempFilePath | String | 压缩后图片的临时文件路径 | - -**示例代码:** - -```js +|1.9.7+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|√|√|x|x| + +**OBJECT 参数说明** + +| 属性 | 类型 | 默认值 | 必填 | 说明 | +| :- | :- | :- | :- | :- | +| src | String | | 是 | 图片路径,图片的路径,可以是相对路径、临时文件路径、存储文件路径 | +| quality | Number | 80 | 否 | 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效) | +| success | Function | | 否 | 接口调用成功的回调函数 | +| fail | Function | | 否 | 接口调用失败的回调函数 | +| complete | Function | | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) | + +**success 返回参数说明** + +| 属性 | 类型 | 说明 | +| :- | :- | :- | +| tempFilePath | String | 压缩后图片的临时文件路径 | + +**示例代码:** + +```js uni.compressImage({ src: '/static/logo.jpg', quality: 80, success: res => { console.log(res.tempFilePath) } -}) -``` - - -# wx.chooseMessageFile(OBJECT) - -从客户端会话选择文件。 - -**平台差异说明** - -|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| -|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|x|x|x| - +}) +``` + + +# wx.chooseMessageFile(OBJECT) + +从客户端会话选择文件。 + +**平台差异说明** + +|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| +|:-:|:-:|:-:|:-:|:-:|:-:| +|x|x|√|x|x|x| + diff --git a/docs/api/request/websocket.md b/docs/api/request/websocket.md index 2c464fd48c97f72ce1193515c0ed721750df7747..5bc8a0b236c88d8fc6a466910f646ba42c970a9c 100644 --- a/docs/api/request/websocket.md +++ b/docs/api/request/websocket.md @@ -47,15 +47,17 @@ var socketTask = uni.connectSocket({ 如果没有传入 success / fail / complete 参数,则会返回封装后的 Promise 对象:[Promise 封装](/api/README?id=promise-%E5%B0%81%E8%A3%85) -**注意** -- 网络请求的 ``超时时间`` 可以统一在 ``manifest.json`` 中配置 [networkTimeout](/collocation/manifest?id=networktimeout)。 - -自定义组件模式下是基于 `weex` 的 `v8` 引擎运行,所有 `vue` 页面的 `js` 都是在同一个 `weex` 的 `js` 环境中运行。目前 `weex` 限制一个 `js` 环境中只支持一个 `websocket` 连接,所以导致所有 `vue` 页面只能使用一个 `websocket` 连接。 +**注意事项** + +- 网络请求的 ``超时时间`` 可以统一在 ``manifest.json`` 中配置 [networkTimeout](/collocation/manifest?id=networktimeout)。 +- 目前不支持 ``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` 连接 diff --git a/docs/api/router.md b/docs/api/router.md index aa75802bf11ce423a0b19768002b543d641a6ce4..0340c73b4a6cdee00945bbcf4a131da1c56c997a 100644 --- a/docs/api/router.md +++ b/docs/api/router.md @@ -16,12 +16,13 @@ **示例** ```javascript +//在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: 'test?id=1&name=uniapp' }); ``` ```javascript -// test.vue +// 在test.vue页面接受参数 export default { onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 console.log(option.id); //打印出上个页面传递的参数。 @@ -30,11 +31,20 @@ export default { } ``` +url有长度限制,太长的字符串会传递失败,可使用[窗体通信](https://uniapp.dcloud.io/collocation/frame/communication)、[全局变量](https://ask.dcloud.net.cn/article/35021),或`encodeURIComponent`等多种方式解决,如下为`encodeURIComponent`示例。 +```html + +``` +```javascript +// 在test.vue页面接受参数 +onLoad: function (option) { + const item = JSON.parse(decodeURIComponent(option.item)); +} +``` **注意:** * 页面跳转路径有层级限制,不能无限制跳转新页面 * 跳转到 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已对多端进行封装,可参考。 #### uni.redirectTo(OBJECT) diff --git a/docs/api/system/info.md b/docs/api/system/info.md index 14c001ab70f7d2d97f49bed4b2aa23d554a3bc94..77f07a4e74eb8729dc75bf905d907d6b8ab0eccd 100644 --- a/docs/api/system/info.md +++ b/docs/api/system/info.md @@ -13,7 +13,7 @@ |参数|说明|平台差异说明| |:-|:-|:-| -|brand|手机品牌|微信小程序| +|brand|手机品牌|微信小程序、百度小程序、头条小程序、QQ小程序| |model|手机型号|| |pixelRatio|设备像素比|| |screenWidth|屏幕宽度|| @@ -22,30 +22,51 @@ |windowHeight|可使用窗口高度|| |windowTop|可使用窗口的顶部位置|5+App、H5| |windowBottom|可使用窗口的底部位置|5+App、H5| -|statusBarHeight|状态栏的高度|| -|language|应用设置的语言|| -|version|引擎版本号|微信小程序、5+App| +|statusBarHeight|状态栏的高度|头条小程序不支持| +|navigationBarHeight|导航栏的高度|百度小程序| +|titleBarHeight|标题栏高度|支付宝小程序| +|language|应用设置的语言|头条小程序不支持| +|version|引擎版本号|H5不支持| +|storage|设备磁盘容量|支付宝小程序| +|currentBattery|当前电量百分比|支付宝小程序| +|appName|宿主APP名称|头条小程序| +|AppPlatform|App平台|QQ小程序| +|host|宿主平台|百度小程序| +|app|当前运行的客户端|支付宝小程序| +|cacheLocation|上一次缓存的位置信息|百度小程序| |system|操作系统版本|| |platform|客户端平台,值域为:`ios`、`android`|| -|fontSizeSetting|用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准,单位:px|微信小程序| -|SDKVersion|客户端基础库版本|微信小程序、5+App| -|safeArea|在竖屏正方向下的安全区域|微信小程序| +|fontSizeSetting|用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准,单位:px|微信小程序、支付宝小程序、百度小程序、QQ小程序| +|SDKVersion|客户端基础库版本|支付宝小程序和H5不支持| +|swanNativeVersion|宿主平台版本号|百度小程序| +|albumAuthorized | 允许微信使用相册的开关(仅 iOS 有效) |微信小程序| +|cameraAuthorized | 允许微信使用摄像头的开关 |微信小程序| +|locationAuthorized | 允许微信使用定位的开关 |微信小程序| +|microphoneAuthorized | 允许微信使用麦克风的开关 |微信小程序| +|notificationAuthorized | 允许微信通知的开关 |微信小程序| +|notificationAlertAuthorized | 允许微信通知带有提醒的开关(仅 iOS 有效) |微信小程序| +|notificationBadgeAuthorized | 允许微信通知带有标记的开关(仅 iOS 有效) |微信小程序| +|notificationSoundAuthorized | 允许微信通知带有声音的开关(仅 iOS 有效) |微信小程序| +|bluetoothEnabled | 蓝牙的系统开关 |微信小程序| +|locationEnabled | 地理位置的系统开关 |微信小程序| +|wifiEnabled | Wi-Fi 的系统开关 |微信小程序| +|safeArea|在竖屏正方向下的安全区域|5+App、H5、微信小程序| **Tips** - 屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生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 |安全区域左上角横坐标 | -|right |Number |安全区域右下角横坐标 | -|top |Number |安全区域左上角纵坐标 | -|bottom |Number |安全区域右下角纵坐标 | -|width |Number |安全区域的宽度,单位逻辑像素 | +|:- |:- |:- | +|left |Number |安全区域左上角横坐标 | +|right |Number |安全区域右下角横坐标 | +|top |Number |安全区域左上角纵坐标 | +|bottom |Number |安全区域右下角纵坐标 | +|width |Number |安全区域的宽度,单位逻辑像素 | |height |Number |安全区域的高度,单位逻辑像素 | - + **示例** @@ -70,7 +91,7 @@ uni.getSystemInfo({ |参数|说明|平台差异说明| |:-|:-|:-| -|brand|手机品牌|微信小程序、百度小程序| +|brand|手机品牌|微信小程序、百度小程序、头条小程序、QQ小程序| |model|手机型号|| |pixelRatio|设备像素比|| |screenWidth|屏幕宽度|| @@ -79,28 +100,50 @@ uni.getSystemInfo({ |windowHeight|可使用窗口高度|| |windowTop|可使用窗口的顶部位置|5+App、H5| |windowBottom|可使用窗口的底部位置|5+App、H5| -|statusBarHeight|状态栏的高度|5+App、微信小程序、百度小程序| -|language|应用设置的语言|5+App、微信小程序、支付宝小程序、百度小程序| -|version|引擎版本号|5+App、微信小程序| +|statusBarHeight|状态栏的高度|头条小程序不支持| +|navigationBarHeight|导航栏的高度|百度小程序| +|titleBarHeight|标题栏高度|支付宝小程序| +|language|应用设置的语言|头条小程序不支持| +|version|引擎版本号|H5不支持| +|storage|设备磁盘容量|支付宝小程序| +|currentBattery|当前电量百分比|支付宝小程序| +|appName|宿主APP名称|头条小程序| +|AppPlatform|App平台|QQ小程序| +|host|宿主平台|百度小程序| +|app|当前运行的客户端|支付宝小程序| +|cacheLocation|上一次缓存的位置信息|百度小程序| |system|操作系统版本|| -|platform|客户端平台|| -|fontSizeSetting|用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准,单位:px|微信小程序、支付宝小程序、百度小程序| -|SDKVersion|客户端基础库版本|5+App、微信小程序、百度小程序、头条小程序| -|safeArea|在竖屏正方向下的安全区域|微信小程序| +|platform|客户端平台,值域为:`ios`、`android`|| +|fontSizeSetting|用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准,单位:px|微信小程序、支付宝小程序、百度小程序、QQ小程序| +|SDKVersion|客户端基础库版本|支付宝小程序和H5不支持| +|swanNativeVersion|宿主平台版本号|百度小程序| +|albumAuthorized | 允许微信使用相册的开关(仅 iOS 有效) |微信小程序| +|cameraAuthorized | 允许微信使用摄像头的开关 |微信小程序| +|locationAuthorized | 允许微信使用定位的开关 |微信小程序| +|microphoneAuthorized | 允许微信使用麦克风的开关 |微信小程序| +|notificationAuthorized | 允许微信通知的开关 |微信小程序| +|notificationAlertAuthorized | 允许微信通知带有提醒的开关(仅 iOS 有效) |微信小程序| +|notificationBadgeAuthorized | 允许微信通知带有标记的开关(仅 iOS 有效) |微信小程序| +|notificationSoundAuthorized | 允许微信通知带有声音的开关(仅 iOS 有效) |微信小程序| +|bluetoothEnabled | 蓝牙的系统开关 |微信小程序| +|locationEnabled | 地理位置的系统开关 |微信小程序| +|wifiEnabled | Wi-Fi 的系统开关 |微信小程序| +|safeArea|在竖屏正方向下的安全区域|5+App、H5、微信小程序| + **Tips** -- 使用注意同上getSystemInfo +- 使用注意同上getSystemInfo + +**safeArea 的结构** -**safeArea 的结构** - |参数 |类型 |说明 | -|:- |:- | -|left |Number |安全区域左上角横坐标 | -|right |Number |安全区域右下角横坐标 | -|top |Number |安全区域左上角纵坐标 | -|bottom |Number |安全区域右下角纵坐标 | -|width |Number |安全区域的宽度,单位逻辑像素 | -|height |Number |安全区域的高度,单位逻辑像素 | - +|:- |:- |:- | +|left |Number |安全区域左上角横坐标 | +|right |Number |安全区域右下角横坐标 | +|top |Number |安全区域左上角纵坐标 | +|bottom |Number |安全区域右下角纵坐标 | +|width |Number |安全区域的宽度,单位逻辑像素 | +|height |Number |安全区域的高度,单位逻辑像素 | + **示例** @@ -137,9 +180,9 @@ Android已经改进用户隐私保护,在很多新手机上,获取imei等信 平台差异说明 -|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| -|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|√|√|√| +|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ程序| +|:-:|:-:|:-:|:-:|:-:|:-:|:-:| +|√|x|√|√|√|√|√| **String 参数说明** diff --git a/docs/case.md b/docs/case.md index 5ad57a024b0f183da0c7a5ea9d5e7c9117d5e64a..db67f0ee051c1e68673044754e4ac88de449f6ba 100644 --- a/docs/case.md +++ b/docs/case.md @@ -43,9 +43,13 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者

-开源中国: 开源中国(oschina)百度小程序,提供最新的开源软件资讯。 +开源中国: 中文开源技术交流社区,提供最新的开源软件资讯。
+ + 微信小程序码 + + 百度小程序码 @@ -91,10 +95,22 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
-分秒律师:律师咨询类应用。 +垃圾分类:垃圾分一分,环境美十分。参与垃圾分类,保护地球家园,共创美好世界。(作者:怎么会这样)
- - + + + 微信小程序码 + + + + QQ小程序码 + + + + 抖音小程序码 + + + 头条小程序码
diff --git a/docs/component/_sidebar.md b/docs/component/_sidebar.md index 5c7f8e60795fe9b9681149e5b6573d7c3f559712..b93a0168836a19d1a81bdeb36f3783ba11c0a567 100644 --- a/docs/component/_sidebar.md +++ b/docs/component/_sidebar.md @@ -44,8 +44,12 @@ * [official-account](component/official-account.md) * [open-data](component/open-data.md) * App nvue专用组件 - * [barcode](component/barcode.md) - * [recycle-list](component/recycle-list.md) + * [barcode](component/barcode.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整体介绍](component/README?id=uniui) * [Badge 数字角标](https://ext.dcloud.net.cn/plugin?id=21) diff --git a/docs/component/button.md b/docs/component/button.md index 69c505b60a9a037198658775b66ca417d13ff74c..b81fab6dc487d2a6b660bf2100e481888263683f 100644 --- a/docs/component/button.md +++ b/docs/component/button.md @@ -48,21 +48,22 @@ |:-|:-|:-| |feedback|打开“意见反馈”页面,用户可提交反馈内容并上传日志|5+App、微信小程序| |share|触发用户转发|微信小程序、百度小程序、支付宝小程序、头条小程序| -|getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息|微信小程序、百度小程序| -| contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |微信小程序| -| getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、头条小程序 | -| launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数|微信小程序| -| openSetting | 打开授权设置页 |微信小程序、百度小程序| -| getAuthorize | 支持小程序授权 | 支付宝小程序 | -| contactShare | 分享到通讯录好友 | 支付宝小程序 | -| lifestyle | 关注生活号 | 支付宝小程序 | - +|getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息|微信小程序、百度小程序| +| contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |微信小程序| +| getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、头条小程序 | +| launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数|微信小程序| +| openSetting | 打开授权设置页 |微信小程序、百度小程序| +| getAuthorize | 支持小程序授权 | 支付宝小程序 | +| contactShare | 分享到通讯录好友 | 支付宝小程序 | +| lifestyle | 关注生活号 | 支付宝小程序 | + **注意** - 在小程序中,开发者可以登录 [小程序管理后台](https://mp.weixin.qq.com/) 后进入左侧菜单“客服反馈”页面获取反馈内容。 - 在 App 中,开发者登录 [DCloud开发者中心](https://dev.dcloud.net.cn/) 后点击应用名称,进入左侧菜单“用户反馈”页面获取反馈内容。 - 点击 share 分享按钮时会触发 [onShareAppMessage](/api/plugins/share) +- 支付宝小程序平台,获取用户手机号时,建议先通过条件编译的方式,调用支付宝原生API,[参考](https://docs.alipay.com/mini/api/getphonenumber) **示例** diff --git a/docs/component/canvas.md b/docs/component/canvas.md index e9a2155ff03a63a55c562fe8c334169d9d27e271..c8dda44c09222ea959196f2013a7d6eca16ec27b 100644 --- a/docs/component/canvas.md +++ b/docs/component/canvas.md @@ -15,12 +15,12 @@ |@longtap|EventHandle||手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动|头条小程序不支持| |@error|EventHandle||当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}|头条小程序不支持| -**注:** +**注意事项:** -1. canvas 标签默认宽度 300px、高度 225px。 -2. 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。 -3. canvas在微信、百度小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,[参考](/component/native-component)。canvas在App端vue页面不是原生组件,目前App端nvue还不支持canvas组件。 -- App-nvue 暂不支持 canvas 组件 +* canvas 标签默认宽度 300px、高度 225px,动态修改 canvas 大小后需要重新绘制。 +* 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。 +* canvas 在微信小程序、百度小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,参考 [native-component](/component/native-component)。 +* canvas 在App端 vue 页面不是原生组件,目前App端 nvue 还不支持 canvas 组件。 **示例:** diff --git a/docs/component/input.md b/docs/component/input.md index 4397cf4649caa423ee3d37bcec5b7e15223e7558..b1f7dd61ae1b70f205c60b7fe2067df023031571 100644 --- a/docs/component/input.md +++ b/docs/component/input.md @@ -21,7 +21,7 @@ |cursor|Number||指定focus时的光标位置|| |selection-start|Number|-1|光标起始位置,自动聚集时有效,需与selection-end搭配使用|| |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| |@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}|| @@ -99,34 +99,16 @@ this.$mp.page.$getAppWebview().setStyle({ #### 关于软键盘弹出的逻辑说明 -App平台,软键盘弹出有adjustResize|adjustPan 两种模式 +App平台软键盘弹出有 adjustResize|adjustPan 两种模式,默认为 adjustPan 模式,小程序平台只支持 adjustPan 模式,H5平台因不同浏览器而异 - adjustResize:软键盘弹出时,webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度 - adjustPan:软键盘弹出时,webview窗体高度不变,但窗体上推,以保证输入框不被软键盘盖住 -除了App平台,其他平台只支持adjustPan模式。App平台两种模式都支持,具体如下: -- Android:默认为adjustResize。配置修改只能在manifest中修改,全局生效。如果改为adjustPan,无法顺利上推窗体,底部的input会被软键盘盖住 -- iOS平台:默认为adjustPan。配置可以在manifest中全局修改,也可以单独页面设置style。没有类似Android的局限。 +配置方式,在 pages.json 中配置 style -如下为全局或页面的配置方式: -- 在manifest中配置 ```json - "app-plus": { - "softinput": { - "mode": "adjustResize|adjustPan" // 软键盘弹出模式 - } - } -``` - -- 如需要单个页面配置,则在pages.json中配置 -```json - { - "path": "pages/component/input/input", - "style": { - "app-plus":{ - "softinputMode": "adjustResize" //仅iOS支持单个页面配置 - } - } - } +"app-plus": { + "softinputMode": "adjustResize" +} ``` App端开发聊天类应用时,目前推荐改为adjustResize模式。在hello uni-app的模板-聊天中有详细示例。 diff --git a/docs/component/list.md b/docs/component/list.md index 3db6dc354fe297919fab1ac7335b5628c98904ab..5fb934791de88f5a481411edb7e08e9d180ee234 100644 --- a/docs/component/list.md +++ b/docs/component/list.md @@ -32,7 +32,7 @@ app端nvue专用组件。 `` 的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。 - ``
- 用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。Weex 会对 `` 进行高效的内存回收以达到更好的性能。 + 用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。`` 会对 `` 进行高效的内存回收以达到更好的性能。 - `
`
当 `
` 到达屏幕顶部时,吸附在屏幕顶部。 - ``
用于给列表添加下拉刷新的功能。 - ``
@@ -50,6 +50,8 @@ app端nvue专用组件。 `loadmoreoffset` 示意图: + + #### 事件 diff --git a/docs/component/navigator.md b/docs/component/navigator.md index 55fecd4fd6c0c6dd8914be99c7c8108f8c45368e..6b5311d8963274b07b59cb2576aec8b805cdcb87 100644 --- a/docs/component/navigator.md +++ b/docs/component/navigator.md @@ -26,8 +26,8 @@ |reLaunch|对应 uni.reLaunch 的功能|头条小程序不支持| |navigateBack|对应 uni.navigateBack 的功能| | -**注意** -- navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, ```` 的子节点背景色应为透明色。** +**注意** +- navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, ```` 的子节点背景色应为透明色。** - app-nvue 平台暂不支持 `` **示例** @@ -49,5 +49,26 @@ ``` +```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 + +``` +```javascript +// navigate.vue页面接受参数 +onLoad: function (option) { + const item = JSON.parse(decodeURIComponent(option.item)); +} +``` + **注意** -- 跳转tabbar页面,必须设置open-type="switchTab" \ No newline at end of file +- 跳转tabbar页面,必须设置open-type="switchTab" diff --git a/docs/component/refresh.md b/docs/component/refresh.md new file mode 100644 index 0000000000000000000000000000000000000000..c698b80c32489350fbc247c42f5e623e047d18d6 --- /dev/null +++ b/docs/component/refresh.md @@ -0,0 +1,54 @@ +#### refresh + +app端nvue专用组件。 + +`` 为容器提供下拉刷新功能。 + + +> 注意 +> - `` 是 ``、``、`` 的子组件,只能在被它们包含时才能被正确渲染。 + + +``` + + + Refreshing... + +
+ {{num}} +
+
+``` + +#### 子组件 + +- 诸如 ``、`` 之类的任何组件,都可以放到 `` 进行渲染。 +- 特殊子组件 ``: 只能作为 `` 和 `` 的子组件使用,拥有默认的动画效果实现。 + +``` + + Refreshing + + +``` + +#### 属性 + +`display` +控制 `` 组件显示、隐藏。`display` 的设置必须成对出现,即设置 `display="show"`, 必须有对应的 `display="hide"`。可选值为 `show / hide`,默认值为 `show`。 + + +#### 事件 +- refresh 事件:当 ``、``、`` 被下拉完成时触发。 +- pullingdown 事件:当 ``、``、`` 被下拉时触发。 可以从 `event` 参数对象中获取以下数据: + - `dy`: 前后两次回调滑动距离的差值 + - `pullingDistance`: 下拉的距离 + - `viewHeight`: refresh 组件高度 + - `type`: “pullingdown” 常数字符串 + +``` + + Refreshing ... + + +``` diff --git a/docs/component/waterfall.md b/docs/component/waterfall.md index 37807bcbe2ec4a20b1f18021cab5cd01fb72d072..24f32fb74b474ad743c4f88228b4aa042411aed4 100644 --- a/docs/component/waterfall.md +++ b/docs/component/waterfall.md @@ -29,10 +29,11 @@ app端nvue专用组件。 和 `` 组件一样, `` 组件的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。 -- ``:用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。Weex 会对 `` 进行高效的内存回收以达到更好的性能。 +- ``:用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。`` 会对 `` 进行高效的内存回收以达到更好的性能。 - `
`:当 `
` 到达屏幕顶部时,吸附在屏幕顶部。 - ``:用于给列表添加下拉刷新的功能。 - ``:`` 用法与特性和 `` 类似,用于给列表添加上拉加载更多的功能。 + #### 属性 @@ -46,6 +47,7 @@ app端nvue专用组件。 - column-gap: [可选]列与列的间隙. 如果指定了 `normal` ,则对应 32. - left-gap: [可选]左边cell和列表的间隙. 如果未指定 ,则对应 `0` - right-gap: [可选]右边cell和列表的间隙. 如果未指定,则对应 `0` + 其他支持的属性参见 `` 组件属性部分 diff --git a/docs/use.md b/docs/use.md index 49e6bcebb5b723796973aaad8495ef438e7b6568..c152bfe8a477eba008f9b791626a6cc056bea5b6 100644 --- a/docs/use.md +++ b/docs/use.md @@ -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)。 -**注意** - -* 不要在选项属性或回调上使用箭头函数,比如 ``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`。 - ## 模板语法 diff --git a/package.json b/package.json index 92ee2f66ef4f03cf0e9a4c9c4885d7676f9113ee..a4579ce28c5da34a47cb3e403cd6bdb3ec5b3c8c 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ }, "dependencies": { "base64-arraybuffer": "^0.2.0", - "intersection-observer": "^0.7.0" + "intersection-observer": "^0.7.0", + "safe-area-insets": "^1.4.1" }, "private": true, "devDependencies": { diff --git a/src/platforms/app-plus/service/api/device/system.js b/src/platforms/app-plus/service/api/device/system.js index 84ae08db6e3f5564a569580d4ecb97a420574569..de4886a2a7068674e898b50a33a9bee46ce2cfb4 100644 --- a/src/platforms/app-plus/service/api/device/system.js +++ b/src/platforms/app-plus/service/api/device/system.js @@ -23,10 +23,19 @@ export function getSystemInfo () { const screenHeight = plus.screen.resolutionHeight // 横屏时 iOS 获取的状态栏高度错误,进行纠正 var landscape = Math.abs(plus.navigator.getOrientation()) === 90 - var statusBarHeight = plus.navigator.getStatusbarHeight() + var statusBarHeight = Math.round(plus.navigator.getStatusbarHeight()) if (ios && landscape) { statusBarHeight = Math.min(20, statusBarHeight) } + var safeAreaInsets + function getSafeAreaInsets () { + return { + left: 0, + right: 0, + top: titleNView ? 0 : statusBarHeight, + bottom: 0 + } + } // 判断是否存在 titleNView var titleNView var webview = getLastWebview() @@ -36,7 +45,22 @@ export function getSystemInfo () { titleNView = style && style.titleNView 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 { errMsg: 'getSystemInfo:ok', brand: '', @@ -44,11 +68,8 @@ export function getSystemInfo () { pixelRatio: plus.screen.scale, screenWidth, screenHeight, - // 安卓端 webview 宽度有时比屏幕多 1px,相比取最小值 - // TODO screenWidth,screenHeight - windowWidth: screenWidth, - windowHeight: Math.min(screenHeight - (titleNView ? (statusBarHeight + TITLEBAR_HEIGHT) - : 0) - (isTabBarPage() && tabBar.visible ? TABBAR_HEIGHT : 0), screenHeight), + windowWidth, + windowHeight, statusBarHeight, language: plus.os.language, system: plus.os.version, @@ -57,6 +78,7 @@ export function getSystemInfo () { platform, SDKVersion: '', windowTop: 0, - windowBottom: 0 + windowBottom: 0, + safeArea } -} +} diff --git a/src/platforms/h5/service/api/context/inner-audio.js b/src/platforms/h5/service/api/context/inner-audio.js index dd8546ae41fdf1b921e6ff61daa99f01ec4e0164..1dc28cd38727e3a47bb1236c8df479b7d614b9f5 100644 --- a/src/platforms/h5/service/api/context/inner-audio.js +++ b/src/platforms/h5/service/api/context/inner-audio.js @@ -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 innerAudioContextOffEventNames = ['offCanplay', 'offPlay', 'offPause', 'offStop', 'offEnded', 'offTimeUpdate', 'offError', 'offWaiting', 'offSeeking', 'offSeeke'] +const innerAudioContextOffEventNames = ['offCanplay', 'offPlay', 'offPause', 'offStop', 'offEnded', 'offTimeUpdate', 'offError', 'offWaiting', 'offSeeking', 'offSeeked'] /** * 音频上下文对象 diff --git a/src/platforms/h5/service/api/device/get-system-info.js b/src/platforms/h5/service/api/device/get-system-info.js index a9096d5bcec4259c0cdca28bd1dc9fefa824ed19..0bb3f96a558db473ad08bc217def20769b6fdf50 100644 --- a/src/platforms/h5/service/api/device/get-system-info.js +++ b/src/platforms/h5/service/api/device/get-system-info.js @@ -1,4 +1,5 @@ import getWindowOffset from 'uni-platform/helpers/get-window-offset' +import safeAreaInsets from 'safe-area-insets' const ua = navigator.userAgent /** @@ -71,6 +72,14 @@ export function getSystemInfoSync () { var system = `${osname} ${osversion}` 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 { top: windowTop, @@ -92,7 +101,8 @@ export function getSystemInfoSync () { statusBarHeight, system, platform, - model + model, + safeArea } } /** diff --git a/yarn.lock b/yarn.lock index 7e0bef58ae9141ade7d072b4ff99aefd2030ccfc..155cc85266e2240f38a7d56e1dad2dec0b91da76 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7760,6 +7760,10 @@ rxjs@^6.4.0: dependencies: 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: 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"