H5 跳轉 小程序

官方文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

步驟和例子按照官方的來就行，我說注意的點：

1,首先記得引入sdk,在需要調用JS接口的頁面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

 

2，要進行微信公眾號的授權，就是跟平時做微信分享一樣的，就是在最后加上需要使用的開放標簽列表openTagList就行

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

 

3，最后一點按照官方示例復制過去，設置好跳轉的小程序id和路徑就行，最重要的一點一定要用手機微信打開才能看到按鈕，電腦端微信和微信開發者工具都是不行的，切記一定要實機，不然對着電腦調試半天也是出不來的

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"  //小程序號的ID，在小程序號的后台的設置里可以看到,都是gh_開頭的，跟appid不是同一個
  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>