微信小程序開發(fā)圖解案例第8章課件

8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.1需求描述完成底部標(biāo)簽導(dǎo)航設(shè)計(jì)、首頁(yè)海報(bào)輪播效果設(shè)計(jì)和宮格導(dǎo)航設(shè)計(jì)，如左圖所示。在首頁(yè)里，單擊全部分類宮格導(dǎo)航的時(shí)候，會(huì)進(jìn)入到全部分類導(dǎo)航界面，把婚博會(huì)相關(guān)內(nèi)容的導(dǎo)航集成到一個(gè)界面里，如右圖所示。8.1需求描述在現(xiàn)金券界面里，將各個(gè)商戶的現(xiàn)金券以列表的形式展現(xiàn)出來(lái)，提供全部、默認(rèn)下拉菜單效果顯示，如左圖所示。在婚博會(huì)界面里，提供索票的界面，填寫個(gè)人相關(guān)信息，可以進(jìn)行索票，如右圖所示。8.1需求描述在填寫表單選擇獲知渠道時(shí)，以彈出窗口的形式提供單選列表，供用戶選擇獲知婚博會(huì)的情況，如圖所示。8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程設(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)簽名稱采用兩種顏色，紅色為選中顏色，灰色為默認(rèn)顏色。設(shè)計(jì)幻燈片輪播效果，準(zhǔn)備好幻燈片需要輪播的圖片；設(shè)計(jì)宮格導(dǎo)航的時(shí)候，先把宮格導(dǎo)航的圖標(biāo)和導(dǎo)航名稱存放在js后臺(tái)里，動(dòng)態(tài)循環(huán)展現(xiàn)出宮格導(dǎo)航；在設(shè)計(jì)全部分類導(dǎo)航的時(shí)候，有三塊區(qū)域內(nèi)容：玩轉(zhuǎn)婚博會(huì)、特色分類、我的婚博會(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ì)思路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ì)，需要寫一些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設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.3準(zhǔn)備工作需要準(zhǔn)備一個(gè)AppID，如果沒有AppID也沒有關(guān)系，只不過(guò)不能再手機(jī)上進(jìn)行項(xiàng)目的預(yù)覽，但是在開發(fā)工具上開發(fā)是沒有任何問(wèn)題的。底部標(biāo)簽導(dǎo)航，需要有選中圖片和默認(rèn)圖片，放置在images/bar文件夾下，如下圖所示。8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)目錄contents8.1需求描述8.3準(zhǔn)備工作8.4設(shè)計(jì)流程8.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ì)流程宮格導(dǎo)航設(shè)計(jì)是很多App軟件都會(huì)采用的一種設(shè)計(jì)方式，通過(guò)這種宮格導(dǎo)航設(shè)計(jì)，在首頁(yè)里就給用戶明確的入口，用戶根據(jù)自己的需要進(jìn)入到相關(guān)界面，這就是宮格導(dǎo)航的一種好處，根據(jù)導(dǎo)航名稱進(jìn)入到相應(yīng)的界面，如圖所示。8.4.3宮格導(dǎo)航設(shè)計(jì)8.4設(shè)計(jì)流程全部分類導(dǎo)航界面集合了中國(guó)婚博會(huì)所有的導(dǎo)航的入口，分為三類導(dǎo)航：玩轉(zhuǎn)婚博會(huì)導(dǎo)航，有訂喜宴、拍婚照、找婚慶等服務(wù)；特色分類導(dǎo)航，有拍寫真、美新娘等服務(wù)；我的婚博會(huì)導(dǎo)航，有現(xiàn)金券、邀請(qǐng)函、簽到禮等服務(wù)，這三類導(dǎo)航布局方式一樣，可以先設(shè)計(jì)一類導(dǎo)航，然后直接進(jìn)行復(fù)用，如右圖所示。8.4.4全部分類導(dǎo)航設(shè)計(jì)8.4設(shè)計(jì)流程在很多的App里都會(huì)采用下拉菜單作為篩選條件，下拉菜單里會(huì)展現(xiàn)出很多篩選條件供用戶選擇，現(xiàn)金券界面也是采用下拉菜單來(lái)進(jìn)行條件篩選，分為兩類條件：全部、默認(rèn)，如右圖所示。8.4.5現(xiàn)金券下拉菜單篩選條件設(shè)計(jì)8.4設(shè)計(jì)流程現(xiàn)金券列表頁(yè)用來(lái)展示商家的現(xiàn)金優(yōu)惠券，列表里包括商家的圖標(biāo)、商家名稱、現(xiàn)金優(yōu)惠額度以及申請(qǐng)情況，如左圖所示。8.4.6現(xiàn)金券列表頁(yè)設(shè)計(jì)婚博會(huì)索票界面用來(lái)進(jìn)行索要中國(guó)婚博會(huì)門票，只有有了門票方可參加婚博會(huì)，索要門票需要填寫自己和愛人的