fix: 适配华为快应用WebView场景并修复tabbar定位问题
1. 新增华为快应用WebView环境检测工具函数 2. 文章组件在快应用WebView中强制关闭滚动模式 3. 修复全局tabbar在H5/快应用中的定位漂移问题,加固fixed定位样式 4. 补全页面配置中的导航栏标题字段
This commit is contained in:
@@ -30,28 +30,56 @@ page {
|
||||
* 解决:H5 端显式给 html, body, #app, .uni-app 撑满,确保所有 H5 渲染场景
|
||||
* (浏览器 H5 / PWA / 桌面 webview / 快应用 webview) 根容器都正确铺满整屏
|
||||
*
|
||||
* 用 #ifdef H5 包裹,微信小程序 / 鸿蒙元服务编译时会移除这一段
|
||||
* 注:整段用 #ifdef H5 包裹,微信小程序 / 鸿蒙元服务编译时会移除,
|
||||
* 不影响小程序原生 tabBar 和页面布局。
|
||||
* ============================================================ */
|
||||
/* #ifdef H5 */
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $color-bg;
|
||||
/* 快应用内嵌 H5: webview 视口可能比屏幕小, 允许根容器自身滚动
|
||||
避免外层 view overflow:hidden 截断子组件内容 */
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: hidden;
|
||||
-webkit-overflow-scrolling: auto;
|
||||
}
|
||||
|
||||
#app,
|
||||
.uni-app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* H5 自定义 TabBar 固定在最底端 (浏览器 H5 / 快应用 H5 / PWA)
|
||||
* ------------------------------------------------------------
|
||||
* 背景:
|
||||
* pages.json 的 tabBar 配置了 "custom": true (H5),
|
||||
* uni-app 在 H5 端会渲染 <uni-tabbar> 自定义组件。
|
||||
* uni-app 内部已给 uni-tabbar 加了 position:fixed; bottom:0,
|
||||
* 此处显式加固,防止父级 transform/filter 创建新的 containing block
|
||||
* 导致 fixed 元素漂移。
|
||||
* 注:仅 H5 生效,微信小程序 / 鸿蒙元服务走原生 tabBar,不受影响。
|
||||
* ============================================================ */
|
||||
uni-tabbar,
|
||||
.uni-tabbar,
|
||||
.uni-tabbar--fixed,
|
||||
.uni-tabbar-bottom {
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
top: auto !important;
|
||||
width: 100% !important;
|
||||
z-index: 2147483647 !important;
|
||||
transform: translateZ(0) !important;
|
||||
-webkit-transform: translateZ(0) !important;
|
||||
will-change: transform !important;
|
||||
}
|
||||
|
||||
/* 快应用内嵌 H5:webview 可能把 100vh 解析为可视区高度而非屏幕高度,这里提供 JS 兜底 */
|
||||
.hwapp-full-height {
|
||||
min-height: 100vh;
|
||||
|
||||
@@ -433,6 +433,20 @@ export function getPlatform() {
|
||||
return 'quickapp'
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
try {
|
||||
var ua = navigator?.userAgent;
|
||||
if (ua) {
|
||||
// 华为快应用内嵌 WebView 的 UA 关键字:HarmonyQuickApp / HuaweiQuickApp / HQABridge / QuickApp
|
||||
const isQuickapp = /HarmonyQuickApp|HuaweiQuickApp|HQABridge|QuickApp/i.test(ua);
|
||||
if (isQuickapp) {
|
||||
return 'quickapp'
|
||||
}
|
||||
}
|
||||
|
||||
} catch (e) {}
|
||||
// #endif
|
||||
|
||||
if (typeof process !== 'undefined' && process.env && process.env.UNI_PLATFORM) {
|
||||
return process.env.UNI_PLATFORM;
|
||||
}
|
||||
@@ -454,6 +468,14 @@ export function getPlatform() {
|
||||
return 'h5';
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否是在华为快应用的WebView中
|
||||
* @returns
|
||||
*/
|
||||
export function isHarmonyQuickAppWebview() {
|
||||
return getPlatform() === 'quickapp'
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否需要 JS 侧主动 encodeURIComponent
|
||||
* 4 平台都需要(true)
|
||||
|
||||
@@ -10,6 +10,7 @@ import { copyText } from './uniapp.utils.js';
|
||||
|
||||
// 跳转相关工具集(纯函数, 不依赖 util.js 自身, 避免循环依赖)
|
||||
import {
|
||||
isHarmonyQuickAppWebview,
|
||||
_toParamValueString,
|
||||
parsePageParams as _parsePageParams,
|
||||
decodeEntity,
|
||||
@@ -429,6 +430,8 @@ export default {
|
||||
PAGE_TAB_MAP,
|
||||
systemTabBarList,
|
||||
|
||||
isHarmonyQuickAppWebview,
|
||||
|
||||
/** 根据 page_key + params 解析实际URL */
|
||||
resolvePageUrl,
|
||||
|
||||
|
||||
Reference in New Issue
Block a user