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