2020年5月左右，微信公众后推出了开放标签，可以让微信浏览器内的网页跳转到在开放平台登记过的app。
跳转方法入如下，这是官方示例：
<wx-open-launch-app
id="launch-btn"
appid="your-appid"
extinfo="your-extinfo"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">App内查看</button>
</template>
</wx-open-launch-app>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
但实际操作中遇到点问题，就是样式不能的单位只能用px，用rem单位无法继承html的font-size，造成布局混乱，上去开放社区找到类似解答。思路是先将rem单位转成px，动态渲染出wx-open-launch-app标签的模板，再去调用微信js-sdk的初始化来初始化按钮
开放社区参考回答
具体实现的代码如下：
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1,
souyue: u.indexOf('souyue') > -1,
superapp: u.indexOf('superapp') > -1,
weixin:u.toLowerCase().indexOf('micromessenger') > -1,
Safari:u.indexOf('Safari') > -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
console.log('浏览器检查',browser)
if (browser.weixin && navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)[1]<'7.0.12') {
alert('当前微信版本过低，请使用外部浏览器打开')
} else {
let htmlFontSize = window.getComputedStyle(document.documentElement,null).fontSize.replace('px','')
let btnFontSize = htmlFontSize*0.36
let lineHeight = htmlFontSize*0.88
this.wxBtnHtml = `
<wx-open-launch-app id="launch-btn" extinfo='{"type":"school_article","article_id":"${this.article_id}"}' appid="wx02532737c593fd7d">
立即打开
<template>
<style>
.wx-btn {
border: 0;
background: transparent;
text-align: center;
color: #fc7262;
font-size: ${btnFontSize}px;
line-height: ${lineHeight}px;
width: 100%;
display: inline-block;
}
</style>
<button class="wx-btn">立即打开</button>
</template>
</wx-open-launch-app>`
this.$nextTick(()=>{
let _this = this
let wxBtn = document.getElementById('launch-btn')
if (browser.versions.weixin) {
// 微信的 ，点击后不操作，两秒后跳转下载地址
lauchApp().then(()=>{
let wxBtn = document.getElementById('launch-btn')
wxBtn.addEventListener('click',()=>{
console.log('click1')
setTimeout(()=>{
_this.$router.push({path: '/pmd_Download'})
},2000)
})
wxBtn.addEventListener('ready', function (e) {
console.log('跳转初始化',e);
});
wxBtn.addEventListener('launch', function (e) {
console.log('跳转成功',e);
});
wxBtn.addEventListener('error', function (e) {
console.log('跳转失败', e);
});
})
} else {
wxBtn.addEventListener('click',()=>{
console.log('click2')
if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
alert('打开ios的URL Schemes链接')
// 打开ios的URL Schemes链接
} else if (browser.versions.android){
// 打开安卓的URL Schemes链接
alert('打开安卓的URL Schemes链接')
}
// 非微信的，带参数点击后根据客户端跳转唤起app的地址，两秒后跳转下载地址
setTimeout(()=>{
_this.$router.push({path: '/pmd_Download'})
},2000)
})
}
})
}
