微信H5网页调用扫一扫功能（vue）

最新推荐文章于 2024-07-24 16:21:45 发布

林迦叶

最新推荐文章于 2024-07-24 16:21:45 发布

阅读量4.4k

点赞数 1

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/maple_leaf_red/article/details/116661780

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

// 扫一扫按钮
<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配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
  });
},