pageFlow 页面工作流小程序指令说明

页面工作流是基于GS 和 前端 React 语法来构造实操流程的新协议。https://yuque.antfin-inc.com/docs/share/e017c4f3-7e53-42e6-91ae-d0627d983545?#

内置指令定义集合

<service name = "pageFlow"  class= "com.cainiao.loginx.edge.pageflow.FlowService">
  <!-- @cniot/pageflow 指令 start -->
  <!-- 在浏览器输出一条日志，log会重置gs的启动点，线上环境请删除所有 log -->
  <!-- <function name = "log" action="logic" page="/system/log" /> -->
  <!-- 从新开始当前流程 -->
  <function name = "restart" action="logic" page="/system/restart" />
  <!-- 获取宿主机信息 -->
  <function name = "getWorkStation" action="logic" page="/system/getWorkStation" />
  <!-- 快捷确认页面 -->
  <function name = "confirm" action="overlay" page="/system/confirm" />
  <!-- 快捷弹窗页面 -->
  <function name = "alert" action="overlay" page="/system/alert" />
  <!-- 输入弹窗 -->
  <function name = "prompt" action="overlay" page="/system/prompt" />
  <!-- 结束当前流程，前端页面会显示开始流程按钮 -->
  <function name = "end" action="router" page="/system/end" />
  <!-- @cniot/pageflow 指令 end -->
  <!-- 自定义页面 start -->
  <!-- <function name = "scanContainer" action="router" page="/scanContainer" /> -->
  <!-- 自定义页面 end -->
</service>

指令类

log

在浏览器控制台输出一行日志。在开发阶段有助于快速调试 GS 代码。线上环境请删除所有 log

pageFlow.log({ a: 1})

restart

前端会重新发起 start 请求，gs 会重新开始执行。

pageFlow.restart({})

getWorkStation

获取当前工作台的信息。文档

const device = pageFlow.getWorkStation({})

// {
//   "deviceType": "g0fm2Sb4myi", // 设备类型
//   "deviceName": "d5106e531de65af39c5e7fe4d0bc49a2", // 设备名称
//   "deviceId": "31349cb586fa428a8ba2dc8001984900", // 设备id
//   "nodeId": "eaf6a745d4dd4e619c5f9062ce682c4e", // 物流节点id
//   "groupId": "bdecff5ce70e42df", // 资源组id
//   "serverIp": "30.79.240.157", // ip地址
//   "mac": "ac:de:48:00:11:22", // mac地址
//   "hostId": "d5106e531de65af39c5e7fe4d0bc49a2",
//   "arch": "amd64", // 架构
//   "os": "darwin" // 操作系统
// }

end

结束程序，前端页面会跳转到结束页面。不会继续发送请求了。

pageFlow.end({});

UI 类

UI 类有组件库提供，比如PC组件库与android的组件库会提供不一样的界面样式，但使用方式是一致的。模板工程中的src/web/index.jsx中可以切换使用的组件库。

confirm

页面会弹出一个确认窗，用户必选选择确认、取消

var isConfirm = pageFlow.confirm({
    title : "title",
  message : "message",
  okText : "okText",
  cancelText : "cancelText",
})
// isConfirm = true|false

alert

页面会弹出一个弹窗，用户必须点击确认才能继续。

pageFlow.alert({
    title : "title", 
  message : "message", 
  okText : "okText"
})

prompt

页面会弹出一个输入框，用户必须选择输入点什么或点击取消

var inputValue = pageFlow.prompt({
    title : "title",
  defaultValue:"",
  placeholder:"",
  okText : "okText",
  cancelText : "" //为空的时候不会显示取消按钮
})

if(String(inputValue) === "back"){
    // 点击了取消按钮
}

// inputValue = 输入框输入的值

Action 介绍

action 指定了当前页面的渲染方式（跳转方式）

<function name = "scanContainer" action="router" page="/scanContainer" />

router

替换前一个页面，前一个页面会触发 react 卸载的生命周期

overlay

不会替换上一个界面，通常用于处理弹窗的情况。比如 confirm, alert, prompt 等都采用了 overlay 。

logic

逻辑片段，不会渲染 UI 。比如 log, getWorkStation等指令通常只处理一段逻辑，不会渲染页面。

模板工程介绍

模板工程地址： http://gitlab.alibaba-inc.com/lemo/pageflow-template。请参考模板工程的readme.md来初始化项目。