循序漸進微信小程序全棧項目實踐
陳偉華、雷磊
相關主題
商品描述
"《循序漸進微信小程序全棧項目實踐》以微信小程序全棧開發為核心，通過實戰項目，循序漸進地系統講解小程序從基礎搭建到高級應用的全流程技術。內容涵蓋環境配置、頁面開發、數據綁定、組件化設計、雲開發（數據庫/存儲/雲函數）、Skyline渲染優化、多端編譯等核心模塊，並融入Vant組件庫、新版API（掃碼/定位/授權）等前沿技術。全書以微信小程序項目的“文章評論系統”和“電影詳情頁”兩大模塊為主線，結合業務場景拆解技術難點，如異步數據處理、權限管理、性能調優等，提供大廠開發經驗與避坑指南。 《循序漸進微信小程序全棧項目實踐》註重“技術為業務服務”的實踐理念，適合希望系統掌握微信小程序開發、提升工程化能力的初學者，欲突破“增刪改查”階段，學習性能優化、雲開發等高階技能的初級前端開發者，Web開發者或後端工程師可通過《循序漸進微信小程序全棧項目實踐》掌握小程序生態與跨端開發能力，《循序漸進微信小程序全棧項目實踐》還適用於培訓機構和高校微信小程序課程的教學用書。"
作者簡介
"陳偉華副教授，武漢大學碩士，信息系統項目管理師，襄陽職業技術學院技能名師。從事軟件開發與教學研究20余年，曾任職於多家大型互聯網企業。主要研究方向為計算機可視化與人工智能，主持/參與省級及以上教科研項目10余項，主編/參編教材10余部，發表學術論文30余篇。2022-2023年牽頭湖北省職業院校《數據結構與算法分析》《企業級項目開發》課程標準研制工作。雷磊計算機高級工程師，15年軟件開發經驗。曾就職於武漢中地數碼（GIS領域）、京東1號店及卷皮網，現為技術創業者。慕課網年度暢銷課程講師，主導的小程序組件庫及Vue CMS開源項目在GitHub累計獲超10,000 Stars，技術方案被廣泛實踐，培養眾多軟件行業從業者。"
目錄大綱
目 錄
第 1 章 小程序環境搭建與開發工具介紹 1
1.1 認識微信小程序 1
1.1.1 什麼是微信小程序 1
1.1.2 小程序與原生App（iOS、Android）的優劣對比 3
1.1.3 Web前端開發者與小程序 4
1.1.4 小程序是一個生態，而不只是一種技術 4
1.2 註冊小程序賬號 5
1.3 微信開發者工具的下載及安裝 6
1.4 新建第一個項目 7
1.5 微信開發者工具界面功能介紹 11
1.5.1 模擬器 12
1.5.2 資源管理器 12
1.5.3 編輯器與調試面板 14
1.5.4 工具欄 14
1.5.5 菜單欄 17
1.5.6 調試小程序 18
1.5.7 快速打開官方開發文檔 21
1.5.8 微信開發者工具常見操作問題 21
1.6 本章小結 22
第 2 章 從一個簡單的頁面開始小程序之旅 23
2.1 小程序的基本文件結構 23
2.2 編寫第一個小程序頁面 25
2.3 構建頁面的元素和樣式 28
2.4 小程序所支持的CSS選擇器 32
2.5 在WXSS文件中使用圖片時的註意事項 32
2.6 Flex布局 33
2.7 小程序自適應單位rpx簡介 35
2.8 全局樣式文件app.wxss 37
2.9 小程序字體設置與動態加載字體 38
2.10 頁面的根元素page 38
2.11 app.json中的window配置項 40
2.12 取消默認頂部導航欄 41
2.13 頁面的配置文件 42
2.14 小程序的可配置性 43
2.15 本章小結 43
第 3 章 數據綁定與文章列表 44
3.1 文章列表頁面結構分析及準備工作 44
3.2 swiper組件 45
3.3 Boolean值陷阱 47
3.4 構建文章列表的骨架和樣式 48
3.5 image組件的5種縮放模式與9種裁剪模式 50
3.5.1 scaleToFill 51
3.5.2 aspectFit 52
3.5.3 aspectFill 52
3.5.4 widthFix 53
3.5.5 9種裁剪模式與圖片懶加載 53
3.6 完成靜態文章列表 54
3.7 JS文件的代碼結構與Page頁面的生命周期 56
3.8 數據綁定 60
3.9 用中間容器的思想理解小程序的數據綁定 62
3.10 初始化數據綁定 64
3.11 在哪裏可以查看數據綁定對象 65
3.12 綁定復雜對象 66
3.13 數據綁定更新 67
3.14 深入理解this.data屬性與this.setData()函數 70
3.15 列表渲染wx:for 71
3.16 配置全局導航欄背景色 73
3.17 從歡迎頁面路由到文章頁面 74
3.17.1 事件 74
3.17.2 捕捉事件命名中的冒號 75
3.17.3 redirectTo與navigateTo 75
3.17.4 冒泡事件與非冒泡事件 79
3.17.5 新特性：WXS函數響應事件與事件捕獲階段 79
3.18 本章小結 80
第 4 章 模塊、模板與緩存 81
4.1 將文章數據從業務中分離 81
4.2 小程序中模塊的導入與導出 82
4.3 小程序的模板化 83
4.4 消除模板對外部變量名的依賴 85
4.5 CSS的模板化 86
4.6 使用緩存在本地模擬服務器數據庫 86
4.6.1 應用程序的生命周期 87
4.6.2 使用Storage緩存初始化本地數據庫 87
4.6.3 Babel與SWC編譯 92
4.6.4 緩存的強制清理及註意事項 92
4.7 使用ES6語法編寫緩存操作類 93
4.8 完善文章數據 94
4.9 完整的data.js數據 95
4.10 本章小結 95
第 5 章 文章詳情頁面 96
5.1 跳轉到文章詳情頁面 96
5.2 不要在<template>上註冊事件 97
5.3 頁面間傳遞參數的3種方式 98
5.3.1 文章id的確定與傳遞思路 99
5.3.2 組件的自定義屬性 100
5.3.3 event事件對象 100
5.3.4 獲取頁面參數值 101
5.4 編譯模式與場景值 102
5.5 讀取文章詳情數據 103
5.6 一張圖理解小程序的事件與頁面參數傳遞 104
5.7 編寫文章詳情頁面 105
5.8 垂直居中問題的經典解決方法 105
5.9 動態設置導航欄標題 106
5.10 本章小結 107
第 6 章 評論與收藏 108
6.1 收藏、評論、計數功能準備工作 108
6.2 文章收藏功能 109
6.2.1 條件渲染：wx:if與wx:else 109
6.2.2 實現收藏單擊功能 110
6.2.3 交互反饋wx:showToast 112
6.3 本地緩存的重要性及應用舉例 112
6.4 支持文字、圖片、拍照、語音上傳的文章評論 113
6.5 文章評論頁面的實現思路與步驟 113
6.6 獲取並綁定文章評論數據 114
6.7 顯示文章評論數據 116
6.8 previewImage實現圖片預覽 117
6.9 實現提交評論 118
6.10 wx:if與hidden控制元素的顯示和隱藏 120
6.11 實現文字評論框和語音評論框的切換 121
6.12 input組件詳解 121
6.12.1 bindinput事件 122
6.12.2 屏蔽評論關鍵字 123
6.12.3 實現自定義發送按鈕 124
6.12.4 完善發送功能 127
6.13 本章小結 127
第 7 章 使用組件庫 128
7.1 為什麼使用組件庫 128
7.2 何謂自定義組件庫 128
7.3 導入Vant-Weapp組件庫 129
7.4 實現錄音與語音消息的發送 136
7.5 微信隱私接口調用指南 139
7.6 用戶拒絕授權後如何再次拉起授權 140
7.7 播放語音消息 140
7.8 文章計數功能 142
7.9 本章小結 143
第 8 章 完善文章頁面 144
8.1 分享功能 144
8.2 onShareAppMessage()詳解 145
8.3 分享到朋友圈 146
8.4 兩種分享模式 148
8.5 微信開放能力解析 148
8.6 事件對象中target和currentTarget的區別 151
8.7 本章小結 152
第 9 章 Component組件化編程 153
9.1 小程序的tab選項卡 153
9.2 Component與Template 155
9.3 Component的基礎 156
9.4 Component的屬性 157
9.5 Component的JS文件結構 158
9.6 Component的生命周期函數 160
9.7 本章小結 161
第 10 章 電影與自定義組件實戰 162
10.1 電影模塊結構分析 162
10.2 編寫stars組件 163
10.3 編寫movie組件 166
10.4 編寫movie-list組件 168
10.5 本章小結 169
第 11 章 從服務器獲取數據 170
11.1 準備從服務器獲取數據 170
11.2 小程序的全局變量 170
11.3 獲取服務端電影分類數據 171
11.4 測試：在電影頁面中使用movie-list組件 172
11.5 小程序中的異步處理模式 174
11.6 用3個movie-list組件構建電影頁面首頁 175
11.7 組件化編程意義的探討 177
11.8 關於wx.request()的設置 178
11.9 HTTP、HTTPS與可信域名 179
11.10 本章小結 180
第 12 章 組件事件與電影搜索 181
12.1 組件的事件 181
12.2 組件的自定義事件 182
12.3 跳轉到more-movie頁面 185
12.4 編寫more-movie頁面 186
12.5 電影搜索功能 187
12.6 實現頁面的下拉刷新操作 190
12.7 JSON配置中的backgroundColor屬性 192
12.8 實現上滑加載更多數據 193
12.9 消除wx:key的警告提示 194
12.10 本章小結 195
第 13 章 組件化思維構建電影詳情頁面 196
13.1 電影詳情頁面分析 196
13.2 電影詳情頁面的骨架和樣式 196
13.3 編寫電影詳情頁面的業務邏輯代碼 198
13.4 預覽電影海報 200
13.5 設置電影頁面的導航欄標題 201
13.6 修復o-stars組件顯示無效的問題 202
13.7 本章小結 203
第 14 章 深入使用Vant組件庫 204
14.1 Vant的特點 204
14.2 Vant使用指南 204
14.3 構建設置頁面 205
14.4 Vant組件的樣式定制概述 207
14.5 組件的外部樣式類 208
14.6 插槽 210
14.7 本章小結 213
第 15 章 新版小程序重要API精講 214
15.1 授權與獲取用戶信息（新版） 214
15.2 緩存清理 218
15.3 交互型組件 219
15.4 獲取系統信息 220
15.5 獲取網絡信息 220
15.6 獲取地理位置信息 221
15.7 掃碼 222
15.8 用戶授權與授權二次拉起 223
15.9 通用授權處理流程 227
15.10 本章小結 229
第 16 章 小程序雲開發與Serverless 230
16.1 小程序雲開發與Serverless的概念 230
16.2 小程序雲開發模式 231
16.3 項目改造雲開發的預備知識 232
16.4 初識雲開發 232
16.5 雲數據庫設計基礎原則 235
16.6 數據庫、集合、記錄與字段 235
16.7 創建集合與導入數據 237
16.8 更改數據庫讀寫權限 238
16.9 本章小結 238
第 17 章 小程序雲開發實戰 239
17.1 初始化雲開發連接 239
17.2 雲開發——查詢數據 240
17.3 在小程序中使用async和await 241
17.4 雲開發數據庫API入門 241
17.5 雲開發數據庫的條件查詢 243
17.6 那些被微信自動創建的id 246
17.7 雲開發版本的讀取收藏狀態 246
17.8 向雲端數據庫新增和更新記錄 248
17.9 插入評論數據 250
17.10 將圖片等靜態資源上傳到小程序雲存儲 251
17.11 上傳用戶音頻消息 254
17.12 使用雲函數 255
17.13 本章小結 258
第 18 章 雲開發高級技巧 259
18.1 顯示評論數據 259
18.2 文章收藏計數功能 260
18.3 編寫第一個雲函數 261
18.4 為什麼需要在本地調試雲函數 263
18.5 如何本地調試雲函數 264
18.6 上傳雲函數到雲端 266
18.7 雲函數查詢特性 268
18.8 從小程序中調用雲函數 269
18.9 改寫文章收藏數量 270
18.10 修正文章評論數量 271
18.11 本章小結 272
第 19 章 媲美原生App的新機制——Skyline 273
19.1 Skyline能解決什麼問題 273
19.2 傳統Web開發與小程序的運行機制 273
19.3 什麼是Skyline 274
19.4 Skyline與WebView在開發上的主要差異 275
19.4.1 組件支持方面的差異 275
19.4.2 CSS支持的差異 276
19.5 Skyline增強特性——worklet 277
19.6 worklet函數 278
19.7 Skyline開發指南 278
19.8 將舊項目向Skyline遷移 280
19.9 本章小結 280
第 20 章 多端開發——將小程序編譯成iOS、Android應用 281
20.1 什麼是多端框架 281
20.2 多端開發的高效率與低成本 282
20.3 多端應用賬號體系指南 282
20.3.1 不需要微信特有功能的多端應用 283
20.3.2 需要使用微信特有功能的多端應用 283
20.3.3 微信開發者平臺 284
20.4 多端應用新手指南 285
20.5 在開發工具中預覽iOS和Android應用 286
20.5.1 在真機中預覽多端應用 286
20.5.2 在模擬器中運行App 287
20.6 多端應用的註意事項 289
20.7 選擇多端開發SDK 291
20.8 微信身份登錄 292
20.9 身份授權前的準備工作 294
20.10 拉起微信小程序授權登錄 295
20.11 本章小結 296
