微信小程序開發圖解案例教程 附精講視頻 第3版

本書分兩篇，分別介紹了微信小程序設計的基礎知識和實戰案例。第1篇為微信小程序快速入門，包括認識微信小程序、微信小程序框架分析、用微信小程序組件構建UI界面、必備的微信小程序API、微信小程序雲開發；第2篇為綜合案例應用，包括仿“中國婚博會”微信小程序、仿“華為商城”微信小程序、記賬本微信小程序雲開發3個綜合實戰案例。本書採用圖、表與詳細的示例代碼相結合的敘述方式，講解微信小程序設計的基本原理和知識，簡單易懂。書中還提供了豐富詳盡的實戰案例，帶讀者邊做邊學，以使讀者快速掌握微信小程序的設計和實現。

本書可作為對微信小程序開發有興趣的讀者的自學用書，也可作為院校、培訓機構微信小程序開發相關課程的教材。

劉剛，參與過多個軟件項目的研發、設計和管理工作，擁有項目管理師認證、項目監理師中級認證，出版過《原型設計大師：Axure RP網站與APP設計從入門到精通》、《Axure RP原型設計圖解微課視頻教程（Web+App）》書籍。在中國擎天公司、神州軟件子公司任職過，在項目管理和項目實踐、軟件設計等方面有一定經驗。曾負責過紀檢監察廉政監督監管平台產品的設計與開發、國家郵政局項目的設計與開發、政務大數據項目的設計與開發等等項目。

第 1篇　微信小程序快速入門
第 1章  認識微信小程序 1
1.1　微信小程序介紹 1
1.1.1　初識微信小程序 1
1.1.2　微信小程序的功能 2
1.1.3　微信小程序的使用場景 3
1.1.4　微信小程序能取代App嗎 3
1.1.5　微信小程序的發展歷程 3
1.1.6　微信小程序帶來的機會 4
1.2　微信小程序開發準備 5
1.2.1　基礎技術準備 5
1.2.2　開發準備 5
1.3　微信小程序開發工具的使用 6
1.3.1　創建項目 6
1.3.2　*發者工具界面 8
1.3.3　菜單欄 9
1.3.4　模擬器區域 9
1.3.5　編輯器區域 10
1.3.6　調試器區域 11
1.3.7　工具欄區域 13
1.3.8　常用快捷鍵 16
1.4　沙場大練兵：Hello World的創建 17
1.5　小結 18

第 2章  微信小程序框架分析 19
2.1　微信小程序目錄結構介紹 19
2.1.1　框架全局文件 19
2.1.2　工具類文件 24
2.1.3　框架頁面文件 25
2.1.4　小試牛刀：製作“貓眼電影”底部標籤導航 26
2.2　微信小程序註冊程序的應用 27
2.3　微信小程序註冊頁面的使用 28
2.3.1　頁面初始化數據 29
2.3.2　生命週期函數 30
2.3.3　頁面相關事件處理函數 30
2.3.4　頁面路由管理 31
2.3.5　自定義函數 32
2.3.6　setData設值函數 32
2.4　微信小程序如何綁定數據 33
2.4.1　組件屬性綁定 33
2.4.2　控制屬性綁定 34
2.4.3　關鍵字綁定 34
2.4.4　運算 34
2.4.5　小試牛刀：天氣微信小程序 35
2.5　微信小程序條件渲染 37
2.5.1　wx:if判斷單個組件 37
2.5.2　block wx:if判斷多個組件 37
2.6　微信小程序列表渲染 37
2.6.1　wx:for列表渲染單個組件 37
2.6.2　block wx:for列表渲染多個組件 38
2.6.3　wx:key指定唯1標識符 38
2.7　微信小程序定義模板 39
2.7.1　定義模板 39
2.7.2　使用模板 39
2.8　微信小程序的引用功能 39
2.8.1　import引用 39
2.8.2　include引用 40
2.9　WXS小程序腳本語言 40
2.9.1　模塊化 41
2.9.2　變量與數據類型 41
2.9.3　註釋 43
2.9.4　語句 44
2.10　微信小程序WXSS樣式渲染 45
2.10.1　尺寸單位 45
2.10.2　樣式導入 45
2.10.3　內聯樣式 46
2.10.4　選擇器 46
2.10.5　常用樣式屬性 46
2.11　沙場大練兵：仿“香哈菜譜”微信小程序 50
2.11.1　底部標籤導航設計 51
2.11.2　宮格導航設計 53
2.11.3　香哈頭條初始化數據 54
2.11.4　香哈頭條列表渲染及綁定數據 55
2.11.5　香哈頭條模板引用 59
2.12　小結 60

第3章  用微信小程序組件構建UI界面 61
3.1　視圖容器組件 61
3.1.1　view視圖容器 61
3.1.2　scroll-view可滾動視圖區域 62
3.1.3　swiper滑塊視圖容器 65
3.1.4　movable-view可移動視圖容器 68
3.1.5　cover-view、cover-image覆蓋原生組件的視圖容器 70
3.2　基礎內容組件 71
3.2.1　icon圖標 71
3.2.2　text文本 72
3.2.3　progress進度條 73
3.2.4　rich-text富文本 74
3.3　表單組件 75
3.3.1　button按鈕 75
3.3.2　checkbox多項選擇器 78
3.3.3　radio單項選擇器 79
3.3.4　input單行輸入框 79
3.3.5　textarea多行輸入框 82
3.3.6　label改進表單可用性 83
3.3.7　picker滾動選擇器 85
3.3.8　slider滑動選擇器 94
3.3.9　switch開關選擇器 95
3.3.10　form表單 96
3.3.11　editor富文本編輯器 98
3.4　導航組件 99
3.4.1　navigator頁面鏈接組件 100
3.4.2　wx.navigateTo保留當前頁跳轉 102
3.4.3　wx.redirectTo關閉當前頁跳轉 103
3.4.4　wx.switchTab跳轉到tabBar頁面 104
3.4.5　wx.navigateBack返回上一頁 105
3.4.6　設置導航條 106
3.5　媒體組件 107
3.5.1　audio音頻 108
3.5.2　image圖片 109
3.5.3　video視頻 113
3.5.4　camera相機 115
3.5.5　live-player實時音視頻播放 117
3.5.6　live-pusher實時音視頻錄製 117
3.6　地圖組件 119
3.7　畫布組件 123
3.8　沙場大練兵：表單登錄註冊微信小程序 125
3.8.1　登錄設計 126
3.8.2　手機號註冊設計 129
3.8.3　企業用戶註冊設計 132
3.9　小結 138

第4章  *的微信小程序API 139
4.1　請求服務器數據API 139
4.2　文件上傳與下載API 142
4.2.1　wx.uploadFile文件上傳API 142
4.2.2　wx.downloadFile文件下載API 144
4.3　WebSocket會話API 145
4.4　圖片處理API 148
4.4.1　wx.chooseImage選擇圖片API 148
4.4.2　wx.previewImage預覽圖片API 149
4.4.3　wx.getImageInfo獲得圖片信息API 150
4.4.4　wx.saveImageToPhotosAlbum保存圖片到相冊API 151
4.4.5　wx.compressImage壓縮圖片API 152
4.4.6　wx.chooseMessageFile從客戶端會話選擇文件API 152
4.5　文件操作API 153
4.5.1　wx.saveFile保存文件到本地API 153
4.5.2　wx.getSavedFileList獲取本地文件列表API 154
4.5.3　wx.getSavedFileInfo獲取本地文件信息API 155
4.5.4　wx.removeSavedFile刪除本地文件API 156
4.5.5　wx.openDocument打開文檔API 157
4.5.6　wx.getFileInfo獲取文件信息API 157
4.5.7　FileSystemManager文件管理器 158
4.6　數據緩存API 159
4.6.1　數據緩存到本地 159
4.6.2　獲取本地緩存數據 161
4.6.3　移除和清理本地緩存數據 164
4.7　位置信息API 165
4.7.1　獲得位置、選擇位置、打開位置 166
4.7.2　監聽位置事件 169
4.7.3　地圖組件控制API 169
4.7.4　收貨地址API 170
4.8　設備應用API 171
4.8.1　獲得系統信息 171
4.8.2　獲取網絡狀態 173
4.8.3　加速度計 174
4.8.4　羅盤 175
4.8.5　撥打電話 176
4.8.6　掃碼 176
4.8.7　剪貼板 177
4.8.8　藍牙 177
4.8.9　屏幕亮度 181
4.8.10　用戶截屏事件 181
4.8.11　振動 181
4.8.12　手機聯繫人 182
4.9　交互反饋API 183
4.9.1　消息提示框 183
4.9.2　模態彈窗 185
4.9.3　操作菜單 186
4.10　用戶及授權設置API 186
4.10.1　登錄API 186
4.10.2　用戶信息API 190
4.10.3　授權API 191
4.10.4　設置API 192
4.11　微信支付API 193
4.11.1　微信小程序支付介紹 193
4.11.2　微信小程序支付實戰 195
4.12　分享轉發API 196
4.13  沙場大練兵：仿“豆瓣電影”微信小程序 197
4.13.1　電影頂部頁簽切換效果 197
4.13.2　電影海報輪播效果 200
4.13.3　電影列表方式佈局 202
4.13.4　電影詳情介紹頁佈局 205
4.13.5　項目上傳與預覽 211
4.14　小結 212

第5章  微信小程序云開發 213
5.1　認識小程序云開發 213
5.1.1　雲開發和傳統開發的對比 213
5.1.2　創建小程序云開發項目 213
5.2　雲開發控制台的使用 215
5.2.1　運營分析 215
5.2.2　數據庫 216
5.2.3　存儲 217
5.2.4　雲函數 218
5.2.5　設置 218
5.2.6　費用和工單 219
5.3　雲函數 219
5.3.1　雲函數介紹 219
5.3.2　雲函數的使用 220
5.3.3　Promise風格 221
5.3.4　npm的安裝與使用 223
5.3.5　雲函數本地調試 224
5.3.6　雲函數定時器 225
5.4　雲開發文件存儲 226
5.4.1　uploadFile文件上傳API 226
5.4.2　downloadFile文件下載API 227
5.4.3　deleteFile文件刪除API 227
5.4.4　getTempFileURL獲取文件臨時路徑API 228
5.5　雲開發數據庫 228
5.5.1　數據庫介紹 228
5.5.2　數據庫初始化 229
5.5.3　數據新增操作 229
5.5.4　數據查詢操作 230
5.5.5　數據修改操作 231
5.5.6　數據刪除操作 231
5.5.7　數據庫操作符 232
5.6　沙場大練兵：地址管理雲開發 234
5.6.1　數據庫設計 234
5.6.2　地址列表及刪除地址雲開發 235
5.6.3　新增地址及編輯地址雲開發 239
5.7　小結 245

第 2篇　綜合案例應用
第6章  綜合案例：仿“中國婚博會”微信小程序 246
6.1　需求描述 246
6.2　設計思路 247
6.3　相關知識點 247
6.4　準備工作 248
6.5　設計流程 249
6.5.1　底部標籤導航設計 249
6.5.2　海報輪播效果設計 251
6.5.3　宮格導航設計 252
6.5.4　“全部分類”導航設計 256
6.5.5　“現金券”下拉菜單篩選條件設計 261
6.5.6　“現金券”列表頁設計 263
6.5.7　婚博會索票界面設計 267
6.5.8　獲知渠道彈出層設計 271
6.6　小結 276

第7章  綜合案例：仿“華為商城”微信小程序 277
7.1　需求描述 277
7.2　設計思路 278
7.3　相關知識點 278
7.4　準備工作 279
7.5　設計流程 279
7.5.1　“我的”界面列表導航設計 279
7.5.2　賬號登錄 284
7.5.3　用戶註冊 291
7.5.4　*頁佈局設計及動態獲取數據 294
7.5.5　分類導航設計及動態獲取數據 299
7.6　小結 302

第8章  綜合案例：記賬本微信小程序云開發 303
8.1　需求描述 303
8.2　設計思路 304
8.3　相關知識點 304