vue中使用微信sdk实现扫码

1.微信公众号平台绑定安全域名,注意不要加协议名;

2.安装微信sdk

npm install weixin-js-sdk --save

3.引入

import wx from "weixin-js-sdk"

4.点击事件,触发微信扫码

handleScan() {
      this.bus.$emit("loading", true);
      let _this = this;
      getWechatSignature(function(res){
        if(res.data.code == 0){
        //配置参数由后台提供
          wx.config({
            debug: true,
            appId: res.data.data.appid,
            timestamp: res.data.data.timestamp,
            nonceStr: res.data.data.noncestr,
            signature: res.data.data.signature,
            jsApiList: ["scanQRCode"]
          });
        }else{
          Toast(res.data.msg);
        } 
      });
      wx.ready(function(){
        wx.checkJsApi({
          jsApiList: ["scanQRCode"],//使用的api
          success: function(res) {
            if (res.checkResult.scanQRCode === true) {
              wx.scanQRCode({
                needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                scanType: ["qrCode"],//扫码类型
                success: function(res) {
                  const urlCode = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
                  const qrCodeStr = this.getQueryString(
                    "serviceCenterCode",
                    "?" + urlCode.split("?")[1]
                  );
                  const qrCodeInfo = this.getQueryString(
                    "info",
                    "?" + urlCode.split("?")[1]
                  );
                  if (qrCodeStr == null) {
                    Toast("扫描二维码遇到问题,请重新扫描");
                    return false;
                  } else {
                    let data = {
                      dealerNo: qrCodeStr,
                      info: qrCodeInfo
                    };
                    getDealerInfo(data, _this.getDealerInfoCallback);
                  }
                }
              });
            } else {
              Toast("抱歉,当前客户端版本不支持扫一扫");
            }
          },
          fail: function(res) {
            //checkJsApiFail
          }
        });
      })
      wx.error(function (res) {
          //配置验证失败
      })
    }

你可能感兴趣的:(vue中使用微信sdk实现扫码)