网站值不值得做seo,网站建设详细流,网站推广的10种方法,手机模板网站开发一、描述
uniapp项目中构建app#xff0c;需要内嵌H5页面#xff0c;在使用webview时#xff0c;遇到了以下几个问题#xff1a;
内嵌H5#xff0c;默认全屏显示#xff1b;内嵌页面遮挡住了app的自定义tabbar组件#xff1b;样式修改无效#xff1b; 二、解决方案需要内嵌H5页面在使用webview时遇到了以下几个问题
内嵌H5默认全屏显示内嵌页面遮挡住了app的自定义tabbar组件样式修改无效 二、解决方案
webview-style设置的样式针对app生效style的定义方式兼容web view classpageweb-view :srcurl classwebview allow :fullscreenfalse :webview-stylesstyle :frameBorder0 stylewidth: 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 。 属性说明
属性名类型说明平台差异说明srcStringwebview 指向网页的链接allowString用于为 iframe 指定其特征策略H5sandboxString该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。H5fullscreenBoolean是否铺满整个页面默认值true。H5 (HBuilder X 3.5.4)webview-stylesObjectwebview 的样式App-vueupdate-titleBoolean是否自动更新当前页面标题。默认值trueApp-vue (HBuilder X 3.3.8)messageEventHandler网页向应用 postMessage 时会在特定时机后退、组件销毁、分享触发并收到消息。H5 暂不支持可以直接使用 window.postMessageonPostMessageEventHandler网页向应用实时 postMessageApp-nvueloadEventHandler网页加载成功时候触发此事件。微信小程序、支付宝小程序、抖音小程序、QQ小程序errorEventHandler网页加载失败的时候触发此事件。微信小程序、支付宝小程序、抖音小程序、QQ小程序
注意
update-title 仅支持 App-vue 。小程序 恒为 trueH5、nvue 恒为 false
src
来源AppH5微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序QQ小程序快应用360小程序快手小程序京东小程序网络√√√√√√√√√√√本地√√xxxxxxxxx
webview-styles
属性类型说明progressObject/Boolean进度条样式。仅加载网络 HTML 时生效设置为 false 时禁用进度条。widthStringweb-view 组件的宽度。heightStringweb-view 组件的高度。
