前言
第1篇 入門與開發(fā)環(huán)境搭建
第1章 首個(gè)小程序——Hello World 2
1.1 項(xiàng)目創(chuàng)建 2
1.1.1 使用IDE創(chuàng)建項(xiàng)目 2
1.1.2 項(xiàng)目結(jié)構(gòu)介紹 3
1.2 UI組件的使用 7
1.2.1 組件介紹 7
1.2.2 前端雜談：attribute與property 9
1.2.3 更新頁(yè)面UI 10
1.3 動(dòng)畫API的使用 11
1.3.1 動(dòng)畫API示例 12
1.3.2 對(duì)比Web動(dòng)畫 13
1.3.3 添加動(dòng)畫效果 13
1.4 本章小結(jié) 15
第2章 工程化小程序開發(fā) 16
2.1 為什么要工程化 16
2.1.1 工程化的好處 16
2.1.2 前端工程化介紹 17
2.2 一步步教你完成webpack配置 21
2.2.1 文件目錄打包 21
2.2.2 ES 6自動(dòng)編譯 27
2.2.3 將測(cè)試文件從代碼包中剔除 29
2.2.4 Sass/Less自動(dòng)編譯 30
2.2.5 小程序熱更新 32
2.3 打造自己的項(xiàng)目模板 34
2.3.1 本地初始化項(xiàng)目 35
2.3.2 創(chuàng)建遠(yuǎn)端項(xiàng)目 37
2.3.3 關(guān)聯(lián)本地項(xiàng)目到遠(yuǎn)端倉(cāng)庫(kù) 39
2.3.4 為模板項(xiàng)目打上tag標(biāo)簽 40
2.3.5 使用模板創(chuàng)建新項(xiàng)目 41
2.4 本章小結(jié) 42
第2篇 項(xiàng)目開發(fā)實(shí)戰(zhàn)
第3章 匯率計(jì)算器 44
3.1 靜態(tài)數(shù)據(jù)展示 44
3.1.1 創(chuàng)建項(xiàng)目 44
3.1.2 頁(yè)面組成分析 44
3.1.3 頁(yè)面搭建 46
3.2 基本功能實(shí)現(xiàn) 52
3.3 基礎(chǔ)貨幣切換 54
3.4 保存用戶設(shè)置 59
3.5 本章小結(jié) 61
第4章 便簽應(yīng)用 63
4.1 基本頁(yè)面搭建 63
4.1.1 頁(yè)面組成分析 63
4.1.2 頁(yè)面搭建 64
4.2 實(shí)現(xiàn)便簽管理 68
4.2.1 接口設(shè)計(jì) 68
4.2.2 接口實(shí)現(xiàn) 69
4.2.3 接口調(diào)用 71
4.3 實(shí)現(xiàn)純文本便簽 73
4.3.1 editor組件簡(jiǎn)介 73
4.3.2 實(shí)現(xiàn)便簽編輯頁(yè)面 74
4.4 實(shí)現(xiàn)富文本編輯 75
4.4.1 editor富文本API介紹 75
4.4.2 實(shí)現(xiàn)頁(yè)面布局 76
4.4.3 實(shí)現(xiàn)富文本樣式 77
4.5 本章小結(jié) 78
第5章 新聞客戶端 79
5.1 功能分析 79
5.2 API獲取及封裝 80
5.2.1 獲取API 80
5.2.2 封裝API調(diào)用函數(shù) 80
5.3 實(shí)現(xiàn)基本的新聞列表 83
5.4 實(shí)現(xiàn)新聞話題切換 86
5.5 使用webview實(shí)現(xiàn)新聞詳情頁(yè) 89
5.6 實(shí)現(xiàn)新聞列表滑動(dòng)切換 91
5.7 自定義新聞標(biāo)簽 95
5.8 本章小結(jié) 102
第6章 2048小游戲（上） 103
6.1 功能分析 103
6.2 基本布局的實(shí)現(xiàn) 103
6.2.1 整體頁(yè)面布局 103
6.2.2 中間的game-panel布局 107
6.3 用戶手勢(shì)檢測(cè) 110
6.4 滑動(dòng)邏輯的實(shí)現(xiàn) 114
6.4.1 抽取Board類用于管理棋盤 114
6.4.2 實(shí)現(xiàn)初始化棋盤邏輯 116
6.4.3 實(shí)現(xiàn)初始化棋盤滑動(dòng)邏輯 117
6.5 方塊合并及新方塊生成的實(shí)現(xiàn) 121
6.5.1 實(shí)現(xiàn)方塊合并 121
6.5.2 新方塊生成 123
6.6 游戲狀態(tài)管理 125
6.6.1 游戲分?jǐn)?shù)計(jì)算 125
6.6.2 游戲結(jié)束處理 127
6.6.3 歷史最高分記錄 130
6.7 UI優(yōu)化 132
6.8 本章小結(jié) 133
第7章 2048小游戲（下） 134
7.1 canvas的使用 134
7.1.1 搭建canvas測(cè)試頁(yè)面 134
7.1.2 在小程序中調(diào)用canvas接口 136
7.2 canvas繪圖API的使用 138
7.2.1 矩形繪制API 138
7.2.2 path的使用 140
7.2.3 曲線繪制 140
7.3 在canvas中實(shí)現(xiàn)動(dòng)畫效果 143
7.4 使用canvas繪制2048靜態(tài)頁(yè)面 146
7.4.1 修改棋盤布局 146
7.4.2 改造Board類 147
7.4.3 繪制棋盤靜態(tài)畫面 148
7.5 繪制動(dòng)畫效果 153
7.5.1 繪制方塊移動(dòng)動(dòng)畫 154
7.5.2 繪制新方塊出現(xiàn)動(dòng)畫 156
7.6 本章小結(jié) 156
第8章 音樂(lè)小程序（上） 157
8.1 準(zhǔn)備工作 157
8.1.1 啟動(dòng)后端服務(wù) 157
8.1.2 創(chuàng)建小程序前端項(xiàng)目 158
8.2 主頁(yè)面基本框架搭建 160
8.2.1 靜態(tài)頂部tab的實(shí)現(xiàn) 160
8.2.2 tab動(dòng)態(tài)切換的實(shí)現(xiàn) 162
8.3 “個(gè)性推薦”tab 164
8.3.1 搭建基本結(jié)構(gòu) 165
8.3.2 “推薦歌單”部分的實(shí)現(xiàn) 167
8.3.3 “最新音樂(lè)”部分的實(shí)現(xiàn) 173
8.3.4 “推薦MV”和“主播電臺(tái)”部分的實(shí)現(xiàn) 176
8.4 “歌單”tab 179
8.4.1 全部歌單列表實(shí)現(xiàn) 179
8.4.2 切換歌單分類 185
8.5 “主播電臺(tái)”tab 190
8.5.1 組件創(chuàng)建 190
8.5.2 實(shí)現(xiàn)“精彩節(jié)目”頁(yè)面 191
8.5.3 實(shí)現(xiàn)“推薦電臺(tái)”頁(yè)面 193
8.5.4 實(shí)現(xiàn)熱門電臺(tái)部分 196
8.6 “排行榜”tab 198
8.6.1 組件創(chuàng)建 198
8.6.2 數(shù)據(jù)獲取 198
8.6.3 排行榜列表的實(shí)現(xiàn) 200
8.7 本章小結(jié) 201
第9章 音樂(lè)小程序（下） 202
9.1 音樂(lè)播放頁(yè) 202
9.1.1 頁(yè)面創(chuàng)建 203
9.1.2 靜態(tài)頁(yè)面展示 204
9.1.3 音頻數(shù)據(jù)獲取 208
9.1.4 音樂(lè)播放控制 210
9.1.5 唱片機(jī)效果實(shí)現(xiàn) 214
9.1.6 音樂(lè)進(jìn)度組件 216
9.1.7 歌詞組件 222
9.2 歌單詳情頁(yè) 230
9.2.1 頁(yè)面創(chuàng)建 230
9.2.2 數(shù)據(jù)獲取 230
9.2.3 靜態(tài)數(shù)據(jù)展示 232
9.2.4 跳轉(zhuǎn)邏輯實(shí)現(xiàn) 239
9.2.5 排行榜詳情頁(yè) 240
9.3 評(píng)論頁(yè) 240
9.3.1 頁(yè)面創(chuàng)建 240
9.3.2 數(shù)據(jù)拉取 241
9.3.3 數(shù)據(jù)展示 242
9.4 MV頁(yè) 251
9.4.1 頁(yè)面創(chuàng)建 251
9.4.2 數(shù)據(jù)獲取 252
9.4.3 基本布局及MV播放 254
9.4.4 “詳情”tab展示 256
9.4.5 “評(píng)論”tab展示 257
9.4.6 “相關(guān)MV”tab展示 258
9.5 用戶詳情頁(yè) 259
9.5.1 頁(yè)面創(chuàng)建 259
9.5.2 數(shù)據(jù)獲取 260
9.5.3 個(gè)人信息展示部分 262
9.5.4 歌單列表部分 265
9.6 電臺(tái)詳情頁(yè) 267
9.6.1 頁(yè)面創(chuàng)建 267
9.6.2 數(shù)據(jù)獲取 268
9.6.3 電臺(tái)信息展示部分 270
9.6.4 節(jié)目列表部分 272
9.7 電臺(tái)節(jié)目播放頁(yè) 273
9.7.1 頁(yè)面創(chuàng)建 273
9.7.2 數(shù)據(jù)獲取 274
9.7.3 電臺(tái)信息展示部分 275
9.8 本章小結(jié) 279
第3篇 難點(diǎn)解析與上線運(yùn)營(yíng)
第10章 小程序開發(fā)難點(diǎn)解析 282
10.1 多圖列表頁(yè)面性能問(wèn)題 282
10.1.1 問(wèn)題分析 282
10.1.2 如何解決 285
10.1.3 總結(jié)思路 288
10.2 代碼包的大小限制 289
10.2.1 如何減少代碼包的大小 289
10.2.2 為什么存在該限制 290
10.3 圖片懶加載問(wèn)題 291
10.3.1 分析解決方案 291
10.3.2 實(shí)現(xiàn)一個(gè)可復(fù)用的懶加載組件 292
10.3.3 測(cè)試使用懶加載組件 295
10.4 頁(yè)面數(shù)量限制問(wèn)題 297
10.4.1 分析目前的問(wèn)題 298
10.4.2 實(shí)現(xiàn)頁(yè)面數(shù)量突破限制 299
10.4.3 測(cè)試效果 302
10.5 本章小結(jié) 304
第11章 小程序上線及運(yùn)營(yíng) 305
11.1 數(shù)據(jù)埋點(diǎn) 305
11.1.1 自定義平臺(tái)數(shù)據(jù)上報(bào) 305
11.1.2 小程序接口數(shù)據(jù)上報(bào) 307
11.2 小程序測(cè)試 310
11.2.1 單元測(cè)試 310
11.2.2 UI適配 316
11.2.3 旁路測(cè)試 318
11.2.4 錯(cuò)誤上報(bào) 320
11.3 小程序運(yùn)營(yíng) 321
11.3.1 提交審核 321
11.3.2 提升用戶黏性 323
11.3.3 廣告接入 324
11.4 本章小結(jié) 327