[TOC]

二维码基本原理

二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码，使用黑白矩形图案表示二进制数据，被设备扫描后可获取其中所包含的信息。一维条码的宽度记载着数据，而其长度没有记载数据。二维条码的长度、宽度均记载着数据。二维条码有一维条码没有的“定位点”和“容错机制”。容错机制在即使没有辨识到全部的条码、或是说条码有污损时，也可以正确地还原条码上的信息。二维条码的种类很多，不同的机构开发出的二维条码具有不同的结构以及编写、读取方法。

堆叠式/行排式二维条码，如，Code 16K、Code 49、PDF417等。
矩阵式二维码，最流行莫过于QR CODE，二维码的名称是相对与一维码来说的，比如以前的条形码就是一个“一维码”。它的优点有：二维码存储的数据量更大；可以包含数字、字符，及中文文本等混合内容；有一定的容错性（在部分损坏以后可以正常读取）；空间利用率高等。

二维码扫描器是根据条码的颜色反差 (Color Contrast) 而识别，因此以黑白颜色配搭效果最好。二维码的反差色不明显会出现扫描不出来的情况。白色的二维码，可以换成黑色的底色。二维码扫描器是根据条码的颜色反差 (Color Contrast) 而识别，所以以黑白颜色配搭的效果是最好的。
颜色使用须知如下：

条纹使用深色，空白位用浅色。
条纹使用冷色，例如黑色、蓝色、绿色、靛蓝色。
空白位使用暖色，例如白色、红色、橙色、黄色。
透明的包装，底色要明显反差色。

二级码生成

在线二维码生成

(草料二维码)：
https://cli.im/

java代码生成二维码

参考:https://www.cnblogs.com/huanzi-qch/p/10097791.html

ZXing(google开源)，一个支持在图像中解码和生成条形码(如二维码、PDF 417、EAN、UPC、Aztec、Data Matrix、Codabar)的库。ZXing(“zebra crossing”)是一个开源的、多格式的、用Java实现的一维/二维条码图像处理库，具有到其他语言的端口。

GitHub地址，猛戳：https://github.com/zxing/zxing
API文档，猛戳：https://zxing.github.io/zxing/apidocs/index.html
介绍文档，猛戳：https://zxing.github.io/zxing/

前端二维码生成

后端生成我们可以用ZXing框架，那么前端js又应该如何生成、识别二维码呢？QRCode.js，QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。菜鸟教程，猛戳：http://www.runoob.com/w3cnote/javascript-qrcodejs-library.html

但是qrcode默认不支持自定义logo，怎么办呢？两种方法：

1、创建一个img标签，调整样式，让logo在二维码区域上居中显示

2、创建一个canvas画布，将二维码跟logo重新绘制，让logo在二维码区域上居中显示

app扫码下载

支付宝等其它app扫描，可以使用浏览器打开直接下载。微信扫码禁用的下载功能，可以使用旋风微跳，生成可以在微信可下载的二维码：
http://www.zjychina.cn/

但是旋风微跳类服务是收费的。

可以采用间接的方法支持微信扫描下载。
参考：https://www.jianshu.com/p/f6a6406e023f

核心代码如下:

goDownload();

// 去下载

function goDownload() {

var u = navigator.userAgent, app = navigator.appVersion;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;

var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

// 是安卓浏览器

if (isAndroid) {

window.location.href = 'http://xxxxxxx.cn/release/xxxx-release.apk'; // 跳安卓端下载地址

}

// 是iOS浏览器

if (isIOS) {

window.location.href = 'https://itunes.apple.com/cn/app/xxxxxxx/id1124348115?mt=8'; // 跳AppStore下载地址

}

// 是微信内部webView

if (is_weixn()) {

alert("请点击右上角按钮, 点击使用浏览器打开");

}

// 是PC端

if (IsPC()) {

window.location.href = 'http://www.xxxxxxx.cn/index.html';  // 公司主页

}

}

// 是微信浏览器

function is_weixn(){

var ua = navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i)=="micromessenger") {

return true;

} else {

return false;

}

}

function IsPC() {

var userAgentInfo = navigator.userAgent;

var Agents = ["Android", "iPhone",

"SymbianOS", "Windows Phone",

"iPad", "iPod"];

var flag = true;

for (var v = 0; v < Agents.length; v++) {

if (userAgentInfo.indexOf(Agents[v]) > 0) {

flag = false;

break;

}

}

return flag;

}

臭味相投的朋友们，我在这里:
猿in小站:http://www.yuanin.net
csdn博客:https://blog.csdn.net/jiabeis
简书:https://www.jianshu.com/u/4cb7d664ec4b
微信免费订阅号“猿in”

猿in

二维码和app扫码下载