---

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

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

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

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

?🅰?

---

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

---

---

?前言?

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

1.邀請函頁面

2.圖片頁面

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

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

5.賓客信息頁面

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

---

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

---

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

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

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

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

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

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

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

??上述代碼中，tabBar對象用于配置頁面底部的標(biāo)簽，list是一個數(shù)組，數(shù)組的每個元素是一個標(biāo)簽按鈕對象，通過該對象的屬可以配置標(biāo)簽欄中的每個標(biāo)簽按鈕。
在每個標(biāo)簽打開時(shí)，導(dǎo)航欄也需要隨之發(fā)送改變。下面在每個頁面的.json文件中配置頁面標(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": "邀請函"},{"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": "邀請函","navigationBarBackgroundColor": "#ff4c91","enablePullDownRefresh": false},}

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

{"usingComponents": {},"navigationBarTitleText": "邀請函"
}

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

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

結(jié)束語🥇

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