前言背景

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

插件选择

angular2-QR码

npm install angular2-qrcode --save

使用方法

1. app.module中引入插件模块//src/app/app.module.ts //第三方插件模块 import { QRCodeModule } from 'angular2-qrcode';
2. 模板文件中以指令（指令）方式调用<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"
  }
}

效果展示

二维码

可选参数

属性	类型	默认	描述
值	串	“”	你的数据串（需要转换成二维码的字符串）
尺寸	数	128	这是您的QR码组件的高度/宽度（图片尺寸）
水平	串	'M'	QR校正水平（'L'，'M'，'Q'，'H'）（感觉好像是图片颗粒度）
类型	数	4	数据字符串的缓冲区大小
背景	串	'白色'	背景颜色
backgroundAlpha	数	1.0	背景的不透明度
前景	串	'黑色'	前景的颜色
foregroundAlpha	数	1.0	前景的不透明度
哑剧	串	'图像/ PNG'	输出图像的MIME类型
填充	数	空值	QR码周围的填充
帆布	布尔	假	输出画布元素如果为true（输出画布）

作者：小pxu

链接：http://www.jianshu.com/p/418d768c1c2c

來源：简书