插件选择
npm install angular2-qrcode --save
cnpm install angular2-qrcode --save
参考github
https://github.com/SuperiorJT/angular2-qrcode
使用方法
- app.module中引入插件模块
//src/app/app.module.ts //第三方插件模块 import { QRCodeModule } from 'angular2-qrcode';
- 模板文件中以指令(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>
注意事项
- 模块在app.module中引入后就可以直接使用了,不需要将其加入
declarations
中,也不用在组建中引入 - 不要像官方文档中那样在组件的
@component
装饰器中加入directives
元属性,会报错的 - 以上两点及实现效果基于我使用的版本,下面给出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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。