乐趣区

关于程序员:怎么微信浏览器里-打开APP

jiezi

最近在做一个需要，心愿在微信浏览器里关上 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" :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,downloadPa

退出移动版