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