社区/文章分享/如何使用微搭低代码搭建一款 OA 小程序

如何使用微搭低代码搭建一款 OA 小程序

微搭低代码是以腾讯云开发 CloudBase 为技术底座、支持可视化拖拽的快速开发平台,支持企业、开发者利用平台提供的丰富的组件库快速的开发需要的应用,实现应用开发的降本增效。本文就利用低代码的优势,使用零代码的方式搭建一款 OA 小程序。

  • OA 指办公自动化(Office Automation,简称 OA)。

一、创建应用

进入微搭的控制台,创建应用:

二、创建页面

应用创建好后,需要为应用创建页面,本次要做的业务是 OA 小程序:首页主要是功能的快捷录入,分别有用章申请、出差申请、请假申请、名片订购、报销申请、客户新增、问卷调查和待办任务。涵盖了日常办公中常见的业务场景。

页面标题 页面 ID
首页 index
用章申请 seal
请假申请 sick
出差申请 trip
名片订购 card
报销申请 apply
客户新增 customer
问卷调查 question
待办任务 todo

首页主要是作为引导页,以九宫格的形式列出可以操作的各类业务,方便用户的快速录入。为了实现九宫格布局,此处使用了微搭的栅格布局组件,每个栅格布局可以是一行,里边又可以细分为列。

图片

栅格布局里的插槽数量是和列比例有关系的,此处使用了默认的四列,所以就会有四个插槽。所谓的插槽就是组件化开发的优势,他就像搭积木一样,在插槽中可以放置其他的组件。

本次在插槽里放置了容器组件,是为了将每一个格子的图标和文字以上下结构的形式体现

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

我们看一下我在容器布局上设置的样式

布局模式是选择的 flex 布局,flex 布局在移动开发中是应用的最频繁的,基本可以达到我们想要的效果。此处,主轴方向选择的垂直,这样图片和文字组件就可以按照垂直的方向对齐了,当然,主轴和副轴对齐一般都选择居中会美观一点。

除了容器设置样式外,还需要设置点击事件,此处选择的是平台方法,这样一点击的时候就可以跳转到对应的页面。

以上就是微搭低代码的两个特点:一个是组件式的拖拽开发;另一个就是面向事件编程,而且所有的操作都是使用配置的形式,零编程。只要思路清晰,即使毫无编程经验的人也可以轻松做出一款应用来。

此外,首页中的图标是如何显示出来的呢?近期微搭更新了素材库功能,你可以直接把图标上传到素材库中,并随时引入到编辑区进行使用,非常方便,具体的操作就是点击图片组件中形状为“云”的上传图标。

添加素材即可:

用章申请

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

此处直接贴出用章申请的数据源:

字段名称 字段标识 数据类型
申请人姓名 name 字符串
申请人部门 depart 字符串
盖章文件名称 filename 字符串
用章类型 type 字符串
份数 num 字符串

定义好数据源之后就需要规划页面需要的组件,这里将页面分为两部分:一部分是顶部的导航条,方便用户可以返回到首页;另一部分是表单容器,里边放置了各类表单组件,搭建好的组件图如下

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

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

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

到这,我们就实现了一行代码不写,搭建一个成形的业务系统,这也是低码最迷人的地方,对新手友好,而且不容易出错。

其余的业务搭建与此类似,下方是我用微搭做好的一些页面,作为参考。

产品介绍

腾讯云微搭低代码是高效、高性能的拖拽式低代码开发平台,向上连接前端的行业业务,向下连接云计算的海量能力,助力企业垂直上云。腾讯云微搭低代码将繁琐的底层架构和基础设施抽象化为图形界面,通过行业化模板、拖放式组件和可视化配置快速构建多端应用(小程序、H5 应用、Web 应用等),免去了代码编写工作,让您能够完全专注于业务场景。腾讯云微搭低代码以云开发作为底层支撑,云原生能力将应用搭建的全链路打通,提供高度开放的开发环境,且时刻为您的应用保驾护航。
开通低代码:https://cloud.tencent.com/product/lowcode
产品文档:https://cloud.tencent.com/document/product/1301/48874
技术交流群、最新资讯关注微信公众号【腾讯云低代码】