Merge branch 'fix-window-top' 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/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
     }
 

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

@@ -149,3 +149,21 @@ 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/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
   }
 }

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

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 {
+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,8 +128,8 @@ export default {
       default: false
     },
     titleNView: {
-      type: [Boolean, Object],
-      default: true
+      type: [Boolean, Object, String],
+      default: ''
     },
     pullToRefresh: {
       type: Object,
@@ -139,7 +143,7 @@ export default {
     },
     transparentTitle: {
       type: String,
-      default: 'none'
+      default: ''
     },
     titlePenetrate: {
       type: String,
@@ -152,6 +156,16 @@ export 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,
@@ -167,12 +181,8 @@ export default {
       titleImage: this.titleImage,
       duration: '0',
       timingFunc: '',
-      type: titleNViewTypeList[this.transparentTitle],
-      transparentTitle: this.transparentTitle,
       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"/>
+            class="uni-loading" />
           <img
             v-if="titleImage!==''"
             :src="titleImage"
             class="uni-page-head__title_image" >
-          <template v-else>
-            {{ titleText }}
-          </template>
+          <template v-else>{{ titleText }}</template>
         </div>
       </div>
       <div
@@ -98,7 +96,8 @@
     <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;
@@ -129,7 +132,7 @@ uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd * {
   pointer-events: none;
 }
 
-uni-page-head .uni-page-head-titlePenetrate *{
+uni-page-head .uni-page-head-titlePenetrate * {
   pointer-events: auto;
 }
 
@@ -140,9 +143,11 @@ 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;
+  height: calc(44px + constant(safe-area-inset-top));
+  height: calc(44px + env(safe-area-inset-top));
 }
 
-uni-page-head .uni-placeholder-titlePenetrate{
+uni-page-head .uni-placeholder-titlePenetrate {
   pointer-events: none;
 }
 
@@ -321,7 +326,9 @@ export default {
     },
     backgroundColor: {
       type: String,
-      default: '#000'
+      default () {
+        return this.type === 'transparent' ? '#000' : '#F8F8F8'
+      }
     },
     textColor: {
       type: String,
@@ -373,12 +380,6 @@ export default {
       type: String,
       default: ''
     },
-    transparentTitle: {
-      default: 'none',
-      validator (value) {
-        return ['none', 'auto', 'always'].indexOf(value) !== -1
-      }
-    },
     titlePenetrate: {
       type: Boolean,
       default: false

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)