【小程序碼 - 設計篇】菊花綻開

做者：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 因爲其開放性，容易成爲「病毒」的溫牀。而小程序碼採用徹底私有的協議，只有微信能夠生成，也只有微信能夠解碼，用戶能夠放心的打開掃一掃。

最後咱們再經過下圖，感覺一下小程序碼這朵「菊花」綻開的過程。

此文已由做者受權騰訊雲技術社區發佈，轉載請註明文章出處