微信小程序webview与VUE-H5实时通讯，踩坑无数！亲测可实现_小程序webview与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页面内引入JSSDK onLoad() { 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实例：

 按钮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\' }) }, }}

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

  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); }, } } page{background-color: #F8F8F8;} .itemBox{ border-bottom: 2rpx solid #EEEEEE; }

4、注意点

web-view | 微信开放文档

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

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