vue中H5页面直接点击按钮或是链接跳转到微信小程序

参考文档

链接: developers.weixin.qq.com/doc/offiacc….

步骤一：绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
注意：是“公众号设置”，而不是“小程序设置”。

步骤二：引入JS文件

在要跳转小程序的页面中引入JS文件：res.wx.qq.com/open/js/jwe… （支持https）

vue的话也可以npm引入依赖 npm install weixin-js-sdk --save

步骤三：配置config信息

1、先请求接口配置微信需要的一些参数

getShopWxConfig() {
      const url = window.location.href
      // getWechatConfig为请求后台接口
      geWxconfig({ 'url': url }).then(res => {
        wx.config({
          debug: false,
          appId: res.data.appId,
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonceStr,
          signature: res.data.signature,
          openTagList: ['wx-open-launch-weapp'],
          jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'checkJsApi',
            'scanQRCode'
          ] // 必填，需要使用的JS接口列表
        })
        wx.ready(function () {
          console.log('res111')
        })
        wx.error(function (err) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          console.log('err222', err)
        })
      })
    },

配置的方法需要放到created、mounted或者beforeRouteEnter里

async mounted() {
    await this.getShopWxConfig()
  },

2、在页面中添加wx-open-launch-weapp标签

<wx-open-launch-weapp
        id="launch-btn"
        username="gh_************" //微信小程序原始ID gh_ 开头的
        path="pages/index/index.html"  //需要跳转的页面记得带上.html
        @launch="handleLaunchFn"
        @error="handleErrorFn"
      >
        <script type="text/wxtag-template">
  <style>
      .button {
        width: 275px;
        height: 43px;
        margin: 40px auto 0;
        background: linear-gradient(-1deg, #fda63d, #fbf4ca);
        box-shadow: 0px 2px 3px 0px rgba(158, 87, 0, 0.36);
        border-radius: 21px;
        border: none;
        line-height: 43px;
        font-size: 21px;
        font-family: Source Han Sans CN;
        font-weight: 500;
      }
  </style>
  <button class="button">进入小程序</button>
        </script>
      </wx-open-launch-weapp>

点击按钮后methods里面的回调

handleLaunchFn(e) {
      console.log('success', e)
    },
    handleErrorFn(e) {
      console.log('fail', e.detail)
    }