本書系統(tǒng)講解小程序全棧項目開發(fā)所需的前后端技術(shù)。全書共分為3個部分,第一部分以實操的方式全面介紹小程序頁面開發(fā)、事件處理、API調(diào)用、云函數(shù)、云數(shù)據(jù)庫等基礎(chǔ)概念,第二部分以相冊、博客、問卷小程序為例介紹如何規(guī)劃、開發(fā)一個完整的小程序項目,第三部分提出云函數(shù)、云數(shù)據(jù)庫、云調(diào)用的開發(fā)指引及性能優(yōu)化建議。
本書將詳細的操作步驟、完整的代碼、復雜的技術(shù)概念以及科學的學習方法緊密結(jié)合,充分做到讓讀者從零基礎(chǔ)起步,不需要具備其他前置編程技術(shù)背景知識就能掌握小程序云開發(fā)方法,從而開發(fā)出完整的全棧項目,非常適合零基礎(chǔ)技術(shù)愛好者、前端開發(fā)初學者閱讀。
小程序憑借輕便、靈活、推廣速度快等特點逐漸受到開發(fā)者的青睞,而云開發(fā)可以為Web開發(fā)、小程序開發(fā)、移動應用開發(fā)等提供可靠、豐富的一站式后端能力,幫助開發(fā)者快速開發(fā)多端應用。
本書將“小程序”和“云開發(fā)”相結(jié)合,系統(tǒng)地講解了小程序全棧項目開發(fā)的前后端技術(shù),并通過豐富的實踐案例詮釋了開發(fā)小程序的方法和過程。
本書特點
● 由淺入深,快速上手:本書將詳細的操作步驟、完整的代碼、復雜的技術(shù)概念與科學的學習方法緊密結(jié)合,降低學習門檻,讓不具備任何前置編程知識的讀者快速上手。
● 案例豐富,妙趣橫生:本書從小程序前端的頁面開發(fā)、事件處理、API調(diào)用等技術(shù)概念,講到相冊、博客、問卷小程序等實踐案例,內(nèi)容豐富,輕松有趣。
● 循序漸進,表達清晰:本書語言通俗易懂,步驟清晰明確,讓讀者可以快速做出成果。
● 配套資源豐富:附贈源代碼和視頻
李東,騰訊云云開發(fā)布道師、全棧開發(fā)工程師,擅長數(shù)據(jù)分析、小程序開發(fā)等,致力于互聯(lián)網(wǎng)技術(shù)和技能的普及,在教學方面有豐富的經(jīng)驗。
目 錄
第 一部分 小程序快速入門與實戰(zhàn)
第 1章 云開發(fā)快速入門 2
1.1 云開發(fā)簡介 2
1.1.1 云開發(fā)是什么 2
1.1.2 為什么要學習云開發(fā) 3
1.2 項目的創(chuàng)建與配置 4
1.2.1 注冊微信小程序 4
1.2.2 開發(fā)者工具與云開發(fā)文檔 5
1.2.3 創(chuàng)建云開發(fā)模板小程序 7
1.2.4 云開發(fā)項目初始化 9
1.2.5 兩個可視化控制臺 13
1.3 云函數(shù)的配置與部署 16
1.3.1 云函數(shù)的開發(fā)環(huán)境 16
1.3.2 部署并上傳云函數(shù) 18
1.3.3 npm包管理器與依賴 19
1.3.4 體驗QuickStart小程序 20
1.4 開始一個云開發(fā)項目 23
1.4.1 開始一個云開發(fā)項目的準備回顧 23
1.4.2 云開發(fā)QuickStart小程序改造 24
1.4.3 讓傳統(tǒng)小程序項目支持云開發(fā) 24
1.4.4 云函數(shù)的同步 25
第 2章 小程序頁面開發(fā) 26
2.1 頁面結(jié)構(gòu)與配置 26
2.1.1 文件結(jié)構(gòu)和頁面組成 26
2.1.2 小程序的全局配置 27
2.1.3 新建小程序頁面 29
2.1.4 了解配置項的書寫方式 30
2.1.5 配置tabBar配置項 32
2.1.6 小程序的頁面配置 35
2.2 WXML與WXSS 36
2.2.1 編輯WXML文件 36
2.2.2 WXSS選擇器 38
2.2.3 CSS參考手冊 39
2.2.4 字體屬性與文本屬性 40
2.2.5 盒模型 42
2.3 鏈接和圖片 44
2.3.1 navigator組件 44
2.3.2 image組件 46
2.3.3 云存儲 47
2.3.4 尺寸單位rpx 47
2.3.5 圖片的裁剪 48
2.3.6 背景屬性 49
2.3.7 圖片的邊框美化 50
2.3.8 view、navigator、image組件嵌套 51
2.4 WeUI 53
2.4.1 體驗WeUI小程序 53
2.4.2 WeUI的使用 55
2.4.3 Flex布局 55
2.4.4 全局樣式與局部樣式 58
2.4.5 Flex樣式參考 58
2.4.6 使用WeUI美化文章排版 58
2.4.7 WeUI框架的核心與延伸 60
2.4.8 模板樣式的更改 61
2.5 數(shù)據(jù)綁定 62
2.5.1 把數(shù)據(jù)分離出來 63
2.5.2 數(shù)據(jù)類型 63
2.5.3 組件屬性的渲染 64
2.5.4 字符串與數(shù)字 65
2.5.5 渲染數(shù)組里的單條數(shù)據(jù) 65
2.5.6 渲染對象類型的數(shù)據(jù) 66
2.5.7 復雜的數(shù)據(jù)嵌套 67
2.6 列表渲染 69
2.6.1 渲染數(shù)組里的所有數(shù)據(jù) 69
2.6.2 電影列表頁面 70
2.6.3 Grid九宮格樣式參考 72
2.6.4 List樣式參考 75
2.7 條件渲染 76
2.7.1 渲染的運算與邏輯判斷 76
2.7.2. 布爾運算的渲染 79
2.7.3 hidden的用法 81
2.7.4 多條件判斷與三元運算符 82
2.8 小程序的組件 83
2.8.1 組件的屬性 83
2.8.2 輪播效果 84
2.8.3 audio組件 85
2.8.4 video組件 86
2.8.5 cover效果 86
2.9 優(yōu)化與部署 87
2.9.1 開發(fā)者工具的使用 87
2.9.2 小程序的轉(zhuǎn)發(fā)功能 89
2.9.3 小程序配置的細節(jié) 90
2.9.4 禁止頁面下拉 91
2.9.5 自定義頂部導航欄 91
2.9.6 模板 92
2.9.7 小程序的客服 93
2.9.8 web-view 94
第3章 JavaScript基礎(chǔ) 95
3.1 JavaScript基礎(chǔ)入門 95
3.1.1 數(shù)學運算 95
3.1.2 Console.log輸出日志 96
3.1.3 輸出數(shù)組 96
3.1.4 輸出對象 97
3.1.5 變量與賦值 97
3.1.6 操作數(shù)組 99
3.1.7 操作對象 100
3.1.8 常量 101
3.1.9 字符串的操作 101
3.1.10 Math對象 102
3.1.11 Date對象 103
3.2 小程序API實戰(zhàn) 103
3.2.1 全局對象wx 103
3.2.2 控制臺實戰(zhàn)小程序API 104
3.2.3 API的可用性判斷與權(quán)限 107
3.3 單擊事件 109
3.3.1 頁面滾動 109
3.3.2 消息提示框Toast 111
3.3.3 模態(tài)對話框 112
3.3.4 手機振動 114
3.3.5 彈出操作菜單 115
3.3.6 頁面路由 116
3.4 頁面渲染 118
3.4.1 將變量值渲染到頁面 118
3.4.2 響應的數(shù)據(jù)綁定 120
3.4.3 響應的布爾操作 121
3.4.4 響應的數(shù)組操作 122
3.4.5 currentTarget事件對象 123
3.5 攜帶數(shù)據(jù)與跨頁面渲染 125
3.5.1 鏈接攜帶數(shù)據(jù) 125
3.5.2 數(shù)據(jù)跨頁面 127
3.5.3 組件攜帶數(shù)據(jù)dataset 129
3.6 生命周期 131
3.6.1 構(gòu)造器 131
3.6.2 生命周期函數(shù) 135
3.7 小程序函數(shù)與調(diào)用 138
3.7.1 函數(shù)與調(diào)用函數(shù) 138
3.7.2 匿名函數(shù)與箭頭函數(shù) 140
3.7.3 對象的方法 141
3.7.4 給構(gòu)造器添加函數(shù)或數(shù)據(jù)變量 142
3.8 語法進階 145
3.8.1 模板字符串 145
3.8.2 解構(gòu)賦值 145
3.8.3 擴展運算符 146
3.8.4 回調(diào)函數(shù)與回調(diào)函數(shù)的寫法 147
3.8.5 模塊化 149
第4章 云函數(shù)入門 151
4.1 云函數(shù)快速入門 151
4.1.1 云函數(shù)的新建與調(diào)用 151
4.1.2 云函數(shù)的初始化 155
4.1.3 開發(fā)者工具右鍵操作說明 157
4.2 本地調(diào)試與云端測試 158
4.2.1 云函數(shù)的開發(fā)流程 158
4.2.2 return與console 161
4.2.3 云函數(shù)的監(jiān)控 165
4.3 云函數(shù)的調(diào)用與返回 166
4.3.1 云函數(shù)的傳參與返回 166
4.3.2 不同調(diào)用方式下的event與context 168
4.3.3 main函數(shù)與return 171
4.4 云函數(shù)的配置與進階 173
4.4.1 云函數(shù)的環(huán)境變量 173
4.4.2 內(nèi)存與超時時間 176
4.4.3 云函數(shù)模塊與實例復用 177
4.4.4 云函數(shù)調(diào)用進階 179
第5章 云數(shù)據(jù)庫入門 182
5.1 云數(shù)據(jù)庫基礎(chǔ)知識 182
5.1.1 云數(shù)據(jù)庫的基礎(chǔ)知識 182
5.1.2 數(shù)據(jù)庫的導出與導入 184
5.2 云數(shù)據(jù)庫快速上手 187
5.2.1 權(quán)限的設(shè)置 187
5.2.2 小程序端調(diào)用數(shù)據(jù)庫 189
5.2.3. 云函數(shù)端調(diào)用數(shù)據(jù)庫 190
5.2.4 獲取數(shù)據(jù)的寫法 191
5.3 數(shù)據(jù)查詢與統(tǒng)計 193
5.3.1 快速了解數(shù)據(jù)查詢 193
5.3.2 構(gòu)建查詢條件的5個方法 194
5.3.3 統(tǒng)計記錄 196
5.3.4 數(shù)據(jù)查詢需要注意的問題 196
5.4 查詢操作符 198
5.4.1 查詢操作符基礎(chǔ) 198
5.4.2 比較操作符 200
5.4.3 邏輯操作符 201
5.4.4 字段操作符 202
5.4.5 字段字符串的模糊查詢 203
5.5 操作集合里的記錄 204
5.5.1 新增記錄add 204
5.5.2 刪除與更新多條記錄 206
5.6 操作記錄里的字段 208
5.6.1 權(quán)限限制與替代寫法 208
5.6.2 操作單個記錄doc的字段值 209
5.7 更新操作符 212
5.7.1 更新操作符介紹 213
5.7.2 使用更新操作符操作字段 214
5.7.3 原子操作與高并發(fā) 214
5.8 數(shù)組的查詢更新操作符 215
5.8.1 查詢操作符和更新操作符一覽 215
5.8.2 查詢操作符和更新操作符 216
5.9 操作嵌套數(shù)組對象 219
5.9.1 普通數(shù)組和對象的查詢與更新 219
5.9.2 匹配和更新多重嵌套的數(shù)組和對象 221
5.9.3 更新數(shù)組中所有匹配的元素之$[] 222
5.9.4 更新數(shù)組中第 一個匹配到的元素之$ 224
5.10 數(shù)據(jù)庫變量處理 226
5.10.1 集合名、記錄_id、字段值變量 226
5.10.2 數(shù)據(jù)庫請求的變量 227
5.10.3 字段名稱為變量 228
第6章 聚合查詢 229
6.1 聚合快速入門 229
6.1.1 聚合查詢與普通數(shù)據(jù)查詢 229
6.1.2 聚合的基礎(chǔ)知識 231
6.1.3 云數(shù)據(jù)庫命令與SQL語句對應理解 234
6.2 聚合階段 234
6.2.1 聚合階段介紹 234
6.2.2 聚合階段實戰(zhàn) 236
6.2.3 簡單的排名案例 245
6.3 操作符入門 246
6.3.1 算術(shù)操作符 247
6.3.2 累計器操作符 249
第二部分 云開發(fā)項目實戰(zhàn)
第7章 云存儲與相冊小程序 255
7.1 小程序端圖片操作 255
7.1.1 獲取手機相冊或拍照的圖片 256
7.1.2 操作圖片 259
7.1.3 保存圖片到相冊 261
7.2 小程序端文件操作 263
7.2.1 小程序端上傳文件 263
7.2.2 上傳地理位置 265
7.2.3 下載文件 266
7.2.4 預覽文檔 268
7.2.5 保存文件與文件緩存 269
7.3 數(shù)據(jù)緩存Storage 271
7.3.1 將圖片存儲到緩存里 271
7.3.2 將數(shù)據(jù)存儲到緩存里 273
7.4 云存儲快速入門 277
7.4.1 上傳文件到云存儲 277
7.4.2 下載和刪除云存儲里的文件 280
7.4.3 云函數(shù)上傳圖片到云存儲 281
7.4.4 獲取文件在云存儲的HTTPS鏈接 283
7.4.5 fileID是云存儲與數(shù)據(jù)庫的紐帶 283
7.5 創(chuàng)建個人相冊 284
7.5.1 數(shù)據(jù)庫的設(shè)計與結(jié)構(gòu) 284
7.5.2 UI與文件結(jié)構(gòu) 286
7.5.3 建立用戶與數(shù)據(jù)的聯(lián)系 288
7.5.4 獲取用戶信息并存儲到數(shù)據(jù)庫 290
7.5.5 獲取相冊文件夾數(shù)據(jù) 293
7.6 相冊文件夾管理 295
7.6.1 相冊文件夾的表現(xiàn)形式 295
7.6.2 相冊/文件夾的渲染 298
7.6.3 UI交互與相冊/文件夾的創(chuàng)建 300
7.7 照片文件管理 303
7.7.1 數(shù)組的索引與交互 303
7.7.2 上傳單個文件到文件夾 304
第8章 前后端交互與博客小程序 308
8.1 網(wǎng)絡(luò)API 308
8.1.1 數(shù)據(jù)API 309
8.1.2 小程序端獲取網(wǎng)絡(luò)數(shù)據(jù) 310
8.1.3 云函數(shù)端獲取數(shù)據(jù) 312
8.2 渲染網(wǎng)絡(luò)數(shù)據(jù)到頁面 313
8.2.1 將數(shù)據(jù)渲染到頁面 313
8.2.2 詳情頁數(shù)據(jù)渲染 315
8.2.3 HTML標簽解析rich-text 317
8.2.4 跨頁面數(shù)據(jù)渲染 317
8.3 文章列表與詳情頁 317
8.3.1 數(shù)據(jù)庫的范式化設(shè)計 317
8.3.2 聯(lián)表與跨表 321
8.4 用戶與文章交互 325
8.4.1 訪問數(shù)據(jù)與文章瀏覽量 325
8.4.2 數(shù)據(jù)一致性與緩存 327
8.4.3 收藏數(shù)與用戶收藏 330
第9章 表單與問卷小程序 332
9.1 表單的基礎(chǔ)知識 332
9.1.1 設(shè)置導航欄標題 333
9.1.2 文本輸入框input 335
9.1.3 添加手機聯(lián)系人 336
9.1.4 input綁定事件處理函數(shù) 338
9.1.5 剪貼板 339
9.2 表單組件與組合 341
9.2.1 表單組件快速入門 341
9.2.2 slider響應設(shè)置顏色 345
9.2.3 picker組件 346
9.3 表單的提交與渲染 349
9.3.1 表單數(shù)據(jù)的提交 349
9.3.2 表單的渲染 354
9.4 問卷小程序 356
9.4.1 問卷的數(shù)據(jù)庫設(shè)計 356
9.4.2 不同類型題目的渲染與提交 358
第三部分 云開發(fā)進階
第 10章 用云函數(shù)實現(xiàn)后端能力 363
10.1 云函數(shù)的模塊知識 363
10.1.1 Node.js的內(nèi)置模塊 363
10.1.2 Node的全局對象 364
10.1.3 wx-server-sdk的模塊 367
10.1.4 第三方模塊 367
10.1.5 云函數(shù)的運行機制 368
10.2 文件系統(tǒng)的操作 369
10.2.1 讀取云函數(shù)服務(wù)端的文件 369
10.2.2 文件操作模塊介紹 370
10.2.3操作臨時磁盤空間 372
10.2.4 云函數(shù)與Buffer 373
10.3 云函數(shù)實用工具庫 375
10.3.1 時間處理 375
10.3.2 加解密Crypto 377
10.3.3 lodash實用工具庫 378
10.4 Excel文檔處理 379
10.4.1 讀取云存儲的Excel文件 379
10.4.2 將數(shù)據(jù)庫里的數(shù)據(jù)保存為CSV 381
10.4.3 導入Excel更多數(shù)據(jù)的解決方法 383
10.4.4 將Excel文件一鍵轉(zhuǎn)成云數(shù)據(jù)庫的json文件 384
10.5 HTTP處理 385
10.5.1 get請求 386
10.5.2 post請求 387
10.5.3 使用axios下載文件 388
10.6 云函數(shù)路由tcb-router 389
10.6.1 tcb-router快速入門 389
10.6.2 tcb-router管理數(shù)據(jù)庫的增刪改查 391
第 11章 云數(shù)據(jù)庫的高階用法 395
11.1 數(shù)據(jù)庫的管理 395
11.1.1 控制臺數(shù)據(jù)庫高級操作 395
11.1.2 數(shù)據(jù)庫腳本的實際應用 396
11.1.3 數(shù)據(jù)庫的導入導出 398
11.1.4 使用回檔進行數(shù)據(jù)備份 399
11.2 安全規(guī)則 400
11.2.1 {openid}變量 400
11.2.2 安全規(guī)則的寫法 402
11.2.3 身份驗證 405
11.2.4 安全規(guī)則常用場景 409
11.2.5 數(shù)據(jù)驗證doc的規(guī)則匹配 410
11.3 數(shù)據(jù)庫的設(shè)計 413
11.3.1 數(shù)據(jù)庫的設(shè)計 413
11.3.2 反范式化與范式化設(shè)計 414
11.3.3 內(nèi)嵌文檔(內(nèi)嵌數(shù)組或?qū)ο螅?416
11.3.4 引用文檔 418
11.3.5 數(shù)據(jù)庫設(shè)計的注意事項 421
11.4 索引 423
11.4.1 索引的類型與管理 424
11.4.2 索引的創(chuàng)建說明 426
11.4.3 索引的原則與注意事項 427
11.5 數(shù)據(jù)庫性能與優(yōu)化 429
11.5.1 數(shù)據(jù)庫性能與優(yōu)化建議 429
11.5.2 數(shù)據(jù)庫設(shè)計以及處理的優(yōu)化建議 434
11.5.3 慢查詢與告警 436
第 12章 云調(diào)用 438
12.1 云調(diào)用快速入門 438
12.1.1 云調(diào)用基礎(chǔ) 438
12.1.2 云函數(shù)的配置文件 439
12.2 定時觸發(fā)器 440
12.2.1 定時觸發(fā)器使用說明 441
12.2.2 用定時觸發(fā)器調(diào)用云函數(shù) 443
12.2.3 定時觸發(fā)器的應用 445
12.3 訂閱消息 447
12.3.1 獲取訂閱消息授權(quán) 447
12.3.2 發(fā)送訂閱消息方式說明 454
12.3.3 使用云調(diào)用發(fā)送訂閱消息 457
12.3.4 使用定時觸發(fā)器發(fā)訂閱消息 461
12.4 CloudID 461
12.4.1 獲取微信步數(shù) 462
12.4.2 獲取用戶手機號 463
12.4.3 獲取微信群ID和群名稱 464
12.5 客服消息 468
12.5.1 客服消息的配置與說明 469
12.5.2 自動回復文本消息和鏈接 470
12.5.3 自動觸發(fā)event事件 474
12.5.4 自動回復圖片 475
12.6 微信支付 477
12.6.1 云支付快速入門 477
12.6.2 查詢訂單與申請退款 481
12.6.3 支付成功的回調(diào)函數(shù) 483