公众号h5跳转小程序

一、安装weixin-js-sdk

微信jsSDK版本要求1.6.0，引入方法有两种

• 方法一 安装sdk包

  npm install weixin-js-sdk

• 方法二 在index.html中添加如下代码

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

二、config注入

import wx from 'weixin-js-sdk';
wx.config({
        debug: wxOpt.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: localStorage.getItem('appid'), // 必填，公众号的唯一标识
        timestamp: sign.timestamp, // 必填，生成签名的时间戳
        nonceStr: sign.nonceStr, // 必填，生成签名的随机串
        signature: sign.signature, // 必填，签名，见附录1
        jsApiList: wxOpt.jsApis, // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        jsApiList: [
          'wx-open-launch-weapp', // 跳转小程序时必填
          'updateAppMessageShareData',
          'updateTimelineShareData',
          'showOptionMenu',
          "showMenuItems",
          "showAllNonBaseMenuItem",
          "hideAllNonBaseMenuItem"
        ],
        openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
      });
      wx.ready(() => {
        setTimeout(() => {
          if (cb && typeof cb === "function") {
            console.log("ready");
            cb(wx);
          }
        });
      }, 500);
      wx.error(function(res) {
        console.log('config err: ', res);
      });

三、页面引入

<li class="applet-item"
  @click="onJump('applet', '试试小程序')">
  <img src="@/assets/img/Qi/icon_applets@3x.png" alt="">
  <p class="text">试试小程序</p>
  <wx-open-launch-weapp
    class="openweapp"
    id="launch-btn"
    username="gh_ca4314f4b099"
    path="pages/index/index.html">
    <script type="text/wxtag-template">
      <style>.btn { padding: 12px;opacity:0 }</style>
      <button class="btn">打开小程序</button>
    </script>
  </wx-open-launch-weapp>
</li>
<style lang="stylus" scoped>
.applet-item
  width: 164px;
  height: 66px;
  background: #FFFFFF;
  display: flex
  align-items: center
  padded_box(border-box, 15px 16px)
  border-radius: 8px
  position: relative
  img
    width: 32px
  .text
    width 78px
    line-height: 18px;
    font-family: 'PingFangSC-Regular';
    font-size: 14px;
    color: #646363
    margin-left: 8px
  // 原来样式不变，将跳转小程序的标签透明度设为0定位到父元素上
  .openweapp
    width 100%
    height 100%
    position absolute
    left 0
    right 0
    top 0
    bottom 0
</style>

四、vue报错

vue会显示wx-open-launch-weapp组件未注册
在main.js中加入

Vue.config.ignoredElements = ['wx-open-launch-weapp']

参考文献：
https://www.jianshu.com/p/c3db8f177845
https://blog.csdn.net/wenjin_Deng/article/details/114640713