微搭低代码是以腾讯云开发 CloudBase 为技术底座、支持可视化拖拽的快速开发平台,支持企业、开发者利用平台提供的丰富的组件库快速的开发需要的应用,实现应用开发的降本增效。本文就利用低代码的优势,使用零代码的方式搭建一款 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
技术交流群、最新资讯关注微信公众号【腾讯云低代码】