低代码学习之三：组件上传和在线打包

Daw
630 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

回顾

上一篇文章我们介绍了schema解析渲染，获取到页面元数据后，实现一个解析器将元数据解析渲染到目标环境，我们的目标环境是移动端，所以就是生成H5页面。

代码仓库地址

这是文章示例的低代码平台源码仓库

github：github.com/iamwhj/mobi…

概述

本篇我们将讲解低代码平台最重要的物料-组件，如何对组件进行版本管理和自由度扩展，详情请往下看。

打包服务

这里有个疑问打包服务是必要的吗？

其实不是必要的，在我们前两篇文章提到的 配置 和 解析 其实就能组合成一个基础功能完整的低代码平台。

那么我们为什么还需要打包服务？

因为要做功能的扩展，加上打包服务之后，组件可以交由别人开发，然后上传平台，在线打包完毕后即可使用，所以你的业务部门想要什么组件，你没必要跟我说，你组件开发完成后上传至平台就行，极大减轻了平台维护成本。

示例组件

用一个简单的日期组件来做示例

  1. 创建规范的组件目录结构

image.png

  1. 组件配置代码
// config
  <el-form :model="form">
    <el-form-item label="字体颜色：">
      <ColorPicker v-model="form.color" />
    </el-form-item>
  </el-form>
  <BaseSetting></BaseSetting>
  
const props = defineProps({
  updateComponentProps: { type: Function },
  color: { type: String, default: '#000' },
});

const form = reactive({
  time: props.color,
});

watch(form, () => {
  props.updateComponentProps(form);
});
  1. 组件渲染代码
// component
<div class="date" :style="timeStyle">{{ date }}</div>


const props = defineProps({
  width: { type: String, default: '240px' },
  height: { type: String, default: '28px' },
  color: { type: String, default: '#000' },
});

const timeStyle = computed(() => {
  return {
    width: props.width,
    height: props.height,
    color: props.color,
  };
});


const date = ref(dayjs().format('YYYY-MM-DD'));

  1. 组件上传（填写组件表单）

    • 组件图标链接（使用自己的图床）
    • 组件代码压缩（zip）

  2. 在线打包

    • 打包日志

组件上传

组件开发完成后，将组件代码压缩上传。

将组件.zip上传后，服务端将zip解压生成一个版本号，将组件移动至外层目录components保存。

在线打包，加载资源

组件上传完成后，在线构建项目的组件资源目录custom-components，将存储在外层components目录的组件复制过来，然后在线执行打包。详细流程请看源码仓库。

组件开发流程的改造计划

打包服务给平台组件物料增加了很多可能性，但是组件的开发学习成本还是不低的，组件开发流程有比较大的优化空间。

缺点：别人开发组件时需要将代码 clone 至本地，安装依赖才能跑。在custom-components 目录下创建组件目录，调试开发，开发完成后需要压缩成zip，上传至平台。

优化：改造成在线开发、在线预览调试的形式，无需再将代码 clone 至本地，开发完成点击按钮一件压缩上传。

总结

打包服务的加入使平台拥有更多的可能，组件的开发自由度、扩展性更高，但组件的开发成本还能继续降低，期待后续组件在线开发功能的完成。

avatar
文章
阅读
粉丝