小程序碼的出現(xiàn)

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

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

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

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

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

二維碼 VS 小程序碼

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

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

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

阿里巴巴于2015年投資了這家公司，在旗下的網(wǎng)站、APP 以及云計(jì)算等產(chǎn)品中已經(jīng)開始使用 相關(guān)技術(shù)。

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

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

如果上面的理由還沒有說服到你，我們?cè)購(gòu)亩S碼和小程序碼對(duì)比的角度，來看看小程序碼有什么優(yōu)點(diǎn)。

傳統(tǒng)二維碼往往以有下幾個(gè)缺點(diǎn)：

• 掃碼預(yù)期：每張二維碼的背后可能代表一個(gè)文件，一個(gè)頁(yè)面、又或者是一個(gè)應(yīng)用

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

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

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

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

• 掃碼預(yù)期：掃碼前能明確知道掃碼之后將會(huì)體驗(yàn)到一個(gè)小程序

• 安全性：小程序碼目前只能通過微信產(chǎn)生，并且只能通過微信識(shí)別，安全性更高

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

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

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

小程序碼的綻放過程

這個(gè)是小程序碼的規(guī)范設(shè)計(jì)稿：

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

這里需要補(bǔ)充說明的一點(diǎn)是，加糾錯(cuò)碼這個(gè)階段不只是讓數(shù)據(jù)量簡(jiǎn)單地增大。

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

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

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

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

分隔線開始

在此之前，我們先來學(xué)習(xí)一下邏輯異或（XOR，符號(hào)是⊕ ）的基本知識(shí)，請(qǐng)看下面這個(gè)表格。

A ⊕ B ，當(dāng) AB 不等時(shí)值為1，AB 相等時(shí)值為0。A和同一個(gè) B 經(jīng)過兩次異或操作，結(jié)果跟原碼相同（A ⊕  B ⊕  B = A）。

分隔線結(jié)束

3.掩碼操作

4.功能性數(shù)據(jù)

最后一步是填充功能性數(shù)據(jù)，最終效果如下：

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

獲取小程序碼

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

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

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

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

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

關(guān)于小程序碼的樣式，現(xiàn)階段我們主要可以定義以下方面的內(nèi)容：

• 小程序碼的尺寸

• 小程序碼的射線顏色

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

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

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

• 設(shè)置 auto_color 為 true（默認(rèn)為 false），微信后臺(tái)會(huì)智能根據(jù)中間 Logo區(qū)域的主色調(diào)來確定小程序碼射線的顏色

微信識(shí)別小程序碼

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

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

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

1.Webview 下長(zhǎng)按識(shí)別

當(dāng)微信檢測(cè)到用戶長(zhǎng)按識(shí)別的時(shí)候，會(huì)第一時(shí)間把當(dāng)前屏幕截屏，然后去檢測(cè)屏幕截圖是否有小程序碼（或二維碼），如果有，則出現(xiàn)長(zhǎng)按識(shí)別小程序碼（或二維碼）的菜單項(xiàng)，點(diǎn)擊該菜單項(xiàng)即可跳轉(zhuǎn)到對(duì)應(yīng)的小程序碼（或二維碼對(duì)應(yīng)的內(nèi)容）；反之如果截圖里面沒有小程序碼（或二維碼），又或者小程序碼（或二維碼）圖案不完整，則不會(huì)有識(shí)別結(jié)果。

2.圖片查看器下長(zhǎng)按識(shí)別

假設(shè)有人在朋友圈發(fā)送了一張包含小程序碼（或二維碼）的圖片，你點(diǎn)擊預(yù)覽小圖（這時(shí)稱圖片處于圖片查看器中），這個(gè)時(shí)候也是可以長(zhǎng)按識(shí)別的，那這個(gè)時(shí)候就是直接發(fā)圖去識(shí)別！（但不一定是原圖哦，這里的策略是非常非常多的，例如這張圖片非常大，微信就會(huì)先做適當(dāng)壓縮再上傳去識(shí)別的）

最后