From 445bca93816495fb0b2031c388db5b3f6aebde41 Mon Sep 17 00:00:00 2001
From: qiang <guoshengqiang@live.com>
Date: Wed, 11 Dec 2019 21:15:54 +0800
Subject: [PATCH] fix: h5 --window-top --window-bottom

---
 .../h5-vue-style-loader/lib/addStylesClient.js        | 11 ++++++++++-
 packages/webpack-uni-pages-loader/lib/platforms/h5.js | 10 +++++-----
 src/platforms/h5/helpers/can-i-use.js                 | 10 ++++++++--
 src/platforms/h5/helpers/get-window-offset.js         |  5 +++--
 4 files changed, 26 insertions(+), 10 deletions(-)

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 75e5852ff..d0270a9f5 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,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
 	}
-}
+}
diff --git a/packages/webpack-uni-pages-loader/lib/platforms/h5.js b/packages/webpack-uni-pages-loader/lib/platforms/h5.js
index 73c5a47a3..80e79af7a 100644
--- a/packages/webpack-uni-pages-loader/lib/platforms/h5.js
+++ b/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(',')}]
 `
-}
+}
diff --git a/src/platforms/h5/helpers/can-i-use.js b/src/platforms/h5/helpers/can-i-use.js
index bc6e7ef55..51f4a1698 100644
--- a/src/platforms/h5/helpers/can-i-use.js
+++ b/src/platforms/h5/helpers/can-i-use.js
@@ -1,3 +1,9 @@
+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)')
+}
diff --git a/src/platforms/h5/helpers/get-window-offset.js b/src/platforms/h5/helpers/get-window-offset.js
index b989996b0..05ccf6685 100644
--- a/src/platforms/h5/helpers/get-window-offset.js
+++ b/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
     }
   }
 
-- 
GitLab