weda-model-components

腾讯云微搭低代码组件库模板

Usage no npm install needed!

<script type="module">
  import wedaModelComponents from 'https://cdn.skypack.dev/weda-model-components';
</script>

README

Weda Business

腾讯云微搭企业级低代码组件库，提供企业级 CRUD 组件/审批组件等，暂时只支持 PC/h5

组件库

微搭低码组件库使用各平台/框架标准的组件格式，通过配置类型文件描述组件的行为、出参、入参及元数据等信息和微搭平台做对接。

项目目录

主要目录说明：

.
└── src
    ├── configs             # 组件类型申明目录
    │   ├── actions         # 组件库方法类型申明
    │   └── components      # 组件目录类型申明
    ├── mp                  # 小程序组件
    │   ├── actions         # 小程序组件方法实现
    │   └── components      # 小程序组件实现
    ├── stories             # 组件 story / 测试
    └── web                 # web（react） 组件
        ├── actions         # web 组件方法实现
        └── components      # web 组件实现

开发

组件库开发前置依赖：

  1. 进入组件库更目录，安装依赖： npm i or yarn
  2. 安装云开发命令行工具：npm i -g @cloudbase/cli or yarn global add @cloudbase/cli
  3. 登录云开发命令行：tcb login
  4. 去腾讯云微搭低码控制台创建组件库

新增组件

  1. 在 src/web/components 目录下新建组件，并在组件目录下新建 index.json 文件，描述组件的名称、分类、属性等信息
  2. 在 src/web/components/index.js 中导出
  3. 在 src/configs/index.js 导出组件的 index.json 配置文件

调试组件

在腾讯云微搭低代码编辑器调试组件库，在当前目录执行：

tcb lowcode debug

快捷本地开发

使用 tcb lowcode debug 时，启动较慢，热重载可能会失效。

开发新组件时可以 Mock 编辑器依赖，直接在 src/pages/index.tsx 中引入组件，使用 npx umi dev 进行快速预览。

线上验证

组件开发完成后，提交组件到微搭低代码平台，在线上进行功能验证

tcb lowcode publish

参考 API

  1. 组件开发参考文档：https://docs.cloudbase.net/lowcode/custom-components/quick-start/comps.html
  2. 运行 app 对象：https://docs.cloudbase.net/lowcode/framework/app/app.html

发布

当前组件库的发布比较 Hack，需要手动更新 COS 文件，后续需要 zijiezhou(周子杰) 提供 CLI 工具进行更新

  1. 账号，主账号 ID 100015939275，需要找 zijiezhou(周子杰) 开通子账号
  2. 下载 COSBrowser，并登录账号
  3. 运行 tcb lowcode publish 进行组件库构建
  4. 更新预览组件：进入 comp-public-1303824488 桶，将构件生成的 .temp/dist 目录下的文件重命名并上传到 lca/comGroup/cg-axjrlab7l6uy/prod/1627377179261/build/dist/ 目录下
    • CLOUDBASE_BUSSINESS.control.js 重命名为 comps.control.js
    • CLOUDBASE_BUSSINESS.main.css 重命名为 comps.main.css
    • CLOUDBASE_BUSSINESS.main.js 重命名为 comps.main.js
  5. 更新发布组件：进入 comp-private-1303824488 桶，将构件生成的 .temp 目录下的文件重命名并上传到 lca/comGroup/cg-axjrlab7l6uy/prod/1627377179261/build/src/ 目录下
    • sourceWeb.zip 重命名为 source.zip
    • sourceMp.zip 重命名为 source-mp.zip

注意事项

  • 因为组件库使用的 formily 和编辑器使用的 formily 版本冲突，会导致应用构建失败，所以组件中要使用 formily 下的 Webpack 打包版本， @formily/core 固定版本 2.0.0-beta.72