1、背景
通过APP分享到微信中，在微信默认浏览器打开H5页面后，点击页面按钮，跳回APP并打开分享出去的对应页面。
2、技术路径
通过微信开放标签实现在微信默认浏览器打开后唤起APP操作。
3、具体实现路径
3.1 按照微信开放标签的使用步骤
（1）在公众号的功能设置中填写js安全域名
将XX.txt文档下载，然后上传到域名服务器的根路径下。
（2）引入微信js接口
js
npm install weixin-js-sdk安装完成后，引入
index.js
import wx from 'weixin-js-sdk';（3）通过config接口注入权限验证配置并申请所需开放标签
index.js
// 微信配置
wechatConfig(data) {
// 通过config接口注入权限验证配置并申请所需开放标签
let { timestamp, nonceStr, signature } = data
wx.config({
appId: this.weixinFwhID,//服务号(或者公众号)id
timestamp: timestamp,// 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature,// 必填，签名
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],// 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-app'] //需要使用的开放标签列表
})
wx.error(function (err) {
console.log('err--->' + err)
})
},其中签名校验必填字段可以通过服务端接口提供直接获取即可。
（4）使用开放标签 wx-open-launch-app 跳转APP
index.vue
<wx-open-launch-app
v-if="isWeixin"
id="launch-btn"
:appid="weixinYDId"//移动开发平台ID(移动appid)
:extInfo="extinfoStr"//参数
@error="handleErrorFn"//失败回调
@launch="handleLaunchFn"//成功回调
>
<script type="text/wxtag-template">
<style>
.btn {
height: 30px;
line-height: 30px;
padding:0 13px;
text-align: center;
background: #2E78FA;
border-radius: 15px;
font-weight: 500;
font-size: 15px;
color: #FFFFFF;
border:none;
}
</style>
<button class="btn">跳回APP</button>
</script>
</wx-open-launch-app>成功和失败的回调函数。例如：跳转失败提示进入下载APP页面；跳转APP成功埋点上报等。
index.js
// 监听error 函数
handleErrorFn(e) {
console.log('跳转失败---e' + JSON.stringify(e))
if (e.detail.errMsg === 'launch:fail') {
// 引导用户跳转下载页
window.location.href = this.downloadUrl
} else if (e.detail.errMsg === 'launch:fail_check fail') {
console.log('appid未绑定未关联到微信');
}
},
// 监听launch 函数
handleLaunchFn(e) {
console.log('跳转成功', JSON.stringify(e))
//埋点上报操作等
},至此，微信公众号绑定域名正确，服务号id，APP的id，以及服务端接口签名校验通过，前端H5项目打包部署。一切流程都无异常后，通过APP端内分享到微信好友或者朋友圈的卡片链接点击查看详情后，点击详情中的"跳回APP"按钮，能跳回到指定的APP中。