// 扫一扫按钮
<button type="button" @click="onScan">扫一扫</button>
// 引入weixin-js-sdk
import wx from 'weixin-js-sdk';
//点击上传扫描二维码
onScan() {
  this.getCofig();
  const that = this;
  wx.ready(function() {
    wx.checkJsApi({
      // 需要使用的JS接口列表,在这里只需要用到scanQRCode
      jsApiList: ['scanQRCode'],
      success: function(res1) {
        if (res1.checkResult.scanQRCode) {
          // 当scanQRCode可使用时
          wx.scanQRCode({
            needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
            scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
            success: function(res2) {
              let result = res2.resultStr;
              console.log(res2.resultStr, '扫描的结果~');
              window.location.href = result;
              // 也可以对扫描结果处理过之后再使用
              // 比如可以这样使用:
              // window.location.href = result.split('?')[0] + '/detail?' + result.split('?')[1]
            },
            error: function(response) {
              that.$toast(response);
            },
          });
        }
      },
    });
  });
},
getCofig() {
  const that = this;
  let url = '';
  let ua = navigator.userAgent.toLowerCase();
  if (/iphone|ipad|ipod/.test(ua)) {
    url = window.location.href.split('#')[0];
  } else if (/android/.test(ua)) {
    url = window.location.href;
  }
  console.log(window.location.href, '这个是获取当前扫描的完整url~');
  // GetWeixinScan 后端提供
  let WxAuthUrl = GetWeixinScan + '?url=' + url;
  this.$get(WxAuthUrl, {}, header)
    .then((res) => {
      if (res.data.code == 0) {
        // console.log(res.data.data, '这个是获取调用扫描返回的参数?~~');
        //微信的配置~~
        that.wxConfig(
          res.data.data.appId,
          res.data.data.timestamp,
          res.data.data.nonceStr,
          res.data.data.signature
        );
      } else {
        that.$toast(res.data.message);
      }
    })
    .catch(function(error) {
      console.log(error);
    });
},
//wx.config的配置
wxConfig(appId, timestamp, nonceStr, signature) {
  wx.config({
    debug: false, // 开启调试模式,
    appId: appId, // 必填,企业号的唯一标识
    timestamp: timestamp, // 必填,生成签名的时间戳
    nonceStr: nonceStr, // 必填,生成签名的随机串
    signature: signature, // 必填,签名
    jsApiList: ['scanQRCode', 'checkJsApi'], // 必填,需要使用的JS接口列表
  });
  wx.error(function(res) {
    alert('出错了:' + res.errMsg); //wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
  });
},

文档:
微信扫一扫官方文档
附录2-所有JS接口列表
微信扫一扫错误返回码

Logo

前往低代码交流专区

更多推荐