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 小时前
直播 app 系统架构分析
java·python·小程序·系统架构·php
weixin_177297220697 小时前
旧物回收小程序:开启绿色生活新篇章
小程序·生活
weixin_177297220697 小时前
短剧小程序系统开发:引领影视消费新潮流
大数据·小程序
少恭写代码8 小时前
duxapp中主题系统是如何实现动态切换的
react native·小程序·移动开发·taro·duxapp
说私域20 小时前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的餐饮行业私域流量运营策略研究
人工智能·小程序·流量运营
2501_915909061 天前
Charles中文版使用教程 高效抓包与API调试常见问题处理
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张1 天前
iOS软件性能监控实战指南 开发到上线的完整流程解析
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld1 天前
剧本杀小程序系统开发:构建数字化剧本杀生态圈
大数据·小程序·剧本杀
徐礼昭|商派软件市场负责人3 天前
从“多、老、旧”到“4i焕新”:品牌官方商城(小程序/官网/APP···)的范式跃迁与增长再想象
小程序·商城系统·零售
胡西风_foxww3 天前
微信小程序转Vue2组件智能提示词
微信小程序·小程序·提示词·智能体·vue2组件