1.頁面搭建 uniapp中頁面的搭建與微信小程序雷同，都是div換成view即可。其他標簽都與html相同：  css的使用也相同。 做個首頁：  2.將復用模塊組件化 以banner為例。 （1）新建組件 在項目中新建文件夾component用于存放組件，在里邊新建一個組件：  起名為banner，其中內容與普通頁面一致：  接下來將banner的內容放到組件中：  （2）引入組件 在項目主文件中引入該文件，并用Vue.component聲明該文件為組件：  此時就可以使用此組件了，在首頁中利用組件在原來的banner位置進行替換：  完成，沒問題。 （3）組件傳值 既然是可復用組件，其中的數據和內容就需要是可以動態綁定的。 此時就需要用到props，回到組件中進行設置：  其中type是數據類型，如果傳值是其他數據類型則報錯。required是是否是必須項，如果為true則不傳值時會報錯。設置完成后，保存后查看頁面：  此時頁面報錯，因為我們沒有為banner組件傳值。 在banner組件標簽中進行傳值：  設置好傳值后保存，頁面正常顯示，組件設置完成。 此頁面中的功能基本都可以復用，所以全部按照上面的方法進行組件化即可。 3.輪播 輪播就使用uniapp的swiper組件： ``` <swiper autoplay="true" circular="true" interval="5000" style="height: 300px;"> <swiper-item> <banner></banner> </swiper-item> <swiper-item> <banner></banner> </swiper-item> </swiper> ```  輪播組件的設置并非只根據圖片的高度進行設置，只要我們手動通過css給予輪播組件一個高度，是完全可以將標題等內容顯示出來的。 到此，頁面的制作大概先到這里，繼續往下做，后邊有其他功能我會分享到下篇文章。