快捷導(dǎo)航

微信小程序Webview與H5通信的思路與實(shí)戰(zhàn)記錄

更新時(shí)間：2025年01月15日 09:33:32 作者：歸宿樂(lè)瑤

這篇文章主要介紹了微信小程序Webview與H5通信的思路與實(shí)戰(zhàn)的相關(guān)資料,由于微信小程序與H5之間的通信限制,無(wú)法滿足業(yè)務(wù)需求,通過(guò)動(dòng)態(tài)改變url的hash值來(lái)傳遞參數(shù),并利用vue-router組件的路由守衛(wèi)來(lái)避免頁(yè)面刷新,需要的朋友可以參考下

背景

近期有個(gè)微信小程序需要用到web-view嵌套H5的場(chǎng)景，該應(yīng)用場(chǎng)景需要小程序中頻繁傳遞數(shù)據(jù)到H5進(jìn)行渲染，且需要保證頁(yè)面不刷新。

由于微信小程序與H5之間的通信限制比較大，顯然無(wú)法滿足于我的業(yè)務(wù)場(chǎng)景

探索

由于微信小程序與webview的環(huán)境是完全隔離的，且沒(méi)有突破的地方，只能將關(guān)鍵點(diǎn)放在已開放的方式上來(lái)；中間有利用公共存儲(chǔ)空間cookie、SessionStorage和LocalStorage，但是很遺憾，無(wú)法突破，后面也采用websocket利用服務(wù)器來(lái)進(jìn)行雙向交互，但是由于網(wǎng)絡(luò)的不穩(wěn)定性，導(dǎo)致數(shù)據(jù)可能會(huì)有一定的延遲。

思路

既然小程序只能通過(guò)改變url鏈接來(lái)向H5傳遞參數(shù)，那么我就動(dòng)態(tài)改變url來(lái)傳遞即可，但是還需要解決的問(wèn)題是，一旦改變url頁(yè)面會(huì)重新加載，這個(gè)是不能接受的。

路由的hash模式正好可以做到這一點(diǎn)，那么我們通過(guò)動(dòng)態(tài)改變url的hash值，H5頁(yè)面監(jiān)聽hash值的變化就能完美解決該問(wèn)題了，話不多說(shuō)，直接開干。

實(shí)戰(zhàn)

小程序

web-view代碼

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

小程序js代碼，代碼通過(guò)setInterval模擬實(shí)時(shí)傳遞不同參數(shù)到H5

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

            setInterval(() => {
                //此處模擬動(dòng)態(tài)改變url的hash值給h5傳值
                const postData={
                    name: 'zhangsan',
                    time: +new Date()
                }
                _this.setData({hashStr:`#time=${JSON.stringify(postData)}`})
            }, 2000);
        },
      
    }
});

注意：hashStr的值必須以#開始，瀏覽器才會(huì)識(shí)別為hash,否則無(wú)效

H5應(yīng)用

在js中添加一個(gè)hashchange監(jiān)聽window.location.hash的變化即可

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

以上方式即可完美解決我的應(yīng)用場(chǎng)景

以為結(jié)束了，其實(shí)還沒(méi)有，上面的方式的確可行，但是我是vue項(xiàng)目呀，其中還用到了vue-router組件，通過(guò)上述直接監(jiān)聽頁(yè)面還是會(huì)刷新

由于使用了vue-router插件，那么hash的變化，vue-router會(huì)默認(rèn)通過(guò)hash來(lái)進(jìn)行導(dǎo)航，也會(huì)加載刷新頁(yè)面，所以我們還需要設(shè)置一個(gè)路由守衛(wèi)，用來(lái)判斷如果path沒(méi)有變化，只是hash改變，則不進(jìn)行導(dǎo)航；具體配置如下：

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); // 阻止導(dǎo)航行為
    } else {
        next(); // 正常導(dǎo)航
    }
});

export default router;

注意點(diǎn)：

1、微信小程序會(huì)對(duì)url進(jìn)行decodeURIComponent編碼，故在解析的的時(shí)候，注意使用encodeURIComponent解碼

2、如果動(dòng)態(tài)改變url的hash頻率過(guò)快，由于vue-router在內(nèi)部調(diào)用了history.replaceState(),如果太頻繁會(huì)觸發(fā)瀏覽器的安全策略拋出一個(gè)SecurityError錯(cuò)誤，這個(gè)可能是我的vue-router版本瀏覽器兼容性問(wèn)題導(dǎo)致的，對(duì)此沒(méi)有深究，有哪位大佬知道的麻煩為小弟解惑。