本書(shū)通過(guò)8個(gè)典型的實(shí)戰(zhàn)案例,講解了微信小程序的開(kāi)發(fā)方法。內(nèi)容除微信小程序基礎(chǔ)外,還介紹了美食類(lèi)的仿菜譜精靈微信小程序;資訊類(lèi)的仿頭條號(hào)微信小程序;生鮮類(lèi)的仿愛(ài)鮮蜂微信小程序;電影類(lèi)的仿淘票票微信小程序;音樂(lè)類(lèi)的仿酷狗音樂(lè)微信小程序;電商類(lèi)的仿京東購(gòu)物微信小程序;求職類(lèi)的仿拉勾網(wǎng)微信小程序;教育類(lèi)的仿猿題庫(kù)微信小程序等。每個(gè)案例包括需求描述、交互分析、設(shè)計(jì)思路、相關(guān)知識(shí)點(diǎn)以及案例詳細(xì)開(kāi)發(fā)步驟,內(nèi)容全面、講解細(xì)致。
小剛老師本名劉剛,參與過(guò)多個(gè)軟件項(xiàng)目的研發(fā)、設(shè)計(jì)和管理工作,擁有項(xiàng)目管理 師認(rèn)證、項(xiàng)目監(jiān)理師中級(jí)認(rèn)證,出版過(guò)的圖書(shū)有《原型設(shè)計(jì)大師:Axure RP網(wǎng)站與APP設(shè)計(jì)從入門(mén)到精通》《Axure RP原型設(shè)計(jì)圖解微課視頻教程 (Web+App)》;曾在中國(guó)擎天公司、神州軟件子公司任職,在項(xiàng)目管理和項(xiàng)目實(shí) 踐、軟件設(shè)計(jì)等方面經(jīng)驗(yàn)豐富;曾負(fù)責(zé)紀(jì)檢監(jiān)察廉政監(jiān)督監(jiān)管平臺(tái)產(chǎn)品的設(shè)計(jì)與開(kāi) 發(fā)、國(guó)家郵政局項(xiàng)目的設(shè)計(jì)與開(kāi)發(fā)、政務(wù)大數(shù)據(jù)項(xiàng)目的設(shè)計(jì)與開(kāi)發(fā)等。
一章 微信小程序基礎(chǔ) 1
1.1 微信小程序介紹 1
1.1.1 什么是微信小程序 1
1.1.2 微信小程序發(fā)展歷程 1
1.1.3 微信小程序提供的功能 2
1.1.4 微信小程序不提供的功能 3
1.1.5 微信小程序帶來(lái)的機(jī)會(huì) 3
1.2 微信小程序開(kāi)發(fā)工具的使用 4
1.2.1 獲取微信小程序AppID 4
1.2.2 創(chuàng)建一個(gè)微信小程序項(xiàng)目 5
1.2.3 微信開(kāi)發(fā)工具的使用 7
1.3 微信小程序框架文件 14
1.3.1 框架全局配置文件 14
1.3.2 工具類(lèi)文件 19
1.3.3 框架頁(yè)面文件 19
1.4 微信小程序邏輯層 20
1.4.1 App()注冊(cè)程序 20
1.4.2 Page()注冊(cè)頁(yè)面 21
1.5 微信小程序視圖層 22
1.5.1 綁定數(shù)據(jù) 22
1.5.2 條件渲染 24
1.5.3 列表渲染 24
1.5.4 定義模板 25
1.5.5 引用功能 26
1.6 微信小程序組件介紹 27
1.6.1 視圖容器組件 27
1.6.2 基礎(chǔ)內(nèi)容組件 28
1.6.3 表單組件 30
1.6.4 導(dǎo)航組件 33
1.6.5 媒體組件 33
1.6.6 地圖組件 36
1.6.7 畫(huà)布組件 38
1.6.8 客服會(huì)話(huà)按鈕組件 39
1.7 微信小程序API說(shuō)明 39
1.7.1 請(qǐng)求服務(wù)器數(shù)據(jù)API 39
1.7.2 文件上傳與下載API 40
1.7.3 WebSocket會(huì)話(huà)API 41
1.7.4 圖片處理API 43
1.7.5 文件操作API 44
1.7.6 數(shù)據(jù)緩存API 46
1.7.7 位置信息API 49
1.7.8 設(shè)備應(yīng)用API 51
1.7.9 交互反饋API 53
1.7.10 登錄API 55
1.7.11 微信支付API 56
1.7.12 分享API 57
1.8 小結(jié) 57
1.9 實(shí)戰(zhàn)演練 58
二章 美食類(lèi):仿菜譜精靈微信小程序 59
2.1 需求描述及交互分析 59
2.1.1 需求描述 59
2.1.2 交互分析 60
2.2 設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn) 60
2.2.1 設(shè)計(jì)思路 60
2.2.2 相關(guān)知識(shí)點(diǎn) 61
2.3 底部標(biāo)簽導(dǎo)航設(shè)計(jì) 62
2.4 幻燈片輪播效果設(shè)計(jì) 65
2.5 菜譜專(zhuān)題列表式顯示設(shè)計(jì) 67
2.6 菜譜專(zhuān)題詳情設(shè)計(jì) 74
2.7 小結(jié) 78
2.8 實(shí)戰(zhàn)演練 78
第3章 資訊類(lèi):仿頭條號(hào)微信小程序 79
3.1 需求描述及交互分析 79
3.1.1 需求描述 79
3.1.2 交互分析 80
3.2 設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn) 80
3.2.1 設(shè)計(jì)思路 80
3.2.2 相關(guān)知識(shí)點(diǎn) 80
3.3 首頁(yè)新聞?lì)l道框架設(shè)計(jì) 83
3.3.1 底部標(biāo)簽導(dǎo)航設(shè)計(jì) 83
3.3.2 頂部檢索框設(shè)計(jì) 86
3.3.3 新聞?lì)l道滑動(dòng)效果設(shè)計(jì) 87
3.4 首頁(yè)新聞內(nèi)容設(shè)計(jì) 92
3.5 首頁(yè)新聞詳情頁(yè)設(shè)計(jì) 99
3.6 “我的”界面列表式導(dǎo)航設(shè)計(jì) 104
3.7 小結(jié) 113
3.8 實(shí)戰(zhàn)演練 113
第4章 生鮮類(lèi):仿愛(ài)鮮蜂微信小程序 114
4.1 需求描述及交互分析 115
4.1.1 需求描述 115
4.1.2 交互分析 116
4.2 設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn) 116
4.2.1 設(shè)計(jì)思路 116
4.2.2 相關(guān)知識(shí)點(diǎn) 117
4.3 首頁(yè)界面布局設(shè)計(jì) 121
4.3.1 底部標(biāo)簽導(dǎo)航設(shè)計(jì) 121
4.3.2 幻燈片輪播效果設(shè)計(jì) 123
4.3.3 首頁(yè)界面布局設(shè)計(jì) 125
4.4 閃送超市縱向?qū)Ш皆O(shè)計(jì) 135
4.5 添加商品到購(gòu)物車(chē)設(shè)計(jì) 144
4.6 購(gòu)物車(chē)商品顯示設(shè)計(jì) 155
4.7 收貨地址列表式顯示設(shè)計(jì) 165
4.8 小結(jié) 170
4.9 實(shí)戰(zhàn)演練 170
第5章 電影類(lèi):仿淘票票微信小程序 171
5.1 需求描述及交互分析 172
5.1.1 需求描述 172
5.1.2 交互分析 173
5.2 設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn) 174
5.2.1 設(shè)計(jì)思路 174
5.2.2 相關(guān)知識(shí)點(diǎn) 174
5.3 電影界面框架設(shè)計(jì) 177
5.3.1 頂部頁(yè)簽切換效果設(shè)計(jì) 177
5.3.2 底部標(biāo)簽導(dǎo)航設(shè)計(jì) 179
5.4 正在熱映界面布局設(shè)計(jì) 180
5.5 即將上映界面布局設(shè)計(jì) 186
5.6 電影詳情頁(yè)設(shè)計(jì) 194
5.7 “我的”界面列表式導(dǎo)航設(shè)計(jì) 200
5.8 登錄設(shè)計(jì) 208
5.9 電影界面分享 214
5.10 小結(jié) 216
5.11 實(shí)戰(zhàn)演練 217
第6章 音樂(lè)類(lèi):仿酷狗音樂(lè)微信小程序 218
6.1 需求描述及交互分析 219
6.1.1 需求描述 219
6.1.2 交互分析 220
6.2 設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn) 220
6.2.1 設(shè)計(jì)思路 220
6.2.2 相關(guān)知識(shí)點(diǎn) 220
6.3 音樂(lè)首頁(yè)界面布局設(shè)計(jì) 222
6.4 音樂(lè)播放設(shè)計(jì) 234
6.5 本地音樂(lè)頂部頁(yè)簽切換效果
設(shè)計(jì) 240
6.6 單曲列表設(shè)計(jì) 243
6.7 單曲檢索設(shè)計(jì) 251
6.8 小結(jié) 252
6.9 實(shí)戰(zhàn)演練 253
第7章 電商類(lèi):仿京東購(gòu)物微信小程序 254
7.1 需求描述及交互分析 255
7.1.1 需求描述 255
7.1.2 交互分析 256
7.2 設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn) 257
7.2.1 設(shè)計(jì)思路 257
7.2.2 相關(guān)知識(shí)點(diǎn) 257
7.3 搜索商品首界面布局設(shè)計(jì) 258
7.4 搜索商品設(shè)計(jì) 264
7.5 購(gòu)物車(chē)設(shè)計(jì) 272
7.6 我的訂單設(shè)計(jì) 281
7.7 優(yōu)惠券設(shè)計(jì) 284
7.8 小結(jié) 291
7.9 實(shí)戰(zhàn)演練 291
第8章 求職類(lèi):仿拉勾網(wǎng)微信小程序 292
8.1 需求描述及交互分析 293
8.1.1 需求描述 293
8.1.2 交互分析 295
8.2 設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn) 295
8.2.1 設(shè)計(jì)思路 295
8.2.2 相關(guān)知識(shí)點(diǎn) 296
8.3 首頁(yè)招聘信息列表設(shè)計(jì) 297
8.4 言職界面九宮格導(dǎo)航設(shè)計(jì) 307
8.5 “我”界面列表式導(dǎo)航設(shè)計(jì) 311
8.6 完善簡(jiǎn)歷界面布局設(shè)計(jì) 314
8.7 編輯基本信息設(shè)計(jì) 319
8.8 小結(jié) 322
8.9 實(shí)戰(zhàn)演練 323
第9章 教育類(lèi):仿猿題庫(kù)微信小程序 324
9.1 需求描述及交互分析 325
9.1.1 需求描述 325
9.1.2 交互分析 327
9.2 設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn) 328
9.2.1 設(shè)計(jì)思路 328
9.2.2 相關(guān)知識(shí)點(diǎn) 328
9.3 練習(xí)界面九宮格導(dǎo)航設(shè)計(jì) 329
9.4 科目設(shè)置界面設(shè)計(jì) 333
9.5 語(yǔ)文科目練習(xí)界面設(shè)計(jì) 341
9.6 練習(xí)題目界面設(shè)計(jì) 350
9.7 發(fā)現(xiàn)界面列表式導(dǎo)航設(shè)計(jì) 357
9.8 排行榜設(shè)計(jì) 360
9.9 “我”界面列表式導(dǎo)航設(shè)計(jì) 370
9.10 小結(jié) 375
9.11 實(shí)戰(zhàn)演練 375