微信小程序webview與VUE?H5實時通訊具體步驟

更新時間：2025年09月15日 08:58:14 作者：小周同學:

微信小程序與H5通信是在日常開發(fā)中總會遇到的場景,下面這篇文章主要介紹了微信小程序webview與VUE?H5實時通訊的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

背景：

微信小程序、vue2搭建開發(fā)的H5頁面,需要實現(xiàn)實時通信

在微信小程序開發(fā)中，會遇到嵌套H5頁面，H5頁面需要向微信小程序發(fā)消息觸發(fā)微信小程序某個函數(shù)方法，微信開發(fā)文檔上寫的非常不清楚，導致踩了很多坑，該文章總結(jié)可直接使用方法。

在開發(fā)中，微信小程序內(nèi)嵌webview，H5想要與微信小程序發(fā)消息，必須要使用微信文檔中的wx.miniProgram的方法，但想要在H5中使用該方法，必須需要引入JSSDK.js文件，官方其實并沒有給出明確的引入方式。

具體實現(xiàn)步驟

1、配置域名

首先想要實現(xiàn)通訊，我們webview中嵌套的H5必須要配置在微信公眾號開發(fā)平臺的業(yè)務域名

登錄微信公眾平臺-在管理-開發(fā)管理-開發(fā)設(shè)置-業(yè)務域名中配置我們訪問的H5（該權(quán)限需要小程序管理員才能配置）

2、SDK文件引入

在vue項目也就是我們H5項目中引入JSSDK 1.6.0，（目前是這個版本，具體可查看web-view | 微信開放文檔）

踩坑點：有很多文章寫的需要在根項目index.html文件中引入，類似

但是不知道為什么，我在這引入無法實現(xiàn)通訊

后來改用在需要操作的H5頁面上引入（這是我們的H5頁面），這樣引入就能調(diào)用wx.miniProgram里面的方法

  mounted() {
    this.$nextTick(() => {
      const script = document.createElement("script");
      script.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";
      script.onload = () => {};
      document.head.appendChild(script);
    });
  },

3、使用

H5實例：（注意使用wx.miniProgram.postMessage這個API會有限制:向小程序發(fā)送消息，會在以下特定時機觸發(fā)組件的message事件：小程序后退、組件銷毀、分享、復制鏈接）這些操作才會進行接收，所以我這里直接使用了navigateTo跳轉(zhuǎn)一個新的界面來接收傳遞過來的參數(shù)

<template>
  <button @click="submitForm">按鈕</button>
</template>
<script>
import { Toast } from "vant";
export default {
  mounted() {
    this.$nextTick(() => {
      const script = document.createElement("script");
      script.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";
      script.onload = () => {};
      document.head.appendChild(script);
    });
  },
  methods: {
    submitForm() {
      // 判斷 wx 是否存在（防止在瀏覽器中報錯）
      if (typeof wx !== "undefined" && wx.miniProgram) {
        wx.miniProgram.navigateTo({
          url: "/pages/webview/pay?status=success&orderId=12345",  //我這里直接使用了navigateTo做界面跳轉(zhuǎn)，并傳遞了參數(shù)
        });
        Toast("消息已發(fā)送給小程序");
      } else {
        Toast("當前不在小程序 web-view 環(huán)境，無法發(fā)送消息");
      }
    }
  }
};
</script>

然后在我們的小程序pay.vue中可以這樣接收

<template>
  <view></view>
</template>
 
<script>
  export default {
   data() {
    return {
    }
   },
   onLoad(options) {
    console.log(options)
   },
  }
</script>

4、注意點

在微信開發(fā)文檔中有寫明，wx.miniProgram.postMessage只有在特定時機才會觸發(fā)message事件，什么意思呢，就是我在H5頁面點擊了操作按鈕，向小程序發(fā)送了消息，這時候小程序并不會實時收到我的消息，而是在我操作了webview或者上面協(xié)議幾種情況才會觸發(fā)小程序端的@message才會收到消息，他們的交互并不是實時的。

所以在實際業(yè)務中，要根據(jù)文檔靈活變通，例如我這里的交互是在H5頁面點擊操作需要跳轉(zhuǎn)到小程序內(nèi)的某個頁面，我這里直接用的是wx.miniProgram.navigateTo，這時候就可以在新的界面接收H5傳遞過來的參數(shù)了。