PDA应用开发

我们假定你已经对 HTML 和 JavaScript 都比较熟悉。除此，在使用前，你还需要对以下知识有所了解：Framework7 、React、ES6

在开始之前，需要通过H Visions注册用户权限！

安装Needle

# 使用已开通的用户名和密码
$ npm adduser --registry https://registry.hipermatic.com
# 全局安装Needle 或 更新Needle
$ npm install @hvisions/needle -g --registry https://registry.hipermatic.com

创建新应用

这将会自动创建appName目录。

这里的appName即为项目名称，用户可以自行命名

$ needle appName --pda
$ cd appName
$ npm start

启动成功后会自动打开系统默认浏览器并访问http://localhost:3000。

目录结构

my-app
├── README.md
├── node_modules
├── .env              # API开发环境配置
├── .env.test         # API测试环境配置
├── .env.production   # API生产环境配置
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── api           # API接口目录
    ├── components    # 组件目录
    ├── icon          # 自定义Icon目录
    ├── locales       # 自定义国际化目录
    ├── pages         # 页面模块目录
    ├── plugins       # 插件
    ├── router.js     # 配置路由
    ├── index.js      # 入口文件
    

配置API

我们先设置服务端地址和端口，可以分别配置.env、.env.test和.env.production文件来区分不同的环境。设置如下：

# api 配置
API_HTTPS=false
API_HOST=192.168.0.0    // 微服务网关地址
API_PORT=9000           // 微服务网关端口号

Hello World示例

在Needle构建的项目中我们准备了一个Example模块示例代码。

1. 页面模块

在page目录里创建页面，如Example/index.js。

import React, { useEffect, useState } from 'react';
import { Page, Navbar, Block, BlockTitle, Link } from '@hvisions/f-ui';
import { debounce } from 'lodash';
import scan from '~/plugins/Scan';

const Example = () => {

  const [scanData, setScanData] = useState({});

  useEffect(() => {
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, []);

  // 点击PDA上的扫描按钮获取扫码后的值
  const handleKeyDown = debounce(() => {
    scan().then(data => {
      setScanData((data));
    });
  }, 200);


  console.log('扫描的结果', scanData);


  return (
    <Page>
      <Navbar title="About" backLink="Back" />
      <BlockTitle>About My App</BlockTitle>

      <Block>
        <Link href="/login">login</Link>
      </Block>
      <Block strong>
        <p>
         这是PDA的扫描模板, 点击Scan按键即可完成扫码动作。
        </p>
      </Block>
    </Page>
  );
};

Example.propTypes = {};

export default Example;

2. 设置路由

// 引入页面
import Example from '~/pages/Example';
export default [{
  path: '/example',   // 路由地址
  component: Example  // 配置路由对应的页面
}];

3. API调用

在api目录创建对应的文件，如example.js。

import { Service } from '@hvisions/toolkit';

class Example extends Service {
  getUsers() {
    return this.post('/auth/user/getUserPageByNameOrAccount');
  }
}
export default new Example();

然后在浏览器里打开http://localhost:3000，你应该能看到前面定义的页面(切换成手机模式观看最佳)。

2022-08-29