uniapp使用webview内嵌H5的注意事项

一、描述

uniapp项目中构建app，需要内嵌H5页面，在使用webview时，遇到了以下几个问题：

1. 内嵌H5，默认全屏显示；
2. 内嵌页面遮挡住了app的自定义tabbar组件；
3. 样式修改无效；

二、解决方案：

webview-style设置的样式，针对app生效，style的定义方式兼容web；

<view class="page">
  <web-view 
        :src="url" 
        class="webview" 
        allow 
        :fullscreen="false" 
        :webview-styles="style" 
        :frameBorder="0" 
        style="width: 100%; height: calc(100% - 10px)">
    </web-view>
</view>

const style = reactive({
  width: '100%',
  height: '100%',
  bottom: '56px'
});
uni.getSystemInfo({
  success: (res) => {
    console.log(res);
    style.height = res.screenHeight - res.statusBarHeight - res.safeAreaInsets?.bottom - 100 + 'px';
    style.bottom = res.safeAreaInsets?.bottom + 56 + 'px';
  }
});

三、经验&结论

关于webview的使用，除了了解相关属性，其中webview-style才对app生效，值得关注。

web-view | uni-app官网

web-view

是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

属性说明
属性名类型说明平台差异说明srcStringwebview 指向网页的链接allowString用于为 iframe 指定其特征策略H5sandboxString该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。H5fullscreenBoolean是否铺满整个页面，默认值：

true

。H5 (HBuilder X 3.5.4+)webview-stylesObjectwebview 的样式App-vueupdate-titleBoolean是否自动更新当前页面标题。默认值：

true

App-vue (HBuilder X 3.3.8+)@messageEventHandler网页向应用

postMessage

时，会在特定时机（后退、组件销毁、分享）触发并收到消息。H5 暂不支持（可以直接使用 window.postMessage）@onPostMessageEventHandler网页向应用实时

postMessage

App-nvue@loadEventHandler网页加载成功时候触发此事件。微信小程序、支付宝小程序、抖音小程序、QQ小程序@errorEventHandler网页加载失败的时候触发此事件。微信小程序、支付宝小程序、抖音小程序、QQ小程序
注意

• update-title 仅支持 App-vue 。小程序 恒为 true，H5、nvue 恒为 false

src
来源AppH5微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序QQ小程序快应用360小程序快手小程序京东小程序网络√√√√√√√√√√√本地√√xxxxxxxxx
webview-styles
属性类型说明progressObject/Boolean进度条样式。仅加载网络 HTML 时生效，设置为

false

时禁用进度条。widthStringweb-view 组件的宽度。heightStringweb-view 组件的高度。