@tcwd/weda-model-component
v1.19.0
Published
腾讯云微搭低代码组件库模板
Downloads
3
Readme
Weda Business
腾讯云微搭企业级低代码组件库,提供企业级 CRUD 组件/审批组件等,暂时只支持 PC/h5
微搭低码组件库使用各平台/框架标准的组件格式,通过配置类型文件描述组件的行为、出参、入参及元数据等信息和微搭平台做对接。
项目目录
主要目录说明:
.
└── src
├── configs # 组件类型申明目录
│ ├── actions # 组件库方法类型申明
│ └── components # 组件目录类型申明
├── mp # 小程序组件
│ ├── actions # 小程序组件方法实现
│ └── components # 小程序组件实现
├── stories # 组件 story / 测试
└── web # web(react) 组件
├── actions # web 组件方法实现
└── components # web 组件实现
开发
组件库开发前置依赖
- 进入组件库更目录,安装依赖:
npm i
oryarn
, 使用git submodule update --init -r
来更新引用的 git 子仓库 - 安装云开发命令行工具:
npm i -g @cloudbase/cli
oryarn global add @cloudbase/cli
- 登录云开发命令行:
tcb login
- 去腾讯云微搭低码控制台创建组件库
新增组件
- 在
src/web/components
目录下新建组件,并在组件目录下新建index.json
文件,描述组件的名称、分类、属性等信息 - 在
src/web/components/index.js
中导出 - 在
src/configs/index.js
导出组件的index.json
配置文件
调试组件
- 在腾讯云微搭低代码编辑器调试组件库,在当前目录执行:
tcb lowcode debug
- 使用
tcb lowcode debug
时,启动较慢,热重载可能会失效。 - 开发新组件时可以 Mock 编辑器依赖,直接在
src/pages/index.tsx
中引入组件,使用npx umi dev
进行快速预览。 - 由于 adminportal 的数据管理后台通过 submodule 引入了该组件库,因此可以在 adminportal 修改 weda_business ,利用 adminportal 前端项目实时调试组件库。
线上验证
- 组件开发完成后,前往控制台-组件库新建组件,例如命名为 bus
- 修改 cloudbaserc.json 文件中的 name 为 bus
- 提交组件到微搭低代码平台,在线上进行功能验证:
tcb lowcode publish
- 新建应用,引入 bus 组件库,在线验证效果
参考 API
- 组件开发参考文档:https://docs.cloudbase.net/lowcode/custom-components/quick-start/comps.html
- 运行 app 对象:https://docs.cloudbase.net/lowcode/framework/app/app.html
发布
通过 Coding 流水机制,将组件产物自动上传到 COS 上。
- 将更改的代码提交 MR 合并到 master 分支
- 进入 codnig 流水线地址,点击“触发”,选择“feat/try_to_merge_weda_bussiness ”分支,等待触发完成。
- 联系 booker 进行 cos 审批。
- 去现网通过新建模型应用验证组件库是否生效,需要验证编辑区/预览产物/发布产物三类。
注意事项
- 因为组件库使用的 formily 和编辑器使用的 formily 版本冲突,会导致应用构建失败,所以组件中要使用 formily 下的 Webpack 打包版本, @formily/core 固定版本 2.0.0-beta.72