背景
需求需要实现再微信APP内部打开链接的方式,再链接中跳转APP
方案
准备一个H5页面，再H5中进行操作
使用微信官方文档提供 开放标签进行APP跳转
用于页面中提供一个可跳转指定App的按钮。注意：Android平台通过开放标签跳转App，App必须接入微信OpenSDK，详细参见文档《Android微信OpenSDK接入指南》。
补充说明：1、必须真机才能渲染该标签；2、文字链无法拉起该标签
开放对象
此功能仅开放给已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转满足一定条件的App。在使用该标签之前，首先需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App。详细配置规则参考文档《微信内网页跳转APP功能》。
资料列表：
开放标签：developers.weixin.qq.com/doc/offiacc…
签名算法+js接口列表：developers.weixin.qq.com/doc/offiacc…
实现过程
实现思路:
在需要调用JS接口的页面引入如下JS文件：res.wx.qq.com/open/js/jwe… （支持https），或者npm 安装 weixin-js-sdk
页面上放置开放标签，
所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。
拿到签名后进行配置注入，在钩子方法中监听对象
注意点: 只能真机调试，且url必须是绑定在公众号中，不能本地调试，不能通过纯文本的方式跳转，只能通过卡片分享，二维码等识别后的方式进行跳转
把对应的链接用二维码工具或者啥转换一下就行。
具体实现:
html结构，因为这个样式不一定生效，建议直接外层包裹一个div，将开放标签定位再ui上，设置为透明，注:开放标签不支持rem,vw等样式属性，宽度可以100%，但是高度必须是真实数值。
<div class="ios_open_action" v-if="isWx">
打开APP
<wx-open-launch-app
style="position:absolute;top:0;left:0;right:0;bottom:0;width: 100%;"
appid="你的APPID" extinfo="要传递给app的信息" @error="error" @launch="launch"
@ready="ready">
<script type="text/wxtag-template">
<button id="btnJump" class="btn" style="width:100%;height:45px;opacity:0;">按钮</button>
</script>
</wx-open-launch-app>
</div>
方法实现:
根据官网推荐使用 location.href.split('#')[0] 或者window.loaction.href 获取url链接。
由后端获取id进行加密后，返回加密后的签名字符串等
因为后端接口是异步的，所以需要等待接口返回后再去进行后续注入操作。
async init() {
try {
// 即使路由是 history 模式，即没有 # 号时，也可以返回正常的地址
// const url =location.href.split('#')[0]
// 这里也可以对url进行加密后传递，请求后端获取签名的接口，返回小程序ID和签名等信息
const { publicId, timestamp, nonceStr, signature } = await this.$http.post('xxxxxx', {
url: location.href.split('#')[0],
appId: "需要跟config对象中的公众号id一致"
})
// 获取到数据之后，将小程序ID等信息配置完整,我这里解构了一层直接获取到了数据，你也可以直接在getSignature方法中解构了返回
wx.config({
debug: true, // 开启调试模式,返回值会alert出来,正式需要关闭
appId: publicId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳,此时间戳必须是后端获取签名时的时间戳。
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature,// 必填，签名
jsApiList: [
"openLocation",//获取的jsapi接口
],
// 必填，需要使用的JS接口列表
openTagList: [ 'wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
} catch (e) {
console.log('初始化微信SDK出现异常', e)
return false
}
return new Promise((resolve, reject) => {
wx.ready(() => {
console.log('微信环境初始化微信SDK成功')
resolve(true)
})
wx.error((e) => {
console.log('初始化微信SDK失败', e)
reject(false)
})
})
},
launch() {
console.log("跳转成功");
},
ready() {
console.log("准备就绪");
},
error() {
alert("跳转失败，请前往浏览器打开");
},
调试模式下，会弹出注入成功提示
到此就完成了这个APP的跳转
