SEARCH

小程序二维码码是这样绽放的,你一定不知道

2018年01月04日

小程序码的出现
2017 年 1 月 9 号,微信正式发布小程序,最开始只能通过微信「扫一扫」识别进入特定小程序。4 月 14 号,正式开放了「长按识别二维码」的功能,这意味着,用户使用小程序的便捷程度将大大提高。
此后,仅仅过了 4 天,微信又推出了小程序码,支持「扫一扫」和「长按识别扫码」。

小程序二维码码是这样绽放的,你一定不知道

小程序码的绽放过程
这是小程序码最初的设计稿雏形,可以看到的确是一朵花的形状,稍有不同的是这个雏形图中只有两个定位点。
而目前我们看到的小程序码,一共有3个定位点。

小程序二维码码是这样绽放的,你一定不知道

这个是小程序码的规范设计稿:

小程序二维码码是这样绽放的,你一定不知道

目前小程序码一共支持 3 种容量,分别是 36 射线、54 射线和 72 射线。

小程序二维码码是这样绽放的,你一定不知道

每个版本分别对应 L、M、Q、H 4种容错级别:

L 级容错的小程序码,大约 10% 的字码可被修正,M 级容错的小程序码,大约 15% 的字码可被修正,Q 级容错的小程序码,大约 25% 的字码可被修正,H 级容错的小程序码,大约 35% 的字码可被修正,这应该如何理解呢?

例如 H 级容错的小程序码,大约 35 %的字码可被修正。这意味着在最理想情况下,当这个小程序码 35% 的面积被遮挡/损坏,扫码引擎还是能识别出这个小程序码承载的信息。
但是,这 35% 被破坏的面积,不能是定位图案和功能性数据,必须是纯编码区,而且错误的区域还要分布得刚刚好,条件是非常苛刻的。
所以,这里的百分数是一个非常理想的数据,实际测试的结果会比这个百分数稍微低一些。
不过现阶段,当我们通过官方 API 文档去请求一张小程序码图片时,暂时不用(或者说未能)指定期望生成的是哪种版本、哪个容错级别的小程序码,这些是微信后台会帮开发者自动选择的。


麻雀虽小,五脏俱全。


小程序码有两个 Logo 区域,分别是中间的自定义 Logo 区和右下角的官方 Logo 区,灰色的区域是小程序码的数据编码区,其它彩色区域是小程序码的功能性数据

主要包括版本、纠错等信息。至于具体如何对应,由于微信官方暂时尚未对外公开,所以这里也要先保密一下哦!

小程序二维码码是这样绽放的,你一定不知道

小程序码这朵「菊花」是如织绽放的呢?主要要以下几个步骤:
1.定位点
首先确定 3 个定位点和右下角的官方 logo 区,经过第一步小程序码的大小也随着确定。

小程序二维码码是这样绽放的,你一定不知道

2.信息编码区
编码的过程主要是把原始信息(例如某个小程序的首页)转化成计算机能识别的语言——二进制序列(例如 0110…110)的过程。
听起来是不是有点抽象?你可以这么理解,六个月大的婴儿吃不了大米,但是我们可以把大米砸碎研磨变成米浆米糊,这样他就可以食用消化的,原理是差不多的,大而化小 :

小程序二维码码是这样绽放的,你一定不知道

编码完的下一步是加纠错码。
这个过程有点复杂,这里我也尝试用大家能听懂的语言给大家解释一下。
假设桌子上先是放了 100 个生鸡蛋(代表上一步已经转换好的二进制序列),然后再加入120个熟鸡蛋(代表纠错码,具体个数就视纠错率而定了,这里只是一种假设)。表面上看起来生鸡蛋和熟鸡蛋并没有太大的区别,但是其实还是有办法能辨别出来的。例如,生鸡蛋由于蛋黄悬浮到鸡蛋中间,重心不稳,无法旋转,而熟鸡蛋是可以旋转的。
经过纠错码这个步骤,数据量变大了(从生熟鸡蛋的例子来看,桌子上的鸡蛋由 100 个变为 220 个),而回到我们上一个步骤,相当于把二进制序列 0110…110 进行了扩展(假设原来 0 和 1 加起来一共有 170 位,经过纠错编码之后就变成了一共 400 位的 1010…101)。

小程序二维码码是这样绽放的,你一定不知道

这里需要补充说明的一点是,加纠错码这个阶段不只是让数据量简单地增大。
一旦小程序码的版本、纠错级别确定了,其对应的纠错码都是固定的了,这样解码阶段才能通过对应的规则去消除纠错码,把真正有用的数据保留下来(回到生熟鸡蛋的例子就是只留下生鸡蛋,而把熟鸡蛋排除掉)。
经过信息转换和纠错编码之后,我们得到一串最终的二维码序列,就可以把信息按一定的编码顺序填充到小程序码的编码区域(1对应的是黑色,0对应的是白色)。
填充之后我们发现小程序上花瓣看起来很不均匀,比如下图:

小程序二维码码是这样绽放的,你一定不知道

所以为了让小程序码的花瓣看起来更加均衡,需要再多做一步操作。

在此之前,我们先来学习一下逻辑异或(XOR,符号是⊕ )的基本知识,请看下面这个表格。

小程序二维码码是这样绽放的,你一定不知道

A ⊕ B ,当 AB 不等时值为1,AB 相等时值为0。A和同一个 B 经过两次异或操作,结果跟原码相同(A ⊕  B ⊕  B = A)。

小程序二维码码是这样绽放的,你一定不知道

3.掩码操作
将小程序码跟 32 种掩膜(又称「mask」,可依照一定的规则生成)进行异或运算,最终选取效果最佳的作为最终的小程序码。

小程序二维码码是这样绽放的,你一定不知道

4.功能性数据
最后一步是填充功能性数据,最终效果如下:

小程序二维码码是这样绽放的,你一定不知道

至此,小程序码就完成了它的绽放过程 。

Contact

大同市城区西环路168号

致力于做服务最好的网站建设公司

将 " 策划+创意+体验+技术 " 完美融合 !

Wechat