微信小程序webview与VUE H5实时通讯具体步骤
作者：小周同学:
背景：
微信小程序、vue2搭建开发的H5页面,需要实现实时通信
在微信小程序开发中，会遇到嵌套H5页面，H5页面需要向微信小程序发消息触发微信小程序某个函数方法，微信开发文档上写的非常不清楚，导致踩了很多坑，该文章总结可直接使用方法。
在开发中 ，微信小程序内嵌webview，H5想要与微信小程序发消息，必须要使用微信文档中的wx.miniProgram的方法，但想要在H5中使用该方法，必须需要引入JSSDK.js文件，官方其实并没有给出明确的引入方式。
具体实现步骤
1、配置域名
首先想要实现通讯，我们webview中嵌套的H5必须要配置在微信公众号开发平台的业务域名
登录微信公众平台-在管理-开发管理-开发设置-业务域名中配置我们访问的H5（该权限需要小程序管理员才能配置）
2、SDK文件引入
在vue项目也就是我们H5项目中引入JSSDK 1.6.0，（目前是这个版本，具体可查看web-view | 微信开放文档）
踩坑点：有很多文章写的需要在根项目index.html文件中引入，类似
但是不知道为什么，我在这引入无法实现通讯
后来改用在需要操作的H5页面上引入（这是我们的H5页面），这样引入就能调用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会有限制:向小程序发送消息，会在以下特定时机触发组件的message事件：小程序后退、组件销毁、分享、复制链接）这些操作才会进行接收，所以我这里直接使用了navigateTo跳转一个新的界面来接收传递过来的参数
<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>
然后在我们的小程序pay.vue中可以这样接收
<template>
<view></view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad(options) {
console.log(options)
},
}
</script>
4、注意点
在微信开发文档中有写明，wx.miniProgram.postMessage只有在特定时机才会触发message事件，什么意思呢，就是我在H5页面点击了操作按钮，向小程序发送了消息，这时候小程序并不会实时收到我的消息，而是在我 操作了webview或者上面协议几种情况才会触发小程序端的@message才会收到消息，他们的交互并不是实时的。
所以在实际业务中，要根据文档灵活变通，例如我这里的交互是在H5页面点击操作需要跳转到小程序内的某个页面，我这里直接用的是wx.miniProgram.navigateTo，这时候就可以在新的界面接收H5传递过来的参数了。
总结
到此这篇关于微信小程序webview与VUE H5实时通讯的文章就介绍到这了,更多相关微信小程序与VUE H5实时通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！