微信小程序開發實戰（第2版）

黑马程序员，传智教育旗下高端IT教育品牌，由中国Java培训先行者人张孝祥老师发起，联合全球最大的中文IT社区CSDN、中关村软件园共同创办的一家专业教育机构。办学至今，我们一直坚守着“为千万人少走弯路而著书，为中华软件之崛起而讲课”的办学理念，坚持培养优秀软件应用工程师的宏伟目标，在累计培养的十万余名学员中，其中90%的学员均已在北、上、广等一线城市高薪就业。为了迎合软件市场的需求，我们陆续开设了Java、网页平面、PHP、.Net、iOS、C/C++、Android等9个专业方向的课程，并且未来将逐渐开设其他专业方向的课程。随着传智播客的日益壮大，除了北京总部，我们在上海、广州、武汉、成都、深圳等地也创立了直营分支机构，传智播客俨然已成为了国内具有专业口碑的IT教育机构。

第 1章 微信小程序入門 1

1.1　初識微信小程序 1

1.1.1　什麽是微信小程序 2

1.1.2　微信小程序的特點 2

1.1.3　微信小程序的發展前景 3

1.1.4　微信小程序的宿主環境 4

1.2　微信小程序開發前準備 5

1.2.1　註冊微信小程序開發賬號 5

1.2.2　獲取微信小程序AppID 8

1.2.3　安裝微信開發者工具 9

1.2.4　創建微信小程序項目 10

1.3　微信小程序開發基礎 12

1.3.1　微信小程序的項目結構 12

1.3.2　微信小程序的頁面組成 12

1.3.3　微信小程序的通信模型 13

1.4　微信開發者工具的使用 13

1.4.1　認識微信開發者工具 13

1.4.2　微信小程序的項目設置 17

1.4.3　微信小程序開發常用快捷鍵 18

1.5　微信小程序的項目成員 20

1.5.1　項目成員的組織結構 20

1.5.2　項目成員的分工 21

1.5.3　項目成員和體驗成員的管理 21

1.5.4　項目成員的權限 22

1.5.5　添加項目成員和體驗成員 23

1.6　微信小程序的發布上線 24

1.6.1　微信小程序的版本 24

1.6.2　微信小程序的上線流程 25

本章小結 27

課後練習 27

第 2章 微信小程序頁面製作 29

【案例2-1】個人信息 29

案例分析 30

知識儲備 30

　1. WXML簡介 30

　2. WXSS簡介 31

　3. 常用組件 31

　4. 頁面路徑配置 31

　5. view組件 32

　6. image組件 33

　7. rpx單位 35

　8. 樣式導入 35

案例實現 36

【案例2-2】本地生活 37

案例分析 37

知識儲備 38

　1. swiper和swiper-item組件 38

　2. text組件 39

　3. Flex佈局 40

案例實現 42

【案例2-3】婚禮邀請函 45

案例分析 45

知識儲備 47

　1. 導航欄配置 47

　2. 標簽欄配置 47

　3. vw、vh單位 49

　4. video組件 49

　5. 表單組件 50

案例實現 54

本章小結 64

課後練習 64

第3章 微信小程序頁面交互 65

【案例3-1】比較數字大小 66

案例分析 66

知識儲備 66

　1. Page( )函數 66

　2. 數據綁定 68

　3. 事件綁定 69

　4. 事件對象 70

　5. this關鍵字 71

　6. setData( )方法 71

　7. 條件渲染 72

　8. 標簽 72

　9. hidden屬性 73

案例實現 73

【案例3-2】計算器 75

案例分析 75

知識儲備 76

　1. data-*自定義屬性 76

　2. 模塊 77

案例實現 77

【案例3-3】美食列表 85

案例分析 85

知識儲備 86

　1. 列表渲染 86

　2. 網絡請求 87

　3. 提示框 88

　4. WXS 89

　5. 上拉觸底 91

　6. 下拉刷新 91

案例實現 92

【案例3-4】調查問捲 97

案例分析 98

知識儲備 98

　雙向數據綁定 98

案例實現 98

本章小結 102

課後練習 102

第4章 微信小程序常用API（上） 104

【案例4-1】音樂播放器 104

案例分析 104

知識儲備 106

　1. scroll-view組件 106

　2. slider組件 107

　3. 標簽 108

　4. 背景音頻API 109

案例實現 110

【案例4-2】錄音機 121

案例分析 121

知識儲備 122

　1. 錄音API 122

　2. 音頻API 123

案例實現 124

【案例4-3】頭像上傳下載 127

案例分析 128

知識儲備 128

　1. 選擇媒體API 128

　2. 圖片預覽API 129

　3. 文件上傳API 130

　4. 文件下載API 131

案例實現 131

【案例4-4】模擬時鐘 134

案例分析 134

知識儲備 134

　1. canvas組件 134

　2. 畫布API 135

案例實現 137

本章小結 142

課後練習 143

第5章 微信小程序常用API（下） 144

【案例5-1】羅盤動畫 144

案例分析 144

知識儲備 145

　動畫API 145

案例實現 147

【案例5-2】用戶登錄 151

案例分析 151

知識儲備 151

　1. 登錄流程時序 151

　2. 登錄API 153

　3. 數據緩存API 154

　4. 頭像昵稱填寫 155

　5. App( )函數 157

案例實現 158

【案例5-3】查看附近美食餐廳 162

案例分析 163

知識儲備 163

　1. 騰訊地圖SDK 163

　2. map組件 168

　3. 地圖API 169

　4. 位置API 170

　5. 路由API 170

案例實現 172

【案例5-4】在線聊天 176

案例分析 176

知識儲備 177

　1. WebSocket API 177

　2. SocketTask 178

案例實現 179

本章小結 184

課後練習 184

第6章 綜合項目——“點餐”微信小程序 186

【任務6-1】項目開發準備 186

開發背景 186

項目模塊劃分 187

項目初始化 187

【任務6-2】封裝網絡請求 189

任務分析 189

任務實現 189

【任務6-3】用戶登錄 192

任務分析 192

任務實現 193

【任務6-4】商家首頁 196

任務分析 196

任務實現 196

【任務6-5】菜單列表頁 201

任務分析 201

任務實現 202

【任務6-6】購物車 209

任務分析 209

任務實現 210

【任務6-7】訂單確認頁 220

任務分析 220

任務實現 220

【任務6-8】訂單詳情頁 227

任務分析 227

任務實現 228

【任務6-9】訂單列表頁 231

任務分析 231

任務實現 232

【任務6-10】消費記錄頁 238

任務分析 238

任務實現 238

本章小結 241

課後練習 241

第7章 微信小程序開發進階 243

【案例7-1】自定義標簽欄 243

案例分析 244

知識儲備 245

　1. 創建自定義組件 245

　2. 使用自定義組件 246

　3. 使用自定義組件渲染標簽欄 247

　4. Vant Weapp組件庫 248

案例實現 249

【案例7-2】電影列表 253

案例分析 253

知識儲備 254

　1. WeUI組件庫 254

　2. navigator組件 256

案例實現 257

【案例7-3】待辦事項 262

案例分析 262

知識儲備 263

　1. uni-app框架概述 263

　2. HBuilder X開發工具 264

　3. 創建uni-app項目 265

　4. uni-app項目的目錄結構 266

　5. 將uni-app項目運行至微信小程序 266

　6. uni-app項目的全局配置文件 267

案例實現 268

本章小結 272

課後練習 272

第8章 uni-app項目——“短視頻”微信小程序 274

【任務8-1】項目開發準備 274

項目展示 274

項目初始化 276

【任務8-2】公共頭部區域 277

任務分析 277

任務實現 277

【任務8-3】導航欄區域 279

任務分析 279

任務實現 279

【任務8-4】輪播圖區域 281

任務分析 281

任務實現 281

【任務8-5】視頻列表區域 283

任務分析 283

任務實現 283

【任務8-6】視頻詳情頁 285

任務分析 285

任務實現 286

本章小結 292

課後練習 292