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

目录

  • [1 创建应用](#1 创建应用)
  • [2 搭建页面布局](#2 搭建页面布局)
  • [3 设置页面背景色](#3 设置页面背景色)
  • [4 设置页面内容区域](#4 设置页面内容区域)
  • 总结

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

1 创建应用

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

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

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

2 搭建页面布局

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

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

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

选择tab栏,设置标签列表

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

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

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

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

3 设置页面背景色

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

4 设置页面内容区域

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

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

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

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

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

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

总结

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

相关推荐
说私域几秒前
基于定制开发开源AI智能名片S2B2C商城小程序的文案信息传达策略研究
大数据·人工智能·小程序
OEC小胖胖1 小时前
组件化思维(下):表单与交互组件,倾听用户的心声
前端·微信小程序·小程序·微信开放平台
2501_915921435 小时前
TCP 抓包分析实战,从抓取到定位(命令、常见症状、排查流程与真机抓包补充)
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone
2501_916013745 小时前
App 上架服务全流程解析,iOS 应用代上架、ipa 文件上传工具、TestFlight 测试与苹果审核实战经验
android·ios·小程序·https·uni-app·iphone·webview
2501_915909067 小时前
App Store 上架完整流程解析,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 测试与苹果审核经验
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916008897 小时前
iOS 26 全景揭秘,新界面、功能创新、兼容挑战与各种工具在新版系统中的定位
android·macos·ios·小程序·uni-app·cocoa·iphone
云起SAAS15 小时前
老年ai模拟恋爱抖音快手微信小程序看广告流量主开源
人工智能·微信小程序·小程序·ai编程·看广告变现轻·老年ai模拟恋爱·ai模拟恋爱
2501_9160137417 小时前
iOS 混淆与 App Store 审核兼容性 避免被拒的策略与实战流程(iOS 混淆、ipa 加固、上架合规)
android·ios·小程序·https·uni-app·iphone·webview
宠友信息18 小时前
类似小红书垂直社区APP小程序源码
java·开发语言·微信小程序·小程序·uni-app·开源·web app
OEC小胖胖19 小时前
交互的脉络:小程序事件系统详解
前端·微信小程序·小程序·微信开放平台