家政预约小程序01搭建页面布局

我们前边已经完成了需求分析及设计工作，本篇开始就进入到具体的搭建。开发小程序先需要创建应用，应用和我们的需求相关，通常我们是有一个应用用来承载小程序，一个应用用来开发后台。

1 创建应用

打开我们的控制台，点击应用进行创建

选择可视化开发，从空白创建

保持默认的小程序模式，修改应用的名称，改为家政预约小程序

2 搭建页面布局

小程序一般底部会设置导航栏，用来切换不同的页面。在微搭中像这种有共性设置的，可以使用页面布局进行搭建。使用布局搭建的好处是，你只需要设置一次，在用到这个布局的地方，直接启用布局就可以。

点击页面布局，切换到布局视图

点击切换布局下拉选项，切换到tab栏布局


选择tab栏，设置标签列表

将第一个标签页设置为首页，页面选中我们的首页

设置完毕后再切换回页面设计

选择页面组件，在页面布局选择我们刚刚设置的tab栏导航布局

可以看到底部的导航条的第一个菜单就变成了我们刚刚设置的首页了

3 设置页面背景色

通常为了让页面的内容和背景有一个区分，我们设置页面的背景色为灰色。选中页面组件，切换到样式，选择背景色，设置RGB为248,248,248

4 设置页面内容区域

导航条和背景色设置好之后，就需要设置页面的内容区域了。因为现在页面已经启用了布局模式，所以添加的内容都需要在布局组件的内容插槽里添加

在内容插槽里添加一个普通容器

这个就作为承载我们内容的容器，考虑到底部的tab栏会有一部分遮挡，我们设置普通容器的高度为88vh。

vh 是 CSS 中的一个单位，代表 viewport height（视口高度）的百分比。它表示相对于浏览器窗口的高度，1 vh 等于视口高度的 1%。视口高度是指浏览器窗口的可视区域（不包括滚动条、工具栏等）。

在小程序里我们是指手机屏幕的高度

这样设置的好处是，如果容器里的内容超过他的高度后，会出现滚动条，但是不会被底部的tab栏遮挡住

总结

第一篇我们介绍了搭建页面布局的方法，就像画画要有一个构思结构一样。我们用低代码使用组件方式搭建页面时候，也是需要有一定思考的。通常使用布局组件搭建共性部分，凡是涉及到导航栏的页面就都可以引用这个布局模式。另外就是要考虑页面兼容性的问题，通过高度的设置避免被其他组件遮挡，这就是低代码搭建的一种独特的视角。