鵝廠美女工程師來告訴你，小程序碼是如何「綻放」的

知曉程序註：

「曉組織」是知曉程序推出的全新欄目。

這裡是「曉組織」的第20 期。

我是陳潔婷，是來自騰訊 CDC 的一名前端工程師。

騰訊 CDC 全稱為「用戶研究與體驗設計中心」，是騰訊公司級設計團隊，致力於提升騰訊產品的用戶體驗，探索互聯網生態體驗創新。

最近，我有幸代表團隊參加了 HiFSD 第三屆前端分享會「小程序專場」，為了避免與其它嘉賓「撞車」，我分享了一些跟「小程序碼」相關的內容 。

分享會結束後，在同事的鼓勵下，我把這次分享的內容進行了整理，現在一併在知曉程序（微信號 zxcx0101）分享給大家，希望對大家了解小程序碼背後的故事有幫助。

小程序碼的出現

2017 年 1 月 9 號，微信正式發布小程序，最開始只能通過微信「掃一掃」識別進入特定小程序。4 月 14 號，正式開放了「長按識別二維碼」的功能，這意味著，用戶使用小程序的便捷程度將大大提高。

此後，僅僅過了 4 天，微信又推出了小程序碼，支持「掃一掃」和「長按識別掃碼」。

小程序碼雖然長得跟二維碼截然不同，但二維碼所有的功能，小程序碼同樣具備。

那麼，為什麼微信要推出這樣的異形二維碼？小程序碼背後又有何故事？

別著急，下面，我就來給大家講講小程序碼背後的故事。

二維碼 VS 小程序碼

第一次掃小程序碼的時候，我其實是抱著試一試的心態來的。

當時就在想，這麼不像二維碼的碼真的能掃出來？結果一試還真可以！

之後，通過查找資料才發現，原來這種異形二維碼並不是微信的首創，Facebook、Snap 等公司都已經推出過類似的異形碼：

例如，下面這個二維碼通過圖像處理和識別技術，把傳統二維碼中近 70% 的色塊抹掉，做成一種近乎無形的二維碼。它是以色列一家創業公司（Visualead）的作品。

可通過淘寶 App 掃碼識別

阿里巴巴於 2015 年投資了這家公司，在旗下的網站、App 以及雲計算等產品中已經開始使用相關技術。

動態視覺碼

此外，還有很多充滿想像力的「變臉二維碼」（作者：笑臉兔）：

面對市面上這麼多好玩又有趣的二維碼，微信推出專屬的小程序碼，既意料之外，又情理之中。

如果上面的理由還沒有說服到你，我們再從二維碼和小程序碼對比的角度，來看看小程序碼有什麼優點。

傳統二維碼往往有以下幾個缺點：

掃碼預期：不知道掃碼後會出現什麼，每張二維碼的背後，可能代表一個文件，一個頁面、又或者是一個應用

安全性：二維碼由於其開放性，很容易成為木馬病毒的溫床，很多人會擔心掃碼後會使自己的手機感染病毒，而放棄掃碼

品牌宣傳：無法滿足小程序的品牌宣傳需求

小程序碼的優點：

觀賞性：小程序碼與普通二維碼相比，看起來更美觀

掃碼預期：掃碼前能明確知道，掃碼之後將會體驗到一個小程序

安全性：小程序碼目前只能通過微信產生，並且只能通過微信識別，安全性更高

品牌宣傳：每個小程序碼右下角都有固定的微信小程序 logo，每見到一次小程序碼，大家就能多一次聯想到微信小程序

高容錯性：當一張二維碼圖片中間嵌有某些 logo 圖片時，其實相當於是把最中間部分有用的編碼信息挖掉，再貼一張 logo 圖片上去；而小程序碼不同，中間的 logo 區並不包含數據編碼的部分，因此小程序碼擁有更高的容錯性

很明顯，小程序碼是更好的選擇：）

小程序碼的綻放過程

這是小程序碼最初的設計稿雛形，可以看到是「一朵花」的形狀，稍有不同的是這個雛形圖中只有兩個定位點。

而目前我們看到的小程序碼，一共有 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. 功能性數據

最後一步是填充功能性數據，最終效果如下：

至此，小程序碼就完成了它的綻放過程 ：）

獲取小程序碼

根據小程序官方開發文檔的說明，目前請求生成一個小程序碼有兩個介面（A 和 B），請求生成小程序二維碼有一個介面（C），

這三個介面有什麼區別呢？

數量限制：介面 A、C 生成的小程序碼和二維碼加起來不能超過 10w 個，介面 B 生成的小程序碼則數量沒有限制

時效性：介面 A、B、C 生成的小程序碼/二維碼永久有效

頁面指定性：介面 A、C 生成的小程序碼/二維碼可以直接進入指定頁面，而介面 B 生成的小程序碼需要通過技術開發處理邏輯（通過參數 scene）後才能跳轉到其它頁面

建議大家優先使用 B 介面去生成二維碼，一方面是小程序碼始終是比二維碼可辨認性高，另一方面沒有數量限制，而且技術處理也相對簡單。

關於小程序碼的樣式，現階段我們主要可以定義以下方面的內容：

小程序碼的尺寸

小程序碼的射線顏色

自定義 logo 區的圖片

由於目前我們只能定義小程序碼的射線顏色，無法定義整個小程序碼圖片的背景顏色。

所以，在聲明小程序碼射線的顏色這一步，主要有兩種思路：

通過設置 line_color 來決定小程序碼射線的顏色，不過這個時候最好是確保射線跟背景色（白色）有一定的對比度，降低掃碼成本

設置 auto_color 為 true（默認為 false），微信後台會智能根據中間 logo 區域的主色調來確定小程序碼射線的顏色。

微信識別小程序碼

小程序碼識別過程，跟小程序碼的生成過程是反過來的，大家可以通過簡單的流程圖來感受一下。

雖然，目前小程序暫時不支持直接分享到朋友圈，但是越來越多的小程序已經通過嘗試將小程序碼與業務功能相結合，生成一張可以在朋友圈傳播的小程序碼，方便其它用戶通過長按識別小程序碼直接（從朋友圈）進入相應的小程序。

長按識別二維碼（或小程序碼）在微信下是一個再自然不過的交互了，既然講到這裡，就順便跟大家簡單聊聊長按識碼背後的小故事。微信會根據不同的場景採取不同的識別策略，這裡主要分為兩類：

1. Webview 下長按識別

當微信檢測到用戶長按識別的時候，會第一時間把當前屏幕截屏，然後去檢測屏幕截圖是否有小程序碼（或二維碼）。

如果有，則出現長按識別小程序碼（或二維碼）的菜單項，點擊該菜單項即可跳轉到對應的小程序碼（或二維碼對應的內容）；反之，如果截圖裡面沒有小程序碼（或二維碼），又或者小程序碼（或二維碼）圖案不完整，則不會有識別結果。

2. 圖片查看器下長按識別

假設有人在朋友圈發送了一張包含小程序碼（或二維碼）的圖片，你點擊預覽小圖（這時稱圖片處於圖片查看器中），這個時候也是可以長按識別的，那這個時候就是直接發圖去識別！（但不一定是原圖哦，這裡的策略是非常非常多的，例如這張圖片非常大，微信就會先做適當壓縮再上傳去識別的）

現階段（2017.8）經過測試發現，在普通場景下，只要微信能長按識別二維碼，就也同樣能長按識別小程序碼；不過在小程序下面，暫時只支持長按識別小程序碼哦，長按識別二維碼是不支持的。

最後

感謝大家閱讀到最後，為了表達我的感激，我決定（再次）把研究過程中遇到過的最好看的小程序碼的圖片分享給大家 ：）

騰訊投票

有趣實時的投票小程序

參考文章和圖片來源：

小程序碼相關介紹 —— by 微信團隊

《實踐並解讀最新的小程序碼生成方式》 —— by 花叔

《微信公眾平台小程序開發檔》

關注「知曉程序」公眾號

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！