专注WEB开发 分享经验,沉淀知识

分享两款微信小程序生成二维码的插件

 作者:chenxing  时间:2017-02-27 15:49  阅读:7947  评论:

有时候网上提供的插件并不能满足大家的需求,下面提供关于二维码的生成的参考资料,大家可以根据直接项目的需求对二维码生成代码进行二次封装,网上的很多插件都是衍生品。

最近在开发一款微信小程序,有一个功能需要在微信前端生成多个二维码,在swiper中进行滑动。

这个功能可以分为两个步骤,一个是生成二维码,一个是滑动处理。

那么首要解决生成二维码的问题。

我这里先列出下面要讲的这两款插件,以及他们在项目中的实际应用。

1.基于canvas绘图制作二维码:https://github.com/demi520/wxapp-qrcode

2.基于img,base64输出二维码:https://git.oschina.net/cxing/wxqrcode.git

先说说当下比较流行的插件Jquery-qrcode,但是微信小程序是不支持jquery的,这个插件在这里就不适用,直接pass掉。不过第一个的插件是基于jqyuery-qrcode的核心js改造的,亲测有效。

在大量的实践面前小程序的canvas在显示上纯在一些问题,图像是漂浮在canvas上。所以在滑动的时候canvas是滑走了,但是图像没有被滑走还停留在原来的位置,被下一个canvas中的图像所覆盖。canvas结合swiper滑动的时候体验是非常差的,再加上canvas是比较耗资源的一个标签,所以能不用就尽量不用这个标签去输出图像(二维码)。

现在说说img输出二位码图像,这个标签输出图像会更好处理很多,再微信小程序是用“”这个来输出图片的。我们需要js在本地生成一张图片,注意这里不是src请求一个服务器端的图片,而是直接通过js生成生成一个base64编码的一张图片( src 既可以请求网络图片,也可以输出一个base64编码的图片 )。yaqrcode这个插件不依赖任何第三方js库,不用canvas绘图,直接生成一个base64编码的字符串。

上面提供的库是来自node-yaqrcode修改的,是基于nonde的一个二维码库。我在此基础上做了一些改动,改成能在微信小程序上能使用的二维码生成库。

此插件应用代码

var QR = require("../../utils/yaqrcode.js");
var imgData = QR.createQrCodeImg('http://****.com',{size:300});

效果显示

微信小程序二维码效果图

拓展:

有时候网上提供的插件并不能满足大家的需求,下面提供关于二维码的生成的参考资料,大家可以根据直接项目的需求对二维码生成代码进行二次封装,网上的很多插件都是衍生品。

提供了不同语言的生成二维码: https://github.com/kazuhikoarase/qrcode-generator

二维码官网: http://www.qrcode.com/zh/

phpqrcode官网:http://phpqrcode.sourceforge.net/

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/33.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  75

PHP字符串转数组的三种场景

 2018-05-05 01:32  176

PHP如何遍历字符串?

 2018-05-04 00:56  877

api接口常见的安全问题和解决方案

 2018-05-03 23:20  784

 最新评论

 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例
 旧久: 09月20日 07:24
感谢!
来源: 没备案域名如何在阿里云服务器上使用?
 pagenoname: 08月24日 18:51
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里