Skip to content

二维码生成

fushang318 edited this page Sep 13, 2016 · 6 revisions

二维码基础知识介绍

首先阅读这两篇资料来了解什么是二维码
http://jingyan.baidu.com/article/d2b1d1027318df5c7e37d4c2.html
http://cli.im/news/10601
http://cli.im/news/22552

如果你想了解更多细节,可以阅读
http://cli.im/news/category/faq/qrcodeknowledge

二维码码制的选择

qrcode 码制的二维码应该是目前最常见的,什么支付宝,微信都是用的这种
所以用 qrcode 码制应该是比较稳妥的选择

开源类库

在 github 搜索 qrcode 可以找到很多 qrcode 相关的解码,编码类库
https://github.com/search?utf8=%E2%9C%93&q=qrcode

简单浏览一下就可以发现在各种平台,各种编程语言中都有大量开源实现,所以我们只需要找到我们项目需要的来使用就可以了(质量参差不齐,所以需要筛选)

二维码生成方案的思考

可行方案如下:

  1. 服务端根据内容生成二维码图片,客户端通过下载二维码图片来显示二维码
    1.1. 自己实现二维码生成的微服务,根据业务需要集成到业务流程当中
    1.2. 调用第三方二维码生成云服务,根据业务需要集成到业务流程当中
  2. 客户端直接根据内容生成二维码来显示
    1.1. 客户端根据内容生成二维码图片,以图片的形式来显示二维码
    1.2. 客户端根据内容实时的生成二维码UI DOM

在能保证需求的前提下,部署结构越简单越好,软件结构越简单越好
按照这个原则 1.2 > 1.1 > 1.2 > 1.1
当然也需要考虑开发工作量,比如是否有现成的开源类库用

经过挑选和尝试,我选用了 1.2 方案,并且是基于 webView, 这样的好处是 ios 和 android 只需要一份实现就可以了,并且现在主流的手机硬件计算能力都能够保证二维码生成的实时性

具体方案介绍

使用了一个叫做 react-native-qrcode 的开源项目
https://github.com/cssivision/react-native-qrcode
这个项目封装了一个 react native 组件,只需要调用这个组件并把文本内容传进去,就可以实时的显示二维码了
使用方式看这个项目的 readme 就基本了解了

也可以查看我集成好的 demo
https://github.com/fushang318/react-native-demo 版本库的 qrcode-gen 分支
具体位置在 ReactNativeDemo/app/features/qrcode_gen.js,也可以在线查看
https://github.com/fushang318/react-native-demo/blob/qrcode-gen/ReactNativeDemo/app/features/qrcode_gen.js

它的实现思路如下:
react-native-qrcode -> web view -> canvas -> qr.js(qrcode encode js lib)

qr.js 的项目地址
https://github.com/defunctzombie/qr.js