分享

使用微搭低代码平台搭建OA平台

 低代码布道师 2023-10-12 发布于内蒙古

低代码是依托于腾讯云开发基础的,支持可视化拖拽的快速开发平台。我们可以利用平台提供的丰富的组件库快速的开发我们需要的应用,实现应用开发的降本增效。本文就利用低代码的优势,使用零代码的方式搭建一款OA小程序。

一 创建应用
登录微搭的控制台,我们可以创建我们的应用

二 创建页面
应用创建好后,我们需要为应用创建页面,我们本次要做的业务是OA小程序,首页主要是功能的快捷录入,分别有用章申请、出差申请、请假申请、名片订购、报销申请、客户新增、问卷调查和待办任务。涵盖了日常办公中常见的业务场景。
页面标题
页面iD
首页
index
用章申请
seal
请假申请
sick
出差申请
trip
名片订购
card
报销申请
apply
客户新增
customer
问卷调查
question
待办任务
todo
2.1 首页
首页主要是作为引导页,以九宫格的形式列出可以操作的各类业务,方便用户的快速录入。为了实现九宫格布局,我们使用了微搭的栅格布局组件,每个栅格布局可以是一行,里边又可以细分为列。

栅格布局里的插槽数量是和列比例有关系的,我们使用了默认的四列,所以就会有四个插槽。所谓的插槽就是组件化开发的优势,他就像搭积木一样,在插槽中可以放置其他的组件。
我们本次在插槽里放置了容器组件,是为了将每一个格子的图标和文字以上下结构的形式体现

为了实现图标和文字的上下分布,需要在容器组件里设置相应的样式,就不得不提CSS中比较重要的布局的知识点,熟练掌握布局也是在应用开发中必备的技能。
我们看一下我在容器布局上设置的样式

布局模式是选择的flex布局,flex布局在移动开发中是应用的最频繁的,基本可以达到我们想要的效果。我们主轴方向选择的垂直,这样图片和文字组件就可以按照垂直的方向对齐了,当然了主轴和副轴对齐一般都选择居中会好看一点。
除了容器设置样式外,还需要设置点击事件,我们是选择的平台方法,这样一点击的时候就可以跳转到对应的页面。

以上就是低代码的两个特点,一个是组件式的拖拽开发,另一个就是面向事件编程,而且所有的操作都是使用配置的形式,零编程。只要思路清晰,即使毫无编程经验的人也可以轻松做出一款应用来。
首页还需要介绍的内容就是如何获取图标,一般我都是在iconfont上搜索自己喜欢的图标,我量了一下常见的APP,大部分图标的尺寸都是80*80,那我们下载的时候按照这个尺寸就可以。
下载好的图标如何显示呢,近期低码平台更新了素材库的功能,你可以直接把图标上传到素材库中,使用起来还是比较方便的,具体的操作就是点击图片组件的那个云的上传图标

添加素材就可以

2.2 用章申请
首页只是起导航的功能,到了具体的业务中就需要考虑和数据库进行交互。低码提供了数据库的操作能力,具体可以在数据源中定义数据的表结构,而且低码贴心的为大家自动生成了增删改查的方法,即使一点代码都不懂的人也可以轻松操作。
我这里直接贴出用章申请的数据源

字段名称
字段标识
数据类型
申请人姓名name字符串
申请人部门depart字符串
盖章文件名称filename字符串
用章类型type字符串
份数num字符串
定义好数据源之后就需要规划页面需要的组件,我们这里将页面分为两部分,一部分是顶部的导航条,方便用户可以返回到首页。另一部分是表单容器,里边放置我们各类表单组件,搭建好的组件图如下

导航栏定义的事件主要是返回的动作

而表单容器定义的事件主要是调用数据源的新增方法

另外需要注意的地方就是按钮组件那需要选成提交,这样才可以将数据提交回数据库中

你看我就一行代码没写就把一个新增业务实现了,这也是低码最迷人的地方,对新手友好,而且不容易出错。
其余的业务都是类似的,我贴一下我做好的页面,如果想练习的也可以照着我的页面搭建一下

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多