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

2017年1月9號(hào)，微信正式發(fā)布小程序，最開(kāi)端只能經(jīng)過(guò)微信「掃一掃」辨認(rèn)進(jìn)入特定小程序。4月14號(hào)，正式開(kāi)放了「長(zhǎng)按辨認(rèn)二維碼」的功用，這意味著，用戶(hù)使用小程序的快捷程度將大大提高。

此后，僅僅過(guò)了4天，微信又推出了小程序碼，支撐「掃一掃」和「長(zhǎng)按辨認(rèn)掃碼」。

小程序碼盡管長(zhǎng)得跟二維碼天壤之別，但二維碼一切的功用，小程序碼相同具有。

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

別著急，今日就來(lái)給咱們講講小程序碼背面的故事。

二維碼 VS 小程序碼

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

當(dāng)時(shí)就在想，這么不像二維碼的碼真的能掃出來(lái)？成果一試還真能夠！后面經(jīng)過(guò)查找材料才發(fā)現(xiàn)，本來(lái)這種異形二維碼并不是微信的創(chuàng)始，F(xiàn)acebook、Snap 等公司都現(xiàn)已推出過(guò)相似的異形碼：

二維碼經(jīng)過(guò)圖像處理和辨認(rèn)技術(shù)把傳統(tǒng)二維碼中近70%的色塊抹掉，做成一種近乎無(wú)形的二維碼。它是以色列一家創(chuàng)業(yè)公司（Visualead）的著作。

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

此外還有很多充滿(mǎn)想象力的「變臉二維碼」：

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

假如上面的理由還沒(méi)有壓服到你，咱們?cè)購(gòu)亩�維碼和小程序碼對(duì)比的視點(diǎn)，來(lái)看看小程序碼有什么長(zhǎng)處。

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

掃碼預(yù)期：每張二維碼的背面或許代表一個(gè)文件，一個(gè)頁(yè)面、又或許是一個(gè)使用安全性：二維碼因?yàn)槠溟_(kāi)放性，很容易成為木馬病毒的溫床，很多人會(huì)擔(dān)心掃碼之后或許使自己的手機(jī)感染病毒而放棄掃碼品牌宣傳：無(wú)法滿(mǎn)足小程序的品牌宣傳需求

小程序碼的長(zhǎng)處：

觀(guān)賞性：小程序碼與普通二維碼比較，看起來(lái)更美觀(guān)掃碼預(yù)期：掃碼前能明確知道掃碼之后將會(huì)體驗(yàn)到一個(gè)小程序安全性：小程序碼現(xiàn)在只能經(jīng)過(guò)微信發(fā)生，并且只能經(jīng)過(guò)微信辨認(rèn)，安全性更高品牌宣傳：每個(gè)小程序碼右下角都是固定的微信小程序 Logo，每見(jiàn)到一次小程序碼，咱們就能多一次聯(lián)想到微信小程序高容錯(cuò)性：當(dāng)一張二維碼圖片中心嵌有某些 Logo 圖片時(shí)，其實(shí)恰當(dāng)于是把最中心部分有用的編碼信息挖掉，再貼一張 Logo 圖片上去。而小程序碼不同，中心的 Logo 區(qū)并不包括數(shù)據(jù)編碼的部分，因此小程序碼具有更高的容錯(cuò)性

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

小程序碼的開(kāi)放進(jìn)程

這是小程序碼開(kāi)端的規(guī)劃稿雛形，能夠看到的確是一朵花的形狀，稍有不同的是這個(gè)雛形圖中只需兩個(gè)定位點(diǎn)。

而現(xiàn)在咱們看到的小程序碼，一共有3個(gè)定位點(diǎn)。

這個(gè)是小程序碼的規(guī)范規(guī)劃稿：

現(xiàn)在小程序碼一共支撐 3 種容量，分別是 36 射線(xiàn)、54 射線(xiàn)和 72 射線(xiàn)。

每個(gè)版別分別對(duì)應(yīng) L、M、Q、H 4種容錯(cuò)等級(jí)：

L 級(jí)容錯(cuò)的小程序碼，大約 10% 的字碼可被批改M 級(jí)容錯(cuò)的小程序碼，大約 15% 的字碼可被批改Q 級(jí)容錯(cuò)的小程序碼，大約 25% 的字碼可被批改H 級(jí)容錯(cuò)的小程序碼，大約 35% 的字碼可被批改

這應(yīng)該怎么了解呢？

例如 H 級(jí)容錯(cuò)的小程序碼，大約 35 %的字碼可被批改。這意味著在最抱負(fù)情況下，當(dāng)這個(gè)小程序碼 35% 的面積被遮擋/損壞，掃碼引擎仍是能辨認(rèn)出這個(gè)小程序碼承載的信息。

可是，這 35% 被破壞的面積，不能是定位圖畫(huà)和功用性數(shù)據(jù)，有必要是純編碼區(qū)，并且過(guò)錯(cuò)的區(qū)域還要分布得剛剛好，條件是十分苛刻的。

所以，這兒的百分?jǐn)?shù)是一個(gè)十分抱負(fù)的數(shù)據(jù)，實(shí)踐測(cè)驗(yàn)的成果會(huì)比這個(gè)百分?jǐn)?shù)稍微低一些。

不過(guò)現(xiàn)階段，當(dāng)咱們經(jīng)過(guò)官方 API 文檔去請(qǐng)求一張小程序碼圖片時(shí)，暫時(shí)不必（或許說(shuō)未能）指定期望生成的是哪種版別、哪個(gè)容錯(cuò)等級(jí)的小程序碼，這些是微信后臺(tái)會(huì)幫開(kāi)發(fā)者主動(dòng)選擇的。

麻雀雖小，五臟俱全。

小程序碼有兩個(gè) Logo 區(qū)域，分別是中心的自界說(shuō) Logo 區(qū)和右下角的官方 Logo 區(qū)，灰色的區(qū)域是小程序碼的數(shù)據(jù)編碼區(qū)，其它彩色區(qū)域是小程序碼的功用性數(shù)據(jù)（首要包括版別、糾錯(cuò)等信息。

至于具體怎么對(duì)應(yīng)，因?yàn)槲⑿殴俜綍簳r(shí)尚未對(duì)外揭露，所以這兒也要先保密一下哦）

小程序碼這朵「菊花」是如織開(kāi)放的呢？首要要以下幾個(gè)進(jìn)程：

1。定位點(diǎn)

首要確認(rèn) 3 個(gè)定位點(diǎn)和右下角的官方logo 區(qū)，經(jīng)過(guò)第一步小程序碼的巨細(xì)也隨著確認(rèn)。

2。信息編碼區(qū)

編碼的進(jìn)程首要是把原始信息（例如某個(gè)小程序的主頁(yè)）轉(zhuǎn)化成計(jì)算機(jī)能辨認(rèn)的言語(yǔ)——二進(jìn)制序列（例如 0110…110）的進(jìn)程。

聽(tīng)起來(lái)是不是有點(diǎn)籠統(tǒng)？你能夠這么了解，六個(gè)月大的嬰兒吃不了大米，可是咱們能夠把大米砸碎研磨變成米漿米糊，這樣他就能夠食用消化的，原理是差不多的，大而化小 ：）

編碼完的下一步是加糾錯(cuò)碼。

這個(gè)進(jìn)程有點(diǎn)復(fù)雜，這兒我也測(cè)驗(yàn)用咱們能聽(tīng)懂的言語(yǔ)給咱們解釋一下。

假定桌子上先是放了 100 個(gè)生雞蛋（代表上一步現(xiàn)已轉(zhuǎn)化好的二進(jìn)制序列），然后再加入120個(gè)熟雞蛋（代表糾錯(cuò)碼，具體個(gè)數(shù)就視糾錯(cuò)率而定了，這兒僅僅一種假定）。表面上看起來(lái)生雞蛋和熟雞蛋并沒(méi)有太大的差異，可是其實(shí)仍是有辦法能辨別出來(lái)的。例如，生雞蛋因?yàn)榈包S懸浮到雞蛋中心，重心不穩(wěn)，無(wú)法旋轉(zhuǎn)，而熟雞蛋是能夠旋轉(zhuǎn)的。

經(jīng)過(guò)糾錯(cuò)碼這個(gè)進(jìn)程，數(shù)據(jù)量變大了（從生熟雞蛋的比方來(lái)看，桌子上的雞蛋由 100 個(gè)變?yōu)?220 個(gè)），而回到咱們上一個(gè)進(jìn)程，恰當(dāng)于把二進(jìn)制序列 0110…110進(jìn)行了擴(kuò)展（假定本來(lái) 0 和 1 加起來(lái)一共有 170 位，經(jīng)過(guò)糾錯(cuò)編碼之后就變成了一共 400 位的 1010…101）。

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

一旦小程序碼的版別、糾錯(cuò)等級(jí)確認(rèn)了，其對(duì)應(yīng)的糾錯(cuò)碼都是固定的了，這樣解碼階段才能經(jīng)過(guò)對(duì)應(yīng)的規(guī)矩去消除糾錯(cuò)碼，把真正有用的數(shù)據(jù)保留下來(lái)（回到生熟雞蛋的比便利是只留下生雞蛋，而把熟雞蛋排除掉）。

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

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

所以為了讓小程序碼的花瓣看起來(lái)愈加均衡，需求再多做一步操作。

分隔線(xiàn)開(kāi)端

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

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

分隔線(xiàn)結(jié)束

3。掩碼操作

將小程序碼跟32種掩膜（又稱(chēng)「mask」，可依照必定的規(guī)矩生成）進(jìn)行異或運(yùn)算，終究選取作用最佳的作為終究的小程序碼。

4。功用性數(shù)據(jù)

最后一步是填充功用性數(shù)據(jù)，終究作用如下：

至此，小程序碼就完成了它的開(kāi)放進(jìn)程 ：）

獲取小程序碼

依據(jù)小程序官方開(kāi)發(fā)文檔的闡明，現(xiàn)在請(qǐng)求生成一個(gè)小程序碼有兩個(gè)接口（A 和 B），請(qǐng)求生成小程序二維碼有一個(gè)接口（C），這三個(gè)接口有什么差異呢？

數(shù)量約束：接口 A、C 生成的小程序碼和二維碼加起來(lái)不能超過(guò) 10w 個(gè)，接口 B 生成的小程序碼則數(shù)量沒(méi)有約束時(shí)效性：接口 A、B、C 生成的小程序碼/二維碼永久有用頁(yè)面指定性：接口 A、C 生成的小程序碼/二維碼能夠直接進(jìn)入指定頁(yè)面，而接口 B 生成的小程序碼需求經(jīng)過(guò)技術(shù)開(kāi)發(fā)處理邏輯（經(jīng)過(guò)參數(shù) scene）后才能跳轉(zhuǎn)到其它頁(yè)面

主張?jiān)蹅儍?yōu)先使用 B 接口去生成二維碼，一方面是小程序碼始終是比二維碼可辨認(rèn)性高，另一方面沒(méi)有數(shù)量約束，并且技術(shù)處理也相對(duì)簡(jiǎn)略。

關(guān)于小程序碼的款式，現(xiàn)階段咱們首要能夠界說(shuō)以下方面的內(nèi)容：

小程序碼的尺度小程序碼的射線(xiàn)色彩自界說(shuō) Logo 區(qū)的圖片

因?yàn)楝F(xiàn)在咱們只能界說(shuō)小程序碼的射線(xiàn)色彩，無(wú)法界說(shuō)整個(gè)小程序碼圖片的背景色彩。所以在聲明小程序碼射線(xiàn)的色彩這一步，首要有兩種思路：

經(jīng)過(guò)設(shè)置 line_color 來(lái)決議小程序碼射線(xiàn)的色彩，不過(guò)這個(gè)時(shí)分最好是保證射線(xiàn)跟背景色（白色）有必定的對(duì)比度，下降掃碼本錢(qián)設(shè)置 auto_color 為 true（默認(rèn)為 false），微信后臺(tái)會(huì)智能依據(jù)中心 Logo區(qū)域的主色調(diào)來(lái)確認(rèn)小程序碼射線(xiàn)的色彩微信辨認(rèn)小程序碼

小程序碼辨認(rèn)進(jìn)程跟小程序碼的生成進(jìn)程是反過(guò)來(lái)的，咱們能夠經(jīng)過(guò)簡(jiǎn)略的流程圖來(lái)感受一下。

盡管現(xiàn)在小程序暫時(shí)不支撐直接共享到朋友圈，可是越來(lái)越多的小程序現(xiàn)已經(jīng)過(guò)測(cè)驗(yàn)將小程序碼與業(yè)務(wù)功用相結(jié)合，生成一張能夠在朋友圈傳達(dá)的小程序碼，便利其它用戶(hù)經(jīng)過(guò)長(zhǎng)按辨認(rèn)小程序碼直接（從朋友圈）進(jìn)入相應(yīng)的小程序。

長(zhǎng)按辨認(rèn)二維碼（或小程序碼）在微信下是一個(gè)再自然不過(guò)的交互了，既然講到這兒，就趁便跟咱們簡(jiǎn)略聊聊長(zhǎng)按識(shí)碼背面的小故事。微信會(huì)依據(jù)不同的場(chǎng)景采取不同的辨認(rèn)戰(zhàn)略，這兒首要分為兩類(lèi)：

1.Webview 下長(zhǎng)按辨認(rèn)

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

2。圖片查看器下長(zhǎng)按辨認(rèn)

假定有人在朋友圈發(fā)送了一張包括小程序碼（或二維碼）的圖片，你點(diǎn)擊預(yù)覽小圖（這時(shí)稱(chēng)圖片處于圖片查看器中），這個(gè)時(shí)分也是能夠長(zhǎng)按辨認(rèn)的，那這個(gè)時(shí)分便是直接發(fā)圖去辨認(rèn)�。ǖ�不必定是原圖哦，這兒的戰(zhàn)略是十分十分多的，例如這張圖片十分大，微信就會(huì)先做恰當(dāng)緊縮再上傳去辨認(rèn)的）

現(xiàn)階段（2017.8）經(jīng)過(guò)測(cè)驗(yàn)發(fā)現(xiàn)，在普通場(chǎng)景下，只需微信能長(zhǎng)按辨認(rèn)二維碼，就也相同能長(zhǎng)按辨認(rèn)小程序碼；不過(guò)在小程序下面，暫時(shí)只支撐長(zhǎng)按辨認(rèn)小程序碼哦，長(zhǎng)按辨認(rèn)二維碼是不支撐的。

最后，感謝咱們閱覽到最后，有問(wèn)題隨時(shí)溝通。