应用开发

1. 下载页面流应用模版

页面流应用模板下载

页面流模版文件介绍：

  1. pageflow-template
  2.     - _vite_plugin/  # vite插件，模版内置，无需关心
  3.   - config/              # profile配置文件、用于指定当前应用需要依赖的binding扩展，包括页面流指令定义
  4.   - gs/                      # GriffinScript实操编排代码
  5.   - schema/              # 设备物模型文件
  6.   - web/                      # 前端页面文件
  7.       - pages/              # 页面流指令对应页面，一个目录对应一个页面
  8.         - xxx/       # 自定义的页面名称
  9.           - index.jsx
  10.         - index.less
  11.     - index.html      # 页面流应用前端资源入口文件
  12.     - index.jsx      # 页面流前端资源jsx文件，用于加载页面流运行时和页面组件加载
  13.   - .gsignore          # 打包工具排除文件定义
  14.   - package.json      # node打包工具依赖文件，前端组件版本管理
  15.   - pageflow.prog  # GriffinScript应用入口文件，用于定义GriffinScript应用依赖的配置
  16.   - vite.config.js # vite打包工具依赖文件，模版内置无需关心

2. 搭建实操页面

实操页面创建在web/pages目录下

  1. - web/                      # 前端页面文件
  2.       - pages/              # 页面流指令对应页面，一个目录对应一个页面
  3.         - xxx/       # 自定义的页面名称
  4.           - index.jsx # 页面组件
  5.         - index.less # 页面样式
  1. import React from "react";
  2. import "./index.less";
  4. /**
  5.  * 标准 React 组件
  6.  * @param data any gs指令下发的数据
  7.  * @param onNext 把数据回传给GS的的方法 onNext(any)
  8.  * @param onCallback 直接调用gs中的一个全局方法 onCallback(functionName, data)
  9.  * @param isActive 当前页面是否在激活状态，如果弹出 overlay 的页面，isActive 会变成 false
  10.  * @return React.Element 
  11.  */
  12. export default function (props) {
  13.   const { data, onNext, onCallback, isActive } = props;
  14.   return <div>
  15.     <h1>{data.title}</h1>
  16.     <br />
  17.     <div>
  18.         <button onClick={()=>{ onNext("next") }} data-click="btn1" >Click to next</button> <br/>
  19.         <button onClick={()=>{ onCallback("onCallbackFunc", {a:1}) }}>Click call gs function</button>
  20.     </div>
  21.   </div>;
  22. }

模板组件文档
PDA实操组件：http://page-pre.cainiao.com/lemo/android-pda-components/index.html
PC实操组件：https://page.cainiao.com/lemo/op-components/index.html

3. 在profile文件里定义页面流指令

在自定义页面部分，根据你在步骤2中创建的页面自定义页面流指令

  1. <service name = "pageFlow"  class= "com.cainiao.loginx.edge.pageflow.FlowService">
  2.   <!-- @cniot/pageflow 指令 start -->
  3.   <!-- 在浏览器输出一条日志，log会重置gs的启动点，线上环境请删除所有 log -->
  4.   <function name = "log" action="logic" page="/web/system/log" />
  5.   <!-- 从新开始当前流程 -->
  6.   <function name = "restart" action="logic" page="/web/system/restart" />
  7.   <!-- 获取宿主机信息 -->
  8.   <function name = "getLocalBusInfo" action="logic" page="/web/system/getLocalBusInfo" />
  9.   <!-- 获取本地驱动设备列表 -->
  10.   <function name = "getLocalDeviceList" action="logic" page="/web/system/getLocalDeviceList" />
  11.   <!-- 快捷确认页面 -->
  12.   <function name = "confirm" action="overlay" page="/web/system/confirm" />
  13.   <!-- 快捷弹窗页面 -->
  14.   <function name = "alert" action="overlay" page="/web/system/alert" />
  15.   <!-- 输入弹窗 -->
  16.   <function name = "prompt" action="overlay" page="/web/system/prompt" />
  17.   <!-- toast -->
  18.   <function name = "toast" action="toast" page="/web/system/toast" />
  19.   <!-- 结束当前流程，前端页面会显示开始流程按钮 -->
  20.   <function name = "end" action="router" page="/web/system/end" />
  21.   <!-- @cniot/pageflow 指令 end -->
  23.   <!-- 自定义页面 start -->
  24.   <function name = "scanContainer" action="router" page="/web/pages/scanContainer" />
  25.   <!-- 自定义页面 end -->
  26. </service>

4. 基于业务逻辑编写实操代码

  1. function onCallbackFunc(payload){
  2.     pageFlow.alert({
  3.         title: '调用 gs fucntion 成功',
  4.         message: '参数'+ JSON.stringify(payload),
  5.         okText:"确认"
  6.     })
  7.     pageFlow.end()
  8. }
  10. pageFlow.scanContainer({
  11.     title: 'Hello pageFlow',
  12. });
  14. pageFlow.scanContainer({
  15.     // sys.tr 用于处理文案国际化
  16.     title: sys.tr('第二个界面')
  17. });
  19. pageFlow.alert({
  20.     title: 'alert title',
  21.     message: 'alert message',
  22.     okText:"确认"
  23. })
  25. const isConfirm = pageFlow.confirm({
  26.     title: 'confirm title',
  27.     message: 'confirm message',
  28.     okText:"确认",
  29.     cancelText:"取消"
  30. })
  32. if(String(isConfirm) === "false"){
  33.     throw new Error("你点击了取消，抛出错误可以使前端不断重试当前步骤");
  34. }
  36. pageFlow.prompt({
  37.     title: "点击取消测试 thorw error",
  38.     okText:"确认",
  39.     cancelText:"取消"
  40. });
  44. pageFlow.toast({
  45.     title: 'toast title',
  46.     message: 'toast message',
  47.     level:"success"
  48. })
  50. pageFlow.end()

应用部署

1. 在DevOps平台对应的行业线创建实操应用

张北环境地址：https://zb-devops.loginx.cainiao.com
image.png
image.png

2. 更新应用代码里package.json中griffinScript的应用信息

开发者只需要关心package.json中griffinScript的内容

projectName:：填写步骤1中创建的项目名称
version：版本号，上传正式版本后需要升级
dev：本地开发相关参数
    - group：开发资源组
    - server: 本地开发访问的GS服务地址，默认访问本地，如果需要设备调度调试，可配置为预发地址

{
  "griffinScript": {
    "projectName": "pageflow-template",
    "version": "0.0.0",
    "dev": {
      "group": "GS_DEMO_PRE",
      "server": "http://localhost:7001"
    }
  }
}

3. IDE插件登录，本地将实操应用一键部署到预发环境

上传之前先执行编译命令

npm run build

IDE插件安装使用

本地开发调试

安装前端组件: tnpm install
编译前端组件: npm run build
本地运行: npm run dev

访问如下地址：
image.png