簡(jiǎn)介：【零起點(diǎn)入門(mén)系列教程】將會(huì)帶給大家從業(yè)務(wù)視角出發(fā)由淺入深地學(xué)習(xí)用宜搭實(shí)現(xiàn)應(yīng)用搭建。即便是沒(méi)有任何代碼基礎(chǔ)的新手只要跟著系列課程，從0開(kāi)始慢慢修煉，也能找到成功搭建應(yīng)用的樂(lè)趣。今天第五講，如何用宜搭簡(jiǎn)單布局一個(gè)首頁(yè)。

【零起點(diǎn)入門(mén)系列教程】將會(huì)帶給大家從業(yè)務(wù)視角出發(fā)由淺入深地學(xué)習(xí)用宜搭實(shí)現(xiàn)應(yīng)用搭建。即便是沒(méi)有任何代碼基礎(chǔ)的新手只要跟著系列課程，從0開(kāi)始慢慢修煉，也能找到成功搭建應(yīng)用的樂(lè)趣。今天第五講，如何用宜搭簡(jiǎn)單布局一個(gè)首頁(yè)。

如何布局首頁(yè)？

我們以“企業(yè)綜合防疫”為例，給大家分步教學(xué)，如何用宜搭進(jìn)行首頁(yè)布局。

首先，訪問(wèn)宜搭首頁(yè)，在模板中心找到 “企業(yè)綜合防疫方案”應(yīng)用，點(diǎn)擊并啟用此應(yīng)用，給應(yīng)用命名并且選擇“保留示例數(shù)據(jù)”。創(chuàng)建完畢之后會(huì)自動(dòng)跳轉(zhuǎn)到該應(yīng)用的后臺(tái)管理。

從后臺(tái)管理頁(yè)面可以看到很多類(lèi)型的頁(yè)面，其中包含了我們之前沒(méi)有見(jiàn)過(guò)的頁(yè)面類(lèi)型，它前面的圖標(biāo)是一個(gè)黃色的窗口，代表的是一個(gè)自定義頁(yè)面，在“新建頁(yè)面”看到有“新建自定義頁(yè)面”這個(gè)選項(xiàng)。

自定義頁(yè)面主要是給應(yīng)用提供一些門(mén)戶或者作為當(dāng)前應(yīng)用的首頁(yè)。我們可以在上面放置一些業(yè)務(wù)訪問(wèn)入口，或者在這個(gè)頁(yè)面里提供一些資訊信息提供用戶去查閱。

可以看到當(dāng)前這些頁(yè)面沒(méi)有提交按鈕，同時(shí)也沒(méi)有數(shù)據(jù)管理，也就是意味著它只是作為一個(gè)展示類(lèi)的作用，并不是用于提交數(shù)據(jù)或發(fā)起流程。我們可以利用它來(lái)做一些首頁(yè)，并且這些頁(yè)面內(nèi)部也提供了很多豐富的前端組件。

通過(guò)首頁(yè)進(jìn)入到表單設(shè)計(jì)器內(nèi)，從“大綱樹(shù)”可以看到整個(gè)頁(yè)面的布局。從“頁(yè)面內(nèi)容”里面可以看到當(dāng)前頁(yè)面放了兩個(gè)輪播圖組件。

下方會(huì)有一個(gè)“容器”，它的主要功能是提供了一個(gè)區(qū)域，在這個(gè)區(qū)域里面會(huì)包含各種業(yè)務(wù)頁(yè)面的訪問(wèn)入口。在“容器”下面還有 “布局容器”，“布局容器”主要的作用是把當(dāng)前容器內(nèi)的一些內(nèi)容分成了等比例的結(jié)構(gòu)。點(diǎn)擊“布局容器”，在“布局容器”的右側(cè)可以看到個(gè)“列比例”，它將整個(gè)容器分成了6:6:6:6:6:6的結(jié)構(gòu)。

實(shí)際上我們?cè)谇岸嗽O(shè)計(jì)的時(shí)候，把我們這一個(gè)頁(yè)面的一行實(shí)際上是把它定義成了12個(gè)價(jià)格，就12格12個(gè)格子，然后我們將我們當(dāng)前這一行如果設(shè)置為6:6的時(shí)候，它就會(huì)呈現(xiàn)一個(gè)左右等比的這樣一個(gè)狀態(tài)。

同樣的布局容器下面會(huì)包含小的布局，里面會(huì)有一個(gè)“分組”，“分組”里面有“鏈接塊”，它的作用是用于鏈接跳轉(zhuǎn)，相當(dāng)于限定的區(qū)域，當(dāng)用戶點(diǎn)擊這個(gè)區(qū)域會(huì)跳轉(zhuǎn)到鏈接塊。“鏈接塊”組建里面提供了一些圖片和文本。圖片對(duì)應(yīng)的是圖標(biāo)，文本對(duì)應(yīng)的是標(biāo)題。

?

在今天的教程中，我們其實(shí)用到了多個(gè)報(bào)表組件。報(bào)表組件包括?基礎(chǔ)、布局、篩選和圖表四類(lèi)組件，其中：“基礎(chǔ)”和“布局”類(lèi)組件可以在畫(huà)布的數(shù)據(jù)篩選與呈現(xiàn)區(qū)域均可使用；“篩選”類(lèi)組件只能在畫(huà)布數(shù)據(jù)篩選區(qū)域使用；“圖表”和“其他”類(lèi)組件只能在畫(huà)布數(shù)據(jù)呈現(xiàn)組件區(qū)域使用。

• 布局容器：是一種有「布局」能力的容器，我們最常見(jiàn)的是線性順序布局，即頁(yè)面自上而下，依次排列。但實(shí)際頁(yè)面設(shè)計(jì)與實(shí)現(xiàn)時(shí)，出了線性布局，常常還會(huì)遇到 相對(duì)布局、絕對(duì)布局、彈性布局等訴求。
• 鏈接塊：是一個(gè)容器類(lèi)型組件，點(diǎn)擊該容器內(nèi)任意元素，都會(huì)觸發(fā)跳轉(zhuǎn)鏈接
• 分組：一個(gè)官方推薦的區(qū)塊管理器，用于將功能能力相似的模塊，內(nèi)聚在一個(gè)分組中。
• 布局：是對(duì)已有的可視化組件的位置擺放控制，對(duì)應(yīng)英語(yǔ)動(dòng)詞layout，表示了一種動(dòng)作。
• …?…

在下一講中，我們將針對(duì)企業(yè)疫情防控場(chǎng)景，教會(huì)大家從表單設(shè)計(jì)——首頁(yè)布局——數(shù)據(jù)查看的全鏈路應(yīng)用設(shè)計(jì)

>>>>第五講詳細(xì)步驟，點(diǎn)擊收看視頻版課程

原文鏈接：https://developer.aliyun.com/article/784321?

版權(quán)聲明：本文內(nèi)容由阿里云實(shí)名注冊(cè)用戶自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，阿里云開(kāi)發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請(qǐng)查看《阿里云開(kāi)發(fā)者社區(qū)用戶服務(wù)協(xié)議》和《阿里云開(kāi)發(fā)者社區(qū)知識(shí)產(chǎn)權(quán)保護(hù)指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫(xiě)侵權(quán)投訴表單進(jìn)行舉報(bào)，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的零起点入门教程：用宜搭简单布局一个首页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。