H5页面基于JS-SDK的微信扫一扫功能实现

1.安装依赖weixin-js-sdk

npm install weixin-js-sdk

2.在页面中引入weixin-js-sdk

var wx = require('weixin-js-sdk'); 或 import wx from 'weixin-js-sdk';

3.代码实现

<div class="right" @click="openCamera()">
        <div>扫描专家二维码</div>
        <img src="../assets/images/QRcode2.png" alt="" />
        <img class="rightIcon" src="../assets/images/right2.png" alt="" />
      </div>

methods: {
    //   调用二维码扫描
    openCamera() {
      let url = window.location.href;
      if (url.includes('#')) {
        url = url.split('#')[0];
      }
      // 获取时间戳
      this.$axios
        .get('xxxxxxxxxxxxxxxx', {
          params: { url: decodeURIComponent(url) },
        })
        .then((res) => {
          let { timestamp, noncestr, signature } = res.data;
          wx.config({
            debug: false,
            // debug: true,
            appId: 'wx0xxxxxxxxxxxxxd',
            timestamp: timestamp, //必填，生成签名的时间戳
            nonceStr: noncestr, // 必填，生成签名的随机串
            signature: signature, // 必填，签名
            jsApiList: ['checkJsApi', 'scanQRCode'], // 必填，需要使用的JS接口列表
          });
          wx.ready(() => {
            wx.scanQRCode({
              needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
              success: function (res) {
                //   var result = res.resultStr;
                let result = res.resultStr.split(',')[1]; // 当needResult 为 1 时，扫码返回的结果
                console.log(result);
              },
              fail: function (err) {
                console.log(err);
              },
            });
          });
        });
    },