npm 包 nativescript-unimag 使用教程

前言

在移动应用的开发中，很多场景下需要通过扫描二维码或读取银行卡信息等方式获取用户输入的数据。而对于 NativeScript 框架来说，却没有内置的便捷的方法来实现这一功能。为此，本文将介绍一款第三方 npm 包 nativescript-unimag，它可以让我们在 NativeScript 应用中使用双屏幕收银机设备（MagTek uDynamo）来读取银行卡数据。

安装

在开始使用 nativescript-unimag 前，需要先安装并配置好包中所需的依赖项。具体步骤如下：

1. 安装 NativeScript CLI，本文采用 7.1.2 版本：

npm install -g nativescript@7.1.2

1. 使用 NativeScript CLI 创建一个新的 NativeScript 应用，本文将创建名为 hello-unimag 的应用：

tns create hello-unimag --template tns-template-hello-world

1. 进入 hello-unimag 目录并添加 nativescript-unimag 包：

cd hello-unimag
npm install nativescript-unimag --save

1. 安装 nativescript-zxing 插件：

tns plugin add nativescript-zxing

1. 进行相关配置，打开 app.gradle，添加以下代码：

-- -------------------- ---- -------
------- -
  ------------- -
    -- ---

    -------------------- - -
      -- ---
      ---------------- - ---------------------------------------- -- -- ------------ --
    -
  -
  -- ------
  ----------- -
    ---------- ---------
  -
-

1. 在 AndroidManifest.xml 文件中添加以下内容：

<uses-library android:name="com.magtek.reader.library" android:required="false"/>
<uses-feature android:name="android.hardware.usb.host" android:required="false" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.INTERNET"/>

至此，安装和配置工作已经完成。

使用

为了使用 nativescript-unimag 包来读取银行卡数据，需要进行以下步骤：

1. 引入 nativescript-unimag 包：

import { UniMag } from 'nativescript-unimag';

1. 实例化 UniMag 对象：

let unimag: UniMag = new UniMag();

1. 注册 UniMag 事件（可以在 ngOnInit() 生命周期方法或任何需要的地方来执行）：

-- -------------------- ---- -------
----------------------------------------- -- -- -
    ----------------------------- ----- ---------
    ----------- - ------- ----------
---
----------------------------------------- -- -- -
    ----------------------------- ----- ---------
    ----------- - ------- ----------
---
-------------------------------------------- ---------- ------- -- -
    -------------------------------- ----- ------ ---- ---- ----- --------------
    ------------- - ---------
---

1. 启动 UniMag 设备：

unimag.init(); // 启动 UniMag 设备

1. 注销事件并关闭 UniMag 设备：

unimag.off(); // 注销事件
unimag.close(); // 关闭 UniMag 设备

具体代码实现可以参考以下示例：

-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------ - ---- ----------------------

------------
  --------- ---------
  ------------ ---------------------
--
------ ----- ------------ ---------- ------ -
  ------- -------
  --------- -------

  ------------- --

  ---------- -
    -- --- ------ --
    --- ------- ------ - --- ---------

    -- -- ------ --
    ----------------------------------------- -- -- -
      ----------------------------- ----- ---------
      ----------- - ------- ----------
    ---
    ----------------------------------------- -- -- -
      ----------------------------- ----- ---------
      ----------- - ------- ----------
    ---
    -------------------------------------------- ---------- ------- -- -
      -------------------------------- ----- ------ ---- ---- ----- --------------
      ------------- - ---------
    ---

    -- -- ------ --
    --------------
    
    -- -- ------ -------
    ------------- -- -
      -------------
      ---------------
    -- -------
  -
-

结语

通过本文，你应该已经学会了如何在 NativeScript 应用中使用 nativescript-unimag 包读取银行卡数据。当然，nativescript-unimag 包不止可以用来读取银行卡数据，它还可以用作双屏幕收银机及 pos 终端的开发。本文所介绍的示例代码也只是一个初步的实现，具体还需要根据自己的需求来进行相应的开发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf681e8991b448e6bd5