uniapp使用webview内嵌H5的注意事项详解
作者：DriveMyLife
在移动应用开发中,uniApp框架提供了一种跨平台的解决方案,允许开发者使用一套代码来构建iOS、Android等多平台的应用,这篇文章主要给大家介绍了关于uniapp使用webview内嵌H5的注意事项,需要的朋友可以参考下
一、描述
uniapp项目中构建app，需要内嵌H5页面，在使用webview时，遇到了以下几个问题：
- 内嵌H5，默认全屏显示；
- 内嵌页面遮挡住了app的自定义tabbar组件；
- 样式修改无效；
二、解决方案：
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 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。
各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。
属性说明
| 属性名 | 类型 | 说明 | 平台差异说明 |
|---|---|---|---|
| src | String | webview 指向网页的链接 | |
| allow | String | 用于为 iframe 指定其特征策略 | H5 |
| sandbox | String | 该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。 | H5 |
| fullscreen | Boolean | 是否铺满整个页面，默认值：true。 | H5 (HBuilder X 3.5.4+) |
| webview-styles | Object | webview 的样式 | App-vue |
| update-title | Boolean | 是否自动更新当前页面标题。默认值：true | App-vue (HBuilder X 3.3.8+) |
| @message | EventHandler | 网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 | H5 暂不支持（可以直接使用 window.postMessage） |
| @onPostMessage | EventHandler | 网页向应用实时 postMessage | App-nvue |
| @load | EventHandler | 网页加载成功时候触发此事件。 | 微信小程序、支付宝小程序、抖音小程序、QQ小程序 |
| @error | EventHandler | 网页加载失败的时候触发此事件。 | 微信小程序、支付宝小程序、抖音小程序、QQ小程序 |
注意
update-title仅支持App-vue。小程序恒为true，H5、nvue恒为false
src
| 来源 | App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 抖音小程序、飞书小程序 | QQ小程序 | 快应用 | 360小程序 | 快手小程序 | 京东小程序 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 网络 | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
| 本地 | √ | √ | x | x | x | x | x | x | x | x | x |
webview-styles
| 属性 | 类型 | 说明 |
|---|---|---|
| progress | Object/Boolean | 进度条样式。仅加载网络 HTML 时生效，设置为 false 时禁用进度条。 |
| width | String | web-view 组件的宽度。 |
| height | String | web-view 组件的高度。 |
总结
到此这篇关于uniapp使用webview内嵌H5的注意事项的文章就介绍到这了,更多相关uniapp使用webview内嵌H5内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！