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

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

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

1.1　微信小程序介紹　2

1.1.1　初識(shí)微信小程序　2

1.1.2　微信小程序的功能　3

1.1.3　微信小程序的使用場(chǎng)景　3

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

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

1.1.6　微信小程序帶來(lái)的機(jī)會(huì)　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)建項(xià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　沙場(chǎng)大練兵：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　框架頁(yè)面文件　27

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

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

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

2.3　微信小程序注冊(cè)頁(yè)面的使用　31

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

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

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

2.3.4　頁(yè)面路由管理　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　運(yùn)算　36

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

2.5　微信小程序條件渲染　39

2.5.1　wx:if判斷單個(gè)組件　39

2.5.2　block wx:if 判斷多個(gè)組件　40

2.6　微信小程序列表渲染　40

2.6.1　wx:for 列表渲染單個(gè)組件　40

2.6.2　block wx:for 列表渲染

　多個(gè)組件　40

2.6.3　wx:key 指定唯一標(biāo)識(shí)符　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小程序腳本語(yǔ)言　42

2.9.1　模塊化　43

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

2.9.3　注釋　46

2.9.4　語(yǔ)句　46

2.10　沙場(chǎng)大練兵：仿香哈菜譜

　微信小程序　48

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

2.10.2　宮格導(dǎo)航設(shè)計(jì)　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可滾動(dòng)視圖區(qū)域　63

3.1.3　swiper滑塊視圖容器　66

3.1.4　movable-view可移動(dòng)視圖

　容器　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多項(xiàng)選擇器　77

3.3.3　radio單項(xiàng)選擇器　78

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

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

3.3.10　form表單　95

3.4　導(dǎo)航組件　96

3.4.1　navigator頁(yè)面鏈接組件　97

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

　跳轉(zhuǎn)　98

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

　跳轉(zhuǎn)　99

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

3.4.5　wx.navigateBack返回上一頁(yè)　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相機(jī)　112

3.5.5　live-player實(shí)時(shí)音視頻播放　113

3.5.6　live-pusher實(shí)時(shí)音視頻錄制　114

3.6　地圖組件　115

3.7　畫布組件　119

3.8　沙場(chǎng)大練兵：表單登錄注冊(cè)

　微信小程序　121

3.8.1　登錄設(shè)計(jì)　122

3.8.2　手機(jī)號(hào)注冊(cè)設(shè)計(jì)　127

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

3.9　小結(jié)　138

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

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

4.2　文件上傳與下載API　142

4.2.1　wx.uploadFile文件上傳　143

4.2.2　wx.downloadFile文件下載　145

4.3　WebSocket會(huì)話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

　保存圖片到相冊(cè)　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　加速度計(jì)　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　振動(dòng)　179

4.8.12　手機(jī)聯(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　微信小程序支付實(shí)戰(zhàn)　193

4.12　分享API　212

4.13　沙場(chǎng)大練兵：仿豆瓣電影

　微信小程序　213

4.13.1　電影頂部頁(yè)簽切換效果　214

4.13.2　電影海報(bào)輪播效果　218

4.13.3　電影列表方式布局　220

4.13.4　電影詳情頁(yè)布局　224

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

4.14　小結(jié)　232

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

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

5.1.1　突出重點(diǎn)，減少干擾項(xiàng)　234

5.1.2　主次動(dòng)作區(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)對(duì)話框操作結(jié)果　236

5.1.8　結(jié)果頁(yè)　237

5.1.9　表單填寫友好提示　237

5.2　微信小程序問(wèn)答　238

5.3　小結(jié)　240

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

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

　12306微信小程序　241

6.1　需求描述　243

6.2　設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)　244

6.2.1　設(shè)計(jì)思路　244

6.2.2　相關(guān)知識(shí)點(diǎn)　244

6.3　準(zhǔn)備工作　245

6.4　設(shè)計(jì)流程　245

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

6.4.2　海報(bào)輪播效果設(shè)計(jì)　248

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

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

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

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

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

6.5　小結(jié)　291

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

　微信小程序　292

7.1　需求描述　293

7.2　設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)　294

7.2.1　設(shè)計(jì)思路　294

7.2.2　相關(guān)知識(shí)點(diǎn)　294

7.3　準(zhǔn)備工作　294

7.4　設(shè)計(jì)流程　295

7.4.1　頂部頁(yè)簽菜單滑動(dòng)設(shè)計(jì)　295

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

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

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

7.4.5　分享設(shè)計(jì)　309

7.4.6　項(xiàng)目預(yù)覽　310

7.5　小結(jié)　311

第8章　綜合案例：仿中國(guó)婚博會(huì)

　微信小程序　312

8.1　需求描述　314

8.2　設(shè)計(jì)思路及相關(guān)知識(shí)點(diǎn)　315

8.2.1　設(shè)計(jì)思路　315

8.2.2　相關(guān)知識(shí)點(diǎn)　315

8.3　準(zhǔn)備工作　316

8.4　設(shè)計(jì)流程　317

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

8.4.2　海報(bào)輪播效果設(shè)計(jì)　319

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

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

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

　條件設(shè)計(jì)　332

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

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

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

8.5　小結(jié)　352