微信小程序Webview与H5通信

embedded/2024/11/30 7:30:17/

背景

近期有个小程序>微信小程序需要用到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

javascript">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的变化即可

javascript">
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改变，则不进行导航；具体配置如下：

javascript">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版本浏览器兼容性问题导致的，对此没有深究，有哪位大佬知道的麻烦为小弟解惑。