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