微信小程序開發(fā)入門與實(shí)踐

微信小程序開發(fā)入門與實(shí)踐目錄第1章微信小程序簡介1

1.1什么是微信小程序2

1.2什么類型的應(yīng)用適合用小程序開發(fā)5

1.3小程序與原生App（iOS、Android）的優(yōu)劣對比6

1.4小程序會(huì)淘汰原生App嗎10

1.5Web前端的未來10

1.6Web前端開發(fā)者與小程序11

1.7MINA框架與微信小程序12

1.8微信小程序beta測試版12

第2章小程序環(huán)境搭建與開發(fā)工具介紹13

2.1微信Web開發(fā)者工具下載及安裝14

2.2新建*個(gè)項(xiàng)目14

2.3微信Web開發(fā)者工具界面功能介紹16

2.3.1編輯選項(xiàng)卡17

2.3.2調(diào)試選項(xiàng)卡19

2.3.3項(xiàng)目選項(xiàng)卡22

2.3.4編譯選項(xiàng)23

2.3.5后臺選項(xiàng)24

2.3.6緩存選項(xiàng)24

2.3.7關(guān)閉選項(xiàng)24

2.3.8快速打開官方API文檔24

2.3.9開發(fā)工具的更新24

2.3.10常用小程序快捷鍵25

第3章從*個(gè)簡單的“Welcome”頁面開始小程序之旅26

3.1認(rèn)識小程序的基本文件結(jié)構(gòu)27

3.2開始動(dòng)手編寫*個(gè)小程序頁面28

3.3構(gòu)建welcome頁面的元素和樣式31

3.4小程序所支持的CSS選擇器35

3.5Flex布局36

3.6小程序自適應(yīng)單位rpx簡介39

3.7全局樣式文件app.wxss42

3.8頁面的根元素page42

3.9app.json中的window配置項(xiàng)44

第4章文章列表頁面47

4.1文章列表頁面元素分析及準(zhǔn)備工作48

4.2swiper組件50

4.3Boolean值的陷阱53

4.4構(gòu)建文章列表的骨架和樣式54

4.5image組件的4種縮放模式與9種裁剪模式57

4.5.1scaleToFill58

4.5.2aspectFit58

4.5.3aspectFill59

4.5.4widthFix60

4.5.59種裁剪模式60

4.6完成靜態(tài)文章列表61

4.7.js文件的代碼結(jié)構(gòu)與Page頁面的生命周期64

4.8數(shù)據(jù)綁定68

4.8.1初始化數(shù)據(jù)綁定69

4.8.2在哪里可以查看數(shù)據(jù)綁定對象70

4.8.3綁定復(fù)雜對象71

4.8.4數(shù)據(jù)綁定更新72

4.9列表渲染wx:for76

4.10配置單個(gè)頁面導(dǎo)航欄背景色79

4.11從歡迎頁面跳轉(zhuǎn)到文章頁面80

4.11.1事件80

4.11.2redirectTo與navigateTo82

4.11.3小程序*多只能有5層頁面83

4.11.4冒泡事件與非冒泡事件84

第5章模塊、模板與緩存85

5.1將文章數(shù)據(jù)從業(yè)務(wù)中分離86

5.2小程序的模塊87

5.3小程序的模板化89

5.4消除template模板對外部變量名的依賴90

5.5include與import引用模板的區(qū)別92

5.6CSS的模塊化93

5.7令人遺憾的模板化而非組件化94

5.8使用緩存在本地模擬服務(wù)器數(shù)據(jù)庫95

5.8.1應(yīng)用程序的生命周期95

5.8.2使用Storage緩存初始化本地?cái)?shù)據(jù)庫96

5.8.3緩存的強(qiáng)制清理及注意事項(xiàng)99

5.9編寫緩存數(shù)據(jù)庫操作類99

5.10使用緩存數(shù)據(jù)庫操作類101

5.11使用ES6改寫緩存操作類102

5.12完善文章數(shù)據(jù)103

5.13完整的data.js數(shù)據(jù)104

第6章文章詳情頁面110

6.1跳轉(zhuǎn)到文章詳情頁面111

6.2不要在template上注冊事件112

6.3頁面間傳遞參數(shù)的3種方式113

6.3.1組件的自定義屬性113

6.3.2通過dataset獲取組件自定義屬性114

6.3.3獲取頁面參數(shù)值115

6.4編譯時(shí)設(shè)置初始化頁面及參數(shù)115

6.5讀取文章詳情數(shù)據(jù)116

6.6文章id號的數(shù)據(jù)流向圖117

6.7編寫文章詳情頁面118

6.8垂直居中問題的經(jīng)典解決方法121

6.9動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題122

6.9.1使用配置文件配置導(dǎo)航欄標(biāo)題122

6.9.2使用wx.setNavigationBarTitle(OBJECT)設(shè)置導(dǎo)航條123

第7章收藏、評論、點(diǎn)贊與計(jì)數(shù)功能124

7.1收藏、評論、點(diǎn)贊、計(jì)數(shù)功能準(zhǔn)備工作125

7.2文章收藏功能127

7.2.1條件渲染：wx:if與wx:else127

7.2.2實(shí)現(xiàn)收藏點(diǎn)擊功能128

7.2.3交互反饋wx:showToast130

7.3文章點(diǎn)贊功能131

7.4本地緩存的重要性及應(yīng)用舉例133

7.5支持文字、圖片、拍照、語音上傳的文章評論134

7.6文章評論頁面的實(shí)現(xiàn)步驟與思路134

7.7獲取并綁定文章評論數(shù)據(jù)135

7.8顯示文章評論數(shù)據(jù)140

7.9實(shí)現(xiàn)圖片預(yù)覽145

7.10實(shí)現(xiàn)提交評論的界面146

7.11wx:if與hidden控制元素顯示和隱藏152

7.12實(shí)現(xiàn)文字評論框和語音評論框的切換152

7.13input組件153

7.14bindinput事件154

7.15屏蔽評論關(guān)鍵字155

7.16實(shí)現(xiàn)自定義發(fā)送按鈕157

7.17同時(shí)支持模擬器回車、真機(jī)點(diǎn)擊“完成”發(fā)送評論161

7.18圖片與拍照評論的界面實(shí)現(xiàn)161

7.19實(shí)現(xiàn)從相冊選擇照片與拍照164

7.20icon圖片166

7.21刪除已選擇的圖片167

7.22在小程序中使用CSS3動(dòng)畫168

7.23實(shí)現(xiàn)圖片評論的發(fā)送170

7.24實(shí)現(xiàn)語音消息的發(fā)送171

7.25實(shí)現(xiàn)語音消息的暫停與播放174

7.26用戶授權(quán)176

7.27解決真機(jī)運(yùn)行時(shí)評論頁面滑動(dòng)卡頓的問題177

7.28文章閱讀計(jì)數(shù)功能177

第8章背景音樂播放180

8.1顯示音樂播放圖標(biāo)181

8.2切換音樂播放圖標(biāo)182

8.3背景音樂播放的特點(diǎn)182

8.4實(shí)現(xiàn)單頁面背景音樂播放183

8.5監(jiān)聽音樂播放185

8.6全局變量與全局音樂播放186

8.7音樂總控開關(guān)192

8.8顯示音樂的封面圖片194

第9章豐富文章頁面195

9.1將頁面分享給朋友和微信群196

9.2從swiper組件跳轉(zhuǎn)到文章詳情頁面197

9.3使用小程序動(dòng)畫實(shí)現(xiàn)點(diǎn)贊特效199

第10章電影204

10.1小程序的tab選項(xiàng)卡205

10.2電影頁面介紹208

10.3編寫豆瓣星星評分組件：stars-tpl模板210

10.4編寫movie-tpl模板212

10.5編寫movie-list-tpl模板213

10.6電影首頁的骨架與樣式215

10.7豆瓣電影API分析216

10.8電影首頁的js編寫217

10.9wx.request發(fā)送http/https請求219

10.10設(shè)置wx.request的超時(shí)時(shí)間221

10.11處理返回的電影數(shù)據(jù)221

10.12綁定處理后的電影數(shù)據(jù)224

10.13http和https在小程序中的使用說明226

10.14跳轉(zhuǎn)到更多電影頁面227

10.15編寫movie-grid-tpl模板229

10.16編寫“更多電影”頁面231

10.17實(shí)現(xiàn)頁面下拉刷新的“三部曲”234

10.18在模擬器中可執(zhí)行下拉刷新但在真機(jī)中無法執(zhí)行下拉刷新的常見錯(cuò)誤237

10.19json中的backgroundColor配置的是哪里的顏色238

10.20實(shí)現(xiàn)上滑加載更多數(shù)據(jù)239

10.21動(dòng)態(tài)設(shè)置導(dǎo)航欄loading圖標(biāo)241

10.22電影搜索244

10.23電影詳情頁面249

10.24電影詳情頁面的骨架和樣式251

10.25編寫電影詳情頁面的業(yè)務(wù)邏輯代碼258

10.26預(yù)覽電影海報(bào)261

10.27設(shè)置電影頁面的導(dǎo)航欄標(biāo)題262

第11章設(shè)置264

11.1設(shè)置頁面265

11.2獲取用戶基本信息272

11.3數(shù)據(jù)緩存的異步操作275

11.4獲取系統(tǒng)信息277

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

11.6獲取當(dāng)前位置信息與當(dāng)前速度信息282

11.7使用微信內(nèi)置地圖查看位置信息283

11.8監(jiān)聽羅盤數(shù)據(jù)制作一個(gè)簡易指南針284

11.9在小程序中實(shí)現(xiàn)搖一搖286

11.10掃碼289

11.11獲取小程序頁面二維碼292

11.12下載并預(yù)覽pdf、word等多種類型文檔293

第12章開放接口300

12.1準(zhǔn)備工作301

12.2用戶登錄301

12.3用戶信息校驗(yàn)307

12.4解析用戶加密數(shù)據(jù)獲取openId及UnionId313

12.5模板消息316

12.6form表單及picker組件321

12.7發(fā)送模板消息323

12.8