Merge branch 'dev' of https://github.com/dcloudio/uni-app into dev

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

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 = [];
 

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()

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

src/platforms/app-plus/service/api/device/system.js

 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
+    }
   }
 }

src/platforms/app-plus/service/api/util.js

-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)
+  }
+}

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

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) {
       }
     }
   })
-}
+}

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

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)
-}
+}

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 })

src/platforms/h5/components/page/index.vue

 <template>
   <uni-page :data-page="$route.meta.pagePath">
     <page-head
-      v-if="showNavigationBar"
+      v-if="navigationBar.type!=='none'"
       v-bind="navigationBar" />
     <page-refresh
       v-if="enablePullDownRefresh"
       ref="refresh"
       :color="refreshOptions.color"
-      :offset="refreshOptions.offset" />
+      :offset="refreshOptions.offset"
+    />
     <page-body
       v-if="enablePullDownRefresh"
       @touchstart.native="_touchstart"
       @touchmove.native="_touchmove"
       @touchend.native="_touchend"
-      @touchcancel.native="_touchend">
+      @touchcancel.native="_touchend"
+    >
       <slot name="page" />
     </page-body>
     <page-body v-else>
@@ -22,11 +24,11 @@
   </uni-page>
 </template>
 <style>
-    uni-page {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
+uni-page {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 </style>
 <script>
 import {
@@ -47,6 +49,8 @@ import PageRefresh from './pageRefresh'
 
 import pullToRefresh from './pull-to-refresh'
 
+import safeAreaInsets from 'safe-area-insets'
+
 export default {
   name: 'Page',
   mpType: 'page',
@@ -124,55 +128,61 @@ export default {
       default: false
     },
     titleNView: {
-      type: [Boolean, Object],
-      default: true
+      type: [Boolean, Object, String],
+      default: ''
     },
     pullToRefresh: {
       type: Object,
       default () {
         return {}
       }
-    },
-    titleImage: {
-      type: String,
-      default: ''
-    },
-    transparentTitle: {
-      type: String,
-      default: 'none'
-    },
-    titlePenetrate: {
-      type: String,
-      default: 'NO'
+    },
+    titleImage: {
+      type: String,
+      default: ''
+    },
+    transparentTitle: {
+      type: String,
+      default: ''
+    },
+    titlePenetrate: {
+      type: String,
+      default: 'NO'
     }
   },
-  data () {
-    const titleNViewTypeList = {
-      'none': 'default',
-      'auto': 'transparent',
-      'always': 'float'
-    }
-
-    const yesNoParseList = {
-      'YES': true,
-      'NO': false
-    }
+  data () {
+    const titleNViewTypeList = {
+      'none': 'default',
+      'auto': 'transparent',
+      'always': 'float'
+    }
+    // 将 navigationStyle 和 transparentTitle 都合并到 titleNView
+    let titleNView = this.titleNView
+    titleNView = Object.assign({}, {
+      type: this.navigationStyle === 'custom' ? 'none' : 'default'
+    }, this.transparentTitle in titleNViewTypeList ? {
+      type: titleNViewTypeList[this.transparentTitle],
+      backgroundColor: 'rgba(0,0,0,0)'
+    } : null, typeof titleNView === 'object' ? titleNView : (typeof titleNView === 'boolean' ? {
+      type: titleNView ? 'default' : 'none'
+    } : null))
+
+    const yesNoParseList = {
+      'YES': true,
+      'NO': false
+    }
 
     const navigationBar = mergeTitleNView({
       loading: false,
       backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
       backgroundColor: this.navigationBarBackgroundColor,
       textColor: this.navigationBarTextStyle === 'black' ? '#000' : '#fff',
-      titleText: this.navigationBarTitleText,
+      titleText: this.navigationBarTitleText,
       titleImage: this.titleImage,
       duration: '0',
-      timingFunc: '',
-      type: titleNViewTypeList[this.transparentTitle],
-      transparentTitle: this.transparentTitle,
+      timingFunc: '',
       titlePenetrate: yesNoParseList[this.titlePenetrate]
-    }, this.titleNView)
-
-    const showNavigationBar = this.navigationStyle === 'default' && this.titleNView
+    }, titleNView)
 
     const refreshOptions = Object.assign({
       support: true,
@@ -185,10 +195,8 @@ export default {
 
     let offset = upx2px(refreshOptions.offset)
 
-    if (showNavigationBar) {
-      if (!(this.titleNView && this.titleNView.type === 'transparent')) {
-        offset += NAVBAR_HEIGHT
-      }
+    if (titleNView.type !== 'transparent') {
+      offset += NAVBAR_HEIGHT + safeAreaInsets.top
     }
 
     refreshOptions.offset = offset
@@ -196,7 +204,6 @@ export default {
     refreshOptions.range = upx2px(refreshOptions.range)
 
     return {
-      showNavigationBar,
       navigationBar,
       refreshOptions
     }

src/platforms/h5/components/page/pageBody.vue

@@ -14,6 +14,8 @@ uni-page-wrapper {
 
 uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
   height: calc(100% - 44px);
+  height: calc(100% - 44px - constant(safe-area-inset-top));
+  height: calc(100% - 44px - env(safe-area-inset-top));
 }
 
 .uni-app--showtabbar uni-page-wrapper {
@@ -34,8 +36,8 @@ uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
 
 .uni-app--showtabbar uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
   height: calc(100% - 44px - 50px);
-  height: calc(100% - 44px - 50px - constant(safe-area-inset-bottom));
-  height: calc(100% - 44px - 50px - env(safe-area-inset-bottom));
+  height: calc(100% - 44px - constant(safe-area-inset-top) - 50px - constant(safe-area-inset-bottom));
+  height: calc(100% - 44px - env(safe-area-inset-top) - 50px - env(safe-area-inset-bottom));
 }
 
 uni-page-body {

src/platforms/h5/components/page/pageHead.vue

@@ -41,14 +41,12 @@
         >
           <i
             v-if="loading"
-            class="uni-loading"/>
-          <img
-            v-if="titleImage!==''"
-            :src="titleImage"
-            class="uni-page-head__title_image" >
-          <template v-else>
-            {{ titleText }}
-          </template>
+            class="uni-loading" />
+          <img
+            v-if="titleImage!==''"
+            :src="titleImage"
+            class="uni-page-head__title_image" >
+          <template v-else>{{ titleText }}</template>
         </div>
       </div>
       <div
@@ -95,10 +93,11 @@
         </template>
       </div>
     </div>
-    <div
+    <div
       v-if="type!=='transparent'&&type!=='float'"
       :class="{'uni-placeholder-titlePenetrate': titlePenetrate}"
-      class="uni-placeholder"/>
+      class="uni-placeholder"
+    />
   </uni-page-head>
 </template>
 <style>
@@ -112,7 +111,11 @@ uni-page-head .uni-page-head {
   left: 0;
   width: 100%;
   height: 44px;
+  height: calc(44px + constant(safe-area-inset-top));
+  height: calc(44px + env(safe-area-inset-top));
   padding: 7px 3px;
+  padding-top: calc(7px + constant(safe-area-inset-top));
+  padding-top: calc(7px + env(safe-area-inset-top));
   display: flex;
   overflow: hidden;
   justify-content: space-between;
@@ -121,16 +124,16 @@ uni-page-head .uni-page-head {
   color: #fff;
   background-color: #000;
   transition-property: all;
-}
-
-uni-page-head .uni-page-head-titlePenetrate,
-uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd,
-uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd * {
-  pointer-events: none;
-}
-
-uni-page-head .uni-page-head-titlePenetrate *{
-  pointer-events: auto;
+}
+
+uni-page-head .uni-page-head-titlePenetrate,
+uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd,
+uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd * {
+  pointer-events: none;
+}
+
+uni-page-head .uni-page-head-titlePenetrate * {
+  pointer-events: auto;
 }
 
 uni-page-head .uni-page-head.uni-page-head-transparent .uni-page-head-ft > div {
@@ -140,10 +143,12 @@ uni-page-head .uni-page-head.uni-page-head-transparent .uni-page-head-ft > div {
 uni-page-head .uni-page-head ~ .uni-placeholder {
   width: 100%;
   height: 44px;
-}
-
-uni-page-head .uni-placeholder-titlePenetrate{
-  pointer-events: none;
+  height: calc(44px + constant(safe-area-inset-top));
+  height: calc(44px + env(safe-area-inset-top));
+}
+
+uni-page-head .uni-placeholder-titlePenetrate {
+  pointer-events: none;
 }
 
 uni-page-head .uni-page-head * {
@@ -288,12 +293,12 @@ uni-page-head .uni-page-head__title .uni-loading {
   width: 16px;
   height: 16px;
   margin-top: -3px;
-}
-
-uni-page-head .uni-page-head__title .uni-page-head__title_image {
-  width: auto;
-  height: 26px;
-  vertical-align: middle;
+}
+
+uni-page-head .uni-page-head__title .uni-page-head__title_image {
+  width: auto;
+  height: 26px;
+  vertical-align: middle;
 }
 </style>
 <script>
@@ -321,7 +326,9 @@ export default {
     },
     backgroundColor: {
       type: String,
-      default: '#000'
+      default () {
+        return this.type === 'transparent' ? '#000' : '#F8F8F8'
+      }
     },
     textColor: {
       type: String,
@@ -368,20 +375,14 @@ export default {
       default () {
         return false
       }
-    },
-    titleImage: {
-      type: String,
-      default: ''
-    },
-    transparentTitle: {
-      default: 'none',
-      validator (value) {
-        return ['none', 'auto', 'always'].indexOf(value) !== -1
-      }
-    },
-    titlePenetrate: {
-      type: Boolean,
-      default: false
+    },
+    titleImage: {
+      type: String,
+      default: ''
+    },
+    titlePenetrate: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

src/platforms/h5/components/page/transparent.js

@@ -52,7 +52,7 @@ export default {
           borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
         })
       })
-    } else if (this.transparentTitle === 'always') {
+    } else if (this.type === 'float') {
       const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
       const iconElemsStyles = []
       for (let i = 0; i < iconElems.length; i++) {
@@ -70,13 +70,13 @@ export default {
   },
   computed: {
     color () {
-      return this.type === 'transparent' || this.transparentTitle === 'always' ? '#fff' : this.textColor
+      return this.type === 'transparent' ? '#fff' : this.textColor
     },
     offset () {
       return parseInt(this.coverage)
     },
     bgColor () {
-      if (this.type === 'transparent' || this.transparentTitle === 'always') {
+      if (this.type === 'transparent') {
         const {
           r,
           g,

src/platforms/h5/helpers/get-window-offset.js

@@ -7,9 +7,11 @@ import safeAreaInsets from 'safe-area-insets'
 export default function getWindowOffset () {
   if (uni.canIUse('css.var')) {
     const style = document.documentElement.style
+    const top = parseInt((style.getPropertyValue('--window-top').match(/\d+/) || ['0'])[0])
+    const bottom = parseInt((style.getPropertyValue('--window-bottom').match(/\d+/) || ['0'])[0])
     return {
-      top: (parseInt(style.getPropertyValue('--window-top')) || 0) + safeAreaInsets.top,
-      bottom: (parseInt(style.getPropertyValue('--window-bottom')) || 0) + safeAreaInsets.bottom
+      top: top ? (top + safeAreaInsets.top) : 0,
+      bottom: bottom ? (bottom + safeAreaInsets.bottom) : 0
     }
   }
 
@@ -18,7 +20,8 @@ export default function getWindowOffset () {
   const pages = getCurrentPages()
   if (pages.length) {
     const pageVm = pages[pages.length - 1].$parent.$parent
-    top = pageVm.showNavigationBar && (pageVm.navigationBar.type !== 'transparent' || pageVm.navigationBar.type !== 'float') ? NAVBAR_HEIGHT : 0
+    const navigationBarType = pageVm.navigationBar.type
+    top = navigationBarType === 'default' || navigationBarType === 'float' ? NAVBAR_HEIGHT : 0
   }
   const app = getApp()
   if (app) {

src/platforms/h5/service/api/device/get-system-info.js

@@ -21,7 +21,7 @@ export function getSystemInfoSync () {
   var screenWidth = screen.width
   var screenHeight = screen.height
   var language = navigator.language
-  var statusBarHeight = 0
+  var statusBarHeight = safeAreaInsets.top
   var osname
   var osversion
   var model
@@ -84,7 +84,7 @@ export function getSystemInfoSync () {
   const {
     top: windowTop,
     bottom: windowBottom
-  } = getWindowOffset(false, true)
+  } = getWindowOffset()
 
   windowHeight -= windowTop
   windowHeight -= windowBottom
@@ -102,7 +102,13 @@ export function getSystemInfoSync () {
     system,
     platform,
     model,
-    safeArea
+    safeArea,
+    safeAreaInsets: {
+      top: safeAreaInsets.top,
+      right: safeAreaInsets.right,
+      bottom: safeAreaInsets.bottom,
+      left: safeAreaInsets.left
+    }
   }
 }
 /**

src/platforms/h5/view/bridge/subscribe/index.js

@@ -24,11 +24,12 @@ const passiveOptions = supportsPassive ? {
 function updateCssVar (vm) {
   if (uni.canIUse('css.var')) {
     const pageVm = vm.$parent.$parent
-    const windowTop = pageVm.showNavigationBar && pageVm.navigationBar.type !== 'transparent' && pageVm.navigationBar.type !==
-      'float' ? (NAVBAR_HEIGHT +
-        'px')
-      : '0px'
-    const windowBottom = getApp().$children[0].showTabBar ? (TABBAR_HEIGHT + 'px') : '0px'
+    const navigationBarType = pageVm.navigationBar.type
+    const windowTopValue = navigationBarType === 'default' || navigationBarType === 'float' ? NAVBAR_HEIGHT : 0
+    const windowBottomValue = getApp().$children[0].showTabBar ? TABBAR_HEIGHT : 0
+    const envMethod = uni.canIUse('css.env') ? 'env' : (uni.canIUse('css.constant') ? 'constant' : '')
+    const windowTop = windowTopValue && envMethod ? `calc(${windowTopValue}px + ${envMethod}(safe-area-inset-top))` : '0px'
+    const windowBottom = windowBottomValue && envMethod ? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))` : '0px'
     const style = document.documentElement.style
     style.setProperty('--window-top', windowTop)
     style.setProperty('--window-bottom', windowBottom)
@@ -37,7 +38,7 @@ function updateCssVar (vm) {
   }
 }
 
-export default function initSubscribe (subscribe) {
+export default function initSubscribe (subscribe) {
   let scrollListener = false
   let disableScrollListener = false
 
@@ -83,5 +84,5 @@ export default function initSubscribe (subscribe) {
         document.addEventListener('scroll', scrollListener)
       })
     }
-  })
-}
+  })
+}

src/platforms/h5/view/components/video/index.vue

@@ -498,7 +498,11 @@ export default {
         }
       } else {
         if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
-          document[document.fullscreenEnabled ? 'exitFullscreen' : 'webkitExitFullscreen']()
+          if (document.fullscreenElement) {
+            document.exitFullscreen()
+          } else if (document.webkitFullscreenElement) {
+            document.webkitExitFullscreen()
+          }
         } else if (video.webkitExitFullScreen) {
           video.webkitExitFullScreen()
         } else {

src/platforms/mp-weixin/runtime/api/protocols.js

 import previewImage from '../../helpers/normalize-preview-image'
+
+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
+    }
+  }
+}
 export const protocols = {
-  previewImage
+  previewImage,
+  getSystemInfo: {
+    returnValue: addSafeAreaInsets
+  },
+  getSystemInfoSync: {
+    returnValue: addSafeAreaInsets
+  }
 }
-export const todos = [
-  'vibrate'
+export const todos = [
+  'vibrate'
 ]
-export const canIUses = []
+export const canIUses = []