【小程序码 - 设计篇】菊花绽开

做者：lincolnlin,endyxu,changoran

2017 年四月，微信正式推出了小程序码。小程序码的使命及诞生的过程， 扫码背后藏了什么秘密？小程序码又为什么长得像菊花？ | 你问鹅答 一文已经做过一番介绍。本文将为你剖析更多关于小程序码的技术细节。

小程序码的前世

初见小程序码，犹如一朵怒放的菊花。

其实这种脑洞大开的异形码并不是微信独创，Facebook、kik、snapchat 等公司都研发了本身体系的码。

从设计的图形上，咱们把上述方案简单分红：

• 平面类 如 qrcode ,snapchart code

• 环状类 如 fb code,kik code,

考虑到专利风险，又要兼顾优雅美观，咱们最终选择放射状做为咱们的 base 方案，也就是最后面世的“菊花码”。

小程序码的构成

小程序的 3 个“牛眼”用来定位，放射线条编码信息，这是一个你们都懂的原理。但”麻雀虽小，五脏俱全“，小程序码与 QRCode 相似，一样包含了定位区，编码信息区，元信息区等部分，除此之外，咱们还加入了自定义 Logo 区，下面让咱们来解剖一下小程序码。

如何生成一个小程序码

”万丈高楼平地起“，那小程序码是如何一砖一瓦构建起来的呢？咱们以一个实例来演示小程序码的生成 。

1 .定位点

定位点主要用于标记小程序码的大小及在图中的位置，与 QRCode 相似,咱们采用了 3+1 的方案，3 个主定位点加一个辅助定位点。能够发现，定位点的对角连线交点恰好是码的圆心，3 个主定位点又恰好组成一个等腰直角三角形。以上的特征，很是有利于定位识别。

2 .信息编码区

咱们会把原始编码的字符串，转换成 01 的序列，再加入纠错码，获得最终 01 序列。咱们只须要把 01 序列按必定的编码路径，填充到信息编码区的方格中便可(0 为白，1 为黑)。小程序在图案编码阶段，也是按点编码的的，并无线的概念。

3 .掩码图案

填充好编码区以后，咱们发现图案与设计稿截然不同，并无发射状线条的感受。究其缘由，是由于黑色点过于稀疏。因此咱们还要作 mask,加上掩码图案。

mask 的原理其实就是拿一个掩码图案与原图作 XOR 操做，在解码阶段，再作一次 XOR 操做，两次 XOR 操做，咱们获得了原始的数据区。

咱们按照必定的规则，预先设定了 32 种 mask 模板。在码生成阶段，会寻找一个最佳的 mask,让咱们的黑白分布更具线条感。mask 完成后，咱们获得了下面的效果图。

4 .元信息区

前面咱们提到，小程序码分为多个版本，每一个版本有 4 个纠错 Level,同时 mask 阶段又有一个独特的 mask id。这些信息，咱们称之为元信息，须要独立编码到图案中，而且自己具有纠错能力。

至此，咱们已经把全部必不可少的信息写入到图案中，码自己已是可识别的了。为了让总体更加美观，须要对内外圈再进行一些处理。

5 .轮廓填充区

为了凸显 logo 的形状，咱们在内圈留了一些区域做为轮廓填充区。

6 .边缘补全区

最外圈也不带有编码信息，用于勾勒图案的轮廓，整体上咱们有如下两种方案

方案一更突出图案更加圆的特色，但方案二可让线条显得更加错落有致，也是咱们的最终选择。

可扩展

• 为了让小程序码在编码容量上的需求，咱们设计了 36 线，54 线，72 线三种版本，每一个版本支持由低到高 L，M，Q，H 四种纠错等级，分别能纠错 10%，15%，25%，35%的信息。

• 不一样的版本，在不一样的纠错 Level 下，采用不一样的字符集，其最大编码容量以下

编后语

从小程序码设计上，有如下几个特色

• 高识别度 保留最核心的中间区域给使用者自定义，让每一个品牌商都有本身的专属码

• 高容错 实际应用中，大部分 QRCode 因为中间部分被 logo 覆盖，有效编码区域丢失。而小程序码是无损的，在相同纠错等级的状况下，容错性更高。

• 更安全 QRCode 因为其开放性，容易成为“病毒”的温床。而小程序码采用彻底私有的协议，只有微信能够生成，也只有微信能够解码，用户能够放心的打开扫一扫。

最后咱们再经过下图，感觉一下小程序码这朵“菊花”绽开的过程。

此文已由做者受权腾讯云技术社区发布，转载请注明文章出处