如何設計掃一掃功能才能更優雅

寫在前面

正如題圖，當前二維碼在生活中隨處可見，他的功能無需多言，完全的改變了消費者的使用習慣，提高了用戶的操做體驗，同時也拉近了人與人，人與物乃至物與物之間的距離。

二維碼的使用場景不少，好比添加好友，關注公衆號，移動支付，還有不少的某某活動入口，用戶無需記住太多信息，拿出手機，輕輕的掃一掃對方的資料就能完成操做；移動支付時代，也是由於這個功能的便捷，才能發展的更廣泛，剁起手來也就一瞬間；在商家舉辦的不少活動中，只須要提供一個二維碼圖片，再經過朋友圈等社交媒體的瘋狂轉發，億萬用戶都能與商家零距離參與活動，接着二次分享，從而給商家帶來蹭蹭蹭的流量。

然而，以上的種種便捷，都離不開掃一掃這個功能。下面，本人就站在一個剛剛接觸此行業的基礎上，跟你們聊一聊我腦殼裏的掃一掃是如何設計的（若有非議，請艾特我）。

正正正文

市場上主導應用是如何作的

想必接觸這個行業的產品和開發人員都瞭解，不管什麼應用，這塊的功能應該都是大差不差，條條大路通羅馬，但其中的規則，應該都是統一的。

那我在這裏就班門弄斧，順便體驗一下微信的掃一掃功能。

該二維碼圖片由微信APP提供

1. 先看一下微信掃描結果

該圖片由微信APP提供

這裏由於是本人的二維碼，因此下面顯示的操做是發消息，若是是陌生人的二維碼，就是添加到通信錄。這裏能夠知道，掃描這個二維碼的操做，就是查看該用戶的我的資料。那這個二維碼裏究竟藏有什麼信息？咱們能夠經過其餘工具掃描一下結果。

2. 看一下草料掃描結果

該圖片由草料二維碼提供

很顯然，這是一個http 的url 連接

http://weixin.qq.com/r/35zcxLnE_uSFrf2n98nN
複製代碼

咱們先分析一下這url 的大概參數，下面用一個表格來講明：

參數	類型	說明
weixin.qq.com	String	域名
r	String	看起來是路由 表示要查看資料
35zcxLnE_uSFrf2n98nN	String	看起來是加密後的能標識用戶惟一屬性

值得一提的是，這個url 是真實能夠訪問的，經過電腦打開會直接跳轉到官方網站。可能會有不少人（包括咱們的QA人員）提出疑問，如此簡單的一個掃碼查看資料的功能，爲何要作成一個複雜邏輯的url 超連接呢？

3. UC 掃碼結果

該圖片由UC提供

以上是UC 瀏覽器掃碼的結果，一樣是跳轉到微信官網，可是與之不一樣的是，緊接着直接打開微信APP（若是安裝微信的話），不然就跳到應用市場告知用戶下載微信APP。那這裏就能夠很好的解釋一下，爲何二維碼的掃描結果使用url 超連接，由於這樣能夠更好體驗的引導用戶，從而提高自身產品的流量，也就是說無論你經過何種方式，什麼應用掃碼，對於用戶來說，你能夠很快速很直觀的瞭解到你掃描的東西是什麼，再也不是二維碼實際意義上的一段字符，從產品的角度來講，也可以保證這塊的用戶流量流失減小，操做體驗上也有很大的提高。

咱們的應用該如何設計

那這個，跟產品自己的需求有很大關係，可是開發的思路和邏輯都是統一的，相似微信這種超級APP，有各類牛人集思廣益，項目中應該是會各類組件化，模塊化的設計，拿一個簡單的掃一掃功能來講，做爲一個模塊，在他的功能以及和其餘模塊之間的耦合性來講，確定是值得咱們借鑑和學些的，固然我沒有找到任何相關資料，下面只能按照近期的項目來聊聊我是如何處理的。

1. 二維碼掃描的結果一定是一個能夠訪問的超連接

這個應該是沒人反駁的。

之因此這麼定義，有兩點優點。第一，用戶體驗和導流上，能夠作到更好，具體上面的分析中也提到，就再也不贅述；第二，在研發上，經過超連接，能夠很方便的將功能集成到咱們的路由模塊，固然這裏也有其餘的方法，不過也一樣是爲了處理掃碼結果來定義的。

路由模塊的耦合設計

上圖中，掃一掃功能經過超連接的形式，能夠直接整合到路由模塊中，經過scheme 的方式，先將域名 替換成 自定義的scheme，若是路由模塊能夠處理就丟過去處理，不能處理的狀況下，就經過APP 內部的瀏覽器打開該連接，其餘邏輯的操做就丟給web 頁面處理，好比引導用戶到官網，提醒用戶下載應用，等一些錯誤的處理。

2.爲了更好地兼容掃碼功能，作一些優化

路由模塊的掃碼功能優化

這裏，咱們把一些通用的處理操做，經過類別或者代理協議的方法，按功能分別添加到路由模塊中，這種優化不只優化了掃一掃的功能，也同時優化了其餘各模塊使用路由模塊的邏輯。

那咱們能夠開始着手研發了

適用環境

Web或其餘應用調用XXX應用特定功能，也能夠用於應用內部功能跳轉

支持系統

iOS，Android，H5

若有因系統特性致使的不一致，在協議中詳細列出

調用方式

Web端

appwebv2.xxx.cn//?parms (開發測試環境爲appwebv2test.xxx.cn)

App端

xxxapp:///?params

Web 調用端須要先判斷XXX應用是否已經安裝 如已安裝，則經過xxxapp://調用 如未安裝，視實際定義及功能，經過web調用或者提示用戶下載應用

App 端須要先經過xxxapp:// 路由

若是本地已經註冊，繼續執行

沒有註冊，直接經過應用內瀏覽器打開 Web 頁面（須要匹配模板填充必要參數）

示例

appwebv2.xxx.cn/action/bind…?appversion={version}&platform={platform}&xxxkey={xxxkey}

連接前半部分，由服務器生成，後面紅色部分參數須要客戶端在不能正常經過路由打開該功能，調用瀏覽器時拼接在 url 裏。

後面紅色部分參數，根據服務器的模板連接匹配填充，而後生成二維碼展現。

必要參數

參數	類型	說明
action/	Router	此路由是action 表示該連接是要實現某功能
bind	String	表示綁定的操做
bike	String	表示要綁定的是車
bikeid	String	須要處理的參數

功能已經實現

按照上面的定義和邏輯，掃一掃的功能已經能夠據此定義砌磚實現。對於路由的功能，能夠本地實現，也能夠像蘑菇街那樣，經過後臺的配置能夠隨時更改處理操做。

因而，web 端準備了一個頁面，超連接是

http://appwebv2.xxx.cn/action/bind/bike
複製代碼

生成二維碼以前，服務端給了你一個字符串，內容是

http://appwebv2.xxx.cn/action/bind/bike/11234/?appversion={version}&platform={platform}&xxxkey={xxxkey}
複製代碼

客戶端根據字符串，經過匹配和填充，生成一個二維碼

生成二維碼

二維碼的實際結果就是

http://appwebv2.xxx.cn/action/bind/bike/11234/?appversion=V1.0&platform=iOS&xxxkey=3a10362d077cd27b5f2c537e1ff2fc48
複製代碼

至此，經過XXX 應用掃碼，就會調用添加車輛的功能。 經過第三方APP 掃碼的話，會先打開瀏覽器，web 頁面會再經過系統方法先嚐試調用XXX 應用，若是不能調起，就提醒用戶去商店下載，若是能調起應用，XXX 應用在啓動之後，經過路由模塊處理，首先跳轉到掃一掃界面，而後調用添加車輛的功能，若是路由沒法處理這個http 超連接，就會調用瀏覽器再加載這個web 頁面。