前言背景
最近公司开始使用ionic2进行老项目的重构，不少基于jQuery的插件都需要寻找ts版本的替代品，这里就说一下二维码生成的插件（ionic2的native api中有生成的方式，不过官方文档上说，对android支持不太好，而且因为需要用到cordova插件，所以无法本地测试）
插件选择
npm install angular2-qrcode --save
使用方法
- 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） |
网友评论
de "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_module
s\node-gyp\bin\node-gyp.js" rebuild ) else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYT
HON env variable.
gyp ERR! stack at failNoPython (C:\Program Files\nodejs\node_modules\npm\nod
e_modules\node-gyp\lib\configure.js:449:14)
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node
-gyp\lib\configure.js:404:11
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\grac
eful-fs\polyfills.js:264:29
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:123:15)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodej
s\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd D:\IonicProjectA\test\node_modules\canvas
gyp ERR! node -v v6.10.2
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok
test@0.0.1 D:\IonicProjectA\test
`-- angular2-qrcode@2.0.1
`-- qrious@2.3.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: canvas@1.6.7 (node_modules\canva
s):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: canvas@1.6.7 install: `node-gyp
rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
这个报错是啥意思啊 楼主