背景：

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

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

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

具體實(shí)現(xiàn)步驟

1、配置域名

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

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

2、SDK文件引入

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

踩坑點(diǎn)：有很多文章寫的需要在根項(xiàng)目index.html文件中引入，類似

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

后來(lái)改用在需要操作的H5頁(yè)面上引入（這是我們的H5頁(yè)面），這樣引入就能調(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實(shí)例：（注意使用wx.miniProgram.postMessage這個(gè)API會(huì)有限制:向小程序發(fā)送消息，會(huì)在以下特定時(shí)機(jī)觸發(fā)組件的message事件：小程序后退、組件銷毀、分享、復(fù)制鏈接）這些操作才會(huì)進(jìn)行接收，所以我這里直接使用了navigateTo跳轉(zhuǎn)一個(gè)新的界面來(lái)接收傳遞過來(lái)的參數(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 是否存在（防止在瀏覽器中報(bào)錯(cuò)）
      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("當(dāng)前不在小程序 web-view 環(huán)境，無(wú)法發(fā)送消息");
      }
    }
  }
};
</script>

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

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

4、注意點(diǎn)

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

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

總結(jié)

到此這篇關(guān)于微信小程序webview與VUE H5實(shí)時(shí)通訊的文章就介紹到這了,更多相關(guān)微信小程序與VUE H5實(shí)時(shí)通訊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！