微信小程序開發圖解案例教程（附精講視頻）（AI助學）（第4版）

劉剛，小剛老師本名劉剛，高級項目管理師、中級項目監理師、項目經理，曾就職於中國擎天軟件公司、北京神州軟件技術有限公司，軟件項目研發、設計和管理經驗豐富；負責紀檢監察廉政監督監管平臺、國家郵政局項目、政務大數據項目、中施企協項目等的設計開發和項目管理工作；同時在教育教學方面有豐富的授課經驗，作為極客學院、北風網的兼職培訓講師，教授Axure、用戶體驗、軟件重構、項目經理等方面的課程。

目 錄

第 1篇 微信小程序快速入門

第 1章

認識微信小程序 1

學習導讀 1

學習目標 1

1.1 微信小程序介紹 2

1.1.1 初識微信小程序 2

1.1.2 微信小程序的功能和特點 2

1.1.3 微信小程序的使用場景 5

1.2 微信小程序開發準備 6

1.2.1 基礎技術準備 6

1.2.2 開發準備 6

1.3 微信小程序開發者工具的使用 8

1.3.1 創建項目 8

1.3.2 開發者工具界面 9

1.4 沙場大練兵：創建Hello World 15

1.5 小結 16

1.6 習題 17

第 2章

微信小程序框架分析 18

學習導讀 18

學習目標 18

2.1 微信小程序模板介紹 18

2.2 微信小程序目錄結構介紹 19

2.2.1 框架全局文件 20

2.2.2 工具類文件 29

2.2.3 框架頁面文件 29

2.3 微信小程序註冊程序的應用 32

2.4 微信小程序註冊頁面的使用 33

2.4.1 頁面初始化數據 34

2.4.2 生命周期函數 35

2.4.3 頁面相關事件處理函數 35

2.4.4 頁面路由管理 37

2.4.5 自定義函數 38

2.4.6 setData設值函數 38

2.5 微信小程序模塊化 39

2.6 微信小程序組件化 40

2.7 微信小程序運行環境 41

2.8 沙場大練兵：制作“貓眼電影”

tabBar標簽導航 42

2.9 小結 44

2.10 習題 44

第3章

微信小程序核心技術 45

學習導讀 45

學習目標 45

3.1 WXML 45

3.1.1 WXML介紹 45

3.1.2 WXML的語法和功能 46

3.1.3 綁定數據 47

3.1.4 條件渲染 48

3.1.5 列表渲染 48

3.1.6 模板功能 50

3.1.7 引用功能 50

3.1.8 事件綁定 51

3.1.9 數據傳遞 51

3.1.10 實現天氣微信小程序 51

3.2 WXSS樣式語言 54

3.2.1 WXSS介紹 54

3.2.2 WXSS語法 54

3.2.3 尺寸單位 56

3.2.4 樣式導入 56

3.2.5 內聯樣式 56

3.2.6 選擇器 56

3.3 JS語言 57

3.3.1 數據類型和變量 57

3.3.2 運算符和控制流 57

3.3.3 函數和事件處理 58

3.3.4 異步編程 58

3.3.5 對象和數組操作 59

3.3.6 模塊化開發 59

3.3.7 使用限制 59

3.4 WXS語言 60

3.4.1 模塊化 61

3.4.2 變量與數據類型 61

3.5 沙場大練兵：開發仿“香哈菜譜”

微信小程序 63

3.5.1 底部標簽導航設計 63

3.5.2 宮格導航設計 65

3.5.3 香哈頭條初始化數據 67

3.5.4 香哈頭條列表渲染及綁定

數據 68

3.5.5 香哈頭條列表模板引用 69

3.6 小結 70

3.7 習題 70

第4章

用微信小程序組件構建UI 71

學習導讀 71

學習目標 71

4.1 視圖容器組件 71

4.1.1 view組件 71

4.1.2 scroll-view組件 72

4.1.3 swiper組件 75

4.1.4 movable-view組件 78

4.2 基礎內容組件 80

4.2.1 icon組件 80

4.2.2 text組件 81

4.2.3 progress組件 81

4.3 表單組件 82

4.3.1 button組件 82

4.3.2 checkbox組件 85

4.3.3 radio組件 85

4.3.4 input組件 86

4.3.5 textarea組件 89

4.3.6 label組件 90

4.3.7 picker組件 92

4.3.8 slider組件 97

4.3.9 switch組件 98

4.3.10 form組件 99

4.4 導航組件 100

4.4.1 navigator組件 101

4.4.2 wx.navigateTo組件 103

4.4.3 wx.redirectTo組件 103

4.4.4 wx.switchTab組件 104

4.4.5 wx.navigateBack組件 104

4.4.6 設置導航欄 105

4.5 媒體組件 106

4.5.1 image組件 106

4.5.2 video組件 108

4.5.3 camera組件 111

4.6 沙場大練兵：開發表單登錄註冊

微信小程序 113

4.6.1 登錄頁面設計 113

4.6.2 手機快速註冊頁面設計 116

4.6.3 企業用戶註冊頁面設計 118

4.7 小結 122

4.8 習題 123

第5章

必備的微信小程序API 124

學習導讀 124

學習目標 124

5.1 請求服務器數據API 124

5.2 文件上傳與下載API 127

5.2.1 wx.uploadFile API 127

5.2.2 wx.downloadFile API 129

5.3 WebSocket會話API 130

5.4 圖片處理API 133

5.4.1 wx.chooseMedia API 133

5.4.2 wx.previewImage API 134

5.4.3 wx.getImageInfo API 135

5.4.4 wx.saveImageToPhotos

Album API 136

5.4.5 wx.compressImage

API 136

5.4.6 wx.chooseMessageFile

API 137

5.5 文件操作API 137

5.5.1 wx.getFileSystemManager

API 137

5.5.2 FileSystemManager.

saveFile API 137

5.5.3 FileSystemManager.

getSavedFileList API 138

5.5.4 FileSystemManager.

removeSavedFile API 139

5.5.5 FileSystemManager.

getFileInfo API 139

5.5.6 wx.openDocument

API 140

5.6 數據緩存API 140

5.6.1 將數據緩存到本地API 141

5.6.2 獲取本地緩存數據API 142

5.6.3 移除和清理本地緩存數據

API 144

5.7 位置信息API 145

5.7.1 獲取當前位置、選擇位置和

查看位置API 146

5.7.2 監聽位置事件API 148

5.7.3 收貨地址API 148

5.8 設備應用API 149

5.8.1 獲取網絡狀態API 149

5.8.2 撥打電話和發送短信

API 150

5.8.3 掃碼API 150

5.8.4 剪貼板API 150

5.8.5 屏幕亮度API 150

5.8.6 用戶截屏事件API 151

5.8.7 振動API 151

5.9 交互反饋API 151

5.9.1 消息提示框API 151

5.9.2 模態彈窗API 152

5.9.3 操作菜單API 154

5.9.4　返回詢問對話框API 154

5.10 用戶及授權設置API 154

5.10.1　登錄API 154

5.10.2　用戶信息API 156

5.10.3　授權API 157

5.10.4　設置API 158

5.11 微信支付API 160

5.11.1　微信小程序支付介紹 160

5.11.2　微信小程序支付實戰 161

5.12 沙場大練兵：開發仿“豆瓣電影”

微信小程序 162

5.12.1　頂部頁簽切換設計 162

5.12.2　海報輪播設計 164

5.12.3　電影列表布局 165

5.12.4　電影詳情頁面布局 167

5.12.5　項目上傳與預覽 171

5.13 小結 171

5.14 習題 171

第6章

微信小程序雲開發 172

學習導讀 172

學習目標 172

6.1 認識微信小程序雲開發 172

6.1.1　傳統開發和雲開發 172

6.1.2　創建微信小程序雲開發

項目 173

6.2 雲開發控制臺的使用 174

6.2.1　運營分析 174

6.2.2　數據庫 174

6.2.3　存儲 175

6.2.4　雲函數 175

6.2.5　設置 176

6.3 雲函數應用 176

6.3.1　雲函數介紹 176

6.3.2　雲函數的使用 177

6.3.3　Promise對象 179

6.3.4　npm的安裝與使用 180

6.3.5　雲函數本地調試 181

6.3.6　雲函數定時觸發器 182

6.4 雲開發文件存儲API 183

6.4.1　wx.cloud uploadFile

API 183

6.4.2　wx.cloud downloadFile

API 184

6.4.3　wx.cloud deleteFile

API 184

6.4.4　wx.cloud getTempFileURL

API 184

6.5 雲開發數據庫 185

6.5.1　數據庫介紹 185

6.5.2　數據庫初始化 185

6.5.3　數據新增操作 186

6.5.4　數據查詢操作 186

6.5.5　數據修改操作 187

6.5.6　數據刪除操作 188

6.6 沙場大練兵：地址管理雲開發 189

6.6.1　數據庫設計 189

6.6.2　地址列表及刪除地址雲

開發 189

6.6.3　新增地址及編輯地址雲

開發 193

6.7 小結 200

6.8 習題 200

第 2篇 綜合案例應用

第7章

綜合案例：開發仿“中國婚博會”微信小程序 201

學習導讀 201

學習目標 201

7.1 需求描述 202

7.2 設計思路 202

7.3 相關知識點 202

7.4 準備工作 202

7.5 設計流程 203

7.5.1　底部標簽導航設計 203

7.5.2　海報輪播效果設計 204

7.5.3　宮格導航設計 205

7.5.4 “全部分類”頁面設計 207

7.5.5 “現金券”頁面的下拉菜單

設計 211

7.5.6　現金券列表設計 213

7.6 小結 215

7.7 習題 215

第8章

綜合案例：開發仿“華為商城”微信小程序 216

學習導讀 216

學習目標 216

8.1 需求描述 216

8.2 設計思路 217

8.3 相關知識點 218

8.4 準備工作 218

8.5 設計流程 218

8.5.1 “我的”頁面列表導航

設計 218

8.5.2　賬號登錄 223

8.5.3　用戶註冊 229

8.5.4　首頁布局設計及動態獲取

數據 232

8.5.5　分類導航設計及動態獲取

數據 237

8.6 小結 241

8.7 習題 241

第9章

綜合案例：雲開發記賬本微信

小程序 242

學習導讀 242

學習目標 242

9.1 需求描述 242

9.2 設計思路 243

9.3 相關知識點 243

9.4 準備工作 244

9.5 設計流程 245

9.5.1 賬戶列表 245

9.5.2 創建賬戶 250

9.5.3 賬戶明細列表 253

9.5.4 記一筆賬戶明細 256

9.5.5 分頁顯示賬本列表 261

9.5.6 創建賬本 263

9.6 小結 267

9.7 習題 267

第3篇 AI輔助編程

第 10章

微信小程序AI輔助編程 268

學習導讀 268

學習目標 268

10.1 CodeBuddy概述 269

10.1.1 CodeBuddy的功能與

特點 269

10.1.2 CodeBuddy的安裝與

使用 269

10.2 用AI讀懂代碼 271

10.2.1 生成代碼註釋 271

10.2.2 解釋代碼段 273

10.2.3 總結代碼功能 273

10.3 用AI提效編程 274

10.3.1 生成基礎代碼骨架 274

10.3.2 優化與重構代碼 282

10.3.3 調試與解決問題 282

10.4 沙場大練兵：制作簡歷微信

小程序 283

10.5 小結 286

10.6 習題 286