一章　微信小程序基礎(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　微信小程序帶來的機會　3 
1．2　微信小程序開發(fā)工具的使用　4 
1．2．1　獲取微信小程序AppID　4 
1．2．2　創(chuàng)建一個微信小程序項目　5 
1．2．3　微信開發(fā)工具的使用　7 
1．3　微信小程序框架文件　14 
1．3．1　框架全局配置文件　14 
1．3．2　工具類文件　19 
1．3．3　框架頁面文件　19 
1．4　微信小程序邏輯層　20 
1．4．1　App()注冊程序　20 
1．4．2　Page()注冊頁面　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　畫布組件　38 
1．6．8　客服會話按鈕組件　39 
1．7　微信小程序API說明　39 
1．7．1　請求服務(wù)器數(shù)據(jù)API　39 
1．7．2　文件上傳與下載API　40 
1．7．3　WebSocket會話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　實戰(zhàn)演練　58 
二章　美食類：仿菜譜精靈微信小程序　59 
2．1　需求描述及交互分析　59 
2．1．1　需求描述　59 
2．1．2　交互分析　60 
2．2　設(shè)計思路及相關(guān)知識點　60 
2．2．1　設(shè)計思路　60 
2．2．2　相關(guān)知識點　61 
2．3　底部標(biāo)簽導(dǎo)航設(shè)計　62 
2．4　幻燈片輪播效果設(shè)計　65 
2．5　菜譜專題列表式顯示設(shè)計　67 
2．6　菜譜專題詳情設(shè)計　74 
2．7　小結(jié)　78 
2．8　實戰(zhàn)演練　78 
第3章　資訊類：仿頭條號微信小程序　79 
3．1　需求描述及交互分析　79 
3．1．1　需求描述　79 
3．1．2　　交互分析　80 
3．2　設(shè)計思路及相關(guān)知識點　80 
3．2．1　設(shè)計思路　80 
3．2．2　相關(guān)知識點　80 
3．3　首頁新聞頻道框架設(shè)計　83 
3．3．1　底部標(biāo)簽導(dǎo)航設(shè)計　83 
3．3．2　頂部檢索框設(shè)計　86 
3．3．3　新聞頻道滑動效果設(shè)計　87 
3．4　首頁新聞內(nèi)容設(shè)計　92 
3．5　首頁新聞詳情頁設(shè)計　99 
3．6　“我的”界面列表式導(dǎo)航設(shè)計　104 
3．7　小結(jié)　113 
3．8　實戰(zhàn)演練　113 
第4章　生鮮類：仿愛鮮蜂微信小程序　114 
4．1　需求描述及交互分析　115 
4．1．1　需求描述　115 
4．1．2　交互分析　116 
4．2　設(shè)計思路及相關(guān)知識點　116 
4．2．1　設(shè)計思路　116 
4．2．2　相關(guān)知識點　117 
4．3　首頁界面布局設(shè)計　121 
4．3．1　底部標(biāo)簽導(dǎo)航設(shè)計　121 
4．3．2　幻燈片輪播效果設(shè)計　123 
4．3．3　首頁界面布局設(shè)計　125 
4．4　閃送超市縱向?qū)Ш皆O(shè)計　135 
4．5　添加商品到購物車設(shè)計　144 
4．6　購物車商品顯示設(shè)計　155 
4．7　收貨地址列表式顯示設(shè)計　165 
4．8　小結(jié)　170 
4．9　實戰(zhàn)演練　170 
第5章　電影類：仿淘票票微信小程序　171 
5．1　需求描述及交互分析　172 
5．1．1　需求描述　172 
5．1．2　交互分析　173 
5．2　設(shè)計思路及相關(guān)知識點　174 
5．2．1　設(shè)計思路　174 
5．2．2　相關(guān)知識點　174 
5．3　電影界面框架設(shè)計　177 
5．3．1　頂部頁簽切換效果設(shè)計　177 
5．3．2　底部標(biāo)簽導(dǎo)航設(shè)計　179 
5．4　正在熱映界面布局設(shè)計　180 
5．5　即將上映界面布局設(shè)計　186 
5．6　電影詳情頁設(shè)計　194 
5．7　“我的”界面列表式導(dǎo)航設(shè)計　200 
5．8　登錄設(shè)計　208 
5．9　電影界面分享　214 
5．10　小結(jié)　216 
5．11　實戰(zhàn)演練　217 
第6章　音樂類：仿酷狗音樂微信小程序　218 
6．1　需求描述及交互分析　219 
6．1．1　需求描述　219 
6．1．2　交互分析　220 
6．2　設(shè)計思路及相關(guān)知識點　220 
6．2．1　設(shè)計思路　220 
6．2．2　相關(guān)知識點　220 
6．3　音樂首頁界面布局設(shè)計　222 
6．4　音樂播放設(shè)計　234 
6．5　本地音樂頂部頁簽切換效果 
設(shè)計　240 
6．6　單曲列表設(shè)計　243 
6．7　單曲檢索設(shè)計　251 
6．8　小結(jié)　252 
6．9　　實戰(zhàn)演練　253 
第7章　電商類：仿京東購物微信小程序　254 
7．1　需求描述及交互分析　255 
7．1．1　需求描述　255 
7．1．2　交互分析　256 
7．2　設(shè)計思路及相關(guān)知識點　257 
7．2．1　設(shè)計思路　257 
7．2．2　相關(guān)知識點　257 
7．3　搜索商品首界面布局設(shè)計　258 
7．4　搜索商品設(shè)計　264 
7．5　購物車設(shè)計　272 
7．6　我的訂單設(shè)計　281 
7．7　優(yōu)惠券設(shè)計　284 
7．8　小結(jié)　291 
7．9　實戰(zhàn)演練　291 
第8章　求職類：仿拉勾網(wǎng)微信小程序　292 
8．1　需求描述及交互分析　293 
8．1．1　需求描述　293 
8．1．2　交互分析　295 
8．2　設(shè)計思路及相關(guān)知識點　295 
8．2．1　設(shè)計思路　295 
8．2．2　相關(guān)知識點　296 
8．3　首頁招聘信息列表設(shè)計　297 
8．4　言職界面九宮格導(dǎo)航設(shè)計　307 
8．5　“我”界面列表式導(dǎo)航設(shè)計　311 
8．6　完善簡歷界面布局設(shè)計　314 
8．7　編輯基本信息設(shè)計　319 
8．8　小結(jié)　322 
8．9　　實戰(zhàn)演練　323 
第9章　教育類：仿猿題庫微信小程序　324 
9．1　需求描述及交互分析　325 
9．1．1　需求描述　325 
9．1．2　交互分析　327 
9．2　設(shè)計思路及相關(guān)知識點　328 
9．2．1　設(shè)計思路　328 
9．2．2　相關(guān)知識點　328 
9．3　練習(xí)界面九宮格導(dǎo)航設(shè)計　329 
9．4　科目設(shè)置界面設(shè)計　333 
9．5　語文科目練習(xí)界面設(shè)計　341 
9．6　練習(xí)題目界面設(shè)計　350 
9．7　發(fā)現(xiàn)界面列表式導(dǎo)航設(shè)計　357 
9．8　排行榜設(shè)計　360 
9．9　“我”界面列表式導(dǎo)航設(shè)計　370 
9．10　小結(jié)　375 
9．11　實戰(zhàn)演練　375