H5与支付宝小程序通信，调起扫一扫

果真zZ2024-12-06 14:31

1.public/index.html加入代码

javascript 复制代码

<script>
  if (navigator.userAgent.indexOf('AliApp') > -1) {
    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
  }
  window.$my = my
</script>

2.vue其他具体页面加入代码

javascript 复制代码

methods: {
    async handleFn() {
      window.$uni.postMessage(
        {
          data: {
            key: 'H5Fn'
          }
        })
      var userAgent = navigator.userAgent
      var isAlipay = userAgent.indexOf('Alipay') !== -1 || userAgent.indexOf('AliApp') !== -1
      // 接收来自支付宝小程序的消息。
      if (isAlipay) {
        var _this = this
        window.$my.onMessage = function (e) {
          console.log('e', e)
        }
      }
    },
  }

3.小程序的webview

javascript 复制代码

<template>
  <view>
    <web-view :webview-styles="webviewStyles" id="web-view" :src="webviewUrl" @message="getMessage"></web-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      webviewStyles: {
        progress: {
          color: '#FF3333'
        }
      },
      webviewUrl: ''
    }
  },
  async onLoad(e) {
    this.webViewContext = my.createWebViewContext('web-view');

  },
  methods: {
    /**
     * @description: 接收h5传递给小程序的消息
     */
    getMessage(e) {
      let data = e.detail.data
      if (data.key === 'H5Fn') {
        this.webViewContext.postMessage({ data:"具体返回的数据" });
      }
      
    },
   
  },
}
</script>