angular2-qrcode （轉）

插件選擇

angular2-qrcode

npm install angular2-qrcode --save
cnpm 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"
  }
}

效果展現

二維碼

可選參數

Attribute	Type	Default	Description
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
來源：簡書
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。