公众号h5跳转小程序

一、安装weixin-js-sdk

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

• 方法一 安装sdk包

  npm install weixin-js-sdk

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

二、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);
      });

三、页面引入

  
  
试试小程序
  
    
  

四、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