快捷導(dǎo)航

記一次微信小程序與webviewH5通信的踩坑記錄

更新時(shí)間：2024年07月24日 10:40:51 作者：踩坑工程師

uniapp開(kāi)發(fā)小程序的過(guò)程中主、分包有大小限制,隨著業(yè)務(wù)的增加,使用web-view加載H5的方式,往往純加載并不能滿(mǎn)足業(yè)務(wù)需求,這個(gè)時(shí)候就得了解小程序與H5的交互,這篇文章主要給大家介紹了關(guān)于微信小程序與webviewH5通信的踩坑記錄,需要的朋友可以參考下

背景

近期公司需要將H5網(wǎng)頁(yè)嵌入到微信小程序內(nèi)，這個(gè)僅需要引入webview即可：

<web-view :src="webViewUrl"></web-view>

但對(duì)于部分同學(xué)可能需要進(jìn)一步的開(kāi)發(fā)，例如二者之間數(shù)據(jù)傳輸，接下來(lái)為大家奉上自己的踩坑記錄。

實(shí)踐

1、H5傳遞與微信小程序

首先在H5環(huán)境，我們想要與微信小程序通信，必須引入相關(guān)SDK，例如，我的微信小程序是由uniapp框架開(kāi)發(fā)的，所以通信之前，我們需要將uniapp的SDK引入到我們的H5項(xiàng)目當(dāng)中。下載地址

引用下載文件

import uni from "@/public/uni.webview.1.5.4.js";
//如果提示uni.postMessage 不是function，就在 uni.webview.1.5.4.js 里面將 uni 替換掉，如替換成 webUni(建議 查找 全選 替換)
import webUni from "@/public/uni.webview.1.5.4.js";

隨后我們便可以先檢查當(dāng)前環(huán)境

 webUni.getEnv(function(res) {
    console.log('當(dāng)前環(huán)境：' + JSON.stringify(res));
});

向小程序傳遞參數(shù)（window.postMessage）

根據(jù)官方文檔說(shuō)明，我們采用window.postMessage()

const obj= {params: "傳遞參數(shù)"}

window.postMessage({
    data: obj
});

這時(shí)需要我們?cè)趙ebview標(biāo)簽加上@message屬性，監(jiān)聽(tīng)接收參數(shù)

<template>
	<view class="">
		<web-view :src="webViewUrl" @message="handleMessage"></web-view>
	</view>
</template>
<script>
	export default {
		data() {
		  return {
		    webViewUrl: 'http://localhost:80',
		  }
		},
		methods: {
		  handleMessage(event){
		  	console.log(event.detail.data);
            //打印結(jié)果
            //data：{params: "參數(shù)示例"}
		  },
		  
		},
	}
</script>

這里要注意官方說(shuō)明！?。?/p>

所以，在H5傳遞參數(shù)的方法中，要一并觸發(fā)相關(guān)api

const obj= {params: "傳遞參數(shù)"}

window.postMessage({
    data: obj
});

//后退
webUni.navigateBack({
    delta: 1
});

//組件銷(xiāo)毀（也就是關(guān)閉頁(yè)面）
uni.redirectTo({
	url: 'test?id=1'
});
uni.reLaunch({
	url: 'test?id=1'
});
uni.switchTab({
	url: '/pages/index/index'
});

//分享
uni.share()

//根據(jù)自身情況選其一

但在實(shí)際應(yīng)用中，我們可能不會(huì)采用這種方法，因?yàn)橄胍|發(fā)@message事件，總是要在特定時(shí)機(jī)才可以，所以我們也可以選擇更為直接的方法：路徑傳參

//在H5界面編寫(xiě)
//首先聲明參數(shù)變量
const params = {data: "Are you ok?"}

//假如我們要跳轉(zhuǎn)到小程序的login頁(yè)面，我們可以這樣做
webUni.navigateTo({
  url: `/pages/login/login?message=${params}`,
});

//在小程序編寫(xiě)
//login頁(yè)面就可以在頁(yè)面加載時(shí)接收路徑參數(shù)
onLoad(){
	const routes = getCurrentPages()
	const curParam = routes[routes.length - 1]
    const jsonString = decodeURIComponent(curParam.options.message);
	const data = JSON.parse(jsonString);
	console.log(data);
    //打印結(jié)果
    //params:{data: "Are you ok?"}
},

這樣小程序便可以接收到H5傳遞的參數(shù)了。

2、微信小程序與H5通信

微信小程序傳遞參數(shù)給H5就相對(duì)簡(jiǎn)單了，例如我們的H5鏈接是localhost，我們就可以：

<template>
	<view class="">
		<web-view :src="webViewUrl" @message="handleMessage"></web-view>
	</view>
</template>
<script>
	export default {
		data() {
		  return {
		    webViewUrl: 'http://localhot:3000',
		  }
		},
		onShow(options) {
            //聲明要傳遞給H5的參數(shù)
            let params = {
                data: "這是要給H5的參數(shù)"
            }
			this.webViewUrl = `http://localhot:3000?${JSON.stringify(params)}`
		},
		methods: {
		  handleMessage(event){
		  	console.log(event.detail.data);
		  }
		},
	}
</script>

下面我們便可以在H5環(huán)境監(jiān)聽(tīng)url的路徑參數(shù)

// 獲取地址欄的查詢(xún)字符串（不包括URL的域名和路徑）
const queryString = new URLSearchParams(window.location.search).toString();

// 如果查詢(xún)字符串不為空，則嘗試解析它
if (queryString) {
      //首先，使用decodeURIComponent來(lái)解碼這個(gè)字符串
      const decodedString: string = decodeURIComponent(queryString);

      // 注意，這里末尾有一個(gè)'='號(hào)，需要移除它
      const jsonString = decodedString.slice(0, -1);

      // 現(xiàn)在，使用JSON.parse來(lái)解析JSON字符串
      const jsonObject = JSON.parse(jsonString);
      console.log("已接收到小程序的參數(shù)",jsonObject);
}

至此，小程序與H5便實(shí)現(xiàn)了，相互通信。