2017 年四月，微信正式推出了小程序碼。本文將為你剖析更多關(guān)于小程序碼的技術(shù)細(xì)節(jié)。

小程序碼的前世

初見(jiàn)小程序碼，猶如一朵盛開(kāi)的菊花。

其實(shí)這種腦洞大開(kāi)的異形碼并非微信首創(chuàng)，F(xiàn)acebook、kik、snapchat 等公司都研發(fā)了自己體系的碼。

從設(shè)計(jì)的圖形上，我們把上述方案簡(jiǎn)單分成：

• 平面類(lèi) 如 qrcode ,snapchart code

• 環(huán)狀類(lèi) 如 fb code,kik code,

考慮到專(zhuān)利風(fēng)險(xiǎn)，又要兼顧優(yōu)雅美觀，我們最終選擇放射狀作為我們的 base 方案，也就是最后面世的“菊花碼”。

小程序碼的構(gòu)成

小程序的 3 個(gè)“牛眼”用來(lái)定位，放射線(xiàn)條編碼信息，這是一個(gè)大家都懂的原理。但”麻雀雖小，五臟俱全“，小程序碼與 QRCode 類(lèi)似，同樣包含了定位區(qū)，編碼信息區(qū)，元信息區(qū)等部分，除此以外，我們還加入了自定義 Logo 區(qū)，下面讓我們來(lái)解剖一下小程序碼。

如何生成一個(gè)小程序碼

”萬(wàn)丈高樓平地起“，那小程序碼是如何一磚一瓦構(gòu)建起來(lái)的呢？我們以一個(gè)實(shí)例來(lái)演示小程序碼的生成 。

1 .定位點(diǎn)

定位點(diǎn)主要用于標(biāo)記小程序碼的大小及在圖中的位置，與 QRCode 類(lèi)似,我們采用了 3+1 的方案，3 個(gè)主定位點(diǎn)加一個(gè)輔助定位點(diǎn)?？梢园l(fā)現(xiàn)，定位點(diǎn)的對(duì)角連線(xiàn)交點(diǎn)剛好是碼的圓心，3 個(gè)主定位點(diǎn)又剛好組成一個(gè)等腰直角三角形。以上的特征，非常有利于定位識(shí)別。

2 .信息編碼區(qū)

我們會(huì)把原始編碼的字符串，轉(zhuǎn)換成 01 的序列，再加入糾錯(cuò)碼，得到最終 01 序列。我們只需要把 01 序列按一定的編碼路徑，填充到信息編碼區(qū)的方格中即可(0 為白，1 為黑)。小程序在圖案編碼階段，也是按點(diǎn)編碼的的，并沒(méi)有線(xiàn)的概念。

3 .掩碼圖案

填充好編碼區(qū)之后，我們發(fā)現(xiàn)圖案與設(shè)計(jì)稿大相徑庭，并沒(méi)有發(fā)射狀線(xiàn)條的感覺(jué)。究其原因，是因?yàn)楹谏c(diǎn)過(guò)于稀疏。所以我們還要做 mask,加上掩碼圖案。

mask 的原理其實(shí)就是拿一個(gè)掩碼圖案與原圖做 XOR 操作，在解碼階段，再做一次 XOR 操作，兩次 XOR 操作，我們得到了原始的數(shù)據(jù)區(qū)。

我們按照一定的規(guī)則，預(yù)先設(shè)定了 32 種 mask 模板。在碼生成階段，會(huì)尋找一個(gè)最佳的 mask,讓我們的黑白分布更具線(xiàn)條感。mask 完成后，我們得到了下面的效果圖。

4 .元信息區(qū)

前面我們提到，小程序碼分為多個(gè)版本，每個(gè)版本有 4 個(gè)糾錯(cuò) Level,同時(shí) mask 階段又有一個(gè)獨(dú)特的 mask id。這些信息，我們稱(chēng)之為元信息，需要獨(dú)立編碼到圖案中，并且本身具備糾錯(cuò)能力。

至此，我們已經(jīng)把所有必不可少的信息寫(xiě)入到圖案中，碼本身已經(jīng)是可識(shí)別的了。為了讓整體更加美觀，需要對(duì)內(nèi)外圈再進(jìn)行一些處理。

5 .輪廓填充區(qū)

為了凸顯 logo 的形狀，我們?cè)趦?nèi)圈留了一些區(qū)域作為輪廓填充區(qū)。

6 .邊緣補(bǔ)全區(qū)

最外圈也不帶有編碼信息，用于勾勒?qǐng)D案的輪廓，總體上我們有以下兩種方案

方案一更突出圖案更加圓的特點(diǎn)，但方案二可以讓線(xiàn)條顯得更加錯(cuò)落有致，也是我們的最終選擇。

可擴(kuò)展

• 為了讓小程序碼在編碼容量上的需求，我們?cè)O(shè)計(jì)了 36 線(xiàn)，54 線(xiàn)，72 線(xiàn)三種版本，每個(gè)版本支持由低到高 L，M，Q，H 四種糾錯(cuò)等級(jí)，分別能糾錯(cuò) 10%，15%，25%，35%的信息。

• 不同的版本，在不同的糾錯(cuò) Level 下，采用不同的字符集，其最大編碼容量如下

編后語(yǔ)

從小程序碼設(shè)計(jì)上，有以下幾個(gè)特點(diǎn)

• 高識(shí)別度 保留最核心的中間區(qū)域給使用者自定義，讓每個(gè)品牌商都有自己的專(zhuān)屬碼

• 高容錯(cuò) 實(shí)際應(yīng)用中，大部分 QRCode 由于中間部分被 logo 覆蓋，有效編碼區(qū)域丟失。而小程序碼是無(wú)損的，在相同糾錯(cuò)等級(jí)的情況下，容錯(cuò)性更高。

• 更安全 QRCode 由于其開(kāi)放性，容易成為“病毒”的溫床。而小程序碼采用完全私有的協(xié)議，只有微信可以生成，也只有微信可以解碼，用戶(hù)可以放心的打開(kāi)掃一掃。

最后我們?cè)偻ㄟ^(guò)下圖，感受一下小程序碼這朵“菊花”綻放的過(guò)程。