微信小程序的web-view可以嵌套h5页面,h5内容可以在小程序上展示。
<web-view src="{{url}}?isLogin={{isLogin}}&id={{id}}&userId={{userId}}></web-view>
传参方式如上
碰到的问题是:当进入到H5页面时,会播放音乐,当返回到小程序或者退出小程序后,在微信聊天界面音频还在继续播放,直到音频播放完毕,这对用户的体验的非常不好。刚开始的做法是在嵌套h5的页面里用onUnload将src中的url设置为空,但是在安卓机上可行,ios上依然在播放,真的是很苦恼,又继续找方法。
直到后面看到了阮一峰的一篇文章(http://web.jobbole.com/95344/)解决了问题
document.addEventListener('visibilitychange', function () {
// 用户离开了当前页面
if (document.visibilityState === 'hidden') {
document.title = '页面不可见';
var music = document.getElementById("play");
music.pause();//暂停
}
// 用户打开或回到页面
if (document.visibilityState === 'visible') {
document.title = '页面可见';
var music = document.getElementById("play");
music.play();//播放
}
});
监听网页的可见与不可见,网页不可见时暂停播放,可见时播放。非常感谢阮一峰的分享,这个问题着实排查了很久。