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

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>
相关推荐
软希网分享源码1 小时前
校园跑腿小程序源码 | 跑腿便利店小程序(源码下载)
小程序·跑腿便利店小程序·校园跑腿小程序源码
说私域9 小时前
基于开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序的新开非连锁品牌店开业引流策略研究
人工智能·小程序·开源
KlDMEO10 小时前
DrissionPage 能控制火狐或edge吗
其他·微信小程序·小程序
柯北(jvxiao)12 小时前
爆肝三周,我终于上线了自己的第一个小程序
微信小程序·小程序
weixin_1772972206918 小时前
剧本杀APP系统开发:打造多元化娱乐生态的先锋力量
小程序·娱乐·剧本杀
weixin_1772972206918 小时前
扭蛋机小程序系统开发:连接线上线下娱乐的新桥梁
小程序·娱乐·扭蛋机·盲盒
毕设源码-赖学姐19 小时前
【开题答辩全过程】以 交通管理乱停车小程序的设计与实现为例,包含答辩的问题和答案
小程序
说私域19 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的营销创新研究——以“种草”实践践行“以人为本”理念
人工智能·小程序
说私域19 小时前
电商栏目细分与定制开发开源AI智能名片S2B2C商城小程序:洞察力与执行力的协同共进
人工智能·小程序
码海扬帆:前端探索之旅20 小时前
小程序开发指南(四)(UI 框架整合)
ui·微信小程序·小程序