微信适配linux,微信开放标签样式rem单位适配

2020年5月左右，微信公众后推出了开放标签，可以让微信浏览器内的网页跳转到在开放平台登记过的app。

跳转方法入如下，这是官方示例：

id="launch-btn"

appid="your-appid"

extinfo="your-extinfo"

>

App内查看

var btn = document.getElementById('launch-btn');

btn.addEventListener('launch', function (e) {

console.log('success');

});

btn.addEventListener('error', function (e) {

console.log('fail', e.detail);

});

但实际操作中遇到点问题，就是样式不能的单位只能用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]

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-btn {

border: 0;

background: transparent;

text-align: center;

color: #fc7262;

font-size: ${btnFontSize}px;

line-height: ${lineHeight}px;

width: 100%;

display: inline-block;

}

立即打开

`

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)

})

}

})

}