微信小程序雲開發 快速入門與實踐

李东，腾讯云云开发布道师、全栈开发工程师，擅长数据分析、小程序开发等，致力于互联网技术和技能的普及，在教学方面有丰富的经验。

目 錄

第 一部分 小程序快速入門與實戰

第 1章 雲開發快速入門 2

1.1 雲開發簡介 2

1.1.1 雲開發是什麽 2

1.1.2 為什麽要學習雲開發 3

1.2 項目的創建與配置 4

1.2.1 註冊微信小程序 4

1.2.2 開發者工具與雲開發文檔 5

1.2.3 創建雲開發模板小程序 7

1.2.4 雲開發項目初始化 9

1.2.5 兩個可視化控制台 13

1.3 雲函數的配置與部署 16

1.3.1 雲函數的開發環境 16

1.3.2 部署並上傳雲函數 18

1.3.3 npm包管理器與依賴 19

1.3.4 體驗QuickStart小程序 20

1.4 開始一個雲開發項目 23

1.4.1 開始一個雲開發項目的準備回顧 23

1.4.2 雲開發QuickStart小程序改造 24

1.4.3 讓傳統小程序項目支持雲開發 24

1.4.4 雲函數的同步 25

第 2章 小程序頁面開發 26

2.1 頁面結構與配置 26

2.1.1 文件結構和頁面組成 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 數據綁定 62

2.5.1 把數據分離出來 63

2.5.2 數據類型 63

2.5.3 組件屬性的渲染 64

2.5.4 字符串與數字 65

2.5.5 渲染數組里的單條數據 65

2.5.6 渲染對象類型的數據 66

2.5.7 復雜的數據嵌套 67

2.6 列表渲染 69

2.6.1 渲染數組里的所有數據 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 優化與部署 87

2.9.1 開發者工具的使用 87

2.9.2 小程序的轉發功能 89

2.9.3 小程序配置的細節 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基礎 95

3.1 JavaScript基礎入門 95

3.1.1 數學運算 95

3.1.2 Console.log輸出日誌 96

3.1.3 輸出數組 96

3.1.4 輸出對象 97

3.1.5 變量與賦值 97

3.1.6 操作數組 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實戰 103

3.2.1 全局對象wx 103

3.2.2 控制台實戰小程序API 104

3.2.3 API的可用性判斷與權限 107

3.3 單擊事件 109

3.3.1 頁面滾動 109

3.3.2 消息提示框Toast 111

3.3.3 模態對話框 112

3.3.4 手機振動 114

3.3.5 彈出操作菜單 115

3.3.6 頁面路由 116

3.4 頁面渲染 118

3.4.1 將變量值渲染到頁面 118

3.4.2 響應的數據綁定 120

3.4.3 響應的布爾操作 121

3.4.4 響應的數組操作 122

3.4.5 currentTarget事件對象 123

3.5 攜帶數據與跨頁面渲染 125

3.5.1 鏈接攜帶數據 125

3.5.2 數據跨頁面 127

3.5.3 組件攜帶數據dataset 129

3.6 生命周期 131

3.6.1 構造器 131

3.6.2 生命周期函數 135

3.7 小程序函數與調用 138

3.7.1 函數與調用函數 138

3.7.2 匿名函數與箭頭函數 140

3.7.3 對象的方法 141

3.7.4 給構造器添加函數或數據變量 142

3.8 語法進階 145

3.8.1 模板字符串 145

3.8.2 解構賦值 145

3.8.3 擴展運算符 146

3.8.4 回調函數與回調函數的寫法 147

3.8.5 模塊化 149

第4章 雲函數入門 151

4.1 雲函數快速入門 151

4.1.1 雲函數的新建與調用 151

4.1.2 雲函數的初始化 155

4.1.3 開發者工具右鍵操作說明 157

4.2 本地調試與雲端測試 158

4.2.1 雲函數的開發流程 158

4.2.2 return與console 161

4.2.3 雲函數的監控 165

4.3 雲函數的調用與返回 166

4.3.1 雲函數的傳參與返回 166

4.3.2 不同調用方式下的event與context 168

4.3.3 main函數與return 171

4.4 雲函數的配置與進階 173

4.4.1 雲函數的環境變量 173

4.4.2 內存與超時時間 176

4.4.3 雲函數模塊與實例復用 177

4.4.4 雲函數調用進階 179

第5章 雲數據庫入門 182

5.1 雲數據庫基礎知識 182

5.1.1 雲數據庫的基礎知識 182

5.1.2 數據庫的導出與導入 184

5.2 雲數據庫快速上手 187

5.2.1 權限的設置 187

5.2.2 小程序端調用數據庫 189

5.2.3. 雲函數端調用數據庫 190

5.2.4 獲取數據的寫法 191

5.3 數據查詢與統計 193

5.3.1 快速瞭解數據查詢 193

5.3.2 構建查詢條件的5個方法 194

5.3.3 統計記錄 196

5.3.4 數據查詢需要註意的問題 196

5.4 查詢操作符 198

5.4.1 查詢操作符基礎 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 權限限制與替代寫法 208

5.6.2 操作單個記錄doc的字段值 209

5.7 更新操作符 212

5.7.1 更新操作符介紹 213

5.7.2 使用更新操作符操作字段 214

5.7.3 原子操作與高並發 214

5.8 數組的查詢更新操作符 215

5.8.1 查詢操作符和更新操作符一覽 215

5.8.2 查詢操作符和更新操作符 216

5.9 操作嵌套數組對象 219

5.9.1 普通數組和對象的查詢與更新 219

5.9.2 匹配和更新多重嵌套的數組和對象 221

5.9.3 更新數組中所有匹配的元素之$[] 222

5.9.4 更新數組中第 一個匹配到的元素之$ 224

5.10 數據庫變量處理 226

5.10.1 集合名、記錄_id、字段值變量 226

5.10.2 數據庫請求的變量 227

5.10.3 字段名稱為變量 228

第6章 聚合查詢 229

6.1 聚合快速入門 229

6.1.1 聚合查詢與普通數據查詢 229

6.1.2 聚合的基礎知識 231

6.1.3 雲數據庫命令與SQL語句對應理解 234

6.2 聚合階段 234

6.2.1 聚合階段介紹 234

6.2.2 聚合階段實戰 236

6.2.3 簡單的排名案例 245

6.3 操作符入門 246

6.3.1 算術操作符 247

6.3.2 累計器操作符 249

第二部分 雲開發項目實戰

第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 數據緩存Storage 271

7.3.1 將圖片存儲到緩存里 271

7.3.2 將數據存儲到緩存里 273

7.4 雲存儲快速入門 277

7.4.1 上傳文件到雲存儲 277

7.4.2 下載和刪除雲存儲里的文件 280

7.4.3 雲函數上傳圖片到雲存儲 281

7.4.4 獲取文件在雲存儲的HTTPS鏈接 283

7.4.5 fileID是雲存儲與數據庫的紐帶 283

7.5 創建個人相冊 284

7.5.1 數據庫的設計與結構 284

7.5.2 UI與文件結構 286

7.5.3 建立用戶與數據的聯系 288

7.5.4 獲取用戶信息並存儲到數據庫 290

7.5.5 獲取相冊文件夾數據 293

7.6 相冊文件夾管理 295

7.6.1 相冊文件夾的表現形式 295

7.6.2 相冊/文件夾的渲染 298

7.6.3 UI交互與相冊/文件夾的創建 300

7.7 照片文件管理 303

7.7.1 數組的索引與交互 303

7.7.2 上傳單個文件到文件夾 304

第8章 前後端交互與博客小程序 308

8.1 網絡API 308

8.1.1 數據API 309

8.1.2 小程序端獲取網絡數據 310

8.1.3 雲函數端獲取數據 312

8.2 渲染網絡數據到頁面 313

8.2.1 將數據渲染到頁面 313

8.2.2 詳情頁數據渲染 315

8.2.3 HTML標簽解析rich-text 317

8.2.4 跨頁面數據渲染 317

8.3 文章列表與詳情頁 317

8.3.1 數據庫的範式化設計 317

8.3.2 聯表與跨表 321

8.4 用戶與文章交互 325

8.4.1 訪問數據與文章瀏覽量 325

8.4.2 數據一致性與緩存 327

8.4.3 收藏數與用戶收藏 330

第9章 表單與問捲小程序 332

9.1 表單的基礎知識 332

9.1.1 設置導航欄標題 333

9.1.2 文本輸入框input 335

9.1.3 添加手機聯系人 336

9.1.4 input綁定事件處理函數 338

9.1.5 剪貼板 339

9.2 表單組件與組合 341

9.2.1 表單組件快速入門 341

9.2.2 slider響應設置顏色 345

9.2.3 picker組件 346

9.3 表單的提交與渲染 349

9.3.1 表單數據的提交 349

9.3.2 表單的渲染 354

9.4 問捲小程序 356

9.4.1 問捲的數據庫設計 356

9.4.2 不同類型題目的渲染與提交 358

第三部分 雲開發進階

第 10章 用雲函數實現後端能力 363

10.1 雲函數的模塊知識 363

10.1.1 Node.js的內置模塊 363

10.1.2 Node的全局對象 364

10.1.3 wx-server-sdk的模塊 367

10.1.4 第三方模塊 367

10.1.5 雲函數的運行機制 368

10.2 文件系統的操作 369

10.2.1 讀取雲函數服務端的文件 369

10.2.2 文件操作模塊介紹 370

10.2.3操作臨時磁盤空間 372

10.2.4 雲函數與Buffer 373

10.3 雲函數實用工具庫 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 將數據庫里的數據保存為CSV 381

10.4.3 導入Excel更多數據的解決方法 383

10.4.4 將Excel文件一鍵轉成雲數據庫的json文件 384

10.5 HTTP處理 385

10.5.1 get請求 386

10.5.2 post請求 387

10.5.3 使用axios下載文件 388

10.6 雲函數路由tcb-router 389

10.6.1 tcb-router快速入門 389

10.6.2 tcb-router管理數據庫的增刪改查 391

第 11章 雲數據庫的高階用法 395

11.1 數據庫的管理 395

11.1.1 控制台數據庫高級操作 395

11.1.2 數據庫腳本的實際應用 396

11.1.3 數據庫的導入導出 398

11.1.4 使用回檔進行數據備份 399

11.2 安全規則 400

11.2.1 {openid}變量 400

11.2.2 安全規則的寫法 402

11.2.3 身份驗證 405

11.2.4 安全規則常用場景 409

11.2.5 數據驗證doc的規則匹配 410

11.3 數據庫的設計 413

11.3.1 數據庫的設計 413

11.3.2 反範式化與範式化設計 414

11.3.3 內嵌文檔（內嵌數組或對象） 416

11.3.4 引用文檔 418

11.3.5 數據庫設計的註意事項 421

11.4 索引 423

11.4.1 索引的類型與管理 424

11.4.2 索引的創建說明 426

11.4.3 索引的原則與註意事項 427

11.5 數據庫性能與優化 429

11.5.1 數據庫性能與優化建議 429

11.5.2 數據庫設計以及處理的優化建議 434

11.5.3 慢查詢與告警 436

第 12章 雲調用 438

12.1 雲調用快速入門 438

12.1.1 雲調用基礎 438

12.1.2 雲函數的配置文件 439

12.2 定時觸發器 440

12.2.1 定時觸發器使用說明 441

12.2.2 用定時觸發器調用雲函數 443

12.2.3 定時觸發器的應用 445

12.3 訂閱消息 447

12.3.1 獲取訂閱消息授權 447

12.3.2 發送訂閱消息方式說明 454

12.3.3 使用雲調用發送訂閱消息 457

12.3.4 使用定時觸發器發訂閱消息 461

12.4 CloudID 461

12.4.1 獲取微信步數 462

12.4.2 獲取用戶手機號 463

12.4.3 獲取微信群ID和群名稱 464

12.5 客服消息 468

12.5.1 客服消息的配置與說明 469

12.5.2 自動回復文本消息和鏈接 470

12.5.3 自動觸發event事件 474

12.5.4 自動回復圖片 475

12.6 微信支付 477

12.6.1 雲支付快速入門 477

12.6.2 查詢訂單與申請退款 481

12.6.3 支付成功的回調函數 483