一、需求背景

門(mén)戶(hù)首頁(yè)對(duì)于一個(gè)公司或組織來(lái)說(shuō)是一個(gè)極其重要的網(wǎng)站頁(yè)面，它可以作為訪(fǎng)問(wèn)者了解和獲取相關(guān)信息的入口，同時(shí)也是展示品牌形象和吸引目標(biāo)受眾的重要工具。

開(kāi)發(fā)一個(gè)門(mén)戶(hù)首頁(yè)需要開(kāi)發(fā)團(tuán)隊(duì)在向訪(fǎng)問(wèn)者展示關(guān)于公司或組織基本信息的基礎(chǔ)上，使用多種樣式設(shè)計(jì)和布局來(lái)突出展示公司或組織提供的核心產(chǎn)品或服務(wù)。（如采用多種技術(shù)棧構(gòu)建復(fù)雜的交互功能及響應(yīng)式設(shè)計(jì)，通過(guò)圖片、文字、視頻等多種形式來(lái)呈現(xiàn)，）

總之，門(mén)戶(hù)首頁(yè)項(xiàng)目開(kāi)發(fā)的核心是通過(guò)清晰、簡(jiǎn)潔、吸引人的設(shè)計(jì)和動(dòng)態(tài)內(nèi)容來(lái)展示公司或組織的核心信息，以吸引訪(fǎng)問(wèn)者，并促使他們與公司或組織進(jìn)行進(jìn)一步的互動(dòng)和合作。

二、門(mén)戶(hù)頁(yè)功能介紹

通常情況下，門(mén)戶(hù)首頁(yè)在設(shè)計(jì)上會(huì)要求樣式美觀，數(shù)據(jù)靈活動(dòng)態(tài)展示，想做出一個(gè)完美的門(mén)戶(hù)首頁(yè)對(duì)于團(tuán)隊(duì)技術(shù)棧和工具的選擇要求是相對(duì)較高的，因此一位粉絲在看完我之前的《smardaten開(kāi)發(fā)IoT物聯(lián)平臺(tái)》后，在后臺(tái)向我提出了這樣的疑問(wèn)：無(wú)代碼工具雖然能大幅提高開(kāi)發(fā)效率，但能不能在快速開(kāi)發(fā)的基礎(chǔ)上搭建出一個(gè)樣式美觀且數(shù)據(jù)靈活的門(mén)戶(hù)頁(yè)面呢？

今天剛好借助一個(gè)近期碰到的一個(gè)項(xiàng)目為案例，我來(lái)帶大家使用無(wú)代碼平臺(tái)smardaten體驗(yàn)一番。

三、搭建步驟

通過(guò)smardaten無(wú)碼化配置實(shí)現(xiàn)這樣的一個(gè)門(mén)戶(hù)首頁(yè)的功能主要分為三個(gè)大步驟：

四、應(yīng)用構(gòu)建

下面給大家詳細(xì)拆解一下門(mén)戶(hù)頁(yè)面配置這幾個(gè)步驟具體應(yīng)該怎么走。

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

首先，大家可以看到，這個(gè)就是我們的應(yīng)用構(gòu)建頁(yè)面。我們可以在這里進(jìn)行頁(yè)面和菜單的新增，并且進(jìn)行綁定。

4.2頁(yè)面模塊化拼裝

4.2.1輪播圖

1.使用大屏輔助模塊中畫(huà)布，進(jìn)行配置，畫(huà)布的排列模式選擇輪播，數(shù)據(jù)類(lèi)型選擇數(shù)據(jù)資產(chǎn)。

?

2.設(shè)置畫(huà)布的寬高、輪播圖最大的圖片數(shù)、輪播方向、切換時(shí)間、等等細(xì)節(jié)屬性。

?

?

3.設(shè)置輪播圖的數(shù)據(jù)資產(chǎn)

4.設(shè)置輪播圖中的圖片字段（在關(guān)聯(lián)的輪播圖資產(chǎn)中去選擇圖片字段）

5.點(diǎn)擊輪播圖的跳轉(zhuǎn)的實(shí)現(xiàn)，是在畫(huà)布數(shù)據(jù)設(shè)置中選擇一個(gè)輪播圖數(shù)據(jù)資產(chǎn)中URL的字段，組件的寬高設(shè)置為跟輪播圖寬高一致，字體顏色設(shè)置為透明顏色，在組件的交互設(shè)置中配置點(diǎn)擊的跳轉(zhuǎn)頁(yè)面邏輯控制。

?

?

?

6.將配置好的輪播畫(huà)布，組裝到應(yīng)用設(shè)計(jì)頁(yè)面中

4.2.2卡片列表

1.使用兩列布局，左右分割，整體布局

2.彈性布局，配置左右兩側(cè)列表 ，并自定義CSS樣式

?3.標(biāo)題欄使用畫(huà)布進(jìn)行配置，并實(shí)時(shí)統(tǒng)計(jì)數(shù)據(jù)條數(shù)

?

4.卡片列表，使用列表-畫(huà)布列表配置實(shí)現(xiàn)

5.卡片實(shí)現(xiàn)

?

6.點(diǎn)擊查看全部的列表數(shù)據(jù)功能，使用畫(huà)布，配置文本和圖片樣式，通過(guò)組件交互的點(diǎn)擊實(shí)現(xiàn)配置邏輯控制跳轉(zhuǎn)對(duì)應(yīng)的列表URL。

?

?

4.2.3架構(gòu)資產(chǎn)標(biāo)題

通過(guò)應(yīng)用畫(huà)布直接簡(jiǎn)單配置實(shí)現(xiàn)

4.2.4架構(gòu)資產(chǎn)模塊

使用彈性布局，內(nèi)嵌四列布局，每個(gè)布局中，使用畫(huà)布進(jìn)行配置實(shí)現(xiàn)。配置好一列布局的模板樣式，然后可以復(fù)制（選中組件區(qū)域 Ctrl C），粘貼（選中組件區(qū)域 Ctrl V）到其他三列中，修改相應(yīng)的文本和數(shù)據(jù)。

?

4.2.5平臺(tái)能力資產(chǎn)標(biāo)題

復(fù)制架構(gòu)資產(chǎn)標(biāo)題布局，然后修改標(biāo)題文本即可

4.2.6平臺(tái)能力

1.使用頁(yè)簽組件

2.配置組件的數(shù)據(jù)資產(chǎn)

4.2.7首頁(yè)整體樣式設(shè)置

頁(yè)面設(shè)置匯總，樣式配置，選擇使用自定義樣式

4.2.8管理后臺(tái)功能模塊

配置管理后臺(tái)列表頁(yè)面，可以增刪改查，給首頁(yè)提供數(shù)據(jù)源

?

4.2.最終效果

來(lái)帶大家看一下最終的效果：

這樣一個(gè)簡(jiǎn)潔漂亮又好用的門(mén)戶(hù)界面就被我們用smardaten無(wú)代碼平臺(tái)輕松搞定了，怎么樣，是不是感覺(jué)你完全低估了smardaten無(wú)代碼開(kāi)發(fā)的實(shí)力！

整個(gè)體驗(yàn)下來(lái)，不僅開(kāi)發(fā)上手門(mén)檻低，效率快，而且完全不會(huì)降低開(kāi)發(fā)質(zhì)量，這就是smardaten無(wú)代碼平臺(tái)的強(qiáng)悍所在。

不知道看到這里的你想不想自己親手試試呢？作為開(kāi)發(fā)者的角度，永遠(yuǎn)是動(dòng)手>理解的，所以說(shuō)，墻裂建議大家去大膽嘗試一下，這里附上體驗(yàn)入口：https://s3.smardaten.com/文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-670141.html

到了這里，關(guān)于smardaten實(shí)戰(zhàn)丨誰(shuí)說(shuō)無(wú)代碼不能開(kāi)發(fā)出漂亮的門(mén)戶(hù)首頁(yè)？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！