微信小程序開(kāi)發(fā)圖解案例教程第8章--綜合案例：仿中國(guó)婚博會(huì)微信小程序課件

1、微信小程序開(kāi)發(fā)圖解案例教程（附精講視頻）（第2版）劉剛著需求描述 設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn) 準(zhǔn)備工作 設(shè)計(jì)流程 小結(jié) 第8章 綜合案例：仿中國(guó)婚博會(huì)微信小程序 參加婚博會(huì)需要使用中國(guó)婚博會(huì)App進(jìn)行索要門(mén)票、領(lǐng)簽到禮等環(huán)節(jié)。 由于中國(guó)婚博會(huì)App軟件使用頻率不是很高，因此完全可以做一個(gè)中國(guó)婚博會(huì)微信小程序，需要的時(shí)候搜索出來(lái)使用，它的主要界面如圖8.1圖8.4所示。圖8.1首頁(yè)圖8.2全部分類(lèi) 圖8.3現(xiàn)金券 圖8.4婚博會(huì) 仿中國(guó)婚博會(huì)微信小程序需要完成以下主要功能：（1）完成底部標(biāo)簽導(dǎo)航設(shè)計(jì)、首頁(yè)海報(bào)輪播效果設(shè)計(jì)和宮格導(dǎo)航設(shè)計(jì)，如圖8.5所示。（2）在首頁(yè)里，單擊全部分類(lèi)宮格導(dǎo)航的時(shí)候，會(huì)進(jìn)入

2、到全部分類(lèi)導(dǎo)航界面，把婚博會(huì)相關(guān)內(nèi)容的導(dǎo)航集成到一個(gè)界面里，如圖8.6所示。8.1需求描述圖8.5首頁(yè)設(shè)計(jì)圖8.6全部分類(lèi)界面（3）在現(xiàn)金券界面里，將各個(gè)商戶(hù)的現(xiàn)金券以列表的形式展現(xiàn)出來(lái)，提供全部、默認(rèn)下拉菜單效果顯示，如圖8.7所示。（4）在婚博會(huì)界面里，提供索票的界面，填寫(xiě)個(gè)人相關(guān)信息，可以進(jìn)行索票，如圖8.8所示。圖8.7現(xiàn)金券界面圖8.8免費(fèi)索票（5）在填寫(xiě)表單選擇獲知渠道時(shí)，以彈出窗口的形式提供單選列表，供用戶(hù)選擇獲知婚博會(huì)渠道的情況，如圖8.9所示。圖8.9獲知渠道8.2.1設(shè)計(jì)思路（1）設(shè)計(jì)底部標(biāo)簽導(dǎo)航時(shí)，準(zhǔn)備好底部標(biāo)簽導(dǎo)航的圖標(biāo)，并建立5個(gè)相應(yīng)的頁(yè)面；設(shè)置默認(rèn)時(shí)圖片和選中時(shí)圖片

3、，標(biāo)簽名稱(chēng)采用兩種顏色，紅色為選中顏色，灰色為默認(rèn)顏色；（2）設(shè)計(jì)幻燈片輪播效果時(shí)，準(zhǔn)備好幻燈片需要輪播的圖片；（3）設(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)航；8.2設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)（4）在設(shè)計(jì)全部分類(lèi)導(dǎo)航的時(shí)候，有3塊區(qū)域內(nèi)容：玩轉(zhuǎn)婚博會(huì)、特色分類(lèi)、我的婚博會(huì)。由于這3個(gè)區(qū)域布局方式一樣，可以先設(shè)計(jì)出一個(gè)區(qū)域，其余的兩個(gè)區(qū)域直接復(fù)制使用即可；（5）現(xiàn)金券界面設(shè)計(jì)難點(diǎn)在于下拉菜單篩選條件設(shè)計(jì)，需要把篩選條件置于頁(yè)面頂層，在樣式里設(shè)置z-index:999就可以將其置于最頂層；（6）婚博會(huì)索票界面是常規(guī)的表單界面，需要把表單數(shù)據(jù)提交給后臺(tái)，

4、保存到本地里。（1）在界面布局的時(shí)候，會(huì)用到微信小程序的組件，包括view視圖容器組件、image圖片組件、swiper滑塊視圖容器組件、icon圖標(biāo)組件、form表單組件、radio單項(xiàng)選擇器組件、checkbox多項(xiàng)選擇器組件等組件的使用；（2）界面樣式設(shè)計(jì)，需要寫(xiě)一些wxss樣式進(jìn)行界面的美化和渲染；（3）將數(shù)據(jù)緩存到本地，需要調(diào)用wx.setStorageSync這個(gè)API接口，進(jìn)行緩存數(shù)據(jù)；（4）界面跳轉(zhuǎn)需要使用wx.navigateTo這個(gè)API接口，進(jìn)行界面跳轉(zhuǎn)。8.2.2相關(guān)知識(shí)點(diǎn)（1）我們首先需要準(zhǔn)備一個(gè)AppID，如果沒(méi)有AppID也沒(méi)有關(guān)系，只不過(guò)不能在手機(jī)上進(jìn)行項(xiàng)目的預(yù)

5、覽，但是在開(kāi)發(fā)工具上開(kāi)發(fā)是沒(méi)有任何問(wèn)題的。（2）底部標(biāo)簽導(dǎo)航，需要有選中圖標(biāo)和默認(rèn)圖標(biāo)，放置在images/bar文件夾下，如圖8.10所示。8.3準(zhǔn)備工作圖8.10底部標(biāo)簽導(dǎo)航圖標(biāo)（3）需要準(zhǔn)備海報(bào)輪播的圖片，放置在images/haibao文件夾下，如圖8.11所示。圖8.11海報(bào)輪播圖片（4）在首頁(yè)設(shè)計(jì)宮格導(dǎo)航的時(shí)候需要用到一些圖標(biāo)，放置在images/nav文件夾下，如圖8.12所示。圖8.12宮格導(dǎo)航圖標(biāo)（5）在全部分類(lèi)界面里，玩轉(zhuǎn)婚博會(huì)需要用到的一些圖標(biāo)，放置在images/type/wzhbh文件夾下，如圖8.13所示。圖8.13玩轉(zhuǎn)婚博會(huì)圖標(biāo)（6）在全部分類(lèi)界面里，特色分類(lèi)需要

6、用到的一些圖標(biāo)，放置在images/type/tsfl文件夾下，如圖8.14所示。圖8.14特色分類(lèi)圖標(biāo) （7）在全部分類(lèi)界面里，我的婚博會(huì)需要用到的一些圖標(biāo)，放置在images/type/wdhbh文件夾下，如圖8.15所示。圖8.15我的婚博會(huì)圖標(biāo)（8）在現(xiàn)金券界面里，需要用到的一些圖標(biāo)，放置在images/cash文件夾下，如圖8.16所示。（9）在婚博會(huì)索票界面里，需要用到的一些圖片，放置在images/marry文件夾下。圖8.16現(xiàn)金券圖標(biāo) 我們首先來(lái)設(shè)計(jì)仿中國(guó)婚博會(huì)微信小程序底部標(biāo)簽導(dǎo)航、海報(bào)輪播效果、宮格導(dǎo)航，然后設(shè)計(jì)全部分類(lèi)導(dǎo)航界面，再設(shè)計(jì)現(xiàn)金券下拉菜單篩選條件以及現(xiàn)金券列表

7、頁(yè)，最后設(shè)計(jì)婚博會(huì)索票界面以及獲知渠道彈出層。8.4設(shè)計(jì)流程 仿中國(guó)婚博會(huì)微信小程序，有5個(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.17所示。8.4.1底部標(biāo)簽導(dǎo)航設(shè)計(jì)圖8.17底部標(biāo)簽導(dǎo)航選中效果（1）新建一個(gè)hbh項(xiàng)目的微信小程序，將準(zhǔn)備好的底部標(biāo)簽導(dǎo)航圖標(biāo)、海報(bào)輪播圖片、宮格導(dǎo)航圖標(biāo)、現(xiàn)金券圖標(biāo)、婚博會(huì)索票圖片放置在hbh項(xiàng)目下。（2）打開(kāi)app.json配置文件，在pages數(shù)組里添加5個(gè)頁(yè)面路徑pages/ index/indexpages/cash/cash“pages/marry/marry” “pa

8、ges/ community/community”“pages/me/me”，保存后會(huì)自動(dòng)生成相應(yīng)的頁(yè)面文件夾；刪除“pages/logs/logs”頁(yè)面路徑以及對(duì)應(yīng)的文件夾。（3）在window數(shù)組里配置窗口導(dǎo)航背景顏色為紅色（#D73E3E），導(dǎo)航欄文字為中國(guó)婚博會(huì)，字體顏色為白色。（4）在tabBar對(duì)象里配置底部標(biāo)簽導(dǎo)航背景色為灰色（#F3F1EF），文字默認(rèn)顏色為灰色，選中時(shí)為紅色（#D73E3E），在list數(shù)組里配置底部標(biāo)簽導(dǎo)航對(duì)應(yīng)的頁(yè)面、導(dǎo)航名稱(chēng)、默認(rèn)時(shí)圖標(biāo)、選中時(shí)圖標(biāo)。這樣就完成了仿中國(guó)婚博會(huì)微信小程序的底部標(biāo)簽導(dǎo)航配置，單擊不同的導(dǎo)航，可以切換顯示不同的頁(yè)面，同時(shí)導(dǎo)航圖標(biāo)和

9、導(dǎo)航文字會(huì)呈現(xiàn)為選中狀態(tài)。 海報(bào)輪播效果可以在有限的區(qū)域內(nèi)動(dòng)態(tài)地顯示不同的廣告圖片，是很多網(wǎng)站或者App軟件都會(huì)采用的一種展現(xiàn)方式，在仿中國(guó)婚博會(huì)微信小程序的首頁(yè)面里，采用海報(bào)輪播效果展示廣告圖片，如圖8.18所示。8.4.2海報(bào)輪播效果設(shè)計(jì)圖8.18海報(bào)輪播顯示（1）進(jìn)入到pages/index/index.wxml文件里，采用view、swiper、image進(jìn)行布局，圖片寬度設(shè)置為100%，高度設(shè)置為176px。 swiper滑塊視圖容器設(shè)置為自動(dòng)播放(autoplay=“true”)，自動(dòng)切換時(shí)間間隔為5s(interval=“5000”)，滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)為1s(duration=“10

10、00”)；采用wx:for循環(huán)來(lái)顯示要展示的圖片，從index.js里獲取imgUrls圖片路徑。（2）進(jìn)入到pages/index/index.js文件里，在data對(duì)象里定義imgUrls數(shù)組，存放海報(bào)輪播的圖片路徑。（3）這樣就可以實(shí)現(xiàn)海報(bào)輪播效果，如圖8.19、圖8.20所示。圖8.19海報(bào)輪播一圖8.20海報(bào)輪播二 宮格導(dǎo)航設(shè)計(jì)是很多App軟件都會(huì)采用的一種設(shè)計(jì)方式，我們通過(guò)這種宮格導(dǎo)航設(shè)計(jì)，在首頁(yè)里就給用戶(hù)明確的入口，用戶(hù)可以根據(jù)自己的需要進(jìn)入到相關(guān)界面。 這就是宮格導(dǎo)航的一個(gè)好處，即根據(jù)導(dǎo)航名稱(chēng)進(jìn)入到相應(yīng)的界面，如圖8.21所示。8.4.3宮格導(dǎo)航設(shè)計(jì)圖8.21宮格導(dǎo)航設(shè)計(jì)（1）

11、進(jìn)入到pages/index/index.js文件里，首先準(zhǔn)備好要顯示的圖標(biāo)和導(dǎo)航名稱(chēng)的數(shù)據(jù)值，然后定義變量navs，將數(shù)據(jù)值賦值給navs變量。（2）進(jìn)入到pages/index/index.wxml文件里，進(jìn)行宮格導(dǎo)航的布局，采用wx:for列表渲染的方式將變量navs值循環(huán)顯示出來(lái)，定義綁定事件navBtn。（3）進(jìn)入到pages/index/index.wxss文件里，給宮格導(dǎo)航和間隔線(xiàn)添加相應(yīng)的樣式。（4）在app.json里新配置一個(gè)全部分類(lèi)type頁(yè)面文件路徑，再進(jìn)入到pages/index/index.js文件里，添加navBtn事件用于單擊全部分類(lèi)宮格導(dǎo)航時(shí)，跳轉(zhuǎn)到全部分類(lèi)界

12、面。 這樣就可以實(shí)現(xiàn)宮格導(dǎo)航功能，同時(shí)單擊全部分類(lèi)導(dǎo)航時(shí)會(huì)跳轉(zhuǎn)到全部分類(lèi)界面，如果想單擊其他宮格導(dǎo)航進(jìn)行跳轉(zhuǎn)，也需要配置相應(yīng)的跳轉(zhuǎn)界面。 全部分類(lèi)導(dǎo)航界面集合了中國(guó)婚博會(huì)所有的導(dǎo)航入口，它可以分為3類(lèi)導(dǎo)航：玩轉(zhuǎn)婚博會(huì)導(dǎo)航，有訂喜宴、拍婚照、找婚慶等服務(wù)；特色分類(lèi)導(dǎo)航，有拍寫(xiě)真、美新娘等服務(wù)；我的婚博會(huì)導(dǎo)航，有現(xiàn)金券、邀請(qǐng)函、簽到禮等服務(wù)。這3類(lèi)導(dǎo)航布局方式一樣，可以先設(shè)計(jì)一類(lèi)導(dǎo)航，然后直接進(jìn)行復(fù)用，如圖8.22所示。8.4.4全部分類(lèi)導(dǎo)航設(shè)計(jì)圖8.22全部分類(lèi)界面（1）進(jìn)入到pages/index/type.wxml文件里，先來(lái)設(shè)計(jì)玩轉(zhuǎn)婚博會(huì)這一類(lèi)導(dǎo)航。（2）進(jìn)入到pages/index/ty

13、pe.wxss文件里，給玩轉(zhuǎn)婚博會(huì)這一類(lèi)導(dǎo)航添加樣式，讓它以?xún)尚兴牧械姆绞秸宫F(xiàn)出來(lái)。 界面效果如圖8.23所示。圖8.23玩轉(zhuǎn)婚博會(huì)導(dǎo)航（3）玩轉(zhuǎn)婚博會(huì)導(dǎo)航設(shè)計(jì)完之后，特色分類(lèi)導(dǎo)航可以直接復(fù)制其內(nèi)容，然后在這個(gè)基礎(chǔ)上進(jìn)行修改，進(jìn)入到pages/ index/type.wxml文件，復(fù)制玩轉(zhuǎn)婚博會(huì)區(qū)域，修改成特色分類(lèi)導(dǎo)航內(nèi)容。 界面效果如圖8.24所示。圖8.24特色分類(lèi)導(dǎo)航（4）我的婚博會(huì)導(dǎo)航區(qū)域也用此方法進(jìn)行設(shè)計(jì)，進(jìn)入到pages/ index/type.wxml文件里，復(fù)制玩轉(zhuǎn)婚博會(huì)區(qū)域，修改成我的婚博會(huì)導(dǎo)航內(nèi)容。 界面效果如圖8.25所示。圖8.25我的婚博會(huì)導(dǎo)航（5）進(jìn)入到pages/

14、type/type.json文件里，修改窗口標(biāo)題，具體代碼如下所示：navigationBarTitleText:全部分類(lèi) 微信小程序在開(kāi)發(fā)過(guò)程中總會(huì)遇到相同或者類(lèi)似布局的區(qū)域，這時(shí)就要新設(shè)計(jì)一個(gè)區(qū)域，如果能將其提煉成模板，可以提煉成模板使用；不能的話(huà)，可以直接復(fù)制這個(gè)區(qū)域，在這個(gè)基礎(chǔ)上進(jìn)行修改，從而可以提高開(kāi)發(fā)效率。 很多App都會(huì)采用下拉菜單作為篩選條件，下拉菜單里會(huì)展現(xiàn)出很多篩選條件供用戶(hù)選擇，現(xiàn)金券界面也是采用下拉菜單的方式來(lái)進(jìn)行條件篩選的，它分為兩類(lèi)條件：全部、默認(rèn)。如圖8.26、圖8.27所示。（1）進(jìn)入到pages/index/cash.wxml文件里，使用dl、dt、dd進(jìn)行篩

15、選條件的布局，綁定菜單切換單擊事件tapMainMenu，具體代碼如下所示。8.4.5現(xiàn)金券下拉菜單篩選條件設(shè)計(jì)圖8.26全部篩選條件圖8.27默認(rèn)篩選條件（2）進(jìn)入到pages/index/cash.wxss文件里，給下拉菜單篩選條件添加樣式。界面效果如圖8.28所示。圖8.28篩選條件（3）進(jìn)入到pages/index/cash.js文件里，定義兩個(gè)變量：subMenuDispaly用來(lái)控制兩個(gè)篩選條件內(nèi)容的顯示與隱藏，currentTab用來(lái)控制篩選菜單選中效果，并添加菜單切換事件tapMainMenu。 這樣就可以實(shí)現(xiàn)下拉菜單篩選條件設(shè)計(jì)，單擊篩選條件菜單名稱(chēng)，菜單名稱(chēng)會(huì)呈現(xiàn)為紅色選中

16、效果，同時(shí)顯示出下拉篩選條件選項(xiàng)；單擊另一個(gè)篩選條件菜單時(shí)，會(huì)切換顯示，以達(dá)到一種動(dòng)態(tài)效果。 現(xiàn)金券列表頁(yè)用來(lái)展示商家的現(xiàn)金優(yōu)惠券，列表里包括商家的圖片、商家名稱(chēng)、現(xiàn)金優(yōu)惠額以及申請(qǐng)情況，如圖8.29所示。8.4.6現(xiàn)金券列表頁(yè)設(shè)計(jì)圖8.29現(xiàn)金優(yōu)惠券列表（1）進(jìn)入到pages/index/cash.wxml文件里，先來(lái)設(shè)計(jì)一條商家的現(xiàn)金優(yōu)惠券信息，包括商家圖片、商家名稱(chēng)、現(xiàn)金優(yōu)惠額、申請(qǐng)情況。（2）進(jìn)入到pages/index/cash.wxss文件里，給現(xiàn)金優(yōu)惠券信息添加樣式，將其分為左右兩列，左側(cè)是商家圖片，右側(cè)是現(xiàn)金優(yōu)惠券相關(guān)信息。 界面效果如圖8.30所示。圖8.30現(xiàn)金優(yōu)惠券布局（

17、3）進(jìn)入到pages/index/cash.wxml文件里，復(fù)制設(shè)計(jì)好的現(xiàn)金優(yōu)惠券信息，在這個(gè)基礎(chǔ)上進(jìn)行修改。 界面效果如圖8.31所示。（4）進(jìn)入到pages/cash/cash.json文件里，修改窗口標(biāo)題。圖8.31現(xiàn)金券界面 婚博會(huì)索票界面用來(lái)索要中國(guó)婚博會(huì)門(mén)票，門(mén)票是參加婚博會(huì)的入門(mén)憑證，而索要門(mén)票需要填寫(xiě)自己和愛(ài)人以及婚禮的相關(guān)信息，如圖8.32所示。8.4.7婚博會(huì)索票界面設(shè)計(jì)圖8.32索票表單（1）進(jìn)入到pages/marry/marry.wxml文件里，設(shè)計(jì)婚博會(huì)宣傳海報(bào)和索票按鈕的布局。（2）進(jìn)入到pages/marry/marry.wxss文件里，給索票按鈕添加樣式。 界

18、面效果如圖8.33所示。圖8.33索票按鈕（3）進(jìn)入到pages/marry/marry.wxml文件里，設(shè)計(jì)索票需要填寫(xiě)的表單，需要用到input文本框組件、checkbox多項(xiàng)選擇器組件、button按鈕組件、radio單項(xiàng)選擇器組件、form組件。（4）進(jìn)入到pages/marry/marry.wxss文件里，給表單添加樣式。 界面效果如圖8.34所示。 使用form組件綁定bindsubmit=formSubmit事件，表單項(xiàng)添加name屬性，然后單擊button按鈕綁定form-type=submit屬性就可以提交表單?，F(xiàn)在獲知渠道還沒(méi)有內(nèi)容，單擊獲知渠道會(huì)以彈出層的形式展現(xiàn)出來(lái)。圖8.34索票表單 獲知渠道是以彈出層radio單項(xiàng)選擇器組件的列表展現(xiàn)出來(lái)的，而且只能選擇一種獲知渠道，如圖8.35所示。8.4.8獲知渠道彈出層設(shè)計(jì)圖8.35獲知渠道界面（1）進(jìn)入到pages/marry/marry.wxml文件里，設(shè)計(jì)彈出框布局，并使用radio單項(xiàng)選擇器進(jìn)行列表布局，通過(guò)flag變量來(lái)控制是否顯示彈出層。 （2）進(jìn)入到pages/marry/marry.wxss文件里，給彈出框添加樣式，置于頁(yè)面頂層需要使