uniapp使用webview内嵌H5的注意事项详解
更新时间：2024年07月11日 10:57:44 作者：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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
element el-upload文件上传覆盖第一个文件的实现
这篇文章主要介绍了element el-upload文件上传覆盖第一个文件的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
vue中使用echarts实现动态数据绑定以及获取后端接口数据
总结一下自己最近项目中用echarts动态获取接口数据并画图的方法,下面这篇文章主要给大家介绍了关于vue中使用echarts实现动态数据绑定以及获取后端接口数据的相关资料,需要的朋友可以参考下2022-07-07
laravel-admin 与 vue 结合使用实例代码详解
由于 Laravel-admin 采用的是 pjax 的方式刷新页面，意味着很多页面刷新的操作，这篇文章主要介绍了laravel-admin 与 vue 结合使用,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了Vue在 Nuxt.js 中重定向 404 页面的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了浅谈vuex actions和mutation的异曲同工 ，详细的介绍了actions和mutation的使用和区别，非常具有实用价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这几天，我做了一个vue移动端的小项目，本文主要介绍了Vue移动端apk项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
vue proxytable代理根路径的同时增加其他代理方式
这篇文章主要介绍了vue proxytable代理根路径的同时增加其他代理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
这篇文章主要介绍了解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-12-12
本篇文章主要介绍了jquery在vue脚手架中的使用方式示例，非常具有实用价值，需要的朋友可以参考下2017-08-08
这篇文章主要介绍了vue-property-decorator使用手册，文中较详细的给大家介绍了他们的用法，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
最新评论