H5利用微信开放标签唤起用户手机APP

APP壳子分享网页到微信,被分享人在微信打开网页后,利用公众号配置微信开放标签['wx-open-launch-app'],实现唤起APP

一、Vue2.x(2.6.11)

1. main.js

// main.js

import Vue from 'vue';

Vue.config.ignoredElements = ['wx-open-launch-app'];

2. awakeByWeChat.vue

// awakeByWeChat.vue
<template>
  <wx-open-launch-app
    id="launch-btn"
    :appid="公众号ID"
    :extinfo="唤起app传递的参数"
    @error="onListenLaunchError"
  >
    <script type="text/wxtag-template">
      <style>
          * {
            margin: 0;
            padding: 0;
          }

          button:focus {
            outline: none;
          }

          .defaultBtn {
            border: 0;
            height: 500px;
            outline: none;
            margin: 0 auto;
            font-weight: 500;
          }

          {{ btnStyle }}
        </style>

        <button class="defaultBtn openBtn">{{ btnName }}</button>
    </script>
  </wx-open-launch-app>
</template>


<script>
export default {
  name: 'aweakAppByWeChat',
  props: {
    btnStyle: String, // 自定义按钮样式 `.btnClass{xx}`
    btnName: {
      type: String,
      default: '立即打开' // 自定义按钮名称
    }
  },
  data() {
    return {
      wxAppId: '',
      targetInfo: null, // 传递参数,格式需为字符串
    };
  },
  methods: {
    // wx 唤起失败异常处理, 降级处理跳转
    onListenLaunchError(e) {
      console.log('wx唤醒失败 | error', e.detail || e);
      this.$emit('launchError');
    }
  }
};
</script>

<style lang="less" scoped>
#launch-btn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}
</style>

二、Vue3.x(3.4.21)

1.main.js

// main.js

import { createApp } from 'vue'

const app = createApp(App)
app.config.compilerOptions.isCustomElement = (tag) => (tag.includes('wx-open-launch-app'))

2.vite.config.js

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  base: './',
  define: {
    __VUE_OPTIONS_API__: true // 关闭vue2中的 api属性
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag:any) => tag.includes('wx-open-launch-app')
        }
      }
    })
  ]
})

3.awakeByWeChat.vue

//awakeByWeChat.vue

<template>
  <wx-open-launch-app
    id="launch-btn"
    :appid="props.wxId"
    :extinfo="props.extinfo"
    @error="onListenLaunchError"
  >
    <component :is="'script'" type="text/wxtag-template">
      <button
        style="
          display: block;
          border: 0;
          width: 100%;
          height: 500px;
          outline: none;
          margin: 0 auto;
          font-weight: 500;
        "
      >
        {{ customName || "打开APP查看" }}
      </button>
    </component>
  </wx-open-launch-app>
</template>

<script lang="ts" setup>
const props = defineProps({
  wxId: {
    type: String,
    required: true,
  },
  extinfo: String,
  customName: String
});

const emit = defineEmits(["launchError"]);

const onListenLaunchError = (e) => {
  emit("launchError");
  console.log("WX唤起失败:", e.detail || e);

  // 执行降级操作
};
</script>

<style scoped lang="scss">
#launch-btn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}
</style>

使用tn唤起云闪付app可以通过以下步骤实现: 1. 在html文件中添加以下代码,其中`urlScheme`是云闪付app的scheme: ```html <a href="tnopen://app/{urlScheme}">打开云闪付</a> ``` 2. 在js文件中判断是否安装了云闪付app,如果已安装,则触发链接点击事件,否则提示用户下载云闪付app: ```javascript function openCloudQuickPay() { var urlScheme = 'com.unionpay.cloud.quickpay'; var ua = navigator.userAgent.toLowerCase(); if(ua.match(/iphone/i) || ua.match(/ipad/i)) { // 判断是否安装云闪付app if(navigator.userAgent.indexOf('UPPayQuickPay') > -1) { // 已安装云闪付app打开链接 window.location.href = 'tnopen://app/' + urlScheme; } else { // 未安装云闪付app,提示用户下载app window.location.href = 'https://itunes.apple.com/cn/app/id'+app_id; } } else if(ua.match(/android/i)) { // 判断是否安装云闪付app var isInstalled = false; try { isInstalled = !!window.jsbridge; } catch(e) {} if(isInstalled) { // 已安装云闪付app打开链接 window.location.href = 'tnopen://app/' + urlScheme; } else { // 未安装云闪付app,提示用户下载app window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=' + package_name; } } } ``` 其中,`app_id`和`package_name`分别是云闪付appApp Store和应用宝的应用ID。 3. 在html文件中添加链接点击事件,调用上述`openCloudQuickPay()`函数: ```html <a href="#" onclick="openCloudQuickPay()">打开云闪付</a> ``` 这样就可以在H5页面中通过tn唤起云闪付app了。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值