第 1章 微信小程序入門 1 1.1　初識(shí)微信小程序 1 1.1.1　什么是微信小程序 2 1.1.2　微信小程序的特點(diǎn) 2 1.1.3　微信小程序的發(fā)展前景 3 1.1.4　微信小程序的宿主環(huán)境 4 1.2　微信小程序開發(fā)前準(zhǔn)備 5 1.2.1　注冊(cè)微信小程序開發(fā)賬號(hào) 5 1.2.2　獲取微信小程序AppID 8 1.2.3　安裝微信開發(fā)者工具 9 1.2.4　創(chuàng)建微信小程序項(xiàng)目 10 1.3　微信小程序開發(fā)基礎(chǔ) 12 1.3.1　微信小程序的項(xiàng)目結(jié)構(gòu) 12 1.3.2　微信小程序的頁面組成 12 1.3.3　微信小程序的通信模型 13 1.4　微信開發(fā)者工具的使用 13 1.4.1　認(rèn)識(shí)微信開發(fā)者工具 13 1.4.2　微信小程序的項(xiàng)目設(shè)置 17 1.4.3　微信小程序開發(fā)常用快捷鍵 18 1.5　微信小程序的項(xiàng)目成員 20 1.5.1　項(xiàng)目成員的組織結(jié)構(gòu) 20 1.5.2　項(xiàng)目成員的分工 21 1.5.3　項(xiàng)目成員和體驗(yàn)成員的管理 21 1.5.4　項(xiàng)目成員的權(quán)限 22 1.5.5　添加項(xiàng)目成員和體驗(yàn)成員 23 1.6　微信小程序的發(fā)布上線 24 1.6.1　微信小程序的版本 24 1.6.2　微信小程序的上線流程 25 本章小結(jié) 27 課后練習(xí) 27 第 2章 微信小程序頁面制作 29 【案例2-1】個(gè)人信息 29 案例分析 30 知識(shí)儲(chǔ)備 30
1. WXML簡(jiǎn)介 30
2. WXSS簡(jiǎn)介 31
3. 常用組件 31
4. 頁面路徑配置 31
5. view組件 32
6. image組件 33
7. rpx單位 35
8. 樣式導(dǎo)入 35 案例實(shí)現(xiàn) 36 【案例2-2】本地生活 37 案例分析 37 知識(shí)儲(chǔ)備 38
1. swiper和swiper-item組件 38
2. text組件 39
3. Flex布局 40 案例實(shí)現(xiàn) 42 【案例2-3】婚禮邀請(qǐng)函 45 案例分析 45 知識(shí)儲(chǔ)備 47
1. 導(dǎo)航欄配置 47
2. 標(biāo)簽欄配置 47
3. vw、vh單位 49
4. video組件 49
5. 表單組件 50 案例實(shí)現(xiàn) 54 本章小結(jié) 64 課后練習(xí) 64 第3章 微信小程序頁面交互 65 【案例3-1】比較數(shù)字大小 66 案例分析 66 知識(shí)儲(chǔ)備 66
1. Page( )函數(shù) 66
2. 數(shù)據(jù)綁定 68
3. 事件綁定 69
4. 事件對(duì)象 70
5. this關(guān)鍵字 71
6. setData( )方法 71
7. 條件渲染 72
8. 標(biāo)簽 72
9. hidden屬性 73 案例實(shí)現(xiàn) 73 【案例3-2】計(jì)算器 75 案例分析 75 知識(shí)儲(chǔ)備 76
1. data-*自定義屬性 76
2. 模塊 77 案例實(shí)現(xiàn) 77 【案例3-3】美食列表 85 案例分析 85 知識(shí)儲(chǔ)備 86
1. 列表渲染 86
2. 網(wǎng)絡(luò)請(qǐng)求 87
3. 提示框 88
4. WXS 89
5. 上拉觸底 91
6. 下拉刷新 91 案例實(shí)現(xiàn) 92 【案例3-4】調(diào)查問卷 97 案例分析 98 知識(shí)儲(chǔ)備 98
雙向數(shù)據(jù)綁定 98 案例實(shí)現(xiàn) 98 本章小結(jié) 102 課后練習(xí) 102 第4章 微信小程序常用API（上） 104 【案例4-1】音樂播放器 104 案例分析 104 知識(shí)儲(chǔ)備 106
1. scroll-view組件 106
2. slider組件 107
3. 標(biāo)簽 108
4. 背景音頻API 109 案例實(shí)現(xiàn) 110 【案例4-2】錄音機(jī) 121 案例分析 121 知識(shí)儲(chǔ)備 122
1. 錄音API 122
2. 音頻API 123 案例實(shí)現(xiàn) 124 【案例4-3】頭像上傳下載 127 案例分析 128 知識(shí)儲(chǔ)備 128
1. 選擇媒體API 128
2. 圖片預(yù)覽API 129
3. 文件上傳API 130
4. 文件下載API 131 案例實(shí)現(xiàn) 131 【案例4-4】模擬時(shí)鐘 134 案例分析 134 知識(shí)儲(chǔ)備 134
1. canvas組件 134
2. 畫布API 135 案例實(shí)現(xiàn) 137 本章小結(jié) 142 課后練習(xí) 143 第5章 微信小程序常用API（下） 144 【案例5-1】羅盤動(dòng)畫 144 案例分析 144 知識(shí)儲(chǔ)備 145
動(dòng)畫API 145 案例實(shí)現(xiàn) 147 【案例5-2】用戶登錄 151 案例分析 151 知識(shí)儲(chǔ)備 151
1. 登錄流程時(shí)序 151
2. 登錄API 153
3. 數(shù)據(jù)緩存API 154
4. 頭像昵稱填寫 155
5. App( )函數(shù) 157 案例實(shí)現(xiàn) 158 【案例5-3】查看附近美食餐廳 162 案例分析 163 知識(shí)儲(chǔ)備 163
1. 騰訊地圖SDK 163
2. map組件 168
3. 地圖API 169
4. 位置API 170
5. 路由API 170 案例實(shí)現(xiàn) 172 【案例5-4】在線聊天 176 案例分析 176 知識(shí)儲(chǔ)備 177
1. WebSocket API 177
2. SocketTask 178 案例實(shí)現(xiàn) 179 本章小結(jié) 184 課后練習(xí) 184 第6章 綜合項(xiàng)目——“點(diǎn)餐”微信小程序 186 【任務(wù)6-1】項(xiàng)目開發(fā)準(zhǔn)備 186 開發(fā)背景 186 項(xiàng)目模塊劃分 187 項(xiàng)目初始化 187 【任務(wù)6-2】封裝網(wǎng)絡(luò)請(qǐng)求 189 任務(wù)分析 189 任務(wù)實(shí)現(xiàn) 189 【任務(wù)6-3】用戶登錄 192 任務(wù)分析 192 任務(wù)實(shí)現(xiàn) 193 【任務(wù)6-4】商家首頁 196 任務(wù)分析 196 任務(wù)實(shí)現(xiàn) 196 【任務(wù)6-5】菜單列表頁 201 任務(wù)分析 201 任務(wù)實(shí)現(xiàn) 202 【任務(wù)6-6】購(gòu)物車 209 任務(wù)分析 209 任務(wù)實(shí)現(xiàn) 210 【任務(wù)6-7】訂單確認(rèn)頁 220 任務(wù)分析 220 任務(wù)實(shí)現(xiàn) 220 【任務(wù)6-8】訂單詳情頁 227 任務(wù)分析 227 任務(wù)實(shí)現(xiàn) 228 【任務(wù)6-9】訂單列表頁 231 任務(wù)分析 231 任務(wù)實(shí)現(xiàn) 232 【任務(wù)6-10】消費(fèi)記錄頁 238 任務(wù)分析 238 任務(wù)實(shí)現(xiàn) 238 本章小結(jié) 241 課后練習(xí) 241 第7章 微信小程序開發(fā)進(jìn)階 243 【案例7-1】自定義標(biāo)簽欄 243 案例分析 244 知識(shí)儲(chǔ)備 245
1. 創(chuàng)建自定義組件 245
2. 使用自定義組件 246
3. 使用自定義組件渲染標(biāo)簽欄 247
4. Vant Weapp組件庫(kù) 248 案例實(shí)現(xiàn) 249 【案例7-2】電影列表 253 案例分析 253 知識(shí)儲(chǔ)備 254
1. WeUI組件庫(kù) 254
2. navigator組件 256 案例實(shí)現(xiàn) 257 【案例7-3】待辦事項(xiàng) 262 案例分析 262 知識(shí)儲(chǔ)備 263
1. uni-app框架概述 263
2. HBuilder X開發(fā)工具 264
3. 創(chuàng)建uni-app項(xiàng)目 265
4. uni-app項(xiàng)目的目錄結(jié)構(gòu) 266
5. 將uni-app項(xiàng)目運(yùn)行至微信小程序 266
6. uni-app項(xiàng)目的全局配置文件 267 案例實(shí)現(xiàn) 268 本章小結(jié) 272 課后練習(xí) 272 第8章 uni-app項(xiàng)目——“短視頻”微信小程序 274 【任務(wù)8-1】項(xiàng)目開發(fā)準(zhǔn)備 274 項(xiàng)目展示 274 項(xiàng)目初始化 276 【任務(wù)8-2】公共頭部區(qū)域 277 任務(wù)分析 277 任務(wù)實(shí)現(xiàn) 277 【任務(wù)8-3】導(dǎo)航欄區(qū)域 279 任務(wù)分析 279 任務(wù)實(shí)現(xiàn) 279 【任務(wù)8-4】輪播圖區(qū)域 281 任務(wù)分析 281 任務(wù)實(shí)現(xiàn) 281 【任務(wù)8-5】視頻列表區(qū)域 283 任務(wù)分析 283 任務(wù)實(shí)現(xiàn) 283 【任務(wù)8-6】視頻詳情頁 285 任務(wù)分析 285 任務(wù)實(shí)現(xiàn) 286 本章小結(jié) 292 課后練習(xí) 292