微信小程序開發(fā)圖解案例教程（附精講視頻 第3版）

第 1篇　微信小程序快速入門
第 1章 認(rèn)識(shí)微信小程序 1
1．1　微信小程序介紹 1
1．1．1　初識(shí)微信小程序 1
1．1．2　微信小程序的功能 2
1．1．3　微信小程序的使用場(chǎng)景 3
1．1．4　微信小程序能取代App嗎 3
1．1．5　微信小程序的發(fā)展歷程 3
1．1．6　微信小程序帶來(lái)的機(jī)會(huì) 4
1．2　微信小程序開發(fā)準(zhǔn)備 5
1．2．1　基礎(chǔ)技術(shù)準(zhǔn)備 5
1．2．2　開發(fā)準(zhǔn)備 5
1．3　微信小程序開發(fā)工具的使用 6
1．3．1　創(chuàng)建項(xiàng)目 6
1．3．2　開發(fā)者工具界面 8
1．3．3　菜單欄 9
1．3．4　模擬器區(qū)域 9
1．3．5　編輯器區(qū)域 10
1．3．6　調(diào)試器區(qū)域 11
1．3．7　工具欄區(qū)域 13
1．3．8　常用快捷鍵 16
1．4　沙場(chǎng)大練兵：Hello World的創(chuàng)建 17
1．5　小結(jié) 18

第 2章 微信小程序框架分析 19
2．1　微信小程序目錄結(jié)構(gòu)介紹 19
2．1．1　框架全局文件 19
2．1．2　工具類文件 24
2．1．3　框架頁(yè)面文件 25
2．1．4　小試牛刀：制作“貓眼電影”底部標(biāo)簽導(dǎo)航 26
2．2　微信小程序注冊(cè)程序的應(yīng)用 27
2．3　微信小程序注冊(cè)頁(yè)面的使用 28
2．3．1　頁(yè)面初始化數(shù)據(jù) 29
2．3．2　生命周期函數(shù) 30
2．3．3　頁(yè)面相關(guān)事件處理函數(shù) 30
2．3．4　頁(yè)面路由管理 31
2．3．5　自定義函數(shù) 32
2．3．6　setData設(shè)值函數(shù) 32
2．4　微信小程序如何綁定數(shù)據(jù) 33
2．4．1　組件屬性綁定 33
2．4．2　控制屬性綁定 34
2．4．3　關(guān)鍵字綁定 34
2．4．4　運(yùn)算 34
2．4．5　小試牛刀：天氣微信小程序 35
2．5　微信小程序條件渲染 37
2．5．1　wx：if判斷單個(gè)組件 37
2．5．2　block wx：if判斷多個(gè)組件 37
2．6　微信小程序列表渲染 37
2．6．1　wx：for列表渲染單個(gè)組件 37
2．6．2　block wx：for列表渲染多個(gè)組件 38
2．6．3　wx：key指定唯一標(biāo)識(shí)符 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小程序腳本語(yǔ)言 40
2．9．1　模塊化 41
2．9．2　變量與數(shù)據(jù)類型 41
2．9．3　注釋 43
2．9．4　語(yǔ)句 44
2．10　微信小程序WXSS樣式渲染 45
2．10．1　尺寸單位 45
2．10．2　樣式導(dǎo)入 45
2．10．3　內(nèi)聯(lián)樣式 46
2．10．4　選擇器 46
2．10．5　常用樣式屬性 46
2．11　沙場(chǎng)大練兵：仿“香哈菜譜”微信小程序 50
2．11．1　底部標(biāo)簽導(dǎo)航設(shè)計(jì) 51
2．11．2　宮格導(dǎo)航設(shè)計(jì) 53
2．11．3　香哈頭條初始化數(shù)據(jù) 54
2．11．4　香哈頭條列表渲染及綁定數(shù)據(jù) 55
2．11．5　香哈頭條模板引用 59
2．12　小結(jié) 60
第3章 用微信小程序組件構(gòu)建UI界面 61
3．1　視圖容器組件 61
3．1．1　view視圖容器 61
3．1．2　scroll-view可滾動(dòng)視圖區(qū)域 62
3．1．3　swiper滑塊視圖容器 65
3．1．4　movable-view可移動(dòng)視圖容器 68
3．1．5　cover-view、cover-image覆蓋原生組件的視圖容器 70
3．2　基礎(chǔ)內(nèi)容組件 71
3．2．1　icon圖標(biāo) 71
3．2．2　text文本 72
3．2．3　progress進(jìn)度條 73
3．2．4　rich-text富文本 74
3．3　表單組件 75
3．3．1　button按鈕 75
3．3．2　checkbox多項(xiàng)選擇器 78
3．3．3　radio單項(xiàng)選擇器 79
3．3．4　input單行輸入框 79
3．3．5　textarea多行輸入框 82
3．3．6　label改進(jìn)表單可用性 83
3．3．7　picker滾動(dòng)選擇器 85
3．3．8　slider滑動(dòng)選擇器 94
3．3．9　switch開關(guān)選擇器 95
3．3．10　form表單 96
3．3．11　editor富文本編輯器 98
3．4　導(dǎo)航組件 99
3．4．1　navigator頁(yè)面鏈接組件 100
3．4．2　wx．navigateTo保留當(dāng)前頁(yè)跳轉(zhuǎn) 102
3．4．3　wx．redirectTo關(guān)閉當(dāng)前頁(yè)跳轉(zhuǎn) 103
3．4．4　wx．switchTab跳轉(zhuǎn)到tabBar頁(yè)面 104
3．4．5　wx．navigateBack返回上一頁(yè) 105
3．4．6　設(shè)置導(dǎo)航條 106
3．5　媒體組件 107
3．5．1　audio音頻 108
3．5．2　image圖片 109
3．5．3　video視頻 113
3．5．4　camera相機(jī) 115
3．5．5　live-player實(shí)時(shí)音視頻播放 117
3．5．6　live-pusher實(shí)時(shí)音視頻錄制 117
3．6　地圖組件 119
3．7　畫布組件 123
3．8　沙場(chǎng)大練兵：表單登錄注冊(cè)微信小程序 125
3．8．1　登錄設(shè)計(jì) 126
3．8．2　手機(jī)號(hào)注冊(cè)設(shè)計(jì) 129
3．8．3　企業(yè)用戶注冊(cè)設(shè)計(jì) 132
3．9　小結(jié) 138
第4章 必備的微信小程序API 139
4．1　請(qǐng)求服務(wù)器數(shù)據(jù)API 139
4．2　文件上傳與下載API 142
4．2．1　wx．uploadFile文件上傳API 142
4．2．2　wx．downloadFile文件下載API 144
4．3　WebSocket會(huì)話API 145
4．4　圖片處理API 148
4．4．1　wx．chooseImage選擇圖片API 148
4．4．2　wx．previewImage預(yù)覽圖片API 149
4．4．3　wx．getImageInfo獲得圖片信息API 150
4．4．4　wx．saveImageToPhotosAlbum保存圖片到相冊(cè)API 151
4．4．5　wx．compressImage壓縮圖片API 152
4．4．6　wx．chooseMessageFile從客戶端會(huì)話選擇文件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　數(shù)據(jù)緩存API 159
4．6．1　數(shù)據(jù)緩存到本地 159
4．6．2　獲取本地緩存數(shù)據(jù) 161
4．6．3　移除和清理本地緩存數(shù)據(jù) 164
4．7　位置信息API 165
4．7．1　獲得位置、選擇位置、打開位置 166
4．7．2　監(jiān)聽位置事件 169
4．7．3　地圖組件控制API 169
4．7．4　收貨地址API 170
4．8　設(shè)備應(yīng)用API 171
4．8．1　獲得系統(tǒng)信息 171
4．8．2　獲取網(wǎng)絡(luò)狀態(tài) 173
4．8．3　加速度計(jì) 174
4．8．4　羅盤 175
4．8．5　撥打電話 176
4．8．6　掃碼 176
4．8．7　剪貼板 177
4．8．8　藍(lán)牙 177
4．8．9　屏幕亮度 181
4．8．10　用戶截屏事件 181
4．8．11　振動(dòng) 181
4．8．12　手機(jī)聯(lián)系人 182
4．9　交互反饋API 183
4．9．1　消息提示框 183
4．9．2　模態(tài)彈窗 185
4．9．3　操作菜單 186
4．10　用戶及授權(quán)設(shè)置API 186
4．10．1　登錄API 186
4．10．2　用戶信息API 190
4．10．3　授權(quán)API 191
4．10．4　設(shè)置API 192
4．11　微信支付API 193
4．11．1　微信小程序支付介紹 193
4．11．2　微信小程序支付實(shí)戰(zhàn) 195
4．12　分享轉(zhuǎn)發(fā)API 196
4．13 沙場(chǎng)大練兵：仿“豆瓣電影”微信小程序 197
4．13．1　電影頂部頁(yè)簽切換效果 197
4．13．2　電影海報(bào)輪播效果 200
4．13．3　電影列表方式布局 202
4．13．4　電影詳情介紹頁(yè)布局 205
4．13．5　項(xiàng)目上傳與預(yù)覽 211
4．14　小結(jié) 212
第5章 微信小程序云開發(fā) 213
5．1　認(rèn)識(shí)小程序云開發(fā) 213
5．1．1　云開發(fā)和傳統(tǒng)開發(fā)的對(duì)比 213
5．1．2　創(chuàng)建小程序云開發(fā)項(xiàng)目 213
5．2　云開發(fā)控制臺(tái)的使用 215
5．2．1　運(yùn)營(yíng)分析 215
5．2．2　數(shù)據(jù)庫(kù) 216
5．2．3　存儲(chǔ) 217
5．2．4　云函數(shù) 218
5．2．5　設(shè)置 218
5．2．6　費(fèi)用和工單 219
5．3　云函數(shù) 219
5．3．1　云函數(shù)介紹 219
5．3．2　云函數(shù)的使用 220
5．3．3　Promise風(fēng)格 221
5．3．4　npm的安裝與使用 223
5．3．5　云函數(shù)本地調(diào)試 224
5．3．6　云函數(shù)定時(shí)器 225
5．4　云開發(fā)文件存儲(chǔ) 226
5．4．1　uploadFile文件上傳API 226
5．4．2　downloadFile文件下載API 227
5．4．3　deleteFile文件刪除API 227
5．4．4　getTempFileURL獲取文件臨時(shí)路徑API 228
5．5　云開發(fā)數(shù)據(jù)庫(kù) 228
5．5．1　數(shù)據(jù)庫(kù)介紹 228
5．5．2　數(shù)據(jù)庫(kù)初始化 229
5．5．3　數(shù)據(jù)新增操作 229
5．5．4　數(shù)據(jù)查詢操作 230
5．5．5　數(shù)據(jù)修改操作 231
5．5．6　數(shù)據(jù)刪除操作 231
5．5．7　數(shù)據(jù)庫(kù)操作符 232
5．6　沙場(chǎng)大練兵：地址管理云開發(fā) 234
5．6．1　數(shù)據(jù)庫(kù)設(shè)計(jì) 234
5．6．2　地址列表及刪除地址云開發(fā) 235
5．6．3　新增地址及編輯地址云開發(fā) 239
5．7　小結(jié) 245
第 2篇　綜合案例應(yīng)用
第6章 綜合案例：仿“中國(guó)婚博會(huì)”微信小程序 246
6．1　需求描述 246
6．2　設(shè)計(jì)思路 247
6．3　相關(guān)知識(shí)點(diǎn) 247
6．4　準(zhǔn)備工作 248
6．5　設(shè)計(jì)流程 249
6．5．1　底部標(biāo)簽導(dǎo)航設(shè)計(jì) 249
6．5．2　海報(bào)輪播效果設(shè)計(jì) 251
6．5．3　宮格導(dǎo)航設(shè)計(jì) 252
6．5．4　“全部分類”導(dǎo)航設(shè)計(jì) 256
6．5．5　“現(xiàn)金券”下拉菜單篩選條件設(shè)計(jì) 261
6．5．6　“現(xiàn)金券”列表頁(yè)設(shè)計(jì) 263
6．5．7　婚博會(huì)索票界面設(shè)計(jì) 267
6．5．8　獲知渠道彈出層設(shè)計(jì) 271
6．6　小結(jié) 276
第7章 綜合案例：仿“華為商城”微信小程序 277
7．1　需求描述 277
7．2　設(shè)計(jì)思路 278
7．3　相關(guān)知識(shí)點(diǎn) 278
7．4　準(zhǔn)備工作 279
7．5　設(shè)計(jì)流程 279
7．5．1　“我的”界面列表導(dǎo)航設(shè)計(jì) 279
7．5．2　賬號(hào)登錄 284
7．5．3　用戶注冊(cè) 291
7．5．4　首頁(yè)布局設(shè)計(jì)及動(dòng)態(tài)獲取數(shù)據(jù) 294
7．5．5　分類導(dǎo)航設(shè)計(jì)及動(dòng)態(tài)獲取數(shù)據(jù) 299
7．6　小結(jié) 302
第8章 綜合案例：記賬本微信小程序云開發(fā) 303
8．1　需求描述 303
8．2　設(shè)計(jì)思路 304
8．3　相關(guān)知識(shí)點(diǎn) 304
8．4　準(zhǔn)備工作 305
8．5　設(shè)計(jì)流程 306
8．5．1　賬戶列表 306
8．5．2　創(chuàng)建賬戶 311
8．5．3　賬戶明細(xì)列表 314
8．5．4　記一筆賬戶明細(xì) 317
8．5．5　分頁(yè)獲取賬本列表 322
8．5．6　創(chuàng)建記賬本 325
8．6　小結(jié) 328