美文网首页
基于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