怎么微信浏览器里打开APP

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

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

官方文档

绑定域名登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。
引入 JS 文件 import wx from 'weixin-js-sdk';
通过 config 接口注入权限验证配置并申请所需开放标签

代码语言：javascript复制

wx.config({ openTagList: ['wx-open-launch-app'] }); // 需要使用的开放标签列表，其他配置跟别的微信接口差不多，不赘述 ;

vue 文件中使用的话，需要再main.js那边加标签忽略Vue.config.ignoredElements = ['wx-open-launch-app'];
这边以 vue 为例，将唤起这种按钮封装成组件，以备之后使用

唤起 app 的按钮，必须使用微信的开放标签，这里需要APP端和微信申请APPID，作为标签参数，同时需要extInfo，是跳转所需额外信息，如果是首页的话，extInfo可以直接是xx://
如果页面需要再浏览器打开，那么需要兼容浏览器的情况
为了方便，一般写一个盒子，浏览器的按钮先写好，然后微信的按钮定位在其上就好，如果是微信，点的就是微信按钮，如果不是点的就是浏览器按钮
浏览器跳转打开 APP 的话，直接用下call-lib库，封装了细节，使用便捷

代码语言：javascript复制

<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>

使用组件

引入，传入配置项就好

代码语言：javascript复制

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

微信 vue.js

0 人点赞

怎么微信浏览器里 打开APP

使用组件

怎么微信浏览器里打开APP