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

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

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

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

1 创建自定义应用

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

打开控制台,点击创建应用,点击新建自定义应用

应用创建好之后,我们要选择H5构建

2 宫格导航设置

一般的管理软件,在移动端使用的时候我们需要给一个导航菜单的功能,在H5中,我们使用宫格导航组件来实现,在右侧的组件面板中找到宫格导航组件,拖入中间的编辑区

然后切换到配置页签,我们设置一下宫格导航的导航设置

宫格导航既可以单独配置每个菜单项,也可以从数据源中读取配置,我们这里使用单独配置即可。

点击某个配置项,可以选择图标,也可以设置跳转的页面

3 页面创建

我们的应用是由页面组成的,点击左上角创建页面的图标,新建一个会员列表的页面

页面创建成功后,我们将宫格导航的第一个菜单项设置为会员管理,并且跳转到会员列表页面

4 会员列表功能实现

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

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

数据列表需要选择数据源,选择我们的会员信息数据源

我们在右下角要显示一个创建的图标,先添加一个普通容器,里边放置一个图标组件

要想让图标出现在右下角,我们需要设置普通容器的定位,设置为固定定位,距右边10px,距下边10px

然后修改图标的样式

点击图标的时候,我们需要跳转到新增页面,创建一个新增页面

设置普通容器的事件,点击时我们打开新增页面

5 会员新增

切换到会员新增页面,我们新增页面是使用表单容器来完成的,往页面中拖入表单容器组件,数据源选择会员信息

提交成功后我们需要返回上一页,先选中表单容器,然后在数据源事件中增加成功时的事件

选择返回上一页即可

6 预览发布

功能开发好之后我们先需要测试,点击实时预览

先进行测试,测试通过之后,可以点击发布,发布成体验版在手机上进行测试

总结

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

相关文章
|
6月前
|
安全 JavaScript 前端开发
购物全返商城平台系统开发步骤流程/需求设计/教程指南/源码功能
开发购物全返商城平台系统涉及多个步骤和考虑因素。
|
6月前
|
安全 JavaScript 前端开发
多商户商城/多商家入驻系统开发指南教程/稳定版/功能需求/项目源码
Developing a multi merchant mall/multi merchant entry system involves multiple modules such as user management, merchant management, product management, and order management. Here is a simple development guide tutorial to help you build such a system
|
6月前
|
存储 移动开发 小程序
会员管理系统实战开发教程01-创建模型应用
会员管理系统实战开发教程01-创建模型应用
|
6月前
|
移动开发 小程序 数据安全/隐私保护
订水商城H5实战教程-05权限控制
订水商城H5实战教程-05权限控制
|
6月前
|
容器
会员管理系统实战开发教程07-会员消费
会员管理系统实战开发教程07-会员消费
|
4月前
|
搜索推荐 安全 数据安全/隐私保护
构建高效网站后台会员管理系统:实战指南与代码示例
【7月更文挑战第5天】在当今的互联网时代,几乎每个网站或应用程序都需要一个强大的会员管理系统来维护用户信息、权限控制以及个性化体验。一个设计良好的会员管理系统不仅能够提升用户体验,还能增强数据安全性和运营效率。本文将深入探讨如何从零开始构建一个网站后台会员管理系统,涵盖系统设计思路、关键技术选型、功能模块实现,以及实战代码示例。
454 3
|
3月前
|
小程序
微信小程序开发---购物商城系统。【详细业务需求描述+实现效果】
这篇文章详细介绍了作者开发的微信小程序购物商城系统,包括功能列表、项目结构、具体页面展示和部分源码,涵盖了从首页、商品分类、商品列表、商品详情、购物车、支付、订单查询、个人中心到商品收藏和意见反馈等多个页面的实现效果和业务需求描述。
微信小程序开发---购物商城系统。【详细业务需求描述+实现效果】
|
6月前
|
小程序 JavaScript Java
商城|商城小程序|基于微信小程序的智慧商城系统设计与实现(源码+数据库+文档)
商城|商城小程序|基于微信小程序的智慧商城系统设计与实现(源码+数据库+文档)
135 1
|
JavaScript 前端开发 区块链
美人荟免单节商城系统开发指南与规则
区块链1.0和区块链2.0之间的主要区别是,如今区块链是可编程的
|
6月前
|
小程序
基于微信小程序的驾校预约平台设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序的驾校预约平台设计与实现(源码+lw+部署文档+讲解等)
112 2
基于微信小程序的驾校预约平台设计与实现(源码+lw+部署文档+讲解等)