在html5跳轉(zhuǎn)小程序使用wx-open-launch-weapp的示例分析

這篇文章主要介紹在html5跳轉(zhuǎn)小程序使用wx-open-launch-weapp的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

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

<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ā)現(xiàn)是template標(biāo)簽的問題：

<div class="center"  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>

以上是“在html5跳轉(zhuǎn)小程序使用wx-open-launch-weapp的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！