开发步骤

1. 平台注册组件
   • 后端Java注册组件
   • 平台应用管理中注册
2. 前端项目搭建
   • 代码开发
   • 打包到app
   • 注意事项

1. 平台注册组件

1.1后端Java注册组件

public List<AWSPluginProfile> register(AppContext context) {
   List<AWSPluginProfile> list = new ArrayList<AWSPluginProfile>();
   //注册组件

   list.add(new FormUIPluginProfile(
         "常规",  //分类名称
         "AWSUI.Custom.text", //组件ID，重要，这个一定要与前端一致
         FormUIComponentTextImpl.class.getName(), //需要一个AbstractUIComponent实现类（现部分功能可用，示例代码先使用平台的类，开发时如果满足不了时需要自己写一个新的实现类）
         "测试组件",//组件中文名称
         "",
         true, true, true, false, true, true, true, true, true)
         .setEngineVersion(2)
         .setSupportRuleControl(FormRuleControlEnum.CHANGE)
         .setSupportRuleControl(FormRuleControlEnum.CALC)
         .setSupportRuleControl(FormRuleControlEnum.EDIT)
         .setSupportRuleControl(FormRuleControlEnum.REQUIRED)
         .setIconFont("awsui-iconfont", "&#xe86b;", "#0c6e9f")  //设置图标及颜色
         .setColumnWidth(150)); //设置数据库默认宽度

   return list;
}

1.2 平台应用管理中注册

2. 前端项目搭建

2.0 准备工作（安装VUE开发环境，详细教程可自行VUE相关网站查找）

1. 需要安装node.js，官网最新版本即可
2. 安装yarn： npm install -g yarn
3. 下载项目包解压，在项目包路径位置运行： yarn install
4. 修改配置文件 AWSDevServiceParams.js
5. 运行

vite

2.1 代码开发

1. 项目使用VUE3、typeScript、vite、Element Plus（pc端）、Vant UI(移动端)开发
2. 项目包form-user-custom-extend\packages\ui-components\custom\test-item\src\packages\custom\test-item 目录是此项目的一个测试组件示例（用于参考）
3. PC端默认引用全局的Element Plus（可参考 https://element-plus.org/zh-CN/）
4. 移动端默认引用全局的Vant UI（可参考 https://vant-contrib.gitee.io/vant/#/zh-CN）ui

项目结构简介：

如何测试一个现有表单？

1. 设计时刻测试URL：拿到表单Id与开发地址进行拼凑一个开发URL。 例如：http://localhost:3000/#/?formDefId=ea082958-95d3-42ca-b606-b979f8c1e9a7&appId=com.actionsoft.apps.tpl.rework&categoryName=返工 其中formDefId是表单ID，appId是应用ID，categoryName是应用下所属分类名
2. 运行时刻（PC端）测试URL，此时需要把表单挂载到流程里，启动流程后： 例如：http://localhost:3000/runtime-pc/index.html?processInstId=539da0b6-5667-4280-8aaf-4a0a4a7a586b&taskInstId=fea49365-ec0b-4c05-a2f8-b2d0bdab8df0&openState=1 其中processInstId是流程实例ID，taskInstId是任务实例ID，openState打开状态，1为默认
3. 运行时刻（移动端）测试URL，此时需要把表单挂载到流程里，启动流程后： 例如：http://localhost:3000/runtime-mobile/index.html?processInstId=539da0b6-5667-4280-8aaf-4a0a4a7a586b&taskInstId=fea49365-ec0b-4c05-a2f8-b2d0bdab8df0&openState=1 其中processInstId是流程实例ID，taskInstId是任务实例ID，openState打开状态，1为默认

2.2 打包到app

开发完毕后运行命令打包相关资源文件

node scripts/exec-build.js

2.3 注意事项

表单正常打包需要Java端已经注册自定义组件并且前端已打包到app中，否则会导致表单无法打开。