微信小程序Webview与H5通信

news2024/11/30 17:42:07

背景

近期有个微信小程序需要用到web-view嵌套H5的场景，该应用场景需要小程序中频繁传递数据到H5进行渲染，且需要保证页面不刷新。

由于微信小程序与H5之间的通信限制比较大，显然无法满足于我的业务场景

探索

由于微信小程序与webview的环境是完全隔离的，且没有突破的地方，只能将关键点放在已开放的方式上来；中间有利用公共存储空间cookie、SessionStorage和LocalStorage，但是很遗憾，无法突破，后面也采用websocket利用服务器来进行双向交互，但是由于网络的不稳定性，导致数据可能会有一定的延迟。

思路

既然小程序只能通过改变url链接来向H5传递参数，那么我就动态改变url来传递即可，但是还需要解决的问题是，一旦改变url页面会重新加载，这个是不能接受的。

路由的hash模式正好可以做到这一点，那么我们通过动态改变url的hash值，H5页面监听hash值的变化就能完美解决该问题了，话不多说，直接开干。

实战

小程序

web-view代码

<web-view src="{{url}}{{hashStr}}"></web-view>

小程序js代码，代码通过setInterval模拟实时传递不同参数到H5

Component({
    data: {
        url: `http://127.0.0.1:8080/home?type=wx`,
        hashStr: '',
    },
    methods: {
        onLoad: function () {
            const _this = this;           

            setInterval(() => {
                //此处模拟动态改变url的hash值给h5传值
                const postData={
                    name: 'zhangsan',
                    time: +new Date()
                }
                _this.setData({hashStr:`#time=${JSON.stringify(postData)}`})
            }, 2000);
        },
      
    }
});

注意：hashStr的值必须以#开始，浏览器才会识别为hash,否则无效

H5应用

在js中添加一个hashchange监听window.location.hash的变化即可


window.onhashchange = function() {
    console.log('The hash has changed!');
    const newHash = window.location.hash;
    console.log('New hash:', newHash);
};

以上方式即可完美解决我的应用场景

以为结束了，其实还没有，上面的方式的确可行，但是我是vue项目呀，其中还用到了vue-router组件，通过上述直接监听页面还是会刷新

由于使用了vue-router插件，那么hash的变化，vue-router会默认通过hash来进行导航，也会加载刷新页面，所以我们还需要设置一个路由守卫，用来判断如果path没有变化，只是hash改变，则不进行导航；具体配置如下：

import {createRouter, createWebHashHistory} from "vue-router";

const routes= [ {
      path: '/home',
      name: 'home',
      component: () => import('../components/Home.vue')
    },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
});

router.beforeEach((to, from, next) => {
    if (to.path===from.path) {     
        next(false); // 阻止导航行为
    } else {
        next(); // 正常导航
    }
});

export default router;

注意点：

1、微信小程序会对url进行decodeURIComponent编码，故在解析的的时候，注意使用encodeURIComponent解码

2、如果动态改变url的hash频率过快，由于vue-router在内部调用了history.replaceState(),如果太频繁会触发浏览器的安全策略抛出一个SecurityError错误，这个可能是我的vue-router版本浏览器兼容性问题导致的，对此没有深究，有哪位大佬知道的麻烦为小弟解惑。