会员管理系统实战开发教程02-H5应用创建

低代码平台作为一个应用的快速生成工具,可以方便的进行一页多端的开发,可以在一个应用里生成三端的应用,也可以拆分成三个应用来制作。三端包括H5、小程序和PC管理后台。

上一篇我们介绍了PC管理后台的创建方法,本篇我们介绍一下H5的创建方法。

1 创建自定义应用

H5创建的时候,需要创建自定义应用。自定义应用的特点是像一个画布一样,需要我们自己添砖加瓦。

打开控制台,点击创建应用,点击新建自定义应用
在这里插入图片描述
应用创建好之后,我们要选择H5构建
在这里插入图片描述

2 宫格导航设置

一般的管理软件,在移动端使用的时候我们需要给一个导航菜单的功能,在H5中,我们使用宫格导航组件来实现,在右侧的组件面板中找到宫格导航组件,拖入中间的编辑区
在这里插入图片描述
然后切换到配置页签,我们设置一下宫格导航的导航设置
在这里插入图片描述
宫格导航既可以单独配置每个菜单项,也可以从数据源中读取配置,我们这里使用单独配置即可。

点击某个配置项,可以选择图标,也可以设置跳转的页面
在这里插入图片描述

3 页面创建

我们的应用是由页面组成的,点击左上角创建页面的图标,新建一个会员列表的页面
在这里插入图片描述
在这里插入图片描述
页面创建成功后,我们将宫格导航的第一个菜单项设置为会员管理,并且跳转到会员列表页面
在这里插入图片描述

4 会员列表功能实现

会员列表功能我们可以使用数据列表组件实现,微搭中页面搭建主要是使用数据容器组件实现,数据容器组件包括数据列表、数据详情、表单容器,大部分的管理页面都可以用这三个组件进行搭建。

点击左上角的页面图标,从页面列表里选择我们的会员列表页面,往页面中拖入数据列表组件

在这里插入图片描述
在这里插入图片描述
数据列表需要选择数据源,选择我们的会员信息数据源
在这里插入图片描述
我们在右下角要显示一个创建的图标,先添加一个普通容器,里边放置一个图标组件
在这里插入图片描述
要想让图标出现在右下角,我们需要设置普通容器的定位,设置为固定定位,距右边10px,距下边10px

在这里插入图片描述
然后修改图标的样式
在这里插入图片描述
点击图标的时候,我们需要跳转到新增页面,创建一个新增页面
在这里插入图片描述
设置普通容器的事件,点击时我们打开新增页面
在这里插入图片描述
在这里插入图片描述

5 会员新增

切换到会员新增页面,我们新增页面是使用表单容器来完成的,往页面中拖入表单容器组件,数据源选择会员信息
在这里插入图片描述
提交成功后我们需要返回上一页,先选中表单容器,然后在数据源事件中增加成功时的事件
在这里插入图片描述
选择返回上一页即可
在这里插入图片描述

6 预览发布

功能开发好之后我们先需要测试,点击实时预览
在这里插入图片描述
先进行测试,测试通过之后,可以点击发布,发布成体验版在手机上进行测试
在这里插入图片描述

总结

本篇我们讲解了自定义应用的创建方法,并且介绍了会员列表功能及新增功能的开发。管理端我们通常就是五个基本动作列表、新增、修改、删除、查看,熟练掌握基本功能的开发是低码开发应用的基本功,基本功打扎实了应用开发就是水到渠成的一件事。

猜你喜欢

转载自blog.csdn.net/u012877217/article/details/132444910