微信小程序前端根据路径生成访问二维码

很多时候小程序需要生成二维码的时候基本上都是后端处理好之后传递给前端一串 url ，前端直接在页面上显示就可以了；难道是因为前端没法生成二维码吗？不是的，前端是可以自己根据页面路径加上参数生成对应的二维码的；

1、步骤

1、生成 access_token；
2、调用小程序提供的接口；
3、处理 buffer 类型数据为 base64；

2、总体代码

const { btoa } =  require('./base64')
Component({
  data: {
    image:''
  },
  methods: {
    getToken(){
      let that = this;
      let domain = "https://api.weixin.qq.com/cgi-bin/token";
      let appid = "wx93dfb87ffda1c517";
      let secret = "45ab3b135ec8b6f869f388013b13a8c0";
      let params = {
        grant_type:"client_credential",
        appid,
        secret
      }
      wx.request({
        url: domain,
        data:params,
        method:'get',
        success(res){
          that.getQRcode(res.data.access_token);
        }
      })
    },
    //小程序必须发布成功，且page对应路径可以找到才能调通这个接口
    getQRcode(token){
      let params = {
        page:'pages/home/index',
        scene:'xxxx'
      }
      let domain = `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token= ${token}`
      let that = this;
      wx.request({
        url: domain,
        data:params,
        responseType: "arraybuffer",
        method:"post",
        success(res){
          console.log(res)
          const str = String.fromCharCode(...new Uint8Array(res.data));
          let img = `data:image/jpeg;base64,${btoa(str)}`;
          that.setData({
            image:img
          })
        }
      })
    }
  }
})

由于拿到的是 buffer 类型的数据，我们需要将他转化为 base64 格式，之前小程序官方提供了一个 api 来转化，目前已经废弃了；所以这里需要自己弄一个方法 base64.js：

var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",
  a256 = "",
  r64 = [256],
  r256 = [256],
  i = 0;

var UTF8 = {
  /**
   * Encode multi-byte Unicode string into utf-8 multiple single-byte characters
   * (BMP / basic multilingual plane only)
   *
   * Chars in range U+0080 - U+07FF are encoded in 2 chars, U+0800 - U+FFFF in 3 chars
   *
   * @param {String} strUni Unicode string to be encoded as UTF-8
   * @returns {String} encoded string
   */
  encode: function (strUni) {
    // use regular expressions & String.replace callback function for better efficiency
    // than procedural approaches
    var strUtf = strUni
      .replace(
        /[\u0080-\u07ff]/g, // U+0080 - U+07FF => 2 bytes 110yyyyy, 10zzzzzz
        function (c) {
          var cc = c.charCodeAt(0);
          return String.fromCharCode(0xc0 | (cc >> 6), 0x80 | (cc & 0x3f));
        }
      )
      .replace(
        /[\u0800-\uffff]/g, // U+0800 - U+FFFF => 3 bytes 1110xxxx, 10yyyyyy, 10zzzzzz
        function (c) {
          var cc = c.charCodeAt(0);
          return String.fromCharCode(
            0xe0 | (cc >> 12),
            0x80 | ((cc >> 6) & 0x3f),
            0x80 | (cc & 0x3f)
          );
        }
      );
    return strUtf;
  },

  /**
   * Decode utf-8 encoded string back into multi-byte Unicode characters
   *
   * @param {String} strUtf UTF-8 string to be decoded back to Unicode
   * @returns {String} decoded string
   */
  decode: function (strUtf) {
    // note: decode 3-byte chars first as decoded 2-byte strings could appear to be 3-byte char!
    var strUni = strUtf
      .replace(
        /[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g, // 3-byte chars
        function (c) {
          // (note parentheses for precence)
          var cc =
            ((c.charCodeAt(0) & 0x0f) << 12) |
            ((c.charCodeAt(1) & 0x3f) << 6) |
            (c.charCodeAt(2) & 0x3f);
          return String.fromCharCode(cc);
        }
      )
      .replace(
        /[\u00c0-\u00df][\u0080-\u00bf]/g, // 2-byte chars
        function (c) {
          // (note parentheses for precence)
          var cc = ((c.charCodeAt(0) & 0x1f) << 6) | (c.charCodeAt(1) & 0x3f);
          return String.fromCharCode(cc);
        }
      );
    return strUni;
  },
};

while (i < 256) {
  var c = String.fromCharCode(i);
  a256 += c;
  r256[i] = i;
  r64[i] = b64.indexOf(c);
  ++i;
}

function code(s, discard, alpha, beta, w1, w2) {
  s = String(s);
  var buffer = 0,
    i = 0,
    length = s.length,
    result = "",
    bitsInBuffer = 0;

  while (i < length) {
    var c = s.charCodeAt(i);
    c = c < 256 ? alpha[c] : -1;

    buffer = (buffer << w1) + c;
    bitsInBuffer += w1;

    while (bitsInBuffer >= w2) {
      bitsInBuffer -= w2;
      var tmp = buffer >> bitsInBuffer;
      result += beta.charAt(tmp);
      buffer ^= tmp << bitsInBuffer;
    }
    ++i;
  }
  if (!discard && bitsInBuffer > 0)
    result += beta.charAt(buffer << (w2 - bitsInBuffer));
  return result;
}

var Plugin = function (dir, input, encode) {
  return input ? Plugin[dir](input, encode) : dir ? null : this;
};

Plugin.btoa = Plugin.encode = function (plain, utf8encode) {
  plain =
    Plugin.raw === false || Plugin.utf8encode || utf8encode
      ? UTF8.encode(plain)
      : plain;
  plain = code(plain, false, r256, b64, 8, 6);
  return plain + "====".slice(plain.length % 4 || 4);
};

Plugin.atob = Plugin.decode = function (coded, utf8decode) {
  coded = coded.replace(/[^A-Za-z0-9\+\/\=]/g, "");
  coded = String(coded).split("=");
  var i = coded.length;
  do {
    --i;
    coded[i] = code(coded[i], true, r64, a256, 6, 8);
  } while (i > 0);
  coded = coded.join("");
  return Plugin.raw === false || Plugin.utf8decode || utf8decode
    ? UTF8.decode(coded)
    : coded;
};
module.exports = {
  btoa: Plugin.btoa,
  atob: Plugin.atob,
};

3、总结

1、使用 getwxacode 这个接口，我们需要传递参数是 path，可以正常生成二维码，但是 path 路径在线上不存在的话会跳到 404 页面；
2、使用 getwxacodeunlimit 这个接口，我们需要使用 scene 传递参数，路径是 page 不可以拼接任何参数；并且这个接口的 page 必须是发布过的代码里存在的路径，否则接口是调不通的；

个人觉得还是由后端来处理二维码，前端直接展示比较好；原因是在获取 access_token 的时候请求的参数会暴露你的 appid 和 appSecret；