二维码生成和扫描集合
项目中有遇到过需要生成二维码和扫描二维码功能,这里将详细记录我的实现过程
问题点:
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项目或者其他项目,想扫描后跳转到本地路由页面并携带参数,建议你使用回调的方法单独处理
如果你有其他更好的实现方法也可以,这里只是描述了其中的一种方法。当然如果你有更好的方案可以联系我,让我们一起共同学习