app应用开发

我们假定你已经对 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 --app
$ 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, { Component } from 'react';
import { Page, Navbar, Block, BlockTitle, Link } from '@hvisions/f-ui';

class Example extends Component {
  render() {
    return (
      <Page>
        <Navbar title="About" backLink="Back" />
        <BlockTitle>About My App</BlockTitle>

        <Block>
          <Link href="/login">login</Link>
        </Block>
        <Block strong>
          <p>
            Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis sint nemo
            consequuntur, fugiat. Eius perferendis animi autem incidunt vel quod tenetur nostrum,
            voluptate omnis quasi quidem illum consequuntur, a, quisquam.
          </p>
          <p>
            Laudantium neque magnam vitae nemo quam commodi, in cum dolore obcaecati laborum,
            excepturi harum, optio qui, consequuntur? Obcaecati dolor sequi nesciunt culpa quia
            perspiciatis, reiciendis ex debitis, ut tenetur alias.
          </p>
        </Block>
        <Block strong>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium
            dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique,
            saepe iste consectetur in repellat ut minus quibusdam!
          </p>
          <p>
            Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis,
            aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius,
            velit corrupti reprehenderit dignissimos consequatur!
          </p>
          <p>
            Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam
            eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil,
            iusto doloribus a at! Ea molestiae ullam delectus!
          </p>
        </Block>
      </Page>
    );
  }
}

export default Example;

或

import React from 'react';
import { Page, Navbar, Block, BlockTitle, Link } from '@hvisions/f-ui';

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

        <Block>
          <Link href="/login">login</Link>
        </Block>
        <Block strong>
          <p>
            Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis sint nemo
            consequuntur, fugiat. Eius perferendis animi autem incidunt vel quod tenetur nostrum,
            voluptate omnis quasi quidem illum consequuntur, a, quisquam.
          </p>
          <p>
            Laudantium neque magnam vitae nemo quam commodi, in cum dolore obcaecati laborum,
            excepturi harum, optio qui, consequuntur? Obcaecati dolor sequi nesciunt culpa quia
            perspiciatis, reiciendis ex debitis, ut tenetur alias.
          </p>
        </Block>
        <Block strong>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium
            dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique,
            saepe iste consectetur in repellat ut minus quibusdam!
          </p>
          <p>
            Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis,
            aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius,
            velit corrupti reprehenderit dignissimos consequatur!
          </p>
          <p>
            Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam
            eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil,
            iusto doloribus a at! Ea molestiae ullam delectus!
          </p>
        </Block>
      </Page>
  );
};

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