加油站小程序实战教程01首页搭建

1 引言

在小程序开发中，通过需求分析和概要设计我们已经完成了功能梳理及表结构的设计。下一步就是具体的开发，低代码开发主要包括三个步骤，创建数据源、搭建页面布局、绑定数据。本篇我们介绍一下首页的一个搭建过程。

2 页面原型

我们页面原型是考虑的一种集团经营的模式，跨省份多区域。在练习阶段，引入过于复杂的场景不利于掌握工具的基本操作。我们做一定的简化，限定为个体工商户，只经营一家加油站。

单个加油站只需向用户展示最新的油价和优惠活动即可。

3 创建数据源

页面搭建的前提是创建好数据源，我们的原型界面有三部分内容需要从数据源提取信息。第一部分需要提取站点的基本情况，包括站点名称、电话、地理位置、营业状态、营业时间、地址等。

第二部分要显示今日油价信息，第三部分要显示最新的优惠活动。

因此需要三张表来承载内容。

3.1 站点表

打开控制台，点击数据库，可以看到微搭目前创建表的三种模式

文档数据库适合那种写入多的场景，比如教培行业有大量的学生，要做大量的练习。mysql适合那种写入不频繁但是读比较多的场景，比如内部管理应用，经常会有各种各样的报表，我们可以直接通过sql语句一次性构造

自有mysql不推荐，因为你接入外部数据源要跨网络读取，性能较差。

在msyql库，点击创建数据模型，先新建我们的站点表


可以点击添加字段，依次创建我们需要的字段，命名的时候需要填写英文，便于我们后续做数据绑定和进行连表查询

在加字段的时候，需要根据输入的数据的格式选择对应的字段。像营业状态我们就可以设置为枚举，枚举项设置为正常营业和暂停营业

最终搭建好的字段如下

字段搭建好之后我们需要配置一下数据源的权限，修改为所有人可读，管理员可改

4 创建应用

有了数据表之后，我们需要搭建一个后台来管理数据。点击侧边栏的可视化设计，选择管理应用，点击从空白创建

修改基础信息，改为加油站后台应用

创建后，点击页面设计，我们添加管理界面

点击创建页面的图标，选择站点表，选择左侧导航布局

切换到布局设计，点击魔术棒图标一键生成菜单

只保留列表页面，配置菜单的图标

选择左上角的文本组件，修改为系统名称

将左下角的图标改为退出图标

修改文本为退出，设置点击事件，配置系统的退出方法

点击一下顶部导航条的配置图表，我们设置一下登录方式

设置为用户名密码登录

在PC端不同的登录模式对应不同的用户，如果是用户名密码登录对应的内部用户。团队版只提供五个账号授权，如果是手机验证码对应的是外部用户，外部用户的权限只允许修改本人的数据无法当管理账号使用

5 配置账号

后台搭建好了之后需要开通账号配置角色权限信息，点击侧边栏的扩展和插件，找到云后台管理

先点击用户管理，添加管理员账号

点击新建账号，按照要求添加账号

点击管理角色添加管理员角色

点击管理权限配置权限，通常我们需要分配应用、数据源、API权限，全部开通即可

6 发布应用

以上都配置好之后，就可以点击顶部导航条的发布按钮了，发布的时候先选择体验版进行测试

最终效果

发布之后，我们就可以使用我们的账号和密码登录管理后台，录入相关数据了

总结

作为我们教程的第一篇，我们讲解了如何拆解数据源、添加字段。基于搭建好的数据源，我们创建了管理后台，包括配置页面、开通账号、添加角色、分配权限等几个步骤。下一篇我们介绍一下小程序界面部分的搭建过程，敬请期待。