在一些涉及支付功能的app,一般需要绑定银行卡,除了靠用户手动输入银行卡号,用手机扫描银行卡也是一种常用的手段,查阅了写资料,发现ionic有CardIO插件可以实现这个功能,就兴致冲冲去尝试,结果有些失望。
下面介绍一下如何在ionic中使用CardIO实现扫描银行卡功能
相关CardIO插件的ngCordova说明

1、在入口文件main.js 中

const app = angular.module("app", ["ionic", "ngCordova", "ngAnimate", "ngCordova.plugins.cardIO"]);app.config(function ($ionicConfigProvider,  $cordovaNgCardIOProvider) {"use strict";$cordovaNgCardIOProvider.setScanerConfig( // 配置显示的参数{"expiry": false,"cvv": false,"zip": false,"suppressManual": false,"suppressConfirm": false,"hideLogo": true});$cordovaNgCardIOProvider.setCardIOResponseFields( // 配置返回的参数["card_type","redacted_card_number","card_number","expiry_month","expiry_year","short_expiry_year","cvv","zip"]);
});

2、在controller文件中使用

angular.module("app").controller("mineCtrl", ["$scope", "$cordovaNgCardIO",function ($scope $cordovaNgCardIO) {"use strict";$scope.scanBankcard = () => {$cordovaNgCardIO.scanCard().then(function (response) { // 扫描成功//Success response - it`s an object with card dataconsole.log("Success response");console.log(response);},function (response) { // 取消扫描//We will go there only when user cancel a scanning.//response always nullconsole.log("when cancel scanning");console.log(response);});};   }]);

3、在html中

<ion-view view-title="扫描银行卡"><ion-content><i ng-click="scanBankcard ()" class="icon ion-camera"></i></ion-content>
</ion-view>

尝试了以后效果不是很理想,CardIO插件只能扫描16位以下,并且是浮雕数字的银行卡,无法满足设计需求,只能暂时放弃。如有大家有什么解决办法,欢迎交流

参考文章:
ionic使用cardio报错

ionic使用CardIO实现扫描银行卡功能(只能扫描16位以下,并且是浮雕数字)相关推荐

  1. Vue (用javaScript/JS)调用媒体摄像头拍照扫描银行卡

    概述:在Vue中调用摄像头拍照进行银行卡识别. 流程:vue中调用媒体摄像头(无前后摄像头切换功能)-->根据规定的框(前端自己定制)放置银行卡-->将识别的图片通过接口传到后台,后台识别 ...

  2. Android扫描银行卡获取银行卡号

    card.io开源的银行卡扫描的三方库真的是很好用啊. 首先需要在你的module的gradle的依赖文件中添加依赖 compile 'io.card:android-sdk:5.5.1' 2 清单文 ...

  3. ionic实现下载文件并打开功能(file-transfer和file-opener2插件)

    作为一款app,下载文件功能,和打开文件功能,在某些场景下还是十分有必要的.使用cordova-plugin-file-transfer和cordova-plugin-file-opener2这两个插 ...

  4. c盘扩展卷功能只能向右扩展_信用风险管理:功能扩展和选择

    c盘扩展卷功能只能向右扩展 Following feature engineering, this part moves to the next step in the data preparatio ...

  5. 手机所有录音功能失效_疯狂打CALL!小米手机自带扫描文字功能,一秒识别所有文字信息!...

    平常遇到喜欢的句子想做笔记,是不是会先拍照下来,然后再自己手打输入或者手抄记录下来?如果文字太多怎么办?那就去打印店扫描啊,这样就能直接变成电子档了!NO NO NO!如果你还这么原始就out了,其实 ...

  6. 华为手机便签有扫描的功能么

    华为手机系统没有自带的便签应用,与便签功能相类似的是备忘录.除了系统自带的备忘录功能之外,华为手机用户也可以通过应用市场搜索好用的便签App安装使用,比如支持多手机端云同步使用的敬业签云便签就适用于华 ...

  7. 打印机只能扫描图片,不能扫描成PDF解决办法

    分享一个技巧,图片如何做成PDF 日常生活中经常要将很多东西(包括图片)做成PDF电子版,而一些手机软件扫描成PDF往往带有水印,不够美观,有时候打印机也不能直接打印为PDF,扫描为图片后还需要转换成 ...

  8. Python # 扫描端口功能 # 获取网卡的Mac地址 # 局域网扫描器IP地址和MAC地址,获取网卡名称和其ip地址

    #!/usr/bin/env python # -*- coding: utf-8 -*- # 开发人员: # time: 2021-09-07 20:37 # 开发工具: PyCharm # Ver ...

  9. labspec6教程_LabSpec6软件功能–光谱扫描方式-Horiba.PDF

    Raman Product Note HCT-HRPN02 LabSpec6 软件功能 – 光谱扫描方式 LabRAM HR Evolution 新一代高分辨拉曼光谱仪的无色差校像差设计.平场校正确保 ...

最新文章

  1. python sys.argv[] 的作用
  2. 2021 年 5 月程序员工资统计,惨不忍睹。。。
  3. jdbc封装mysql_用Java手动封装JDBC连接池(一)
  4. html与css项目,项目六HTML与CSS基础.doc
  5. CodeForces - 1337C Linova and Kingdom(贪心)
  6. JasperReport学习笔记6-JRXML的标签
  7. uni-app中的样式
  8. ioinic 怎样配置 android sdk,NiceFish-ionic: 这是一个移动端项目,示范Angular移动端组件库Ionic的基本用法,基于Ioinic 2.0,已支持PWA。...
  9. 计算机视觉实战(五)图像梯度计算
  10. 剖析 |数据现代化-富国银行的数据转型之路
  11. 05_过滤器解决请求中文乱码(继承HttpServletRequestWrapper)
  12. 基于jsp的新闻发布系统
  13. 4D领导力打造卓越团队
  14. 物联网蓝牙芯片的选型
  15. java 匹配任意字符_正则表达式匹配任意字符(包括换行符)
  16. js中对特殊字符进行转义
  17. FF4J(特性框架)简介及入门
  18. BILSTM详细介绍及代码实现
  19. 测绘——通过手机和smart3D创建三维模型
  20. PHP+MySQL实现精确统计网站访问量(IP个数)

热门文章

  1. wall poj 1113
  2. endnote教程:参考文献出现{zhang,2020,#365} 修改方法
  3. GraphPad Prism 9 如何一次处理多张图表?
  4. SQL server连接到服务器,无法连接到 (local)。在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。请验证实例名称是否正确并且 SQL Se
  5. java 输出脉冲信号_一种使用SOC精确控制脉冲的方法
  6. 二叉树的建立与遍历(先中后层序)
  7. php-7.2.13的安装,php7.2 安装mcrypt扩展
  8. win7 安装c语言环境变量,win7下如何配置编程环境变量的方法
  9. carsim学习笔记5——carsim与simulink联合仿真
  10. Python 网络爬虫笔记6 -- 正则表达式