二维码生成和扫描集合

项目中有遇到过需要生成二维码和扫描二维码功能,这里将详细记录我的实现过程

问题点:

1、如何生成二维码

2、如何扫描二维码

3、扫描二维码后跳转问题(外链or本地路由页面)

生成二维码

1、本文中将采用js的衍生库qrcode.js来实现二维码的生成  点击传送门可查看并下载

如果你是用vue开发的话,建议你用vue-qart 和 qrcodejs2都可以 这里有篇文章详细介绍了,这里就不多做说明 传送门

引入jquery库和qrcode.js就可以实现生成功能,代码如下

二维码生成和扫描集合

text:二维码生成的链接

width:二维码宽度

height:二维码高度

src:二维码生成时配置的logo

2、在开发过程中项目使用的是跨平台工具cordova,本来将以cordova插件barcodescanner实现

   一、安装cordova plugin add com.phonegap.plugins.barcodescanner和cordova-plugin-media-capture

   二、在页面引入cordova.js和cordova_plugins.js

   三、调用方法

二维码生成和扫描集合

注:生成二维码时,如需携带参数,则像平时一样携带参数用&来拼接参数,这里需要注意的点是二维码携带的参数不能为中文,如果不做处理会出现乱码的情况,解决乱码的方法可以使用encodeURL来解决

如果你开发的是vue项目或者其他项目,想扫描后跳转到本地路由页面并携带参数,建议你使用回调的方法单独处理

二维码生成和扫描集合

如果你有其他更好的实现方法也可以,这里只是描述了其中的一种方法。当然如果你有更好的方案可以联系我,让我们一起共同学习