2017 年 1 月 9 號,微信正式發布小程序,最開始只能通過微信「掃一掃」識別進入特定小程序,4 月 14 號,正式開放了「長按識別二維碼」的功能,這意味著用戶使用小程序的便捷程度將大大提高。
此后,僅僅過了 4 天,微信又推出了小程序碼,支持「掃一掃」和「長按識別掃碼」。
小程序碼雖然長得跟二維碼截然不同,但二維碼所有的功能,小程序碼同樣具備。
為什么微信要推出這樣的異形二維碼?小程序碼背后又有何故事?
今天微勤廣州網站建設就來說一下小程序的發展歷程:
二維碼 VS 小程序碼
第一次掃小程序碼的時候,其實是抱著試一試的心態來的。
當時就在想,這么不像二維碼的碼真的能掃出來?結果一試還真可以!后面通過查找資料才發現,原來這種異形二維碼并不是微信的首創,Facebook、Snap 等公司都已經推出過類似的異形碼:
有這么一個二維碼是通過圖像處理和識別技術把傳統二維碼中近70%的色塊抹掉,做成一種近乎無形的二維碼。它是以色列一家創業公司(Visualead)的作品。
阿里巴巴于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對應的是白色)。
填充之后我們發現小程序上花瓣看起來很不均勻,比如下圖:
所以為了讓小程序碼的花瓣看起來更加均衡,需要再多做一步操作。
3、掩碼操作
將小程序碼跟 32 種掩膜(又稱「mask」,可依照一定的規則生成)進行異或運算,最終選取效果最佳的作為最終的小程序碼。
4、功能性數據
最后一步是填充功能性數據,至此,小程序碼就完成了它的綻放過程。
本文由廣州網站建設團隊微勤網絡整編而成,如需了解更多網站建設資訊、案例、各種網站建設知識可以聯系廣州網站建設公司微勤網絡專業項目經理進行一對一問答。
本文地址:小程序碼是這樣綻放的,你知道嗎?:http://www.www.9498.com.cn//article/86.html