2017 年四月，微信正(zheng)式推(tui)出(chu)了(le)小程序碼。本文將為你(ni)剖析更多關于小程序碼的技術細節。

小程序碼的前世

初見小程序碼，猶如一朵盛開的菊(ju)花。

其實(shi)這種腦洞大開的異形(xing)碼并(bing)非微信首創，Facebook、kik、snapchat 等公司(si)都(dou)研發了自己體系的碼。

從設(she)計的圖形(xing)上，我們把(ba)上述方案簡(jian)單分成：

• 平面類 如 qrcode ,snapchart code

• 環狀類(lei) 如 fb code,kik code,

考慮到專利風(feng)險，又要兼顧優雅(ya)美觀，我(wo)們最終(zhong)選(xuan)擇放射狀(zhuang)作為我(wo)們的 base 方案，也就是(shi)最后面世的“菊花碼”。

小程序碼的構成

小(xiao)程序(xu)(xu)的(de) 3 個(ge)“牛(niu)眼”用(yong)來定(ding)位，放(fang)射(she)線(xian)條編碼信息(xi)，這是(shi)一個(ge)大家都懂的(de)原(yuan)理。但(dan)”麻雀雖小(xiao)，五(wu)臟俱(ju)全“，小(xiao)程序(xu)(xu)碼與 QRCode 類似，同樣包含了(le)定(ding)位區(qu)，編碼信息(xi)區(qu)，元信息(xi)區(qu)等(deng)部分，除此以外，我們還加入(ru)了(le)自定(ding)義 Logo 區(qu)，下面(mian)讓(rang)我們來解(jie)剖一下小(xiao)程序(xu)(xu)碼。

如何生成一個小程序碼

 ”萬(wan)丈高(gao)樓(lou)平(ping)地起“，那(nei)小程序碼是(shi)如何一(yi)(yi)磚一(yi)(yi)瓦構(gou)建起來的(de)呢？我們以(yi)一(yi)(yi)個實例來演示小程序碼的(de)生成 。

1 .定位點

定(ding)(ding)位(wei)(wei)(wei)點(dian)主要(yao)用于(yu)標記(ji)小程序碼的(de)(de)大(da)小及在圖(tu)中的(de)(de)位(wei)(wei)(wei)置，與 QRCode 類(lei)似,我們采用了 3+1 的(de)(de)方案，3 個(ge)主定(ding)(ding)位(wei)(wei)(wei)點(dian)加一個(ge)輔助定(ding)(ding)位(wei)(wei)(wei)點(dian)。可以發(fa)現，定(ding)(ding)位(wei)(wei)(wei)點(dian)的(de)(de)對(dui)角連線交點(dian)剛(gang)好是碼的(de)(de)圓心，3 個(ge)主定(ding)(ding)位(wei)(wei)(wei)點(dian)又剛(gang)好組成一個(ge)等腰直(zhi)角三(san)角形。以上(shang)的(de)(de)特征(zheng)，非(fei)常有利于(yu)定(ding)(ding)位(wei)(wei)(wei)識(shi)別。

2 .信息編碼區

我們會(hui)把原始編(bian)碼(ma)(ma)(ma)的(de)字符串，轉換成 01 的(de)序(xu)列，再加入糾錯(cuo)碼(ma)(ma)(ma)，得(de)到(dao)最終 01 序(xu)列。我們只需要把 01 序(xu)列按一定的(de)編(bian)碼(ma)(ma)(ma)路(lu)徑(jing)，填充到(dao)信息編(bian)碼(ma)(ma)(ma)區的(de)方(fang)格中即可(0 為(wei)白，1 為(wei)黑)。小程序(xu)在(zai)圖(tu)案(an)編(bian)碼(ma)(ma)(ma)階段，也是按點編(bian)碼(ma)(ma)(ma)的(de)的(de)，并沒有線(xian)的(de)概念。

3 .掩(yan)碼圖案(an)

填充好編碼區(qu)之后，我們發(fa)現(xian)圖(tu)案與(yu)設計稿大相徑庭(ting)，并沒有發(fa)射狀線條的感覺(jue)。究其(qi)原因，是(shi)因為(wei)黑色點過于稀疏(shu)。所以(yi)我們還要做 mask,加上掩(yan)碼圖(tu)案。

mask 的(de)原(yuan)(yuan)理其(qi)實就是拿一個(ge)掩碼圖案與原(yuan)(yuan)圖做 XOR 操(cao)作，在解碼階段，再(zai)做一次 XOR 操(cao)作，兩次 XOR 操(cao)作，我們得到(dao)了原(yuan)(yuan)始的(de)數據區。

我(wo)們(men)按照(zhao)一定(ding)(ding)的規則(ze)，預(yu)先設定(ding)(ding)了(le) 32 種 mask 模板。在碼(ma)生成(cheng)階(jie)段，會尋(xun)找一個最(zui)佳的 mask,讓我(wo)們(men)的黑白(bai)分(fen)布更具線(xian)條(tiao)感(gan)。mask 完成(cheng)后，我(wo)們(men)得到了(le)下面的效(xiao)果圖。

4 .元信息區(qu)

前面(mian)我(wo)們提到，小程序(xu)碼分為(wei)多個(ge)版本(ben)，每個(ge)版本(ben)有(you) 4 個(ge)糾(jiu)錯(cuo) Level,同時 mask 階段(duan)又有(you)一個(ge)獨(du)特(te)的 mask id。這些信息，我(wo)們稱之為(wei)元信息，需要獨(du)立編碼到圖(tu)案中，并且(qie)本(ben)身具備(bei)糾(jiu)錯(cuo)能力。

至此(ci)，我們已(yi)經(jing)把所(suo)有必不可少的信(xin)息寫入到圖案中，碼本身已(yi)經(jing)是可識別的了。為了讓(rang)整(zheng)體(ti)更加美觀(guan)，需要對內外圈(quan)再進行一些處理(li)。

5 .輪(lun)廓(kuo)填充區

為了凸顯 logo 的(de)形狀，我們在內圈留了一(yi)些區(qu)域(yu)作為輪廓(kuo)填充區(qu)。

6 .邊緣補全區

最外圈(quan)也不帶有編碼信(xin)息，用于勾勒圖案的輪廓，總體上我們有以下兩(liang)種方案

方(fang)案(an)一更(geng)突出圖案(an)更(geng)加圓的(de)特(te)點，但方(fang)案(an)二可以讓線(xian)條顯得(de)更(geng)加錯落有致，也是我們(men)的(de)最終選(xuan)擇(ze)。

可擴展

• 為了讓小程序碼在編碼容量上的需求，我們設計了 36 線，54 線，72 線三種版本，每個版本支持由低到高 L，M，Q，H 四種糾錯等級，分別能糾錯 10%，15%，25%，35%的信息。

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

編后語

從小程序碼設(she)計(ji)上，有(you)以下幾個特點

• 高識別度 保留最核心(xin)的(de)(de)中間區域給使(shi)用者自定義，讓每個品牌商都(dou)有自己(ji)的(de)(de)專屬碼

• 高容錯 實際應用中(zhong)，大部分 QRCode 由于中(zhong)間部分被 logo 覆蓋，有效編碼區域丟失。而小程序碼是無(wu)損的，在相同(tong)糾錯等級的情況下，容錯性更(geng)高。

• 更安全 QRCode 由于其開放性，容易(yi)成為“病(bing)毒”的(de)溫床。而小程序(xu)碼(ma)(ma)采用完全私有(you)的(de)協議，只有(you)微(wei)信可以生成，也只有(you)微(wei)信可以解(jie)碼(ma)(ma)，用戶可以放心的(de)打開掃(sao)一掃(sao)。

最后我們再通過下圖，感受(shou)一下小程(cheng)序碼這(zhe)朵“菊花(hua)”綻(zhan)放的過程(cheng)。