zoukankan      html  css  js  c++  java
  • angular2-qrcode (转)

    插件选择

    angular2-qrcode

    npm install angular2-qrcode --save
    c
    npm install angular2-qrcode --save

    参考github

    https://github.com/SuperiorJT/angular2-qrcode

    使用方法

    1. app.module中引入插件模块
      //src/app/app.module.ts
      //第三方插件模块
      import { QRCodeModule } from 'angular2-qrcode';
    2. 模板文件中以指令(directive)方式调用
      <ion-header>
       <ion-navbar>
           <ion-title text-center>二维码</ion-title>
       </ion-navbar>
      </ion-header>
      <ion-content padding>
       <ion-card>
           <ion-card-header class="text-c">
               <dl class="wqcover">
                   <dt class="font-red">{{storeUserName}}</dt>
                   <dd class="m-n font-n font-light">门店:{{storeName}}</dd>
                   <dd class="m-n font-n font-light">所属供应商:{{storeUserCompany}}</dd>
               </dl>
           </ion-card-header>
           <ion-card-content>
               <div>
                   //此处就是二维码展示部分
                   //如果有变量就这样写: [value]="'用户名:'+storeUserName"
                   <qr-code [value]="'All QR Code data goes here!'"></qr-code>
               </div>
               <p class="text-c font-n font-light">扫一扫上面的二维码图案,办理业务</p>
           </ion-card-content>
       </ion-card>
      </ion-content>

    注意事项

    1. 模块在app.module中引入后就可以直接使用了,不需要将其加入declarations中,也不用在组建中引入
    2. 不要像官方文档中那样在组件的@component装饰器中加入directives元属性,会报错的
    3. 以上两点及实现效果基于我使用的版本,下面给出package.json参考
    {
      "name": "ionic-app-base",
      "author": "Ionic Framework",
      "homepage": "http://ionicframework.com/",
      "private": true,
      "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
      },
      "dependencies": {
        "@angular/common": "2.2.1",
        "@angular/compiler": "2.2.1",
        "@angular/compiler-cli": "2.2.1",
        "@angular/core": "2.2.1",
        "@angular/forms": "2.2.1",
        "@angular/http": "2.2.1",
        "@angular/platform-browser": "2.2.1",
        "@angular/platform-browser-dynamic": "2.2.1",
        "@angular/platform-server": "2.2.1",
        "@ionic/storage": "1.1.7",
        "angular2-qrcode": "^2.0.0",  //qrcode插件版本
        "ionic-angular": "2.0.0-rc.4",
        "ionic-native": "2.2.11",
        "ionicons": "3.0.0",
        "qrcode-generator-ts": "0.0.4",
        "rxjs": "5.0.0-beta.12",
        "ts-md5": "^1.2.0",
        "zone.js": "0.6.26"
      },
      "devDependencies": {
        "@ionic/app-scripts": "0.0.47",
        "typescript": "2.1.6"
      }
    }

    效果展示


    二维码

    可选参数

    AttributeTypeDefaultDescription
    value String '' Your data string (需要转换成二维码的字符串)
    size Number 128 This is the height/width of your QR Code component(图片尺寸)
    level String 'M' QR Correction level ('L', 'M', 'Q', 'H')(感觉好像是图片颗粒度)
    type Number 4 Buffer size for data string
    background String 'white' The color for the background
    backgroundAlpha Number 1.0 The opacity of the background
    foreground String 'black' The color for the foreground
    foregroundAlpha Number 1.0 The opacity of the foreground
    mime String 'image/png' The mime type for the output image
    padding Number null The padding around the QR Code
    canvas Boolean false Will output a canvas element if true(输出canvas)



    作者:小pxu
    链接:http://www.jianshu.com/p/418d768c1c2c
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 相关阅读:
    Leetcode OJ: Rotate List
    Leetcode OJ: Reverse Words in a String
    Effective C++读书笔记
    word改变下划线与文字的距离
    sql 取出表中不重复的值
    Iso文件用utrliso怎么安装
    Spring注入aspectJ切面
    Spring中利用java注解声明切面
    Spring面向切面编程
    spring中部分异常
  • 原文地址:https://www.cnblogs.com/richard1015/p/7574597.html
Copyright © 2011-2022 走看看