微信小程序Webview与H5通信的思路与实战记录

背景

近期有个微信小程序需要用到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版本浏览器兼容性问题导致的，对此没有深究，有哪位大佬知道的麻烦为小弟解惑。

SecurityError: Failed to execute replaceState onHistory: Attempt to use history.replaceState() more than100 times per 30 secondsin

总结 

到此这篇关于微信小程序Webview与H5通信的文章就介绍到这了,更多相关微信小程序Webview与H5通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论