小程序与h5接近实时的双向通信(第3篇)
一、实现思路小程序通知h5：url加上参数即可。 h5通知小程序：h5里使用 location.href （需要不同域名）后，web-view组件的load事件会重新执行，并且返回新链接的url，即可实现通信。 二、效果[图片] 三、示例代码<web-view src="{{webSrc}}" bindload="load" />
Page({
data: {
webSrc: 'https://static.yipintemian.com/pdf/pdf-page-message.html?from=mini',
},
load(e) {
const { src } = e.detail;
if (src.includes('?from=h5')) {
const query = this.parseUrl(src);
console.log(query);
wx.showModal({
title: 'h5参数',
content: query.content,
showCancel: false,
});
}
},
// url 转 query
parseUrl(url) {
return url
.split('?')[1]
.split('&')
.reduce((acc, cur) => {
const [key, value] = cur.split('=');
acc[key] = decodeURIComponent(value);
return acc;
}, {});
},
});
（注意：在你的小程序里需要开启不校验合法域名） 四、注意点在你的小程序里需要开启不校验合法域名h5里使用 location.href 需要不同域名若想查看h5源代码，浏览器打开网址后，查看页面源码 五、相关文章在小程序里初步获取pdf页数在小程序里预览pdf文件小程序与h5接近实时的双向通信小程序页面通过webview获取pdf页数(改为：小程序页面实时计算pdf页数)小程序pdf、word、excel、ppt等文件页数与预览
