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 | 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 组件的高度。

总结

到此这篇关于uniapp使用webview内嵌H5的注意事项的文章就介绍到这了,更多相关uniapp使用webview内嵌H5内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

在Vue3中实现四种全局状态数据的统一管理的方法
在开发中,通常遇到四种全局状态数据:异步数据、同步数据,传统的Vue3使用不同机制处理这些数据,而Zova框架通过Model机制来统一管理,简化了数据处理流程,提高了代码的可维护性,本文介绍在Vue3中实现四种全局状态数据的统一管理的方法,感兴趣的朋友一起看看吧
2024-10-10
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
这篇文章主要介绍了Vue实现点击当前元素以外的地方隐藏当前元素，文中给大家扩展了vue实现点击其他地方隐藏div的三种方法,需要的朋友可以参考下
2019-12-12
vue element el-form 多级嵌套验证的实现示例
本文主要介绍了vue element el-form 多级嵌套验证的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Vue中commit和dispatch区别及用法辨析(最新)
在Vue中,commit和dispatch是两个用于触发Vuex store中的mutations和actions的方法,这篇文章主要介绍了Vue中commit和dispatch区别及其用法辨析,需要的朋友可以参考下
2024-06-06
vue实现滚动鼠标滚轮切换页面
这篇文章主要为大家详细介绍了vue实现滚动鼠标滚轮切换页面，类似于纵向走马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
vue-element-admin如何转换成中文
这篇文章主要介绍了vue-element-admin如何转换成中文问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue开发实例探究key的作用详解
这篇文章主要为大家介绍了Vue开发实例探究key的作用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
ant design vue 表格table 默认勾选几项的操作
这篇文章主要介绍了ant design vue 表格table 默认勾选几项的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Props传参v-for后TS报错对象类型是unknow的解决方案
这篇文章主要介绍了Props传参v-for后TS报错对象类型是unknow的解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
Vue 3 中 toRaw 的用法详细讲解
`toRaw` 是 Vue3 提供的一个 API,用于获取响应式对象的原始非响应式对象,主要用于调试、与第三方库兼容以及避免无限递归更新等场景,使用时需要注意不要滥用,以免破坏响应式系统,感兴趣的朋友跟随小编一起看看吧
2024-11-11

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

一、描述

二、解决方案：

三、经验&结论

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具