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

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)
              })

            }

          })
        }