微信小程序webview与VUE-H5实时通讯，踩坑无数！亲测可实现

背景：微信小程序、vue3搭建开发的H5页面

        在微信小程序开发中，会遇到嵌套H5页面，H5页面需要向微信小程序发消息触发微信小程序某个函数方法，微信开发文档上写的非常不清楚，导致踩了很多坑，该文章总结可直接使用方法

在开发中 ，微信小程序内嵌webview，H5想要与微信小程序发消息，必须要使用微信文档中的wx.miniProgram的方法，但想要在H5中使用该方法，必须需要引入JSSDK.js文件，官方其实并没有给出明确的引入方式，网上方法很多，踩坑无数啊

具体实现步骤

1、配置域名

        首先想要实现通讯，我们webview中嵌套的H5必须要配置在微信公众号开发平台的业务域名

登录微信公众平台-在管理-开发管理-开发设置-业务域名中配置我们访问的H5（该权限需要小程序管理员才能配置）

2、SDK文件引入 

在vue项目也就是我们H5项目中引入JSSDK 1.3.2，（目前是这个版本，具体可查看web-view | 微信开放文档）

踩坑点：有很多文章写的需要在根项目index.html文件中引入，类似

但是不知道为什么，我在这引入无法实现通讯 ，有知道的大佬还请帮我解惑

后来改用在需要操作的H5页面上引入（这是我们的H5页面，之前看别的文档一直以为引入是在微信小程序里面引入），这样引入就能调用wx.miniProgram里面的方法

// 因为项目用的是uniapp，所以有onLoad方法，vue可以用onMounted生命周期
// 需要引入的H5页面内引入JSSDKonLoad() {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实例：

<template><button @click="backMini">按钮</button>
</template><script>
export default {onLoad() {uni.showLoading({title: '加载中...'})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);setTimeout(() => {uni.hideLoading()this.backMini();}, 1000)})},methods: {backMini(){wx.miniProgram.redirectTo({url: '/pagesB/apply-result/index?applyResult=1&isAuth=true'})wx.miniProgram.postMessage({data: 'back'})},}
}
</script><style lang="scss" scoped></style>

然后在我们的小程序webview.vue中可以这样接收

<template><web-view :src="webviewurl" :webview-styles="webviewStyles" @message="onWebViewMessage" ></web-view>
</template><script>export default {data() {return {webviewurl: '',webviewStyles: {progress: {color: 'transparent',marginTop: '-100px'}},}},onLoad() {let agreementUrl = this.$hxGetItem('webview');this.webviewurl = agreementUrl;console.log(this.webviewurl)},onBackPress(options) {let pages = getCurrentPages()let page = pages[pages.length - 1];let currentPages = page.$getAppWebview()currentPages.close()return false},methods: {// 接收H5向微信小程序发的消息onWebViewMessage(e) {console.log('收到 WebVi', e.detail.data);},}}
</script><style lang="scss" scoped>page{background-color: #F8F8F8;}.itemBox{border-bottom: 2rpx solid #EEEEEE;}
</style>

4、注意点

web-view | 微信开放文档

在微信开发文档中有写明，wx.miniProgram.postMessage只有在特定时机才会触发message事件，什么意思呢，就是我在H5页面点击了操作按钮，向小程序发送了消息，这时候小程序并不会实时收到我的消息，而是在我操作了webview或者上面协议几种情况才会触发小程序端的@message才会收到消息，这也是一个坑点！他们的交互并不是实时的，

所以在实际业务中，要根据文档灵活变通，例如我这里的交互是在H5页面点击操作需要跳转到小程序内的某个页面，我这里直接用的是wx.miniProgram.redirectTo ，这时候webview也销毁了会触发我的message，也能传递消息了