我們前邊已經(jīng)完成了需求分析及設(shè)計工作，本篇開始就進入到具體的搭建。開發(fā)小程序先需要創(chuàng)建應(yīng)用，應(yīng)用和我們的需求相關(guān)，通常我們是有一個應(yīng)用用來承載小程序，一個應(yīng)用用來開發(fā)后臺。

1 創(chuàng)建應(yīng)用

打開我們的控制臺，點擊應(yīng)用進行創(chuàng)建

選擇可視化開發(fā)，從空白創(chuàng)建

保持默認(rèn)的小程序模式，修改應(yīng)用的名稱，改為家政預(yù)約小程序

2 搭建頁面布局

小程序一般底部會設(shè)置導(dǎo)航欄，用來切換不同的頁面。在微搭中像這種有共性設(shè)置的，可以使用頁面布局進行搭建。使用布局搭建的好處是，你只需要設(shè)置一次，在用到這個布局的地方，直接啟用布局就可以。

點擊頁面布局，切換到布局視圖

點擊切換布局下拉選項，切換到tab欄布局

選擇tab欄，設(shè)置標(biāo)簽列表

將第一個標(biāo)簽頁設(shè)置為首頁，頁面選中我們的首頁

設(shè)置完畢后再切換回頁面設(shè)計

選擇頁面組件，在頁面布局選擇我們剛剛設(shè)置的tab欄導(dǎo)航布局

可以看到底部的導(dǎo)航條的第一個菜單就變成了我們剛剛設(shè)置的首頁了

3 設(shè)置頁面背景色

通常為了讓頁面的內(nèi)容和背景有一個區(qū)分，我們設(shè)置頁面的背景色為灰色。選中頁面組件，切換到樣式，選擇背景色，設(shè)置RGB為248,248,248

4 設(shè)置頁面內(nèi)容區(qū)域

導(dǎo)航條和背景色設(shè)置好之后，就需要設(shè)置頁面的內(nèi)容區(qū)域了。因為現(xiàn)在頁面已經(jīng)啟用了布局模式，所以添加的內(nèi)容都需要在布局組件的內(nèi)容插槽里添加

在內(nèi)容插槽里添加一個普通容器

這個就作為承載我們內(nèi)容的容器，考慮到底部的tab欄會有一部分遮擋，我們設(shè)置普通容器的高度為88vh。

vh 是 CSS 中的一個單位，代表 viewport height（視口高度）的百分比。它表示相對于瀏覽器窗口的高度，1 vh 等于視口高度的 1%。視口高度是指瀏覽器窗口的可視區(qū)域（不包括滾動條、工具欄等）。

在小程序里我們是指手機屏幕的高度

這樣設(shè)置的好處是，如果容器里的內(nèi)容超過它的高度后，會出現(xiàn)滾動條，但是不會被底部的tab欄遮擋住

總結(jié)

第一篇我們介紹了搭建頁面布局的方法，就像畫畫要有一個構(gòu)思結(jié)構(gòu)一樣。我們用低代碼使用組件方式搭建頁面時候，也是需要有一定思考的。通常使用布局組件搭建共性部分，凡是涉及到導(dǎo)航欄的頁面就都可以引用這個布局模式。另外就是要考慮頁面兼容性的問題，通過高度的設(shè)置避免被其他組件遮擋，這就是低代碼搭建的一種獨特的視角。