用ionic2如何生成二维码 财富值90

2016-10-30 02:41发布

在文档中是这样说的
我是这么写的:

但是呢总出现如下错误:

我不知道该如何写了,束手无策,在下小白一枚,跪求各位大神指点迷津!
再次叩谢!

友情提示: 此问题已得到解决,问题已经关闭,关闭后问题禁止继续编辑,回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
1条回答
mishen - whatsns产品经理
1楼-- · 2017-08-08 08:47

前言背景

最近公司开始使用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


來源:简书



一周热门 更多>