美文网首页
基于ng1,老项目维护下的二维码生成

基于ng1,老项目维护下的二维码生成

作者: 殖民_FE | 来源:发表于2019-06-27 08:34 被阅读0次

由于现有的项目基于ng1.x版本的,根据战略需求,(当然重构也已经上日程);但是又需要维护和开发新功能以满足现有的用户需求,但是现有的插件或者组件不能满足当前需求,如二维码生成的需求!
这里推荐一个比较好用的https://github.com/jeromeetienne/jquery-qrcode;
亲测好用!
次插件基于jquery的,所以需要将其做成指令的形式,代码如下:

angular.module('app', [])
    .directive('qrCode', function() {
           return {
                 restrict: 'A',
                 scope: true,
                 link : function(scope, ele, attrs) {
                     var params = new Function('return {' + attrs['qrCode'] + '}')();
                     jQuery(ele).qrcode(params);
                 }
           };
     });

用法:

//////////////////1.
        <div qr-code="render: 'canvase', 
            width: 256, height: 256, 
            background: 'white', foreground: 'black',
            text: ''http://localhost">   
        </div>
//////////////////2.
        <div qr-code="render: 'table', 
            width: 128, height: 128, 
            background: '#eeeeee', foreground: 'green',
            text: 'http://localhost'">   
        </div>

参数:

1.qr-code="render: 'canvase',  渲染出一个canvase;
2. width: 256, height: 256, 宽高设置;
3. background: '#eeeeee', 背景颜色;
4. foreground: 'green', 二维码颜色;
5. text: 'http://localhost'" 二维码扫出来的文本或链接地址;

因为所用的技术架构比较老,所以用这个。
如果是ng版本较高的话,有很多选择可以用,并且都比较好用!

相关文章

网友评论

      本文标题:基于ng1,老项目维护下的二维码生成

      本文链接:https://www.haomeiwen.com/subject/vaakcctx.html