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

// 因为项目用的是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);
    })
},

<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>

<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>