当前位置：首页 > news >正文

App使用webview套壳引入h5(二)—— app内访问h5，顶部被手机顶部菜单遮挡问题，保留顶部安全距离

news 来源：原创 2025/6/6 10:15:28

引入webview的页面添加safeAreaInsets，对weview的webviewStyles做处理
在myApp中改造

entry.vue代码如下

template><view class="entry-page" :style="{ paddingTop: safeAreaInsets.top + 'px' }"><web-view :webview-styles="webviewStyles" :src="webviewUrl" @message="getH5Message" ref="webViewRef"></web-view></view>
</template><script>
export default {data() {return {statusBarHeight: 100,safeAreaInsets: {},webviewUrl: 'myLink', hasBottomSafeArea: false,webviewStyles: {progress: {color: '#007aff',top: 0},// iOS侧滑返回配置ios: {allowsBackForwardNavigationGestures: true, // 启用WKWebView侧滑手势bounces: false // 禁用弹性效果}},webview: '',isIOS: false,          // 判断是否为iOS设备webviewCanBack: false  // WebView是否可返回};},onLoad(options) {// #ifdef APP-PLUSthis.isIOS = uni.getSystemInfoSync().platform === 'ios'; // 检测iOS设备let _this = this;let height = 0;let statusbar = 0;const sysInfo = uni.getSystemInfoSync();this.safeAreaInsets = sysInfo.safeAreaInsets; //获取顶部安全距离console.log('top--------', sysInfo);this.statusBarHeight = sysInfo.statusBarHeight;height = sysInfo.windowHeight;let currentWebview = this.$scope.$getAppWebview();setTimeout(() => {var wv = currentWebview.children()[0];console.log('top--------222222222', _this.statusBarHeight);wv.setStyle({top: _this.statusBarHeight, //给weview设置顶部安全距离height: height - _this.statusBarHeight,scalable: false //禁止缩放}, 200);// #endif}
}
</script><style>
.entry-page {background-color: #f8f8f8;
}.webview-container {flex: 1;width: 100%;
}
</style>