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 。

属性说明

属性名 类型 说明 平台差异说明
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小程序 恒为 trueH5、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 组件的高度。
相关推荐
getyefang17 小时前
uniapp如何接入星火大模型
ai·uni-app
@PHARAOH17 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_119 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙1 天前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
goto_w1 天前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
小宝小白1 天前
【vue3】黑马小兔鲜儿项目uniapp navigationStyle
uni-app
Json____1 天前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位
web_Hsir2 天前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir2 天前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa2 天前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商