公眾號h5點擊跳轉(zhuǎn)到小程序

• 目錄
• 一、文檔鏈接？
• 二、使用步驟
• • 1.綁定域名
  • 2.引入JS文件
  • 3.通過config接口注入權(quán)限驗證配置并申請所需開放標(biāo)簽
  • 4.在所需頁面進(jìn)行使用

目錄

一、文檔鏈接？

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

二、使用步驟

1.綁定域名

登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

2.引入JS文件

在需要調(diào)用JS接口的頁面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載。

3.通過config接口注入權(quán)限驗證配置并申請所需開放標(biāo)簽

代碼如下（示例）：

wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印
  appId: '', // 必填，公眾號的唯一標(biāo)識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可選，需要使用的開放標(biāo)簽列表，例如['wx-open-launch-app']
});

4.在所需頁面進(jìn)行使用

提示：插槽模版及樣式均需要通過進(jìn)行包裹。對于Vue等視圖框架，為了避免template標(biāo)簽沖突的問題，可使用<script type="text/wxtag-template"></script>進(jìn)行代替。

代碼如下（示例）：

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx" //所需跳轉(zhuǎn)的小程序原始id，即小程序?qū)?yīng)的以gh_開頭的id
  path="pages/home/index.html?user=123&action=abc" //所需跳轉(zhuǎn)的小程序內(nèi)頁面路徑及參數(shù)
>
  <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>
});