在html5跳轉小程序使用wx-open-launch-weapp使用方法總結！防踩坑！

我們對于小程序現在應該大家有知道怎么使用了，那么我們今天就來講講有關于：“在html5跳轉小程序使用wx-open-launch-weapp使用方法總結！”這方面的相關內容分享！

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

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
<style>.btn { padding: 12px }</style>
<button class="btn">打開小程序</button>
  </template>
</wx-open-launch-weapp>
<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> 

貼在vue中 無法使用，排查發(fā)現是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;
              background-color: #f94048;
              text-align: center;
            }
          </style>
          <div class="jump-btn">打開小程序</div>
        </script>
      </wx-open-launch-weapp>
    </div>

這樣基本功能就實現了，但是樣式沒法居中，在里面寫的style很多不生效，最后解決方案是： 給開放標簽外部套一個div 給div寫樣式，開放標簽本身也可以通過ID選擇器直接寫樣式， 至此開發(fā)完成，后續(xù)老板想在created中直接模擬點擊按鈕喚起小程序，試了ref獲取dom后調用click方法可是不生效，發(fā)現論壇上也沒有相關解決方案，微信開放社區(qū)中也有相關問題掛起并未解決，大家要是有什么好的方法可以下面討論下一起解決下

另附微信開放社區(qū)問題掛起的地址https://developers.weixin.qq.com/community/develop/doc/0004604a1d8df03099ba91c965b400

那么以上就是有關于：“在html5跳轉小程序使用wx-open-launch-weapp使用方法總結！”這方面的全部內容了，希望小編的分享對大家有所幫助！更多有關于html5這方面的相關內容我們都可以在W3Cschool進行學習和了解！