卡片阅读器(card-reader)是一款可以读取身份证、银行卡等卡片信息的前端组件,使用 npm 包可以快速引入到项目中使用,本文将详细介绍 npm 包 card-reader 的使用方法。
安装
首先,在项目中安装 card-reader 包:
--- ------- ----------- ------
使用
引入 card-reader 组件:
------ ---------- ---- --------------
创建一个包含阅读器的 div
:
---- ---------------------
使用 card-reader 的 init
方法,并传入阅读器 div
作为参数,初始化组件:
--- -------- - ------------------------------------- --- ------ - --------------------------
调用 reader 的 readCard
方法,读取卡片信息:
---------------------- -- - ------------------ -- ------- -- - --------------------- ---
传入两个回调函数,第一个回调函数在读卡成功后触发,第二个回调函数在读卡失败时触发。
卡片信息是以 JSON 对象形式返回的。
API
init
初始化 card-reader 组件。
-------------------------- ------------ -------- -------- -------
参数
- container: 装载阅读器的 HTML 元素。
- config: 可选参数,阅读器配置项。
返回值
返回一个 Reader 对象,可用于读卡操作。
Reader
Reader 对象用于读卡,包含以下方法:
readCard
读取卡片信息。
------------------------ --------------- -------------- --------------- -----
参数
- resultCallback: 读卡成功回调函数。
- errorCallback: 读卡失败回调函数。
返回值
void。
Config
配置项对象,可设置阅读器的配置:
--------- ------ - ------- -------- ------------ -------- ------------- ------- -
属性
- debug: 是否开启调试模式,默认为 false。
- forceUsage: 是否强制使用阅读器,即使不能正常读卡,默认为 false。
- readTimeout: 读卡超时时间,单位为毫秒,默认为 30000。
示例代码
完整调用示例:
------ ---------- ---- -------------- -- ----- --- -------- - ------------------------------------- --- ------ - -------------------------- -- ------- ---------------------- -- - ------------------ -- ------- -- - --------------------- ---
设置阅读器的配置项:
--- -------- - ------------------------------------- --- ------ - - ------ ----- ----------- ----- ------------ ----- -- --- ------ - ------------------------- -------- ---------------------- -- - ------------------ -- ------- -- - --------------------- ---
结语
卡片阅读器是一个十分实用的前端组件,可以方便地读取身份证、银行卡等卡片信息。使用 npm 包 card-reader 可以快速引入到项目中使用,大大减轻了前端开发的工作量,希望本文对你有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066c92ccdc64669dde5aa0