如何设计扫一扫功能才能更优雅

写在前面

正如题图，当前二维码在生活中随处可见，他的功能无需多言，完全的改变了消费者的使用习惯，提高了用户的操做体验，同时也拉近了人与人，人与物乃至物与物之间的距离。

二维码的使用场景不少，好比添加好友，关注公众号，移动支付，还有不少的某某活动入口，用户无需记住太多信息，拿出手机，轻轻的扫一扫对方的资料就能完成操做；移动支付时代，也是由于这个功能的便捷，才能发展的更广泛，剁起手来也就一瞬间；在商家举办的不少活动中，只须要提供一个二维码图片，再经过朋友圈等社交媒体的疯狂转发，亿万用户都能与商家零距离参与活动，接着二次分享，从而给商家带来蹭蹭蹭的流量。

然而，以上的种种便捷，都离不开扫一扫这个功能。下面，本人就站在一个刚刚接触此行业的基础上，跟你们聊一聊我脑壳里的扫一扫是如何设计的（若有非议，请艾特我）。

正正正文

市场上主导应用是如何作的

想必接触这个行业的产品和开发人员都了解，不管什么应用，这块的功能应该都是大差不差，条条大路通罗马，但其中的规则，应该都是统一的。

那我在这里就班门弄斧，顺便体验一下微信的扫一扫功能。

该二维码图片由微信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 页面。