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

第 1篇　微信小程序快速入門
第 1章 認(rèn)識微信小程序 1
1．1　微信小程序介紹 1
1．1．1　初識微信小程序 1
1．1．2　微信小程序的功能 2
1．1．3　微信小程序的使用場景 3
1．1．4　微信小程序能取代App嗎 3
1．1．5　微信小程序的發(fā)展歷程 3
1．1．6　微信小程序帶來的機會 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)建項目 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　沙場大練兵：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　框架頁面文件 25
2．1．4　小試牛刀：制作“貓眼電影”底部標(biāo)簽導(dǎo)航 26
2．2　微信小程序注冊程序的應(yīng)用 27
2．3　微信小程序注冊頁面的使用 28
2．3．1　頁面初始化數(shù)據(jù) 29
2．3．2　生命周期函數(shù) 30
2．3．3　頁面相關(guān)事件處理函數(shù) 30
2．3．4　頁面路由管理 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　運算 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指定唯一標(biāo)識符 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　變量與數(shù)據(jù)類型 41
2．9．3　注釋 43
2．9．4　語句 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　沙場大練兵：仿“香哈菜譜”微信小程序 50
2．11．1　底部標(biāo)簽導(dǎo)航設(shè)計 51
2．11．2　宮格導(dǎo)航設(shè)計 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可滾動視圖區(qū)域 62
3．1．3　swiper滑塊視圖容器 65
3．1．4　movable-view可移動視圖容器 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多項選擇器 78
3．3．3　radio單項選擇器 79
3．3．4　input單行輸入框 79
3．3．5　textarea多行輸入框 82
3．3．6　label改進(jìn)表單可用性 83
3．3．7　picker滾動選擇器 85
3．3．8　slider滑動選擇器 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頁面鏈接組件 100
3．4．2　wx．navigateTo保留當(dāng)前頁跳轉(zhuǎn) 102
3．4．3　wx．redirectTo關(guān)閉當(dāng)前頁跳轉(zhuǎn) 103
3．4．4　wx．switchTab跳轉(zhuǎn)到tabBar頁面 104
3．4．5　wx．navigateBack返回上一頁 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相機 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　登錄設(shè)計 126
3．8．2　手機號注冊設(shè)計 129
3．8．3　企業(yè)用戶注冊設(shè)計 132
3．9　小結(jié) 138
第4章 必備的微信小程序API 139
4．1　請求服務(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會話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保存圖片到相冊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　數(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　加速度計 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　振動 181
4．8．12　手機聯(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　微信小程序支付實戰(zhàn) 195
4．12　分享轉(zhuǎn)發(fā)API 196
4．13 沙場大練兵：仿“豆瓣電影”微信小程序 197
4．13．1　電影頂部頁簽切換效果 197
4．13．2　電影海報輪播效果 200
4．13．3　電影列表方式布局 202
4．13．4　電影詳情介紹頁布局 205
4．13．5　項目上傳與預(yù)覽 211
4．14　小結(jié) 212
第5章 微信小程序云開發(fā) 213
5．1　認(rèn)識小程序云開發(fā) 213
5．1．1　云開發(fā)和傳統(tǒng)開發(fā)的對比 213
5．1．2　創(chuàng)建小程序云開發(fā)項目 213
5．2　云開發(fā)控制臺的使用 215
5．2．1　運營分析 215
5．2．2　數(shù)據(jù)庫 216
5．2．3　存儲 217
5．2．4　云函數(shù) 218
5．2．5　設(shè)置 218
5．2．6　費用和工單 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ù)定時器 225
5．4　云開發(fā)文件存儲 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　云開發(fā)數(shù)據(jù)庫 228
5．5．1　數(shù)據(jù)庫介紹 228
5．5．2　數(shù)據(jù)庫初始化 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ù)庫操作符 232
5．6　沙場大練兵：地址管理云開發(fā) 234
5．6．1　數(shù)據(jù)庫設(shè)計 234
5．6．2　地址列表及刪除地址云開發(fā) 235
5．6．3　新增地址及編輯地址云開發(fā) 239
5．7　小結(jié) 245
第 2篇　綜合案例應(yīng)用
第6章 綜合案例：仿“中國婚博會”微信小程序 246
6．1　需求描述 246
6．2　設(shè)計思路 247
6．3　相關(guān)知識點 247
6．4　準(zhǔn)備工作 248
6．5　設(shè)計流程 249
6．5．1　底部標(biāo)簽導(dǎo)航設(shè)計 249
6．5．2　海報輪播效果設(shè)計 251
6．5．3　宮格導(dǎo)航設(shè)計 252
6．5．4　“全部分類”導(dǎo)航設(shè)計 256
6．5．5　“現(xiàn)金券”下拉菜單篩選條件設(shè)計 261
6．5．6　“現(xiàn)金券”列表頁設(shè)計 263
6．5．7　婚博會索票界面設(shè)計 267
6．5．8　獲知渠道彈出層設(shè)計 271
6．6　小結(jié) 276
第7章 綜合案例：仿“華為商城”微信小程序 277
7．1　需求描述 277
7．2　設(shè)計思路 278
7．3　相關(guān)知識點 278
7．4　準(zhǔn)備工作 279
7．5　設(shè)計流程 279
7．5．1　“我的”界面列表導(dǎo)航設(shè)計 279
7．5．2　賬號登錄 284
7．5．3　用戶注冊 291
7．5．4　首頁布局設(shè)計及動態(tài)獲取數(shù)據(jù) 294
7．5．5　分類導(dǎo)航設(shè)計及動態(tài)獲取數(shù)據(jù) 299
7．6　小結(jié) 302
第8章 綜合案例：記賬本微信小程序云開發(fā) 303
8．1　需求描述 303
8．2　設(shè)計思路 304
8．3　相關(guān)知識點 304
8．4　準(zhǔn)備工作 305
8．5　設(shè)計流程 306
8．5．1　賬戶列表 306
8．5．2　創(chuàng)建賬戶 311
8．5．3　賬戶明細(xì)列表 314
8．5．4　記一筆賬戶明細(xì) 317
8．5．5　分頁獲取賬本列表 322
8．5．6　創(chuàng)建記賬本 325
8．6　小結(jié) 328