目录
- 引言
- [1 创建数据源](#1 创建数据源)
- [2 搭建管理后台功能](#2 搭建管理后台功能)
- [3 搭建小程序功能](#3 搭建小程序功能)
-
- [3.1 搭建布局](#3.1 搭建布局)
- [3.2 创建变量](#3.2 创建变量)
- [3.3 数据绑定](#3.3 数据绑定)
- 最终效果
引言
在加油站小程序众多实用功能中，为用户提供当日油价查询服务格外便捷。接下来，本文将详细介绍该小程序后台的维护功能，以及小程序端相关信息的展示功能。
1 创建数据源
打开数据库，添加油品表，并添加对应的字段
| 字段名称 | 字段标识 | 数据类型 | 是否必填 | 默认值 | 字段说明 |
|---|---|---|---|---|---|
| 油品名称 | name | 文本 | 否 | - | 油品名称 |
| 当前价格 | current_price | 数字 | 否 | - | 当前价格 |
| 计量单位 | unit | 文本 | 否 | 元/升 | 计量单位 |
| 状态 | status | 枚举 | 否 | 1 | 状态：1-正常 2-停用 |
将油品名称设置为主列字段
接着创建油品价格历史表
| 字段名称 | 字段标识 | 数据类型 | 是否必填 | 默认值 | 字段说明 |
|---|---|---|---|---|---|
| ID | id | INT | 否 | 自增 | 主键标识 |
| 油品标识 | ypbs | 关联关系 | 否 | - | 关联油品表的数据标识 |
| 价格 | price | 数字 | 否 | - | 油品价格 |
| 生效时间 | effective_time | 日期时间 | 否 | - | 价格生效时间 |
| 调整原因 | reason | 文本 | 是 | - | 价格调整原因 |
2 搭建管理后台功能
表创建好之后，打开我们的管理后台，根据表创建管理页面
切换到页面设计，添加今日油价菜单
先录入基础数据
操作列我们添加两个按钮，分别是调整油价、历史记录
调整油价我们弹出弹窗，编辑信息，在保存的时候要把信息写入到历史记录表里。选中页面组件添加弹窗
弹出内容里添加表单容器，选择油价历史表
关闭弹窗的默认打开，关闭底部按钮显示
给调整油价按钮设置点击事件，设置为打开弹窗，传入我们表格的所在行的数据标识字段
设置弹窗里的油品标识字段，绑定选中值属性
绑定我们弹窗的参数
在表单容器的提交事件，我们分别配置更新油品表的价格字段，刷新数据表格，关闭弹窗
这里更新的时候条件设置为数据标识等于我们的弹窗的入参
价格的话可以从表单的字段得到
切换到油价历史列表页面，选中页面组件，添加URL参数，oilid
给数据表格设置数据筛选，让我们的油品标识等于我们的URL参数
回到油品列表页面，设置历史记录按钮的事件为打开页面，打开油价历史列表页面，传入参数
3 搭建小程序功能
3.1 搭建布局
小程序部分，我们需要提取表里的数据作展示，先看一下原型的效果
打开我们的小程序，先添加一行一列
在列里边添加普通容器，下边再添加四个普通容器
设置外层普通容器，内边距为16px，横向排列、两端对齐，8px的圆角，相对定位
在内层容器的第一个普通容器里添加文本组件，修改文本内容为今日油价，设置普通容器的样式为，12px字号、白色字体、上下各2px的内边距，左右各8px的内边距，4px的圆角，绝对定位，距上边-10px，距左边16px
其余的普通容器，里边都放置三个文本
3.2 创建变量
在代码区，我们新建一个内置数据表查询，从油品表里获取3条数据
点击运行可以看到我们的数据
3.3 数据绑定
定义好变量之后，就可以给文本组件绑定数据了，第一个文本绑定为油品名称
第二个文本绑定为价格
第三个文本绑定为单位
按照上述方法绑定第二列和第三列的文本，注意绑定的时候要修改数组的索引，第二列修改为1，第三列修改为2
最终效果
首页我们在站点信息下边添加了今日油价的展示
