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

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

第　1章 認(rèn)識微信小程序　1

1.1　微信小程序介紹　2

1.1.1　初識微信小程序　2

1.1.2　微信小程序的功能　3

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

1.1.4　微信小程序能取代App嗎　5

1.1.5　微信小程序發(fā)展歷程　5

1.1.6　微信小程序帶來的機會　6

1.2　微信小程序開發(fā)準(zhǔn)備　6

1.2.1　基礎(chǔ)技術(shù)準(zhǔn)備　6

1.2.2　開發(fā)準(zhǔn)備　6

1.3　微信小程序開發(fā)工具的使用　8

1.3.1　創(chuàng)建項目　8

1.3.2　開發(fā)者工具界面　10

1.3.3　模擬器區(qū)域　10

1.3.4　編輯器區(qū)域　11

1.3.5　調(diào)試器區(qū)域　13

1.3.6　工具欄區(qū)域　15

1.3.7　常用快捷鍵　17

1.4　沙場大練兵：Hello World的創(chuàng)建　18

1.5　小結(jié)　20

第　2章 微信小程序框架分析　21

2.1　微信小程序目錄結(jié)構(gòu)介紹　22

2.1.1　框架全局文件　22

2.1.2　工具類文件　26

2.1.3　框架頁面文件　27

2.1.4　小試牛刀：制作貓眼電影底部

　標(biāo)簽導(dǎo)航　28

2.2　微信小程序注冊程序應(yīng)用　29

2.3　微信小程序注冊頁面的使用　31

2.3.1　頁面初始化數(shù)據(jù)　32

2.3.2　生命周期函數(shù)　32

2.3.3　頁面相關(guān)事件處理函數(shù)　32

2.3.4　頁面路由管理　33

2.3.5　自定義函數(shù)　34

2.3.6　setData設(shè)值函數(shù)　34

2.4　微信小程序如何綁定數(shù)據(jù)　35

2.4.1　組件屬性綁定　35

2.4.2　控制屬性綁定　35

2.4.3　關(guān)鍵字綁定　36

2.4.4　運算　36

2.4.5　小試牛刀：天氣微信小程序　36

2.5　微信小程序條件渲染　39

2.5.1　wx:if判斷單個組件　39

2.5.2　block wx:if 判斷多個組件　40

2.6　微信小程序列表渲染　40

2.6.1　wx:for 列表渲染單個組件　40

2.6.2　block wx:for 列表渲染

　多個組件　40

2.6.3　wx:key 指定唯一標(biāo)識符　40

2.7　微信小程序定義模板　41

2.7.1　定義模板　41

2.7.2　使用模板　41

2.8　微信小程序的引用功能　42

2.8.1　import引用　42

2.8.2　include引用　42

2.9　WXS小程序腳本語言　42

2.9.1　模塊化　43

2.9.2　變量與數(shù)據(jù)類型　44

2.9.3　注釋　46

2.9.4　語句　46

2.10　沙場大練兵：仿香哈菜譜

　微信小程序　48

2.10.1　底部標(biāo)簽導(dǎo)航設(shè)計　49

2.10.2　宮格導(dǎo)航設(shè)計　50

2.10.3　香哈頭條初始化數(shù)據(jù)　53

2.10.4　香哈頭條列表渲染及

　綁定數(shù)據(jù)　54

2.10.5　香哈頭條模板引用　58

2.11　小結(jié)　60

第3章　用微信小程序組件

　構(gòu)建UI界面　61

3.1　視圖容器組件　62

3.1.1　view視圖容器　62

3.1.2　scroll-view可滾動視圖區(qū)域　63

3.1.3　swiper滑塊視圖容器　66

3.1.4　movable-view可移動視圖

　容器　69

3.1.5　cover-view覆蓋原生組件的

　視圖容器　70

3.2　基礎(chǔ)內(nèi)容組件　72

3.2.1　icon圖標(biāo)　72

3.2.2　text文本　73

3.2.3　progress進(jìn)度條　74

3.2.4　rich-text富文本　74

3.3　豐富的表單組件　75

3.3.1　button按鈕　75

3.3.2　checkbox多項選擇器　77

3.3.3　radio單項選擇器　78

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滑動選擇器　91

3.3.9　switch開關(guān)選擇器　93

3.3.10　form表單　95

3.4　導(dǎo)航組件　96

3.4.1　navigator頁面鏈接組件　97

3.4.2　wx.navigateTo保留當(dāng)前頁

　跳轉(zhuǎn)　98

3.4.3　wx.redirectTo關(guān)閉當(dāng)前頁

　跳轉(zhuǎn)　99

3.4.4　跳轉(zhuǎn)到tabBar頁面　101

3.4.5　wx.navigateBack返回上一頁　102

3.4.6　設(shè)置導(dǎo)航條　103

3.5　媒體組件　104

3.5.1　audio音頻　104

3.5.2　image圖片　107

3.5.3　video視頻　110

3.5.4　camera相機　112

3.5.5　live-player實時音視頻播放　113

3.5.6　live-pusher實時音視頻錄制　114

3.6　地圖組件　115

3.7　畫布組件　119

3.8　沙場大練兵：表單登錄注冊

　微信小程序　121

3.8.1　登錄設(shè)計　122

3.8.2　手機號注冊設(shè)計　127

3.8.3　企業(yè)用戶注冊設(shè)計　131

3.9　小結(jié)　138

第4章　必備的微信小程序API　139

4.1　請求服務(wù)器數(shù)據(jù)API　140

4.2　文件上傳與下載API　142

4.2.1　wx.uploadFile文件上傳　143

4.2.2　wx.downloadFile文件下載　145

4.3　WebSocket會話API　146

4.4　圖片處理API　151

4.4.1　wx.chooseImage(OBJECT)

　選擇圖片　152

4.4.2　wx.previewImage(OBJECT)

　預(yù)覽圖片　152

4.4.3　wx.getImageInfo(OBJECT)

　獲得圖片信息　153

4.4.4　wx.saveImageToPhotosAlbum

　保存圖片到相冊　154

4.5　文件操作API　155

4.5.1　wx.saveFile保存文件到本地　155

4.5.2　wx.getSavedFileList獲取

　本地文件列表　156

4.5.3　wx.getSavedFileInfo獲取

　本地文件信息　157

4.5.4　wx.removeSavedFile刪除

　本地文件　158

4.5.5　wx.openDocument打開文檔　159

4.5.6　wx.getFileInfo獲取文件信息　159

4.6　數(shù)據(jù)緩存API　160

4.6.1　數(shù)據(jù)緩存到本地　160

4.6.2　獲取本地緩存數(shù)據(jù)　162

4.6.3　移除和清理本地緩存數(shù)據(jù)　165

4.7　位置信息API　166

4.7.1　獲得位置、選擇位置、

　打開位置　166

4.7.2　地圖組件控制　169

4.8　設(shè)備應(yīng)用API　171

4.8.1　獲得系統(tǒng)信息　171

4.8.2　獲取網(wǎng)絡(luò)狀態(tài)　172

4.8.3　加速度計　172

4.8.4　羅盤　173

4.8.5　撥打電話　174

4.8.6　掃碼　174

4.8.7　剪貼板　175

4.8.8　藍(lán)牙　175

4.8.9　屏幕亮度　179

4.8.10　用戶截屏事件　179

4.8.11　振動　179

4.8.12　手機聯(lián)系人　180

4.9　交互反饋API　181

4.9.1　消息提示框　181

4.9.2　模態(tài)彈窗　183

4.9.3　操作菜單　184

4.10　登錄API　185

4.11　微信支付API　191

4.11.1　微信小程序支付介紹　191

4.11.2　微信小程序支付實戰(zhàn)　193

4.12　分享API　212

4.13　沙場大練兵：仿豆瓣電影

　微信小程序　213

4.13.1　電影頂部頁簽切換效果　214

4.13.2　電影海報輪播效果　218

4.13.3　電影列表方式布局　220

4.13.4　電影詳情頁布局　224

4.13.5　項目上傳與預(yù)覽　231

4.14　小結(jié)　232

第5章　微信小程序設(shè)計及問答　233

5.1　微信小程序設(shè)計　234

5.1.1　突出重點，減少干擾項　234

5.1.2　主次動作區(qū)分明顯　234

5.1.3　流程明確，避免打斷　235

5.1.4　局部加載反饋　235

5.1.5　模態(tài)窗口加載反饋　235

5.1.6　彈出式操作結(jié)果　236

5.1.7　模態(tài)對話框操作結(jié)果　236

5.1.8　結(jié)果頁　237

5.1.9　表單填寫友好提示　237

5.2　微信小程序問答　238

5.3　小結(jié)　240

第二篇　綜合案例應(yīng)用

第6章　綜合案例：仿智行火車票

　12306微信小程序　241

6.1　需求描述　243

6.2　設(shè)計思路及相關(guān)知識點　244

6.2.1　設(shè)計思路　244

6.2.2　相關(guān)知識點　244

6.3　準(zhǔn)備工作　245

6.4　設(shè)計流程　245

6.4.1　底部標(biāo)簽導(dǎo)航設(shè)計　245

6.4.2　海報輪播效果設(shè)計　248

6.4.3　火車票查詢界面設(shè)計　250

6.4.4　火車票列表設(shè)計　261

6.4.5　個人中心界面設(shè)計　273

6.4.6　搶票界面設(shè)計　281

6.4.7　項目上傳和預(yù)覽　290

6.5　小結(jié)　291

第7章　綜合案例：仿糗事百科

　微信小程序　292

7.1　需求描述　293

7.2　設(shè)計思路及相關(guān)知識點　294

7.2.1　設(shè)計思路　294

7.2.2　相關(guān)知識點　294

7.3　準(zhǔn)備工作　294

7.4　設(shè)計流程　295

7.4.1　頂部頁簽菜單滑動設(shè)計　295

7.4.2　頂部頁簽菜單切換效果設(shè)計　297

7.4.3　糗事列表頁設(shè)計　299

7.4.4　視頻列表頁設(shè)計　307

7.4.5　分享設(shè)計　309

7.4.6　項目預(yù)覽　310

7.5　小結(jié)　311

第8章　綜合案例：仿中國婚博會

　微信小程序　312

8.1　需求描述　314

8.2　設(shè)計思路及相關(guān)知識點　315

8.2.1　設(shè)計思路　315

8.2.2　相關(guān)知識點　315

8.3　準(zhǔn)備工作　316

8.4　設(shè)計流程　317

8.4.1　底部標(biāo)簽導(dǎo)航設(shè)計　317

8.4.2　海報輪播效果設(shè)計　319

8.4.3　宮格導(dǎo)航設(shè)計　321

8.4.4　全部分類導(dǎo)航設(shè)計　326

8.4.5　現(xiàn)金券下拉菜單篩選

　條件設(shè)計　332

8.4.6　現(xiàn)金券列表頁設(shè)計　335

8.4.7　婚博會索票界面設(shè)計　341

8.4.8　獲知渠道彈出層設(shè)計　346

8.5　小結(jié)　352