快捷導(dǎo)航

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

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

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

背景

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

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

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

實踐

1、H5傳遞與微信小程序

首先在H5環(huán)境，我們想要與微信小程序通信，必須引入相關(guān)SDK，例如，我的微信小程序是由uniapp框架開發(fā)的，所以通信之前，我們需要將uniapp的SDK引入到我們的H5項目當(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ù)官方文檔說明，我們采用window.postMessage()

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

window.postMessage({
    data: obj
});

這時需要我們在webview標簽加上@message屬性，監(jiān)聽接收參數(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>

這里要注意官方說明?。?！

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

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

window.postMessage({
    data: obj
});

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

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

//分享
uni.share()

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

但在實際應(yīng)用中，我們可能不會采用這種方法，因為想要觸發(fā)@message事件，總是要在特定時機才可以，所以我們也可以選擇更為直接的方法：路徑傳參

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

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

//在小程序編寫
//login頁面就可以在頁面加載時接收路徑參數(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就相對簡單了，例如我們的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)聽url的路徑參數(shù)

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

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

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

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

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