uniapp使用webview内嵌H5的注意事项
DriveMyLife 2024-07-09 08:03:01 阅读 58
一、描述
uniapp项目中构建app，需要内嵌H5页面，在使用webview时，遇到了以下几个问题：
内嵌H5，默认全屏显示；内嵌页面遮挡住了app的自定义tabbar组件；样式修改无效；
二、解决方案：
webview-style设置的样式，针对app生效，style的定义方式兼容web；
<code><view class="page">code>
<web-view
:src="url" code>
class="webview" code>
allow
:fullscreen="false" code>
:webview-styles="style" code>
:frameBorder="0" code>
style="width: 100%; height: calc(100% - 10px)">code>
</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 。
属性说明
| 属性名 | 类型 | 说明 | 平台差异说明 |
|---|---|---|---|
| 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 组件的高度。 |
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。