ionic2二维码生成（angular2-qrcode）

前言背景

最近公司开始使用ionic2进行老项目的重构，不少基于jQuery的插件都需要寻找ts版本的替代品，这里就说一下二维码生成的插件（ionic2的native api中有生成的方式，不过官方文档上说，对android支持不太好，而且因为需要用到cordova插件，所以无法本地测试）

插件选择

angular2-qrcode

npm install angular2-qrcode --save

使用方法

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）