diff --git a/packages/uni-cli-shared/lib/platform.js b/packages/uni-cli-shared/lib/platform.js index ce90984241bbaa0c79fee593d820b022ac617ce3..63d972149f0159bdfca1791009770d8bee176bc7 100644 --- a/packages/uni-cli-shared/lib/platform.js +++ b/packages/uni-cli-shared/lib/platform.js @@ -154,9 +154,7 @@ const PLATFORMS = { megalo: false, filterTag: 'wxs', subPackages: false, - cssVars: { - '--window-top': '0px' - }, + cssVars: {}, copyWebpackOptions ({ assetsDir, vueOptions diff --git a/packages/uni-mp-weixin/dist/index.js b/packages/uni-mp-weixin/dist/index.js index acfc0194a517d2f7a002844f011637a920f75cd7..2e0e5d62e43d72b64ca9a19d0ddcda5bc4c66324 100644 --- a/packages/uni-mp-weixin/dist/index.js +++ b/packages/uni-mp-weixin/dist/index.js @@ -19,7 +19,7 @@ function hasOwn (obj, key) { return hasOwnProperty.call(obj, key) } -function noop () { } +function noop () {} /** * Create a cached version of a pure function. @@ -385,11 +385,28 @@ var previewImage = { } }; +function addSafeAreaInsets (result) { + if (result.safeArea) { + const safeArea = result.safeArea; + result.safeAreaInsets = { + top: safeArea.top, + left: safeArea.left, + right: result.windowWidth - safeArea.right, + bottom: result.windowHeight - safeArea.bottom + }; + } +} const protocols = { - previewImage + previewImage, + getSystemInfo: { + returnValue: addSafeAreaInsets + }, + getSystemInfoSync: { + returnValue: addSafeAreaInsets + } }; -const todos = [ - 'vibrate' +const todos = [ + 'vibrate' ]; const canIUses = []; diff --git a/packages/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js b/packages/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js index d0270a9f58e6da4beedf34d7bf7d1a46796c8637..c0bdff387c5b20456fe02b354a2c4be58b37dc76 100644 --- a/packages/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js +++ b/packages/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js @@ -239,14 +239,6 @@ var VAR_WINDOW_BOTTOM = /var\(--window-bottom\)/gi function processCss(css) { - var envMethod = '' - envMethod = uni.canIUse('css.constant') ? 'constant' : envMethod - envMethod = uni.canIUse('css.env') ? 'env' : envMethod - if (envMethod) { - css = css.replace(VAR_STATUS_BAR_HEIGHT, envMethod + '(safe-area-inset-top)') - .replace(VAR_WINDOW_TOP, 'calc(var(--window-top) + ' + envMethod + '(safe-area-inset-top))') - .replace(VAR_WINDOW_BOTTOM, 'calc(var(--window-bottom) + ' + envMethod + '(safe-area-inset-bottom))') - } var page = getPage() if (!uni.canIUse('css.var')) { //不支持 css 变量 var offset = getWindowOffset() diff --git a/packages/webpack-uni-pages-loader/lib/platforms/h5.js b/packages/webpack-uni-pages-loader/lib/platforms/h5.js index 387e6c267a27972a767ebe920a0d49443d07ac99..7d52e0654a753fa3920c2453b2cea310dff96402 100644 --- a/packages/webpack-uni-pages-loader/lib/platforms/h5.js +++ b/packages/webpack-uni-pages-loader/lib/platforms/h5.js @@ -96,9 +96,22 @@ const getPageComponents = function (inputDir, pagesJson) { } let windowTop = 44 - let pageStyle = Object.assign({}, globalStyle, props) - if (pageStyle.navigationStyle === 'custom' || ('titleNView' in pageStyle && (!pageStyle.titleNView || pageStyle.titleNView.type === - 'transparent' || pageStyle.titleNView.type === 'float'))) { + const pageStyle = Object.assign({}, globalStyle, props) + const titleNViewTypeList = { + 'none': 'default', + 'auto': 'transparent', + 'always': 'float' + } + let titleNView = pageStyle.titleNView + titleNView = Object.assign({}, { + type: pageStyle.navigationStyle === 'custom' ? 'none' : 'default' + }, pageStyle.transparentTitle in titleNViewTypeList ? { + type: titleNViewTypeList[pageStyle.transparentTitle], + backgroundColor: 'rgba(0,0,0,0)' + } : null, typeof titleNView === 'object' ? titleNView : (typeof titleNView === 'boolean' ? { + type: titleNView ? 'default' : 'none' + } : null)) + if (titleNView.type === 'none' || titleNView.type === 'transparent') { windowTop = 0 } @@ -300,7 +313,7 @@ module.exports = function (pagesJson, manifestJson) { const inputDir = process.env.UNI_INPUT_DIR const pageComponents = getPageComponents(inputDir, pagesJson) - + pagesJson.globalStyle = process.UNI_H5_PAGES_JSON.globalStyle delete pagesJson.pages delete pagesJson.subPackages diff --git a/src/platforms/app-plus/service/api/device/system.js b/src/platforms/app-plus/service/api/device/system.js index 9b13810bbe130b76bfc9666b89cc77f16231b3ee..e41dcf07235e8f4732a3cc34445b6ef2d705115d 100644 --- a/src/platforms/app-plus/service/api/device/system.js +++ b/src/platforms/app-plus/service/api/device/system.js @@ -1,7 +1,9 @@ import { callApiSync, isTabBarPage, - getLastWebview + getLastWebview, + getStatusbarHeight, + getScreenInfo } from '../util' import { @@ -17,48 +19,55 @@ export function getSystemInfoSync () { export function getSystemInfo () { const platform = plus.os.name.toLowerCase() const ios = platform === 'ios' - // 安卓 plus 接口获取的屏幕大小值不为整数，iOS js 获取的屏幕大小横屏时颠倒 - const screenWidth = plus.screen.resolutionWidth - const screenHeight = plus.screen.resolutionHeight - // 横屏时 iOS 获取的状态栏高度错误，进行纠正 - var landscape = Math.abs(plus.navigator.getOrientation()) === 90 - 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 - } + const { + screenWidth, + screenHeight + } = getScreenInfo() + const statusBarHeight = getStatusbarHeight() + + let safeAreaInsets + const titleNView = { + height: 0, + cover: false } - // 判断是否存在 titleNView - var titleNView - var webview = getLastWebview() + const webview = getLastWebview() if (webview) { let style = webview.getStyle() - if (style) { - titleNView = style && style.titleNView - titleNView = titleNView && titleNView.type === 'default' + style = style && style.titleNView + if (style && style.type && style.type !== 'none') { + titleNView.height = style.type === 'transparent' ? 0 : (statusBarHeight + TITLEBAR_HEIGHT) + titleNView.cover = style.type === 'transparent' || style.type === 'float' } - safeAreaInsets = ios ? webview.getSafeAreaInsets() : getSafeAreaInsets() + safeAreaInsets = webview.getSafeAreaInsets() } else { - safeAreaInsets = ios ? plus.navigator.getSafeAreaInsets() : getSafeAreaInsets() + safeAreaInsets = plus.navigator.getSafeAreaInsets() } - var windowBottom = isTabBarPage() && tabBar.visible && tabBar.cover ? tabBar.height : 0 - var windowHeight = Math.min(screenHeight - (titleNView ? (statusBarHeight + TITLEBAR_HEIGHT) - : 0) - windowBottom, screenHeight) - var windowWidth = screenWidth - var safeArea = { + const tabBarView = { + height: 0, + cover: false + } + if (isTabBarPage()) { + tabBarView.height = tabBar.visible ? tabBar.height : 0 + tabBarView.cover = tabBar.cover + } + const windowTop = titleNView.cover ? titleNView.height : 0 + const windowBottom = tabBarView.cover ? tabBarView.height : 0 + const windowHeight = screenHeight - titleNView.height - tabBarView.height + const windowHeightReal = screenHeight - (titleNView.cover ? 0 : titleNView.height) - (tabBarView.cover ? 0 : tabBarView.height) + const windowWidth = screenWidth + safeAreaInsets = ios ? safeAreaInsets : { + left: 0, + right: 0, + top: titleNView.height && !titleNView.cover ? 0 : statusBarHeight, + bottom: 0 + } + const safeArea = { left: safeAreaInsets.left, right: windowWidth - safeAreaInsets.right, top: safeAreaInsets.top, - bottom: windowHeight - safeAreaInsets.bottom, + bottom: windowHeightReal - safeAreaInsets.bottom, width: windowWidth - safeAreaInsets.left - safeAreaInsets.right, - height: windowHeight - safeAreaInsets.top - safeAreaInsets.bottom + height: windowHeightReal - safeAreaInsets.top - safeAreaInsets.bottom } return { @@ -77,8 +86,14 @@ export function getSystemInfo () { fontSizeSetting: '', platform, SDKVersion: '', - windowTop: 0, + windowTop, windowBottom, - safeArea + safeArea, + safeAreaInsets: { + top: safeAreaInsets.top, + right: safeAreaInsets.right, + bottom: safeAreaInsets.bottom, + left: safeAreaInsets.left + } } } diff --git a/src/platforms/app-plus/service/api/util.js b/src/platforms/app-plus/service/api/util.js index d7c3d97a1983111a20e1dd361435357653bc72e7..7d1d924025111b640e205195cc8d84807a585358 100644 --- a/src/platforms/app-plus/service/api/util.js +++ b/src/platforms/app-plus/service/api/util.js @@ -1,7 +1,7 @@ -export { - isTabBarPage -} from '../bridge' - +export { + isTabBarPage +} from '../bridge' + export function callApiSync (api, args, name, alias) { const ret = api(args) if (ret && ret.errMsg) { @@ -148,4 +148,22 @@ const _transformlng = function (lng, lat) { const outOfChina = function (lng, lat) { return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false) -} +} + +export function getStatusbarHeight () { + // 横屏时 iOS 获取的状态栏高度错误，进行纠正 + return plus.navigator.isImmersedStatusbar() ? Math.round(plus.os.name === 'iOS' ? plus.navigator.getSafeAreaInsets().top : plus.navigator.getStatusbarHeight()) : 0 +} + +export function getScreenInfo () { + const orientation = plus.navigator.getOrientation() + const landscape = Math.abs(orientation) === 90 + // 安卓 plus 接口获取的屏幕大小值不为整数 + const width = plus.screen.resolutionWidth + const height = plus.screen.resolutionHeight + // 根据方向纠正宽高 + return { + screenWidth: Math[landscape ? 'max' : 'min'](width, height), + screenHeight: Math[landscape ? 'min' : 'max'](width, height) + } +} diff --git a/src/platforms/app-plus/service/framework/plugins/keyboard.js b/src/platforms/app-plus/service/framework/plugins/keyboard.js index 63bed600d50c2ce3b5a62a2a97fa45c2bb0cf02d..1844355b0afc3f7aecf1fbe237991dc11b0a0b29 100644 --- a/src/platforms/app-plus/service/framework/plugins/keyboard.js +++ b/src/platforms/app-plus/service/framework/plugins/keyboard.js @@ -5,7 +5,7 @@ import { const isAndroid = plus.os.name.toLowerCase() === 'android' const FOCUS_TIMEOUT = isAndroid ? 300 : 700 -const HIDE_TIMEOUT = 300 +const HIDE_TIMEOUT = 800 let keyboardHeight = 0 let onKeyboardShow let focusTimer diff --git a/src/platforms/app-plus/service/framework/plugins/lifecycle.js b/src/platforms/app-plus/service/framework/plugins/lifecycle.js index 1a1b8882f41fb74f89e42609b40669411f548b19..e74a1ec56d8d5be9822818b4e66eada261d70854 100644 --- a/src/platforms/app-plus/service/framework/plugins/lifecycle.js +++ b/src/platforms/app-plus/service/framework/plugins/lifecycle.js @@ -16,12 +16,17 @@ import { from 'uni-core/service/plugins/lifecycle' import { - ON_REACH_BOTTOM_DISTANCE + ON_REACH_BOTTOM_DISTANCE, + TITLEBAR_HEIGHT } from '../../constants' import tabBar from '../tab-bar' +import { + getStatusbarHeight +} from '../../api/util' + function parsePageCreateOptions (vm, route) { const pagePath = '/' + route const routeOptions = __uniRoutes.find(route => route.path === pagePath) @@ -34,13 +39,15 @@ function parsePageCreateOptions (vm, route) { const onPageScroll = hasLifecycleHook(vm.$options, 'onPageScroll') ? 1 : 0 const onPageReachBottom = hasLifecycleHook(vm.$options, 'onReachBottom') ? 1 : 0 + const statusbarHeight = getStatusbarHeight() return { disableScroll, onPageScroll, onPageReachBottom, onReachBottomDistance, - windowTop: 0, // TODO + statusbarHeight, + windowTop: windowOptions.titleNView && windowOptions.titleNView.type === 'float' ? (statusbarHeight + TITLEBAR_HEIGHT) : 0, windowBottom: (tabBar.indexOf(route) >= 0 && tabBar.cover) ? tabBar.height : 0 } } @@ -88,4 +95,4 @@ export function initLifecycle (Vue) { } } }) -} +} diff --git a/src/platforms/app-plus/service/framework/webview/parser/sub-nvue-parser.js b/src/platforms/app-plus/service/framework/webview/parser/sub-nvue-parser.js index 57be5ff5ac7a5a1080d54e6f55de353c1e522db6..623f05e6decec562b2e39d79a4e0229cd096119b 100644 --- a/src/platforms/app-plus/service/framework/webview/parser/sub-nvue-parser.js +++ b/src/platforms/app-plus/service/framework/webview/parser/sub-nvue-parser.js @@ -10,6 +10,10 @@ import { isTabBarPage } from '../../../bridge' +import { + getStatusbarHeight +} from '../../../api/util' + import tabBar from '../../tab-bar' function initPopupSubNVue (subNVueWebview, style, maskWebview) { @@ -96,7 +100,7 @@ function initSubNVue (subNVue, routeOptions, webview) { style.dock = 'top' style.top = 0 style.width = '100%' - style.height = TITLEBAR_HEIGHT + plus.navigator.getStatusbarHeight() + style.height = TITLEBAR_HEIGHT + getStatusbarHeight() delete style.left delete style.right delete style.bottom diff --git a/src/platforms/app-plus/view/bridge/subscribe/index.js b/src/platforms/app-plus/view/bridge/subscribe/index.js index 9586b4c334ee837c1b31e89dd9c1483ab7b3b73a..c2e406c9f7e5f55e474401a83611bfe8fb413c74 100644 --- a/src/platforms/app-plus/view/bridge/subscribe/index.js +++ b/src/platforms/app-plus/view/bridge/subscribe/index.js @@ -20,6 +20,7 @@ const passiveOptions = supportsPassive ? { } : false function onCssVar ({ + statusbarHeight, windowTop, windowBottom }) { @@ -29,8 +30,9 @@ function onCssVar ({ const style = document.documentElement.style style.setProperty('--window-top', windowTop + 'px') style.setProperty('--window-bottom', windowBottom + 'px') - style.setProperty('--status-bar-height', plus.navigator.getStatusbarHeight() + 'px') + style.setProperty('--status-bar-height', statusbarHeight + 'px') if (process.env.NODE_ENV !== 'production') { + console.log(`--status-bar-height=${statusbarHeight}`) console.log(`--window-top=${windowTop}`) console.log(`--window-bottom=${windowBottom}`) } @@ -38,6 +40,7 @@ function onCssVar ({ } function onPageCreate ({ + statusbarHeight, windowTop, windowBottom, disableScroll, @@ -46,6 +49,7 @@ function onPageCreate ({ onReachBottomDistance }, pageId) { onCssVar({ + statusbarHeight, windowTop, windowBottom }) @@ -70,4 +74,4 @@ function onWebviewReady () { // service 主动发起检测 export default function initSubscribe (subscribe) { subscribe(WEBVIEW_READY, onWebviewReady) subscribe(ON_PAGE_CREATE, onPageCreate) -} +} diff --git a/src/platforms/app-plus/view/components/map/index.vue b/src/platforms/app-plus/view/components/map/index.vue index 4f9f0988a67ba3fdaa0b557ce5f24e27b8f8ee5f..45d546b40fa0c3823785f3154dcfccfb24803dad 100644 --- a/src/platforms/app-plus/view/components/map/index.vue +++ b/src/platforms/app-plus/view/components/map/index.vue @@ -162,12 +162,8 @@ export default { this.map && this.map[val ? 'hide' : 'show']() } }, - listeners: { - '@view-update': '_requestUpdate' - }, mounted () { - this._updateStyle() - let mapStyle = Object.assign({}, this.attrs, this.style) + let mapStyle = Object.assign({}, this.attrs, this.position) if (this.latitude && this.longitude) { mapStyle.center = new plus.maps.Point(this.longitude, this.latitude) } @@ -180,12 +176,18 @@ export default { map.hide() } this.$watch('attrs', () => { - this.map && this.map.setStyles(this.attrs) + if (this.map) { + this.map.setStyles(this.attrs) + // TODO 临时处理更新 longitude, latitude 无效问题 + this.map.setStyles({ + center: new plus.maps.Point(this.longitude, this.latitude) + }) + } }, { deep: true }) - this.$watch('style', () => { - this.map && this.map.setStyles(this.style) + this.$watch('position', () => { + this.map && this.map.setStyles(this.position) }, { deep: true }) @@ -213,35 +215,8 @@ export default { this.map && this[type](data) }, getRegion () { - // TODO - // const region = this.map.getBounds() }, getScale () { - // TODO - // const zoom = this.map.getZoom() - }, - _updateStyle () { - const rect = this.$refs.container.getBoundingClientRect() - this.hidden = false; - ['top', 'left', 'width', 'height'].forEach(key => { - let val = rect[key] - val = key === 'top' ? val + (document.documentElement.scrollTop || document.body.scrollTop || 0) : val - if (!val && (key === 'width' || key === 'height')) { - this.hidden = true - } - this.style[key] = val + 'px' - }) - }, - _requestUpdate () { - if (this._animationFrame) { - cancelAnimationFrame(this._animationFrame) - } - if (this.video) { - this._animationFrame = requestAnimationFrame(() => { - delete this._animationFrame - this._updateStyle() - }) - } }, controlclick (e) { this.$trigger('controltap', {}, { id: e.id }) diff --git a/src/platforms/h5/components/page/index.vue b/src/platforms/h5/components/page/index.vue index 4a4dbecafa8906ab1022b85baa77832d9320830b..48455d87e85c0f8ee753c53b3122e29c1fa376c8 100644 --- a/src/platforms/h5/components/page/index.vue +++ b/src/platforms/h5/components/page/index.vue @@ -1,19 +1,21 @@