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

更新時間：2025年01月15日 09:33:32 作者：歸宿樂瑤

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

背景

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

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

探索

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

思路

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

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

實戰(zhàn)

小程序

web-view代碼

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

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

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

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

注意：hashStr的值必須以#開始，瀏覽器才會識別為hash,否則無效

H5應用

在js中添加一個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);
};

以上方式即可完美解決我的應用場景

以為結束了，其實還沒有，上面的方式的確可行，但是我是vue項目呀，其中還用到了vue-router組件，通過上述直接監(jiān)聽頁面還是會刷新

由于使用了vue-router插件，那么hash的變化，vue-router會默認通過hash來進行導航，也會加載刷新頁面，所以我們還需要設置一個路由守衛(wèi)，用來判斷如果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、如果動態(tài)改變url的hash頻率過快，由于vue-router在內(nèi)部調(diào)用了history.replaceState(),如果太頻繁會觸發(fā)瀏覽器的安全策略拋出一個SecurityError錯誤，這個可能是我的vue-router版本瀏覽器兼容性問題導致的，對此沒有深究，有哪位大佬知道的麻煩為小弟解惑。