官方介绍

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

在这里插入图片描述

注意事项

网页内iframe的域名也需要配置到域名白名单,webview只能加载配置过的域名(比如京东、天猫这种没配置的webview是无法显示的)
每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件,自定义顶部菜单，悬浮的都没用(cover-view可以覆盖其上面,可点击了解详情)
-web-view网页与小程序之间不支持除JSSDK提供的接口之外的通信。
在 iOS 中，若存在JSSDK接口调用无响应的情况，可在web-view的 src后面加个#wechat_redirect解决。
避免在链接中带有中文字符，在 iOS中会有打开白屏的问题，建议加一下encodeURIComponent

H5和webview的通信

webview到H5

src路径传参加载H5页面，避免使用中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent

注：src不支持本地路径，需要使用网络路径

偶现白屏问题，可以使用v-if来判断webview加载时机，待src动态传参获取之后，再加载webview

H5到webview

在这里插入图片描述

H5可以通过postMessage向小程序传参，但是传递的参数只有在特定时间才能触发接收到消息

每次的postMessage不是覆盖的，而是累加的数组，之前的都不会清除，所以获取的时候要拿数组的最后一项。

//H5页面
import wx from 'weixin-js-sdk' // 引入对应的sdk//判断当前所在环境testBrowser() {let ua = window.navigator.userAgent.toLowerCase()if (ua.match(/MicroMessenger/i) == 'micromessenger') {//ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）wx.miniProgram.getEnv((res) => {if (res.miniprogram) {// 在小程序} else {//在微信里}})} else {// 不在微信里面}},//触发postmessage
wx.miniProgram.postMessage({data:this.shareData,})

//小程序
<web-view :src="invitationUrl" @message="handleMessage"></web-view>handleMessage(res){this.shareData = res.detail.data[res.detail.data.length - 1];
},

内嵌H5缓存问题

web-view加载的H5具有很重的缓存，如果需要调试，可以通过在url后面加时间戳的方式解决。

小程序关闭，H5音频仍然在播放问题

小程序已经关闭，但是H5自带的背景音乐仍然在手机后台播放的问题。这里可以利用一个属性：

visibilitychange：页面可见性状态

简单的说，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

var statusBeforeHide = true; //初始化页面的状态
var music = document.getElementById("xxx");
// 更改音乐播放状态
function setChangeMusic() {if (document[hiddenProperty]) {// 页面隐藏if (statusBeforeHide) {music.pause(); // 暂停}} else {// 页面显示if (statusBeforeHide) {music.play() //如果statusBeforeHide是true, 继续播放}}
}let hiddenProperty = ('hidden' in document) ? 'hidden': ('webkitHidden' in document) ? 'webkitHidden': ('mozHidden' in document) ? 'mozHidden' : null;
if (hiddenProperty) {let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');let onVisibilityChange = () => {//console.log('visibilityChange');setChangeMusic();};document.addEventListener(visibilityChangeEvent, onVisibilityChange);
} else {console.log("不支持这个api");
}