评论

利用hash不刷新页面的特性,实现小程序向webView通讯

该方案只适用小程序向webview通讯。webview向小程序只能引入JSSDK,无法突破限制

如果直接使用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);
  }
})
最后一次编辑于  2021-07-15  
点赞 3
收藏
评论

3 个评论

  • 乐乐~
    乐乐~
    2023-06-28

    请问下,我这样小程序里webview页面顶部会一直有进度条在不停的加载,如何不显示进度条呢

    2023-06-28
    赞同
    回复
  • I
    I
    2022-09-12

    然而现在已经不行了,改#后的hash也会刷新web-view的

    2022-09-12
    赞同
    回复 4
    • Yozosann.
      Yozosann.
      2022-09-26
      不会的,我们业务一直在用这方式跑
      2022-09-26
      回复
    • 赵伟
      赵伟
      2022-09-29回复Yozosann.
      亲测 会刷新
      2022-09-29
      回复
    • YY
      YY
      2023-08-31回复五百
      大哥,再src中加上#就是把路径hash了吗
      2023-08-31
      回复
    • Avalon
      Avalon
      06-17回复Yozosann.
      您好,请问微信开发者工具是用的哪一个版本
      06-17
      回复
  • 卢瑞华
    卢瑞华
    2022-05-16

    点个赞, 采用该思路,实现了基础模块。

    让 h5与原生微信小程序权限(照片、定位等)交互可以实现(不用刷新界面,h5监听动态数据绑定就好了)

    解决了界面现象保留问题、页面回退等问题。

    现在遇到个问题,微信原生分享功能会只分享原始的微信界面,webview详情页面并没有(处理中)


    2022-05-16
    赞同
    回复
登录 后发表内容