二维码和app扫码下载

22 篇文章 0 订阅

二维码基本原理

参考:
https://cli.im/help/48235

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

堆叠式/行排式二维条码,如,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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值