8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.18.1需求描述完成底部標(biāo)簽導(dǎo)航設(shè)計(jì)、首頁(yè)海報(bào)輪播效果設(shè)計(jì)和宮格導(dǎo)航設(shè)計(jì)，如左圖所示。在首頁(yè)里，單擊全部分類(lèi)宮格導(dǎo)航的時(shí)候，會(huì)進(jìn)入到全部分類(lèi)導(dǎo)航界面，把婚博會(huì)相關(guān)內(nèi)容的導(dǎo)航集成到一個(gè)界面里，如右圖所示。8.1需求描述完成底部標(biāo)簽導(dǎo)航設(shè)計(jì)、首頁(yè)海報(bào)輪播效果設(shè)計(jì)8.1需求描述在現(xiàn)金券界面里，將各個(gè)商戶的現(xiàn)金券以列表的形式展現(xiàn)出來(lái)，提供全部、默認(rèn)下拉菜單效果顯示，如左圖所示。在婚博會(huì)界面里，提供索票的界面，填寫(xiě)個(gè)人相關(guān)信息，可以進(jìn)行索票，如右圖所示。8.1需求描述在現(xiàn)金券界面里，將各個(gè)商戶的現(xiàn)金券以列表的8.1需求描述在填寫(xiě)表單選擇獲知渠道時(shí)，以彈出窗口的形式提供單選列表，供用戶選擇獲知婚博會(huì)的情況，如圖所示。8.1需求描述在填寫(xiě)表單選擇獲知渠道時(shí)，以彈出窗口的形式8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1設(shè)計(jì)底部標(biāo)簽導(dǎo)航，準(zhǔn)備好底部標(biāo)簽導(dǎo)航的圖標(biāo)和建立相應(yīng)的五個(gè)頁(yè)面；設(shè)置默認(rèn)時(shí)圖片和選中時(shí)圖片，標(biāo)簽名稱(chēng)采用兩種顏色，紅色為選中顏色，灰色為默認(rèn)顏色。設(shè)計(jì)幻燈片輪播效果，準(zhǔn)備好幻燈片需要輪播的圖片；設(shè)計(jì)宮格導(dǎo)航的時(shí)候，先把宮格導(dǎo)航的圖標(biāo)和導(dǎo)航名稱(chēng)存放在js后臺(tái)里，動(dòng)態(tài)循環(huán)展現(xiàn)出宮格導(dǎo)航；在設(shè)計(jì)全部分類(lèi)導(dǎo)航的時(shí)候，有三塊區(qū)域內(nèi)容：玩轉(zhuǎn)婚博會(huì)、特色分類(lèi)、我的婚博會(huì)，由于它們?nèi)齻€(gè)界面布局方式一樣，可以先設(shè)計(jì)出一個(gè)區(qū)域，剩下的兩個(gè)直接復(fù)制使用；現(xiàn)金券界面設(shè)計(jì)難點(diǎn)在于下拉菜單篩選條件設(shè)計(jì)，需要把篩選條件置于頁(yè)面頂層，可以通過(guò)在樣式里設(shè)置z-index:999就可以置于最頂層；婚博會(huì)索票界面是常規(guī)的表單界面，需要把表單數(shù)據(jù)提交給后臺(tái)，保存到本地里；8.2.1設(shè)計(jì)思路設(shè)計(jì)底部標(biāo)簽導(dǎo)航，準(zhǔn)備好底部標(biāo)簽導(dǎo)航的圖標(biāo)和建立相應(yīng)的五個(gè)頁(yè)8.2.2相關(guān)知識(shí)點(diǎn)在界面布局的時(shí)候，會(huì)用到微信小程序的組件，包括view視圖容器組件、image圖片組件、swiper滑塊視圖容器組件、icon圖標(biāo)組件、form組件、radio單項(xiàng)選擇器組件、checkbox多項(xiàng)選擇器組件等組件的使用；界面樣式設(shè)計(jì)，需要寫(xiě)一些wxss樣式進(jìn)行界面的美化和渲染；將數(shù)據(jù)緩存到本地，需要調(diào)用wx.setStorageSync這個(gè)API接口，進(jìn)行緩存數(shù)據(jù)；界面跳轉(zhuǎn)需要使用wx.navigateTo這個(gè)API接口，進(jìn)行界面跳轉(zhuǎn)；8.2.2相關(guān)知識(shí)點(diǎn)在界面布局的時(shí)候，會(huì)用到微信小程序的8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.18.3準(zhǔn)備工作需要準(zhǔn)備一個(gè)AppID，如果沒(méi)有AppID也沒(méi)有關(guān)系，只不過(guò)不能再手機(jī)上進(jìn)行項(xiàng)目的預(yù)覽，但是在開(kāi)發(fā)工具上開(kāi)發(fā)是沒(méi)有任何問(wèn)題的。底部標(biāo)簽導(dǎo)航，需要有選中圖片和默認(rèn)圖片，放置在images/bar文件夾下，如下圖所示。8.3準(zhǔn)備工作需要準(zhǔn)備一個(gè)AppID，如果沒(méi)有AppID8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.18.4設(shè)計(jì)流程仿中國(guó)婚博會(huì)微信小程序，底部標(biāo)簽導(dǎo)航分為五個(gè)標(biāo)簽導(dǎo)航：首頁(yè)、現(xiàn)金券、婚博會(huì)、社區(qū)、我的，標(biāo)簽導(dǎo)航選中時(shí)導(dǎo)航圖標(biāo)會(huì)變?yōu)榧t色圖標(biāo)，導(dǎo)航文字會(huì)變?yōu)榧t色文字，如下圖所示。8.4.1底部標(biāo)簽導(dǎo)航設(shè)計(jì)海報(bào)輪播效果可以在有限的區(qū)域內(nèi)動(dòng)態(tài)\顯示不同的廣告圖片或者商品圖片，是很多網(wǎng)站或者App軟件都會(huì)采用的一種展現(xiàn)方式，在仿中國(guó)婚博會(huì)微信小程序的首頁(yè)面里，采用海報(bào)輪播效果展示廣告圖片，如右圖所示。8.4.2海報(bào)輪播效果設(shè)計(jì)8.4設(shè)計(jì)流程仿中國(guó)婚博會(huì)微信小程序，底部標(biāo)簽導(dǎo)航分為五8.4設(shè)計(jì)流程宮格導(dǎo)航設(shè)計(jì)是很多App軟件都會(huì)采用的一種設(shè)計(jì)方式，通過(guò)這種宮格導(dǎo)航設(shè)計(jì)，在首頁(yè)里就給用戶明確的入口，用戶根據(jù)自己的需要進(jìn)入到相關(guān)界面，這就是宮格導(dǎo)航的一種好處，根據(jù)導(dǎo)航名稱(chēng)進(jìn)入到相應(yīng)的界面，如圖所示。8.4.3宮格導(dǎo)航設(shè)計(jì)8.4設(shè)計(jì)流程宮格導(dǎo)航設(shè)計(jì)是很多App軟件都會(huì)采用的一種8.4設(shè)計(jì)流程全部分類(lèi)導(dǎo)航界面集合了中國(guó)婚博會(huì)所有的導(dǎo)航的入口，分為三類(lèi)導(dǎo)航：玩轉(zhuǎn)婚博會(huì)導(dǎo)航，有訂喜宴、拍婚照、找婚慶等服務(wù)；特色分類(lèi)導(dǎo)航，有拍寫(xiě)真、美新娘等服務(wù)；我的婚博會(huì)導(dǎo)航，有現(xiàn)金券、邀請(qǐng)函、簽到禮等服務(wù)，這三類(lèi)導(dǎo)航布局方式一樣，可以先設(shè)計(jì)一類(lèi)導(dǎo)航，然后直接進(jìn)行復(fù)用，如右圖所示。8.4.4全部分類(lèi)導(dǎo)航設(shè)計(jì)8.4設(shè)計(jì)流程全部分類(lèi)導(dǎo)航界面集合了中國(guó)婚博會(huì)所有的導(dǎo)航8.4設(shè)計(jì)流程在很多的App里都會(huì)采用下拉菜單作為篩選條件，下拉菜單里會(huì)展現(xiàn)出很多篩選條件供用戶選擇，現(xiàn)金券界面也是采用下拉菜單來(lái)進(jìn)行條件篩選，分為兩類(lèi)條件：全部、默認(rèn)，如右圖所示。8.4.5現(xiàn)金券下拉菜單篩選條件設(shè)計(jì)8.4設(shè)計(jì)流程在很多的App里都會(huì)采用下拉菜單作為篩選條8.4設(shè)計(jì)流程現(xiàn)金券列表頁(yè)用來(lái)展示商家的現(xiàn)金優(yōu)惠券，列表里包括商家的圖標(biāo)、商家名稱(chēng)、現(xiàn)金優(yōu)惠額度以及申請(qǐng)情況，如左圖所示。8.4.6現(xiàn)金券列表頁(yè)設(shè)計(jì)婚博會(huì)索票界面用來(lái)進(jìn)行索要中國(guó)婚博會(huì)門(mén)票，只有有了門(mén)票方可參加婚博會(huì)，索要門(mén)票需要填寫(xiě)自己和愛(ài)人的相關(guān)信息，如右圖所示。8.4.7婚博會(huì)索票設(shè)計(jì)8.4設(shè)計(jì)流程現(xiàn)金券列表頁(yè)用來(lái)展示商家的現(xiàn)金優(yōu)惠券，列表8.4設(shè)計(jì)流程獲知渠道是以彈出層radio單項(xiàng)選擇器組件的列表展現(xiàn)出來(lái)，只能選擇一種獲知渠道，如右所示。8.4.8獲知渠道彈出層設(shè)計(jì)8.4設(shè)計(jì)流程獲知渠道是以彈出層radio單項(xiàng)選擇器組件8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.18.1需求描述完成底部標(biāo)簽導(dǎo)航設(shè)計(jì)、首頁(yè)海報(bào)輪播效果設(shè)計(jì)和宮格導(dǎo)航設(shè)計(jì)，如左圖所示。在首頁(yè)里，單擊全部分類(lèi)宮格導(dǎo)航的時(shí)候，會(huì)進(jìn)入到全部分類(lèi)導(dǎo)航界面，把婚博會(huì)相關(guān)內(nèi)容的導(dǎo)航集成到一個(gè)界面里，如右圖所示。8.1需求描述完成底部標(biāo)簽導(dǎo)航設(shè)計(jì)、首頁(yè)海報(bào)輪播效果設(shè)計(jì)8.1需求描述在現(xiàn)金券界面里，將各個(gè)商戶的現(xiàn)金券以列表的形式展現(xiàn)出來(lái)，提供全部、默認(rèn)下拉菜單效果顯示，如左圖所示。在婚博會(huì)界面里，提供索票的界面，填寫(xiě)個(gè)人相關(guān)信息，可以進(jìn)行索票，如右圖所示。8.1需求描述在現(xiàn)金券界面里，將各個(gè)商戶的現(xiàn)金券以列表的8.1需求描述在填寫(xiě)表單選擇獲知渠道時(shí)，以彈出窗口的形式提供單選列表，供用戶選擇獲知婚博會(huì)的情況，如圖所示。8.1需求描述在填寫(xiě)表單選擇獲知渠道時(shí)，以彈出窗口的形式8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1設(shè)計(jì)底部標(biāo)簽導(dǎo)航，準(zhǔn)備好底部標(biāo)簽導(dǎo)航的圖標(biāo)和建立相應(yīng)的五個(gè)頁(yè)面；設(shè)置默認(rèn)時(shí)圖片和選中時(shí)圖片，標(biāo)簽名稱(chēng)采用兩種顏色，紅色為選中顏色，灰色為默認(rèn)顏色。設(shè)計(jì)幻燈片輪播效果，準(zhǔn)備好幻燈片需要輪播的圖片；設(shè)計(jì)宮格導(dǎo)航的時(shí)候，先把宮格導(dǎo)航的圖標(biāo)和導(dǎo)航名稱(chēng)存放在js后臺(tái)里，動(dòng)態(tài)循環(huán)展現(xiàn)出宮格導(dǎo)航；在設(shè)計(jì)全部分類(lèi)導(dǎo)航的時(shí)候，有三塊區(qū)域內(nèi)容：玩轉(zhuǎn)婚博會(huì)、特色分類(lèi)、我的婚博會(huì)，由于它們?nèi)齻€(gè)界面布局方式一樣，可以先設(shè)計(jì)出一個(gè)區(qū)域，剩下的兩個(gè)直接復(fù)制使用；現(xiàn)金券界面設(shè)計(jì)難點(diǎn)在于下拉菜單篩選條件設(shè)計(jì)，需要把篩選條件置于頁(yè)面頂層，可以通過(guò)在樣式里設(shè)置z-index:999就可以置于最頂層；婚博會(huì)索票界面是常規(guī)的表單界面，需要把表單數(shù)據(jù)提交給后臺(tái)，保存到本地里；8.2.1設(shè)計(jì)思路設(shè)計(jì)底部標(biāo)簽導(dǎo)航，準(zhǔn)備好底部標(biāo)簽導(dǎo)航的圖標(biāo)和建立相應(yīng)的五個(gè)頁(yè)8.2.2相關(guān)知識(shí)點(diǎn)在界面布局的時(shí)候，會(huì)用到微信小程序的組件，包括view視圖容器組件、image圖片組件、swiper滑塊視圖容器組件、icon圖標(biāo)組件、form組件、radio單項(xiàng)選擇器組件、checkbox多項(xiàng)選擇器組件等組件的使用；界面樣式設(shè)計(jì)，需要寫(xiě)一些wxss樣式進(jìn)行界面的美化和渲染；將數(shù)據(jù)緩存到本地，需要調(diào)用wx.setStorageSync這個(gè)API接口，進(jìn)行緩存數(shù)據(jù)；界面跳轉(zhuǎn)需要使用wx.navigateTo這個(gè)API接口，進(jìn)行界面跳轉(zhuǎn)；8.2.2相關(guān)知識(shí)點(diǎn)在界面布局的時(shí)候，會(huì)用到微信小程序的8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.18.3準(zhǔn)備工作需要準(zhǔn)備一個(gè)AppID，如果沒(méi)有AppID也沒(méi)有關(guān)系，只不過(guò)不能再手機(jī)上進(jìn)行項(xiàng)目的預(yù)覽，但是在開(kāi)發(fā)工具上開(kāi)發(fā)是沒(méi)有任何問(wèn)題的。底部標(biāo)簽導(dǎo)航，需要有選中圖片和默認(rèn)圖片，放置在images/bar文件夾下，如下圖所示。8.3準(zhǔn)備工作需要準(zhǔn)備一個(gè)AppID，如果沒(méi)有AppID8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.18.4設(shè)計(jì)流程仿中國(guó)婚博會(huì)微信小程序，底部標(biāo)簽導(dǎo)航分為五個(gè)標(biāo)簽導(dǎo)航：首頁(yè)、現(xiàn)金券、婚博會(huì)、社區(qū)、我的，標(biāo)簽導(dǎo)航選中時(shí)導(dǎo)航圖標(biāo)會(huì)變?yōu)榧t色圖標(biāo)，導(dǎo)航文字會(huì)變?yōu)榧t色文字，如下圖所示。8.4.1底部標(biāo)簽導(dǎo)航設(shè)計(jì)海報(bào)輪播效果可以在有限的區(qū)域內(nèi)動(dòng)態(tài)\顯示不同的廣告圖片或者商品圖片，是很多網(wǎng)站或者App軟件都會(huì)采用的一種展現(xiàn)方式，在仿中國(guó)婚博會(huì)微信小程序的首頁(yè)面里，采用海報(bào)輪播效果展示廣告圖片，如右圖所示。8.4.2海報(bào)輪播效果設(shè)計(jì)8.4設(shè)計(jì)流程仿中國(guó)婚博會(huì)微信小程序，底部標(biāo)簽導(dǎo)航分為五8.4設(shè)計(jì)流程宮格導(dǎo)航設(shè)計(jì)是很多App軟件都會(huì)采用的一種設(shè)計(jì)方式，通過(guò)這種宮格導(dǎo)航設(shè)計(jì)，在首頁(yè)里就給用戶明確的入口，用戶根據(jù)自己的需要進(jìn)入到相關(guān)界面，這就是宮格導(dǎo)航的一種好處，根據(jù)導(dǎo)航名稱(chēng)進(jìn)入到相應(yīng)的界面，如圖所示。8.4.3宮格導(dǎo)航設(shè)計(jì)8.4設(shè)計(jì)流程宮格導(dǎo)航設(shè)計(jì)是很多App軟件都會(huì)采用的一種8.4設(shè)計(jì)流程全部分類(lèi)導(dǎo)航界面集合了中國(guó)婚博會(huì)所有的導(dǎo)航的入口，分為三類(lèi)導(dǎo)航：玩轉(zhuǎn)婚博會(huì)導(dǎo)航，有訂喜宴、拍婚照、找婚慶等服務(wù)；特色分類(lèi)導(dǎo)航，有拍寫(xiě)真、美新娘等服務(wù)；我的婚博會(huì)導(dǎo)航，有現(xiàn)金券、邀請(qǐng)函、簽到禮等服務(wù)，這三類(lèi)導(dǎo)航布局方式一樣，可以先設(shè)計(jì)一類(lèi)導(dǎo)航，然后直接進(jìn)行復(fù)用，如右圖所示。8.4.4全部分類(lèi)導(dǎo)航設(shè)計(jì)8.4設(shè)計(jì)流程全部分類(lèi)導(dǎo)航界面集合了中國(guó)婚博會(huì)所有的導(dǎo)航8.4設(shè)計(jì)流程在很多的App里都會(huì)采用下拉菜單作為篩選條件，下拉菜單里會(huì)展現(xiàn)出很多篩選條件供用戶選擇，現(xiàn)金券界面也是采用下拉菜單來(lái)進(jìn)行條件篩選，分為兩類(lèi)條件：全部、默認(rèn)，如右圖所示。8.4.5現(xiàn)金券下拉菜單篩選條件設(shè)計(jì)8.4設(shè)計(jì)流程在很多的App里都會(huì)采用下拉菜單作為篩選條8.4設(shè)計(jì)流程現(xiàn)金券列表頁(yè)用來(lái)展示商家的現(xiàn)金優(yōu)惠券，列表里包括商家