fix: h5 --window-top --window-bottom

packages/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js

@@ -239,6 +239,14 @@ 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()
@@ -265,6 +273,7 @@ function getWindowOffset() {
 	if (app && app.$route && app.$route.meta && app.$route.meta.name) {
 		return {
 			top: app.$route.meta.windowTop,
+			// TODO 可配置 TabBar 高度
 			bottom: app.$route.meta.isTabBar ? 50 : 0
 		}
 	}
@@ -272,4 +281,4 @@ function getWindowOffset() {
 		top: 0,
 		bottom: 0
 	}
-}
+}

packages/webpack-uni-pages-loader/lib/platforms/h5.js

@@ -92,10 +92,10 @@ const getPageComponents = function (inputDir, pagesJson) {
     }
 
     let windowTop = 44
-    let pageStyle = Object.assign({}, globalStyle, props)
-    if (pageStyle.navigationStyle === 'custom' || !pageStyle.titleNView || pageStyle.titleNView.type ===
-        'transparent' || pageStyle.titleNView.type === 'float') {
-      windowTop = 0
+    let pageStyle = Object.assign({}, globalStyle, props)
+    if (pageStyle.navigationStyle === 'custom' || ('titleNView' in pageStyle && (!pageStyle.titleNView || pageStyle.titleNView.type ===
+      'transparent' || pageStyle.titleNView.type === 'float'))) {
+      windowTop = 0
     }
 
     // 删除 app-plus 平台配置
@@ -327,4 +327,4 @@ global.__uniConfig.nvue = ${JSON.stringify({ 'flex-direction': getFlexDirection(
 ${genRegisterPageVueComponentsCode(pageComponents)}
 global.__uniRoutes=[${genPageRoutes(pageComponents).concat(genSystemRoutes()).join(',')}]
 `
-}
+}

src/platforms/h5/helpers/can-i-use.js

+function cssSupports (css) {
+  return window.CSS && window.CSS.supports && window.CSS.supports(css)
+}
+
 export default {
-  'css.var': window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)
-}
+  'css.var': cssSupports('--a:0'),
+  'css.env': cssSupports('top:env(a)'),
+  'css.constant': cssSupports('top:constant(a)')
+}

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

@@ -2,13 +2,14 @@ import {
   NAVBAR_HEIGHT,
   TABBAR_HEIGHT
 } from 'uni-helpers/constants'
+import safeAreaInsets from 'safe-area-insets'
 
 export default function getWindowOffset () {
   if (uni.canIUse('css.var')) {
     const style = document.documentElement.style
     return {
-      top: parseInt(style.getPropertyValue('--window-top')) || 0,
-      bottom: parseInt(style.getPropertyValue('--window-bottom')) || 0
+      top: (parseInt(style.getPropertyValue('--window-top')) || 0) + safeAreaInsets.top,
+      bottom: (parseInt(style.getPropertyValue('--window-bottom')) || 0) + safeAreaInsets.bottom
     }
   }