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 @@
+ :offset="refreshOptions.offset"
+ />
+ @touchcancel.native="_touchend"
+ >
@@ -22,11 +24,11 @@