利用hash不刷新页面的特性,实现小程序向webView通讯
发布于 3 年前 作者 jiekong 4226 次浏览 来自 分享

如果直接使用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);
  }
})
回到顶部