微信小程序开发记录之四-二维码

关于微信小程序，不可避免会与各种二维码有接触。

小程序开发文档中也有相应的api文档，用起来还是很方便的。

这一次，刚好因为版本需求，于是进一步了解了一番，在此来一个总结，主要为前端角度。

🐎微信小程序

1、调起客户端扫码界面进行扫码

scanType 的值可以有：’barCode’, ‘qrCode’, ‘datamatrix’，’pdf417’

async scan() {
      const resp = await wepy.scanCode({
        scanType: ['barCode', 'qrCode', 'datamatrix']
      });
      if (!/^\d{6,20}$/gi.test(resp.result)) {
        this.$toast('请扫描正确的条形码！');
      } else {
        this.bloodCode = resp.result;
        this.$apply();
      }
    }

==success 的回调函数==

利用这个回调函数，可以获取二维码中携带的参数，这个在之后有很大的用处。

wx.scanCode({
  success (res) {
    console.log(res)
  }
})

一开始运用还不熟悉，就把所有参数打印出来，一个个进行熟悉。

2、扫码进入小程序获取二维码携带参数

获取二维码携带的参数，需要根据不同的应用场合，来进行不同的处理方法。（似乎说的有点绕=_=）

例如一个需求是：根据二维码携带的centerId进入不同的项目。
这里的参数只有一个，而且属于固定参数，变动不大。
就可以直接通过onload()获取参数。

1
2
3

onLoad(options) {
    this.centerId = options.centerId;
    };

例如，另一种的应用场景是：在注册时，扫二维码进来注册，根据二维码携带的from、deptId、userType、orderId等，进行不同的判断处理。
这些二维码相当于是定制的二维码，判断也较多。因此采用了另一种处理方法。

自行封装了方法getUrlQueryString、getQrcodeQueryString，然后直接调用方法。

前者getUrlQueryString方法，是对获取到的URl地址进行处理，根据 ? 分离出第一个参数，再根据 & 判断第二、三以及更多的参数。

export const getUrlQueryString = (url, name) => {
  let context = null;
  url = url.split('?')
  if (url && url[1]) {
    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    let r = url[1].match(reg);
    if (r != null) context = r[2];
  }
  return context;
};

后者getQrcodeQueryString方法，进行对编码的解析，获取对应的name。

export const getQrcodeQueryString = (options, name) => {
  if (options.q !== undefined) {
    return getUrlQueryString(decodeURIComponent(options.q), name);
  }
  return null;
};

==Tips:==

微信识别二维码后进入小程序，会将二维码链接当成参数”q”的形式传入小程序，在onLoad事件中提取“q”参数并自行UrlDecode一次，获取原二维码的完整内容。

// 通过“onload”的“options”参数对象获取页面传入的参数
onLoad: function (options){
    console.log(decodeURIComponent(options.q));
}

3、二维码与后端

获取二维码
这里参考官方文档。
对应三种API（createWXAQRCode、getWXACode、getWXACodeUnlimit）

这里还要安利一个工具草料二维码，可以制作二维码，也可以解析二维码，以及更多用途。

🐑JS

编码和解码URI的方法

编码：encodeURI()、encodeURIComponent()、

解码：decodeURI()、decodeURIComponent()

比较：
encodeURI 和 decodeURI 函数操作的是完整的 URI；
这俩函数假定 URI 中的任何保留字符都有特殊意义，所有不会编码它们。

encodeURIComponent 和 decodeURIComponent 函数操作的是组成 URI 的个别组件；
这俩函数假定任何保留字符都代表普通文本，所以必须编码它们，所以它们（保留字符）出现在一个完整 URI 的组件里面时不会被解释成保留字符了。

encodeURIComponent() 函数

可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ‘ ( ) 。

其他字符（比如：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

心得

每一次优化，必须先理清原有的逻辑，小程序参数多，所以要保证前后参数不丢。
增强自信，不要轻易就动摇了自己的想法。
再者，在借鉴和参考他人做法时，首先得想明白为什么他这样用，以及这样用的好处。然后再去思考出自己的方法与运用。
突然想到一个很形象的比喻：为什么在代码面前不够自信，因为这就像遇见一个喜欢的人，在他面前低到尘埃里。哈哈哈，我待前端如初恋，任它虐我千百遍。
因为热爱，那就保持这份热情！加油~

🐎微信小程序

1、调起客户端扫码界面进行扫码

2、扫码进入小程序获取二维码携带参数

3、二维码与后端

🐑JS

编码和解码URI的方法

心得

因为热爱，那就保持这份热情！加油~