微信小程序webview与VUE H5实时通讯具体步骤

  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);
    });
  },

<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做界面跳转，并传递了参数
        });
        Toast("消息已发送给小程序");
      } else {
        Toast("当前不在小程序 web-view 环境，无法发送消息");
      }
    }
  }
};
</script>

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