最近在做一个需求,希望在微信浏览器里打开 h5 页面,然后直接唤起自家的 APP。搜索一番,发现微信早在 2020 年就开放一个标签,用于打开 APP,再也不需要干儿子了。

没有太多研究时间,大致说下逻辑,备用,代码仅供参考。

官方文档

  1. 绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。

  2. 引入 JS 文件 import wx from 'weixin-js-sdk';

  3. 通过 config 接口注入权限验证配置并申请所需开放标签

wx.config({ openTagList: ['wx-open-launch-app'] }); // 需要使用的开放标签列表,其他配置跟别的微信接口差不多,不赘述 ;
复制代码
  1. vue 文件中使用的话,需要再main.js那边加标签忽略Vue.config.ignoredElements = ['wx-open-launch-app'];

  2. 这边以 vue 为例,将唤起这种按钮封装成组件,以备之后使用

  • 唤起 app 的按钮,必须使用微信的开放标签,这里需要APP端和微信申请APPID,作为标签参数,同时需要extInfo,是跳转所需额外信息,如果是首页的话,extInfo可以直接是xx://
  • 如果页面需要再浏览器打开,那么需要兼容浏览器的情况
  • 为了方便,一般写一个盒子,浏览器的按钮先写好,然后微信的按钮定位在其上就好,如果是微信,点的就是微信按钮,如果不是点的就是浏览器按钮
  • 浏览器跳转打开 APP 的话,直接用下call-lib库,封装了细节,使用便捷
<template>
  <div>
    <div class="btn-box" style="position:relative">
      <div class="btn" @click="callApp" :style="btnStyle"><slot /></div>
      <!-- 微信环境里,微信标签按钮 定位在普通按钮上 -->
      <wx-open-launch-app v-if="isInWx" id="launch-btn" :appid="config.appId" :extinfo="config.extinfo" @launch="getApp" @error="errorOpen" style="'position: absolute; top: 0; left: 0;right:0; bottom: 0; z-index: 1000;'" >
        <script type="text/wxtag-template">
          <div class='wx-btn' style="width:100%; height:100%;"></div>
        </script>
      </wx-open-launch-app>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
import wx from 'weixin-js-sdk';
import CallApp from 'callapp-lib';
export default {
  name: 'btnOfCallAppInWx',
  props: {
    // 属性appId extinfo scheme package appstore yingyongbao downloadPage fallback wxConfigApi
    config: Object,
    btnStyle: Object | String,
  },
  data() {
    return {
      isInWx: window.navigator.userAgent
        .toLowerCase()
        .includes('micromessenger'),
    };
  },
  created() {
    this.setWxConfig();
    this.initCallApp();
  },
  methods: {
    async setWxConfig() {
      const resApi = await axios().get(wxConfigApi, {
        params: { url: location.href.split('#')[0] },
      });
      if (!resApi.data) return;
      const { appId, timestamp, nonceStr, signature } = resApi.data.data;
      wx.config({ debug: true, appId, timestamp, nonceStr, signature, jsApiList: [], openTagList: ['wx-open-launch-app'], });
    },
    initCallApp() {
      const { scheme, package, appstore, yingyongbao, fallback } =
        this.props.config;
      this.callLib = new CallApp({ scheme: { protocol: scheme }, intent: { package, scheme }, appstore, yingyongbao, timeout: 4500, fallback, });
    },
    // 浏览器打开app
    callApp() {
      this.callLib.open({ path: this.config.extinfo });
    },
    getApp() {
      console.log('success');
    },
    // 不能打开app的话,跳到下载页面,这个是通用的h5介绍的下载页面,这样的话略微友好
    errorOpen() {
      location.href = this.config.downloadPage;
    },
  },
};
</script>
复制代码

使用组件

引入,传入配置项就好

import BtnOfCallAppInWx from '@/components/BtnOfCallAppInWx';
// <btn-of-call-app-in-wx :config="{appId,extinfo,scheme,package,appstore,yingyongbao,downloadPag

Logo

前往低代码交流专区

更多推荐