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/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/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/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"