微信小程序開(kāi)發(fā)實(shí)戰(zhàn)

第1章 微信小程序入門 1
【教學(xué)導(dǎo)航】　1
1．1　初識(shí)微信小程序　1
1．1．1　什么是微信小程序　1
1．1．2　微信小程序的賬號(hào)　3
1．1．3　微信小程序的特點(diǎn)　4
1．1．4　微信小程序的發(fā)展前景　4
1．2　開(kāi)發(fā)環(huán)境搭建　5
1．2．1　注冊(cè)微信公眾號(hào)　5
1．2．2　安裝微信開(kāi)發(fā)者工具　7
1．3　小程序的開(kāi)發(fā)體驗(yàn)　8
1．3．1　創(chuàng)建項(xiàng)目　8
1．3．2　開(kāi)發(fā)者工具的使用　9
1．3．3　目錄結(jié)構(gòu)　11
1．3．4　項(xiàng)目設(shè)置　13
1．3．5　快捷鍵　14
1．4　團(tuán)隊(duì)開(kāi)發(fā)與項(xiàng)目上線　15
1．4．1　項(xiàng)目成員及權(quán)限　15
1．4．2　提交審核及發(fā)布　17
本章小結(jié)　17
課后習(xí)題　17
第2章　微信小程序開(kāi)發(fā)基礎(chǔ)　19
【教學(xué)導(dǎo)航】　19
2．1　【案例1】比較數(shù)字大小　19
2．1．1　案例分析　19
2．1．2　創(chuàng)建項(xiàng)目　20
2．1．3　頁(yè)面組件　21
2．1．4　頁(yè)面樣式　23
2．1．5　配置文件　27
2．1．6　頁(yè)面邏輯　29
2．1．7　注冊(cè)程序　34
2．1．8　實(shí)現(xiàn)比較功能　35
2．2　【案例2】調(diào)查問(wèn)卷　40
2．2．1　案例分析　40
2．2．2　編寫(xiě)表單頁(yè)面　41
2．2．3　服務(wù)器數(shù)據(jù)交互　42
2．2．4　表單數(shù)據(jù)綁定　44
2．3　【案例3】計(jì)算器　46
2．3．1　案例分析　46
2．3．2　編寫(xiě)計(jì)算器頁(yè)面　46
2．3．3　實(shí)現(xiàn)計(jì)算邏輯功能　50
本章小結(jié)　51
課后習(xí)題　51
第3章　“音樂(lè)”小程序項(xiàng)目　53
【教學(xué)導(dǎo)航】　53
3．1　開(kāi)發(fā)前準(zhǔn)備　53
3．1．1　項(xiàng)目展示　53
3．1．2　項(xiàng)目分析　54
3．1．3　項(xiàng)目初始化　55
3．2　【任務(wù)1】標(biāo)簽頁(yè)切換　55
3．2．1　任務(wù)分析　55
3．2．2　前導(dǎo)知識(shí)　56
3．2．3　編寫(xiě)頁(yè)面結(jié)構(gòu)和樣式　58
3．2．4　實(shí)現(xiàn)標(biāo)簽頁(yè)切換　60
3．3　【任務(wù)2】音樂(lè)推薦　61
3．3．1　任務(wù)分析　61
3．3．2　前導(dǎo)知識(shí)　62
3．3．3　內(nèi)容區(qū)域滾動(dòng)　65
3．3．4　輪播圖　66
3．3．5　功能按鈕　67
3．3．6　熱門音樂(lè)　68
3．4　【任務(wù)3】播放器　69
3．4．1　任務(wù)分析　69
3．4．2　前導(dǎo)知識(shí)　70
3．4．3　定義基礎(chǔ)數(shù)據(jù)　72
3．4．4　實(shí)現(xiàn)音樂(lè)播放功能　73
3．4．5　編寫(xiě)播放器頁(yè)面　75
3．4．6　控制播放進(jìn)度　76
3．5　【任務(wù)4】播放列表　78
3．5．1　任務(wù)分析　78
3．5．2　編寫(xiě)頁(yè)面結(jié)構(gòu)和樣式　79
3．5．3　實(shí)現(xiàn)換曲功能　80
本章小結(jié)　80
課后習(xí)題　80
第4章　“婚禮邀請(qǐng)函”小程序
項(xiàng)目　82
【教學(xué)導(dǎo)航】　82
4．1　開(kāi)發(fā)前準(zhǔn)備　82
4．1．1　項(xiàng)目展示　82
4．1．2　項(xiàng)目分析　84
4．1．3　項(xiàng)目初始化　84
4．2　【任務(wù)1】邀請(qǐng)函頁(yè)面　86
4．2．1　任務(wù)分析　86
4．2．2　背景音樂(lè)播放　87
4．2．3　頁(yè)面結(jié)構(gòu)和樣式　89
4．2．4　一鍵撥打電話　91
4．3　【任務(wù)2】照片頁(yè)面　92
4．3．1　任務(wù)分析　92
4．3．2　實(shí)現(xiàn)縱向輪播圖　93
4．4　【任務(wù)3】美好時(shí)光頁(yè)面　93
4．4．1　任務(wù)分析　93
4．4．2　前導(dǎo)知識(shí)　94
4．4．3　編寫(xiě)頁(yè)面結(jié)構(gòu)和樣式　98
4．4．4　利用WXS增強(qiáng)頁(yè)面功能　98
4．5　【任務(wù)4】婚禮地點(diǎn)頁(yè)面　99
4．5．1　任務(wù)分析　99
4．5．2　前導(dǎo)知識(shí)　100
4．5．3　編寫(xiě)婚禮地點(diǎn)頁(yè)面　103
4．6　【任務(wù)5】賓客信息頁(yè)面　103
4．6．1　任務(wù)分析　103
4．6．2　前導(dǎo)知識(shí)　103
4．6．3　編寫(xiě)頁(yè)面結(jié)構(gòu)和樣式　106
4．6．4　表單驗(yàn)證　107
4．6．5　發(fā)送婚禮請(qǐng)?zhí)貜?fù)通知　108
本章小結(jié)　112
課后習(xí)題　112
第5章　API應(yīng)用案例（上）　114
【教學(xué)導(dǎo)航】　114
5．1　【案例1】用戶登錄　114
5．1．1　案例分析　114
5．1．2　前導(dǎo)知識(shí)　115
5．1．3　搭建開(kāi)發(fā)者服務(wù)器　117
5．1．4　實(shí)現(xiàn)用戶登錄　119
5．1．5　檢查用戶是否已經(jīng)登錄　120
5．1．6　獲取用戶信息　121
5．1．7　開(kāi)放數(shù)據(jù)校驗(yàn)與解密　125
5．2　【案例2】個(gè)人中心　127
5．2．1　案例分析　127
5．2．2　前導(dǎo)知識(shí)　129
5．2．3　實(shí)現(xiàn)底部標(biāo)簽頁(yè)切換　131
5．2．4　編輯個(gè)人資料　132
5．2．5　訂單物流查詢　135
5．2．6　選擇收貨地址　137
5．2．7　客服聯(lián)系電話　140
5．3　【案例3】天氣預(yù)報(bào)查詢　141
5．3．1　案例分析　141
5．3．2　前導(dǎo)知識(shí)　141
5．3．3　動(dòng)態(tài)獲取輸入的城市名　142
5．3．4　請(qǐng)求天氣接口數(shù)據(jù)　142
5．3．5　渲染界面展示數(shù)據(jù)　143
5．4　【案例4】查看附近的
美食餐廳　143
5．4．1　案例分析　143
5．4．2　前導(dǎo)知識(shí)　144
5．4．3　設(shè)計(jì)地圖界面　147
5．4．4　單擊控件回到中心點(diǎn)　149
5．4．5　視野變化獲取中心點(diǎn)坐標(biāo)　149
本章小結(jié)　150
課后習(xí)題　150
第6章　API應(yīng)用案例（下）　152
【教學(xué)導(dǎo)航】　152
6．1　【案例5】模擬時(shí)鐘　152
6．1．1　案例分析　152
6．1．2　前導(dǎo)知識(shí)　153
6．1．3　鐘表頁(yè)面布局　156
6．1．4　鐘表頁(yè)面繪制　157
6．2　【案例6】羅盤動(dòng)畫(huà)　160
6．2．1　案例分析　160
6．2．2　前導(dǎo)知識(shí)　160
6．2．3　設(shè)計(jì)羅盤界面布局　161
6．2．4　手指觸摸旋轉(zhuǎn)羅盤　162
6．2．5　單擊按鈕操作羅盤　163
6．3　【案例7】文件上傳與下載　165
6．3．1　案例分析　165
6．3．2　前導(dǎo)知識(shí)　165
6．3．3　錄音和上傳　167
6．3．4　文件的下載　168
6．4　【案例8】在線聊天系統(tǒng)　169
6．4．1　案例分析　169
6．4．2　前導(dǎo)知識(shí)　170
6．4．3　編寫(xiě)Node．js服務(wù)器端代碼　172
6．4．4　實(shí)現(xiàn)通信功能　173
6．4．5　編寫(xiě)聊天頁(yè)面　174
本章小結(jié)　177
課后習(xí)題　177
第7章　小程序開(kāi)發(fā)框架　179
【教學(xué)導(dǎo)航】　179
7．1　小程序模塊化開(kāi)發(fā)　179
7．1．1　模塊　179
7．1．2　模板　180
7．1．3　自定義組件　181
7．1．4　插件　184
7．2　小程序基礎(chǔ)樣式庫(kù)—
WeUI　187
7．2．1　初識(shí)WeUI　187
7．2．2　【案例】電影信息展示　187
7．3　使用Vue．js開(kāi)發(fā)小程序—
mpvue　192
7．3．1　初識(shí)mpvue　192
7．3．2　開(kāi)發(fā)工具　192
7．3．3　項(xiàng)目結(jié)構(gòu)　194
7．3．4　【案例】計(jì)數(shù)器　195
7．4　小程序組件化開(kāi)發(fā)框架—
WePY　196
7．4．1　初識(shí)WePY　197
7．4．2　開(kāi)發(fā)工具　197
7．4．3　項(xiàng)目結(jié)構(gòu)　198
7．4．4　【案例】商品展示　200
本章小結(jié)　201
課后習(xí)題　202
第8章　綜合項(xiàng)目—點(diǎn)餐
系統(tǒng)　203
【教學(xué)導(dǎo)航】　203
8．1　開(kāi)發(fā)前準(zhǔn)備　203
8．1．1　項(xiàng)目展示　203
8．1．2　項(xiàng)目分析　205
8．1．3　項(xiàng)目初始化　205
8．1．4　封裝網(wǎng)絡(luò)請(qǐng)求　207
8．2　【任務(wù)1】商家首頁(yè)　208
8．2．1　任務(wù)分析　208
8．2．2　焦點(diǎn)圖切換　208
8．2．3　中間區(qū)域單擊跳轉(zhuǎn)到菜單列表　209
8．2．4　底部商品展示　210
8．3　【任務(wù)2】菜單列表　210
8．3．1　任務(wù)分析　210
8．3．2　折扣信息區(qū)　211
8．3．3　設(shè)計(jì)菜單列表布局　211
8．3．4　請(qǐng)求數(shù)據(jù)　213
8．3．5　實(shí)現(xiàn)菜單欄聯(lián)動(dòng)單品列表功能　213
8．4　【任務(wù)3】購(gòu)物車　214
8．4．1　任務(wù)分析　214
8．4．2　設(shè)計(jì)底部購(gòu)物車區(qū)域　214
8．4．3　添加商品到購(gòu)物車　215
8．4．4　購(gòu)物車界面　216
8．4．5　增加商品數(shù)量　218
8．4．6　減少商品數(shù)量　218
8．4．7　清空購(gòu)物車　218
8．4．8　滿減優(yōu)惠　219
8．4．9　跳轉(zhuǎn)到訂單確認(rèn)頁(yè)面　219
8．5　【任務(wù)4】訂單確認(rèn)　220
8．5．1　任務(wù)分析　220
8．5．2　訂單信息　220
8．5．3　備注功能實(shí)現(xiàn)　221
8．5．4　支付功能　222
8．5．5　支付成功返回訂單列表　223
8．6　【任務(wù)5】訂單詳情　224
8．6．1　任務(wù)分析　224
8．6．2　取餐部分信息展示　225
8．6．3　訂單詳情部分　225
8．6．4　訂單信息部分　226
8．7　【任務(wù)6】訂單列表　227
8．7．1　任務(wù)分析　227
8．7．2　訂單列表設(shè)計(jì)　227
8．7．3　封裝數(shù)據(jù)請(qǐng)求　228
8．7．4　初始化頁(yè)面　229
8．7．5　下拉刷新功能　229
8．7．6　上拉觸底功能　230
8．8　【任務(wù)7】消費(fèi)記錄　230
8．8．1　任務(wù)分析　230
8．8．2　設(shè)計(jì)消費(fèi)記錄列表　231
本章小結(jié)　232
課后習(xí)題　232