html5跳轉小程序wx-open-launch-weapp踩坑

目前公眾號還支持浮窗，於是需求出來了，浮窗一個H5，在H5中一鍵打開小程序，閱讀文檔得知，微信對公眾號網頁開發有開放標簽，可以打開App或小程序，但是過程中遇到不少坑以下為記錄爬坑。

1.正常操作，公眾號后台綁定域名
2.引入weixin.js 目前是1.6.0版本
3.調用wx.config 在openTagList中加入要使用的開放標簽
接下來坑來了，文檔上使用示例如下

貼在vue中 無法使用，排查發現是template標簽的問題

<div class="center" style="width: 100%" ref="launchBtnHome">
      <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/index/index/index" ref="launchBtn">
        <script type="text/wxtag-template">
          <style>
            .jump-btn {
              height: 44px;
              line-height: 44px;
              border: none;
              font-size: 16px;
              color: #ffffff;
              
              text-align: center;
            }
          </style>
          <div class="jump-btn">打開小程序</div>
        </script>
      </wx-open-launch-weapp>
    </div>

 

這樣基本功能就實現了，但是樣式沒法居中，在里面寫的style很多不生效，最后解決方案是： 給開放標簽外部套一個div 給div寫樣式，開放標簽本身也可以通過ID選擇器直接寫樣式， 至此開發完成，

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

 

來源：https://www.jb51.net/html5/754691.html