首页 > 网络编程 > JavaScript > javascript技巧 > 微信小程序webview与VUE-H5实时通讯

微信小程序webview与VUE-H5实时通讯踩坑无数实战记录(亲测可实现)

2025-08-23 14:08:34 作者：OvO张张

小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,这篇文章主要介绍了微信小程序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页面内引入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实例：

<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，也能传递消息了

总结

到此这篇关于微信小程序webview与VUE-H5实时通讯的文章就介绍到这了,更多相关微信小程序webview与VUE-H5实时通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！