利用hash不刷新页面的特性,实现小程序向webView通讯
如果直接使用hash值传递参数,ios上会异常添加页面栈,点击小程序左上角会返回到上一次带hash的地址,参数传递多少次,页面栈就有多少个。以下代码解决了这个问题,废话不多说,直接贴代码。
//在webview中添加代码
let hash;
// 监听hash变化
window.addEventListener("popstate", function() {
// 有hash值时返回上一个页面,并储存hash。
// 因为返回了上一个页面,会立马进入else分支。
// 将存好的hash渲染到页面
if(location.hash){
hash = location.hash.split('#')[1];
history.back();
} else {
//hash值最好是编码后的数据
document.getElementsByTagName('body')[0].innerHTML = '解码后参数:' + decodeURIComponent(hash);
}
}, false);
wxml中引入web-view组件
<web-view src='{{src}}'></web-view>
小程序js代码
const src = 'http://127.0.0.1:8080/'; //替换成webview地址
Page({
data: {
src: src,
},
onLoad(){
let j = 0;
// 每2秒传递一次值
setInterval(() => {
let a = {test: j++};
let data = encodeURIComponent(JSON.stringify(a));//hash值最好经过编码
this.setData({src: `${src}#${data}`})
}, 2000);
}
})