• 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
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 相关阅读:
    鸡啄米vc++2010系列19(常用控件:静态文本框)
    鸡啄米vc++2010系列18(颜色对话框)
    鸡啄米vc++2010系列17(字体对话框)
    鸡啄米vc++2010系列16(文件对话框)
    鸡啄米vc++2010系列15(消息对话框)
    鸡啄米vc++2010系列14(一般属性页对话框的创建)
    鸡啄米vc++2010系类13(向导对话框的创建)
    鸡啄米vc++2010系列12(属性页对话框)
    鸡啄米vc++2010系列11(非模态对话框的创建)
    鸡啄米vc++2010系列10(模态对话框及其弹出过程)
  • 原文地址:https://www.cnblogs.com/richard1015/p/7574597.html
Copyright © 2020-2023  润新知