import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="研发文档/快速上手" />

# 快速开始

本篇将以极简实操流程「扫运单-扫商品」为例，帮助你快速开发一个实操页面。

## 1. 安装

`tnpm i -S @cniot/flow @cniot/pageflow @alife/operate-ui-components `

## 2. 配置主入口

在页面主入口处，引入如下代码

```javascript
import React from 'react';
import { PageFlowApp, WebService, Desktop } from '@cniot/pageflow';
import { onStart } from './flow';
import { scanWaybill, scanItem } from './pages';

const service = new WebService({
  appId: 'test',
  onStart,
});

const app = new PageFlowApp({
  service,
});

app.registerPage('/pages/scanWaybill', scanWaybill);
app.registerPage('/pages/scanItem', scanItem);

export default function () {
  return <Desktop app={app} service={service} />;
}

```

## 3. 编写UI
在入口的同级目录下，新建`pages`/index.jsx`文件，引入如下代码

```javascript

import React from 'react';
import { OPLayout, OPScan } from '@alife/operate-ui-components';

const { Content, Top } = OPLayout;


/**
 * 标准 React 组件
 * @param data any flow指令下发的数据
 * @param onNext 把数据回传给flow的的方法 onNext(any)
 * @param onCallback 直接调用flow中的一个全局方法 onCallback(functionName, data)
 * @param hasActive() 当前页面是否在激活状态，如果弹出 overlay 的页面，hasActive 会返回 false
 * @return React.Element
 */
export function scanWaybill(props) {
  const { data = {}, onNext, onCallback } = props;
  const { batchQcBtn, packingMode } = data;
  return (
    <OPLayout>
      <Top>
        <OPScan
          placeholder='扫运单/拣选单'
          onEnter={onNext}
        />
      </Top>
      <Content center>
        <img src='https://img.alicdn.com/imgextra/i3/O1CN01OUMAU71ZUjLO2QQx9_!!6000000003198-2-tps-762-425.png' />
      </Content>
    </OPLayout>
  );
}

export function scanItem(props) {
  const { data = {}, onNext, onCallback } = props;
  const { batchQcBtn, packingMode } = data;
  return (
    <OPLayout>
      <Top>
        <OPScan
          placeholder='扫商品'
          onEnter={onNext}
        />
      </Top>
      <Content center>
        <img src='https://img.alicdn.com/imgextra/i3/O1CN01OUMAU71ZUjLO2QQx9_!!6000000003198-2-tps-762-425.png' />
      </Content>
    </OPLayout>
  );
}
```

## 4. 编写逻辑
在入口的同级目录下，新建`flow/index.js`文件，引入如下代码

```javascript

import Flow from '@cniot/flow';
import { UserInterface } from '@cniot/pageflow';

import * as API from './service/api';

async function scanWaybill(data, flow) {
  const barcode = await flow.router('/pages/scanOrder', data);
  return flow.next(barcode);
}

async function scanItem(data, flow) {
  const barcode = await flow.router('/pages/scanItem', data);
  return flow.next(barcode);
}

export async function onStart() {
  const ui = UserInterface.create({ appId });
  const flow = new Flow(ui);
  flow.push('scanWaybill', scanWaybill);
  flow.push('scanItem', scanItem);

  return await flow.start();
}
```

## 5. 启动服务

运行`tnpm start`开启服务，进入对应的页面路由即可看到效果。

## 6. 下一步

至此，你已经成功完成了极简实操流程的页面开发，事实上，我们已经配合CONE脚手架将上述相关的配置代码都集成进了样板间里，让你更聚焦于业务本身。

之后，你可以阅读项目实战章节，了解该框架在业务实战中的真正用法。