微信小程序開發(fā)：你一定不知道，小程序碼是這樣綻放的
發(fā)布時間：2017-09-11 點擊次數：

小程序碼的出現

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

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

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

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

別著急，今天就來給大家講講小程序碼背后的故事。

二維碼 VS 小程序碼

第一次掃小程序碼的時候，其實是抱著試一試的心態(tài)來的。

當時就在想，這么不像二維碼的碼真的能掃出來？結果一試還真可以！后面通過查找資料才發(fā)現，原來這種異形二維碼并不是微信的首創(chuàng)，Facebook、Snap 等公司都已經推出過類似的異形碼：

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

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

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

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

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

傳統(tǒng)二維碼往往以有下幾個缺點：

• 掃碼預期：每張二維碼的背后可能代表一個文件，一個頁面、又或者是一個應用

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

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

小程序碼的優(yōu)點：

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

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

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

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

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

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

小程序碼的綻放過程

這個是小程序碼的規(guī)范設計稿：

目前小程序碼一共支持 3 種容量，分別是 36 射線、54 射線和 72 射線。

這里需要補充說明的一點是，加糾錯碼這個階段不只是讓數據量簡單地增大。

一旦小程序碼的版本、糾錯級別確定了，其對應的糾錯碼都是固定的了，這樣解碼階段才能通過對應的規(guī)則去消除糾錯碼，把真正有用的數據保留下來（回到生熟雞蛋的例子就是只留下生雞蛋，而把熟雞蛋排除掉）。

經過信息轉換和糾錯編碼之后，我們得到一串最終的二維碼序列，就可以把信息按一定的編碼順序填充到小程序碼的編碼區(qū)域（1對應的是黑色，0對應的是白色）。

填充之后我們發(fā)現小程序上花瓣看起來很不均勻，比如下圖：

所以為了讓小程序碼的花瓣看起來更加均衡，需要再多做一步操作。

分隔線開始

在此之前，我們先來學習一下邏輯異或（XOR，符號是⊕ ）的基本知識，請看下面這個表格。

A ⊕ B ，當 AB 不等時值為1，AB 相等時值為0。A和同一個 B 經過兩次異或操作，結果跟原碼相同（A ⊕  B ⊕  B = A）。

分隔線結束

3.掩碼操作

4.功能性數據

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

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

獲取小程序碼

根據小程序官方開發(fā)文檔的說明，目前請求生成一個小程序碼有兩個接口（A 和 B），請求生成小程序二維碼有一個接口（C），這三個接口有什么區(qū)別呢？

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

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

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

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

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

• 小程序碼的尺寸

• 小程序碼的射線顏色

• 自定義 Logo 區(qū)的圖片

由于目前我們只能定義小程序碼的射線顏色，無法定義整個小程序碼圖片的背景顏色。所以在聲明小程序碼射線的顏色這一步，主要有兩種思路：

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

• 設置 auto_color 為 true（默認為 false），微信后臺會智能根據中間 Logo區(qū)域的主色調來確定小程序碼射線的顏色

微信識別小程序碼

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

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

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

1.Webview 下長按識別

當微信檢測到用戶長按識別的時候，會第一時間把當前屏幕截屏，然后去檢測屏幕截圖是否有小程序碼（或二維碼），如果有，則出現長按識別小程序碼（或二維碼）的菜單項，點擊該菜單項即可跳轉到對應的小程序碼（或二維碼對應的內容）；反之如果截圖里面沒有小程序碼（或二維碼），又或者小程序碼（或二維碼）圖案不完整，則不會有識別結果。

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

假設有人在朋友圈發(fā)送了一張包含小程序碼（或二維碼）的圖片，你點擊預覽小圖（這時稱圖片處于圖片查看器中），這個時候也是可以長按識別的，那這個時候就是直接發(fā)圖去識別?。ǖ灰欢ㄊ窃瓐D哦，這里的策略是非常非常多的，例如這張圖片非常大，微信就會先做適當壓縮再上傳去識別的）

最后