引言

在《加油站小程序实战教程02》中我们介绍了宫格导航布局的搭建，主要结合网格布局进行了讲解。本篇我们介绍一下站点基本信息的搭建过程。

1 原型

原型上我们列出了站点的名称、地址、营业时间、状态、电话以及经纬度。基本信息我们是通过变量进行绑定，像电话和导航图标我们要配置相应的动作进行实现。

2 创建变量

在低代码中，如果希望在页面上显示信息的，可以通过定义变量来实现。打开我们的应用在代码区新建变量，变量类型选择内置数据表查询


内置数据表查询需要选择查询哪张表，选择如何获取数据。获取数据有两种方式，一种是页面加载时自动获取，另外一种是通过相关动作进行触发

3 搭建页面布局

变量定义好之后就可以搭建页面布局了，和我们的宫格导航类似，还是使用网格布局进行搭建，先添加普通容器作为外层白色的背景

设置普通容器的背景色、圆角、外边距、内边距

里边添加一个网格布局，一行一列，增加三行

第一列里添加普通容器，里边添加文本组件、普通容器

设置外层的普通容器为横向排列、两端对齐、垂直居中

内层的普通容器增加两个图标组件

修改图标样式为电话图标和地图导航图标

第二列添加普通容器，里边放置一个图标和一个文本

设置普通容器的样式为横向排列，垂直居中对齐

将目前这个结构复制一份，粘贴到第三列里

调整图标的样式，第二列图标设置为时钟，第三列设置为地图导航

4 绑定数据

当我们的变量和布局都搭建好之后，就可以进行数据绑定了。数据绑定的概念是将变量中对应的字段绑定到组件上。

选择变量，点击运行，看一下数据结构

切换到JSON视图就可以看到我们的数据结构

首先选择我们第一行的文本组件，点击文本内容的fx

依次将变量展开，选择站点名称字段

接着给电话图标绑定点击事件

选择拨打电话

点击电话旁边的fx

绑定联系电话字段

选中地图导航图标，绑定点击事件，选择地图导航

绑定经度和纬度字段

其余内容按照上述方法依次进行绑定

最终效果

字段依次绑定好之后，我们在数据库设置的站点表的数据就显示到了页面对应的位置上