怎么微信浏览器里 打开APP
最近在做一个需求，希望在微信浏览器里打开 h5 页面，然后直接唤起自家的 APP。搜索一番，发现微信早在 2020 年就开放一个标签，用于打开 APP，再也不需要干儿子了。
没有太多研究时间，大致说下逻辑，备用，代码仅供参考。
- 绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。
- 引入 JS 文件
import wx from 'weixin-js-sdk'; - 通过 config 接口注入权限验证配置并申请所需开放标签
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库，封装了细节，使用便捷
<template> <div> <div class="btn-box" style="position:relative"> <div class="btn" @click="callApp"><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 }, data() { return { isInWx: window.navigator.userAgent .toLowerCase() .includes('micromessenger') }; }, created() { this.setWxConfig(); this.initCallApp(); }, methods: { async setWxConfig() { const resApi = await axios().get(this.config.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: packageRename, appstore, yingyongbao, fallback } = this.config; console.log(this.config) this.callLib = new CallApp({ scheme: { protocol: scheme }, intent: { package: packageRename, scheme }, appstore, yingyongbao, timeout: 4500, fallback }); console.log(this.callLib) }, // 浏览器打开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 class="btn" :config="{appId,extinfo,scheme,package,appstore,yingyongbao,downloadPage,fallback,wxConfigApi}" btnStyle="">打开APP</btn-of-call-app-in-wx> // .btn{...}
