h5调用微信扫一扫

安装插件并引入import wx from "weixin-jsapi"; Vue.prototype.wx = wx;

 //点击去扫一扫
  toSaoCode() {
    this.$router.replace('/saoCode');
  }

saoCode.vue

<template>
    <div> </div>
</template>

<script>
import wx from "weixin-jsapi";
export default {
name: "saoCode",
data() {
  return {}
},
mounted() {
  // 页面加载完成唤醒微信扫一扫
  this.wxScanCode();
},
methods: {
  //获取微信签名信息
  wxScanCode() {
    const _this = this;
    var url = window.location.href.split("#")[0]; // 获取当前扫码界面的url，url后面不能携带任何参数及#号，所以在此进行分割
    this.$axios({
      method: "POST",
      url: "/api/133datagathering/parent/getwxsignature?url=" + encodeURIComponent(url),
      dataType: "json",
    }).then(res => {
      // 后端返回的参数
      var timestamp = res.data.timpstamp;
      var noncestr = res.data.noncestr;
      var signature = res.data.signature;
      var appId = res.data.appId;
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        //                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: noncestr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        jsApiList: [
          "scanQRCode",
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
    });
    wx.error(function (res) {

    });
    wx.ready(function () {
      wx.checkJsApi({
        jsApiList: ['scanQRCode'],
        success: function (res) {

        }
      });
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          if (res.resultStr.indexOf("json=") > -1) {
            let jsonUrl = res.resultStr.split("json=")[1].split('&')[0];
            localStorage.jsonCode=jsonUrl;
          }
          // var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          // localStorage.result = JSON.stringify(result);
          setTimeout( () =>{
            _this.$router.replace({
              path: "/tips",
              query: {QRCodeKey: 1}
            });
          },500)
        }
      });
    });
  },

}
}
</script>
<style scoped></style>

tips.vue

<template>
  <div></div>
</template>

<script>
import Toast from 'vant/lib/Toast';
import Dialog from 'vant/lib/Dialog';
import 'vant/lib/Toast/style';
import 'vant/lib/Dialog/style';

export default {
name: "tips",
data() {
  return {
    IndicatorItemID: '',
    QRCodeKey: '',
  }
},
mounted() {
  if(localStorage.jsonCode){
    let result = JSON.parse(localStorage.jsonCode);
    this.IndicatorItemID = result.IndicatorItemID;
    this.QRCodeKey = result.QRCodeKey;
    window.localStorage.removeItem('jsonCode');
    this.addCode();
  } else {
    this.$router.replace('/');
  }
},
methods: {
  addCode() {
    let string = {
      "IndicatorItemID": this.IndicatorItemID,
      "QRCodeKey": this.QRCodeKey,
      "UStudentID": localStorage.uStudentId,
    };
    this.$axios({
      method: 'POST',
      dataType: 'json',
      data: string,
      url: "/api/133datagathering/parent/createqrcoderecord",
    }).then(res => {
      console.log('createqrcoderecord')
      console.log(res.data);
      let Message = '';
      if (res.data.Success == true) {
        Message = '扫码成功';
      } else {
        Message = res.data.Message;
      }
      Dialog.confirm({
        message: Message,
        confirmButtonText: '继续扫码',
        cancelButtonText: '返回',
      }).then(() => {
        this.$router.replace('/saoCode');
      }).catch(() => {
        this.$router.replace('/');
      });
    });

  }
}
}
</script>
<style scoped></style>