美文网首页
vue中使用微信sdk实现扫码

vue中使用微信sdk实现扫码

作者: TerdShow | 来源:发表于2019-10-31 16:03 被阅读0次

    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实现扫码

          本文链接:https://www.haomeiwen.com/subject/cgstbctx.html