[填坑手册]小程序web-view组件实战与踩坑
[图片]
首先，根据官网文档可以知道 只有非个人 的小程序才可以使用web-view组件，如果你的个人开发者，可以跳过这篇文章。
[图片]
一、使用web-view以及它的好处
1、己方账号（第三方）与小程序openId/UnionId的关联绑定，实现免登陆
比如你是某门户网站S，你要识别自己小程序上的用户与网站用户的关系，你可以通过三种方法绑定关系，公众号，小程序源生，小程序web-view内嵌跳转三种方法
2、内嵌H5的富文本，减少重复开发
比如你是门户网站，社区，以往有大量的新闻和帖子，里面带了各种css样式的富文本，小程序源生是无法直接读取的，需要大量转化，这时候直接内嵌这些H5新闻，大大降低开发成本
3、热更新，减少发布审核
某些需要经常更新的内容、公告、活动页，内嵌H5可以减少频繁提交小程序审核
二、小程序功能赋权
为H5提供各种小程序才有的功能，比如录音，扫一扫等。
注意事项
多场景判断，建议使用官方API： wx.miniProgram.getEnv
H5唤醒一些小程序API有一定的延时，0.3~1秒
请调用小程序专用的JSSDK，同一个jssdk，但是webview的功能收到限制，和之前微信打开H5有所不同
小程序自动获取加载H5的title
H5中iframe的url必须也是业务域名
web-view一定是撑满全屏的，自定义顶部菜单，悬浮的都没用
三、小程序和H5之前的互相通讯
1、 从小程序 ==>> h5
小程序控制H5，可以直接用src路径传参的形式，比如
[代码]<!-- 小程序端 HTML -->
<web-view src="//URL?a=param1&b=param2"></web-view>
[代码]
避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。
2、 从 H5 ==>> 小程序
[图片]
这里我们知道bindmessage是小程序用来监听H5的推送的内容，但是这里不大不小的坑！就是它的三个出发场景：
小程序后退：使用接口名 wx.miniProgram.navigateTo，wx.miniProgram.navigateBack，wx.miniProgram.switchTab 等切换小程序页面/场景的API时候都会出发
分享：这个就是当你点分享小程序的时候，会接受到H5之前发送的postMessage
组件销毁，web-view组件销毁，类似 wx.miniProgram.redirectTo 都会触发。
[代码]<!-- 小程序端 HTML -->
<web-view bindmessage="handleGetMessage" src="{{openUrl}}"></web-view>
[代码]
[代码]// 小程序端 JS -->
Page({
/**
* 页面的初始数据
*/
data: {
openUrl: "",
},
/**
* 获取请求数据
*/
handleGetMessage: function (e) {
console.log(e.detail.data);
}
},
})
[代码]
[代码]<!-- h5端 HTML和JS -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
wx.miniProgram.postMessage({
data: {
link: "//test.com",
title: "一起学习，一起进步"
}
});
//wx.miniProgram.redirectTo({
// url:"/pages/inner/index?source=123"
//})
wx.miniProgram.navigateBack({delta: 1})
</script>
[代码]
注意事项
那些H5控制小程序的跳转路径必须是“/”开头，如 “/pages/xxx/xxx”，且路径必须在app.json里有，地址错误的话，有时不报错。
postMessage的json必须是data开始，不然接收不到数据。
[图片]
四、bindmessage接收到消息有3个重要特性(重点)
接收可以是H5之前几分钟前发送postMessage，不一定是即刻发出的。
之前发出的 postMessage的DATA信息会累加，当触发bindmessage接收的时候是一个数组。
[图片]
当bindmessage 再次 接收到数据，之前发送的数据不会被清空，将累加一起返回，获取时要判断好数组的角标
[图片]
五、Tips
1、在IDE工具中如何调试H5
[图片]
可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。
2、内嵌H5缓存问题
web-view加载的H5具有很重的缓存，如果需要调试，可以通过在url后面加时间戳的方式解决。
3、小程序关闭，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还是非常实用的组件，且用且珍惜~
往期回顾：
小程序自定义头部导航栏“完美”解决方案
小程序Canvas生成海报（一）
小程序新版订阅消息+云开发实战与跳坑
