微信环境下H5跳转小程序(Vue版)

1:引入微信js-sdk

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

2:忽略小程序特殊标签报错提示，main.js中添加下列代码：

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

3:组件内初始化微信sdk

 window.wx.config({
    debug: false,
    appId:xxx, // 必填，公众号的唯一标识
    timestamp: timestamp, // 必填，生成签名的时间戳
    nonceStr: nonceStr, // 必填，生成签名的随机串
    signature: signature, // 必填，签名
    jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 需要使用的JS接口列表
    openTagList: ["wx-open-launch-weapp"]
 });
 

4:Vue HTML上用wx-open-launch-weapp包裹需要跳转小程序的按钮或者某个区域；

其中：

username： 要跳转的小程序原始id

path： 要跳转的小程序路径

    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_03ccc4e53193"
      path="pages/discovery/discovery"
    >
      <script type="text/wxtag-template">
        <button id="toMinoprogram">点击跳转至小程序首页</button>
      </script>
     </wx-open-launch-weapp>