一章　微信小程式基礎　1

1.1　微信小程式介紹　1

1.1.1　什麼是微信小程式　1

1.1.2　微信小程式發展歷程　1

1.1.3　微信小程式提供的功能　2

1.1.4　微信小程式不提供的功能　3

1.1.5　微信小程式帶來的機會　3

1.2　微信小程式開發工具的使用　4

1.2.1　獲取微信小程式AppID　4

1.2.2　創建一個微信小程式專案　5

1.2.3　微信開發工具的使用　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　綁定數據　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　請求伺服器資料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　數據緩存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　實戰演練　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　實戰演練　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　實戰演練　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　實戰演練　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　實戰演練　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　　實戰演練　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　優惠券設計　284

7.8　小結　291

7.9　實戰演練　291

第8章　求職類：仿拉勾網微信小程式　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　　實戰演練　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　發現介面清單式導航設計　357

9.8　排行榜設計　360

9.9　“我”介面清單式導航設計　370

9.10　小結　375

9.11　實戰演練　375