引言

在《加油站小程序实战教程01》中我们详细介绍了站点基本信息数据维护功能的搭建。有了数据之后就需要考虑小程序展示部分该如何搭建，本篇我们介绍一下应用的创建、页面布局以及数据绑定的过程。

1 应用创建

我们现在已经有了后台的应用，还需要创建小程序应用。打开控制台，选择小程序应用，点击从空白创建

输入小程序的名称，进行创建

应用创建成功后，点击右上角的页面设计，进入到设计态

默认会创建一个空白页，点击页面的三个点，重命名一下

但是默认这个空白页的路径不太符合要求，我们新建一个页面，命名为首页，页面id改为index

2 搭建页面布局

首先看一下我们的原型

页面第一部分是一个功能菜单导航的区域，这种有固定列的布局可以使用网格布局进行搭建，下边的其实也可以用网格布局搭建，但是里边会有两端对齐这种效果就需要结合普通容器和文本、图标组件进行搭建

页面配色的话，他其实是由背景色和前景色进行对比产生一种立体的效果，背景色是灰色，前景色是白色

搭建的话，我们先往页面中添加一个普通容器，用来显示灰色的背景

:root {width: 100%;height: 100vh;background: #f5f5f5;
}

这里高度设置为100vh，vh表示窗口的大小，我们这里100vh表示充满整个窗口

有了背景色之后，先添加一个普通容器用来显示功能导航，可以设置最外层的容器内边距各20

然后给内层容器设置白色的背景和圆角

在里边添加网格布局，设置一行四列

列里添加普通容器，里边添加图标和文本

设置普通容器的布局模式为纵向排列，水平垂直居中

3 大模型生成图标

一般UI都是要配置好看的图标，但是我们从网上找的图片，好像都是jpg格式的，没办法使用，我们可以让大模型生成一下，下边是提示词

生成这个图标，以svg格式输出

具体图标的样式你可以从网上找一个你满意的，大模型就会把他改写出来，得到svg的图标之后，我们就可以作为素材传上来，添加好就可以

但是一般你是需要使用ai编程工具，他才具备agent创建文件的能力，我目前使用的是trae，用他的builder模式还是很方便的

图标生成好之后，就可以上传了。选中图标组件，将图标的模式切换为自定义图标，上传素材


其余的图标按照同样的方法进行生成即可

最终效果

我们搭建了一个宫格导航的菜单，每个菜单都配置了相关主题的图标