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>