官方介绍
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");
}
小程序内怎么调试web-view
- 开发工具上在
web-view
页面内点击鼠标右键有个调试的选项 - 需要在真机上调试需要自行引入
vconsole:
https://github.com/Tencent/vConsole/blob/dev/README_CN.md
tips
- 多场景判断,建议使用官方API: wx.miniProgram.getEnv
- H5唤醒一些小程序API有一定的延时,0.3~1秒
- 请调用小程序专用的JSSDK,同一个jssdk,但是webview的功能收到限制,和之前微信打开H5有所不同
- 小程序自动获取加载H5的title
- H5中iframe的url必须也是业务域名
- web-view一定是撑满全屏的,自定义顶部菜单,悬浮的都没用