我们前边已经完成了需求分析及设计工作，本篇开始就进入到具体的搭建。开发小程序先需要创建应用，应用和我们的需求相关，通常我们是有一个应用用来承载小程序，一个应用用来开发后台。
1 创建应用
打开我们的控制台，点击应用进行创建
选择可视化开发，从空缺创建
保持默认的小程序模式，修改应用的名称，改为家政预约小程序
2 搭建页面布局
小程序一样平常底部会设置导航栏，用来切换差别的页面。在微搭中像这种有共性设置的，可以利用页面布局进行搭建。利用布局搭建的好处是，你只需要设置一次，在用到这个布局的地方，直接启用布局就可以。
点击页面布局，切换到布局视图
点击切换布局下拉选项，切换到tab栏布局
选择tab栏，设置标签列表
将第一个标签页设置为首页，页面选中我们的首页
设置完毕后再切换回页面设计
选择页面组件，在页面布局选择我们刚刚设置的tab栏导航布局
可以看到底部的导航条的第一个菜单就酿成了我们刚刚设置的首页了
3 设置页面配景色
通常为了让页面的内容和配景有一个区分，我们设置页面的配景色为灰色。选中页面组件，切换到样式，选择配景色，设置RGB为248,248,248
4 设置页面内容区域
导航条和配景色设置好之后，就需要设置页面的内容区域了。由于现在页面已经启用了布局模式，所以添加的内容都需要在布局组件的内容插槽里添加
在内容插槽里添加一个普通容器
这个就作为承载我们内容的容器，考虑到底部的tab栏会有一部分遮挡，我们设置普通容器的高度为88vh。
vh 是 CSS 中的一个单位，代表 viewport height（视口高度）的百分比。它表示相对于欣赏器窗口的高度，1 vh 即是视口高度的 1%。视口高度是指欣赏器窗口的可视区域（不包罗滚动条、工具栏等）。
在小程序里我们是指手机屏幕的高度
这样设置的好处是，假如容器里的内容高出他的高度后，会出现滚动条，但是不会被底部的tab栏遮挡住
总结
第一篇我们介绍了搭建页面布局的方法，就像画画要有一个构思布局一样。我们用低代码利用组件方式搭建页面时候，也是需要有肯定思考的。通常利用布局组件搭建共性部分，凡是涉及到导航栏的页面就都可以引用这个布局模式。另外就是要考虑页面兼容性的问题，通过高度的设置避免被其他组件遮挡，这就是低代码搭建的一种独特的视角。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
