VUE 接入微信公众号JSSDK

511 阅读1分钟

VUE接入微信公众号JSSDK扫一扫

一、准备

  • 服务器
  • 域名
  • 微信公众号

二、开发

  1. 安装jssdk

    npm install weixin-jsapi
    
  2. 引入:在main.js加入代码

    import wx from "weixin-jsapi";
    
    Vue.prototype.$wx = wx;
    
  3. 使用 (data为接口返回的签名信息)

    // ***注意:注意:签名需要url url为encodeURIComponent(window.location.href.split("#")[0])
    let { appId, debug, jsApiList, nonceStr, signature, timestamp } = data;
    this.$wx.config({
      debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
      appId, // 必填,公众号的唯一标识
      timestamp, // 必填,生成签名的时间戳
      nonceStr, // 必填,生成签名的随机串
      signature, // 必填,签名
      jsApiList // 必填,需要使用的JS接口列表
    });
    this.$wx.ready(() => {
      this.$wx.scanQRCode({
        needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
        success: function(r) {
          let result = r.resultStr; // 当needResult 为 1 时,扫码返回的结果
          console.log("r", result);
        }
      });
    })
    

    常见错误排除(官方文档附录5)