---

👨?💻個(gè)人主頁(yè)：@開(kāi)發(fā)者-曼億點(diǎn)

👨?💻 hallo 歡迎 點(diǎn)贊👍 收藏? 留言📝 加關(guān)注?!

👨?💻 本文由 曼億點(diǎn) 原創(chuàng)

👨?💻 收錄于專(zhuān)欄：微信小程序開(kāi)發(fā)

?🅰?

---

項(xiàng)目所需的圖片鏈接：https://pan.baidu.com/s/1gk3h8RFsNENzBzB4p5kw-g
提取碼：8aon

---

---

?前言?

??本項(xiàng)目是一個(gè)婚禮邀請(qǐng)函小程序，通過(guò)小程序向親朋好友發(fā)送婚禮到場(chǎng)的邀請(qǐng)，相當(dāng)于傳統(tǒng)方式的請(qǐng)?zhí)?#xff0c;他給人帶來(lái)了不一樣便捷的體驗(yàn)感，也更容易受到廣大年群體的喜愛(ài)，通過(guò)電子版的邀請(qǐng)函，邀請(qǐng)來(lái)賓見(jiàn)證一對(duì)新人的幸福時(shí)刻。
本項(xiàng)目分為5個(gè)頁(yè)面組成，分別是邀請(qǐng)函、圖片、美好時(shí)光、婚禮地點(diǎn)、賓客情況。如下圖所示：

1.邀請(qǐng)函頁(yè)面

2.圖片頁(yè)面

3.美好時(shí)光頁(yè)面

4.婚禮地點(diǎn)頁(yè)面

5.賓客信息頁(yè)面

下面對(duì)這5個(gè)頁(yè)面的功能進(jìn)行簡(jiǎn)要的介紹。
邀請(qǐng)函頁(yè)面：新娘和新郎的名字、電話(huà)、婚禮地點(diǎn)、婚禮時(shí)間。
圖片頁(yè)面：新娘和新郎的幸福照。
美好時(shí)光頁(yè)面：采用視頻的方式記錄一對(duì)新人的相愛(ài)歷程。
婚禮地點(diǎn)頁(yè)面：通過(guò)導(dǎo)航查看婚禮地點(diǎn)的路線(xiàn)。
賓客信息頁(yè)面：通過(guò)婚禮的嘉賓填寫(xiě)個(gè)人信息，送一些祝福等。

---

🎶 任務(wù)實(shí)現(xiàn)分析

---

（1）頁(yè)面結(jié)構(gòu)

?從上圖看出，頁(yè)面底部都有標(biāo)簽欄，通過(guò)點(diǎn)擊不同的標(biāo)簽按鈕卻換到對(duì)應(yīng)的頁(yè)面。
邀請(qǐng)函頁(yè)面中：右上角有一個(gè)音樂(lè)播放按鈕，中間是新娘和新郎的合照，合照下面是新娘和新郎的名字，點(diǎn)擊旁邊的電話(huà)圖片呼叫。底部是婚禮時(shí)間和地點(diǎn)信息。
圖片頁(yè)面中：通過(guò)縱向輪播圖展示了新人婚紗照片。
美好時(shí)光頁(yè)面中：提供了視頻在線(xiàn)播放功能。
婚禮地點(diǎn)頁(yè)面中：提供了在線(xiàn)地圖，點(diǎn)擊導(dǎo)航圖標(biāo)可以定位婚禮酒店位置。
賓客信息頁(yè)面中：提供了一個(gè)表單，用于填寫(xiě)賓客信息。

（2）目錄結(jié)構(gòu)

路徑	說(shuō)明
app.js	應(yīng)用程序的邏輯文件
app.json	應(yīng)用程序的配置文件
app.wxss	定義公共樣式
pages/index	邀請(qǐng)函頁(yè)面保存目錄
pages/picture	圖片頁(yè)面保存目錄
pages/video	美好時(shí)光頁(yè)面保存目錄
pages/map	婚禮地點(diǎn)頁(yè)面保存目錄
pages/guesr	賓客信息頁(yè)面保存目錄
images	圖片文件

（3）項(xiàng)目初始化

??在微信開(kāi)發(fā)者工具中創(chuàng)建一個(gè)空白項(xiàng)目。創(chuàng)建成功后，新建app.json文件，在該文件中定義本案列中的頁(yè)面和導(dǎo)航欄樣式，具體代碼如下：

// A code block
var foo = 'bar';

??上述代碼中，tabBar對(duì)象用于配置頁(yè)面底部的標(biāo)簽，list是一個(gè)數(shù)組，數(shù)組的每個(gè)元素是一個(gè)標(biāo)簽按鈕對(duì)象，通過(guò)該對(duì)象的屬可以配置標(biāo)簽欄中的每個(gè)標(biāo)簽按鈕。
在每個(gè)標(biāo)簽打開(kāi)時(shí)，導(dǎo)航欄也需要隨之發(fā)送改變。下面在每個(gè)頁(yè)面的.json文件中配置頁(yè)面標(biāo)題，以pages/index/index.json文件為例，代碼如下：

{"pages": ["pages/index/index","pages/guest/guest","pages/map/map","pages/vido/vido","pages/pictrue/pictrue","pages/logs/logs"],"tabBar": {"color": "#ccc","selectedColor": "#ff4c91","borderStyle":"white","backgroundColor": "#fff","list": [{"pagePath": "pages/index/index","iconPath": "images/images/invite.png","selectedIconPath": "images/images/invite.png","text": "邀請(qǐng)函"},{"pagePath": "pages/pictrue/pictrue","iconPath": "images/images/marry.png","selectedIconPath": "images/images/marry.png","text": "照片"},{"pagePath": "pages/vido/vido","iconPath": "images/images/video.png","selectedIconPath": "images/images/video.png","text": "美好時(shí)光"},{"pagePath": "pages/map/map","iconPath": "images/images/map.png","selectedIconPath": "images/images/map.png","text": "訂婚地點(diǎn)"},{"pagePath": "pages/guest/guest","iconPath": "images/images/guest.png","selectedIconPath": "images/images/guest.png","text": "賓客信息"}]},"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "邀請(qǐng)函","navigationBarBackgroundColor": "#ff4c91","enablePullDownRefresh": false},}

完成配置文件的編寫(xiě)后，在app.wxss文件中定義公共樣式，具體代碼如下：

{"usingComponents": {},"navigationBarTitleText": "邀請(qǐng)函"
}

??完成配置文件的編寫(xiě)后，在app.wxss文件定義公共樣式，具體代碼如下：

page{
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}

結(jié)束語(yǔ)🥇

以上就是微信小程序之列表渲染
持續(xù)更新微信小程序教程，歡迎大家訂閱系列專(zhuān)欄🔥微信小程序
你們的支持就是曼億點(diǎn)創(chuàng)作的動(dòng)力💖💖💖