第1章微信小程序簡介11.1什么是微信小程序2
1.2什么類型的應用適合用小程序開發5
1.3小程序與原生App(iOS、Android)的優劣對比6
1.4小程序會淘汰原生App嗎10
1.5Web前端的未來10
1.6Web前端開發者與小程序11
1.7MINA框架與微信小程序12
1.8微信小程序beta測試版12
第2章小程序環境搭建與開發工具介紹13
2.1微信Web開發者工具下載及安裝14
2.2新建第一個項目14
2.3微信Web開發者工具界面功能介紹16
2.3.1編輯選項卡17
2.3.2調試選項卡19
2.3.3項目選項卡22
2.3.4編譯選項23
2.3.5后臺選項24
2.3.6緩存選項24
2.3.7關閉選項24
2.3.8快速打開官方API文檔24
2.3.9開發工具的更新24
2.3.10常用小程序快捷鍵25
第3章從第一個簡單的“Welcome”頁面開始小程序之旅26
3.1認識小程序的基本文件結構27
3.2開始動手編寫第一個小程序頁面28
3.3構建welcome頁面的元素和樣式31
3.4小程序所支持的CSS選擇器35
3.5Flex布局36
3.6小程序自適應單位rpx簡介39
3.7全局樣式文件app.wxss42
3.8頁面的根元素page42
3.9app.json中的window配置項44
第4章文章列表頁面47
4.1文章列表頁面元素分析及準備工作48
4.2swiper組件50
4.3Boolean值的陷阱53
4.4構建文章列表的骨架和樣式54
4.5image組件的4種縮放模式與9種裁剪模式57
4.5.1scaleToFill58
4.5.2aspectFit58
4.5.3aspectFill59
4.5.4widthFix60
4.5.59種裁剪模式60
4.6完成靜態文章列表61
4.7.js文件的代碼結構與Page頁面的生命周期64
4.8數據綁定68
4.8.1初始化數據綁定69
4.8.2在哪里可以查看數據綁定對象70
4.8.3綁定復雜對象71
4.8.4數據綁定更新72
4.9列表渲染wx:for76
4.10配置單個頁面導航欄背景色79
4.11從歡迎頁面跳轉到文章頁面80
4.11.1事件80
4.11.2redirectTo與navigateTo82
4.11.3小程序最多只能有5層頁面83
4.11.4冒泡事件與非冒泡事件84
第5章模塊、模板與緩存85
5.1將文章數據從業務中分離86
5.2小程序的模塊87
5.3小程序的模板化89
5.4消除template模板對外部變量名的依賴90
5.5include與import引用模板的區別92
5.6CSS的模塊化93
5.7令人遺憾的模板化而非組件化94
5.8使用緩存在本地模擬服務器數據庫95
5.8.1應用程序的生命周期95
5.8.2使用Storage緩存初始化本地數據庫96
5.8.3緩存的強制清理及注意事項99
5.9編寫緩存數據庫操作類99
5.10使用緩存數據庫操作類101
5.11使用ES6改寫緩存操作類102
5.12完善文章數據103
5.13完整的data.js數據104
第6章文章詳情頁面110
6.1跳轉到文章詳情頁面111
6.2不要在template上注冊事件112
6.3頁面間傳遞參數的3種方式113
6.3.1組件的自定義屬性113
6.3.2通過dataset獲取組件自定義屬性114
6.3.3獲取頁面參數值115
6.4編譯時設置初始化頁面及參數115
6.5讀取文章詳情數據116
6.6文章id號的數據流向圖117
6.7編寫文章詳情頁面118
6.8垂直居中問題的經典解決方法121
6.9動態設置導航欄標題122
6.9.1使用配置文件配置導航欄標題122
6.9.2使用wx.setNavigationBarTitle(OBJECT)設置導航條123
第7章收藏、評論、點贊與計數功能124
7.1收藏、評論、點贊、計數功能準備工作125
7.2文章收藏功能127
7.2.1條件渲染:wx:if與wx:else127
7.2.2實現收藏點擊功能128
7.2.3交互反饋wx:showToast130
7.3文章點贊功能131
7.4本地緩存的重要性及應用舉例133
7.5支持文字、圖片、拍照、語音上傳的文章評論134
7.6文章評論頁面的實現步驟與思路134
7.7獲取并綁定文章評論數據135
7.8顯示文章評論數據140
7.9實現圖片預覽145
7.10實現提交評論的界面146
7.11wx:if與hidden控制元素顯示和隱藏152
7.12實現文字評論框和語音評論框的切換152
7.13input組件153
7.14bindinput事件154
7.15屏蔽評論關鍵字155
7.16實現自定義發送按鈕157
7.17同時支持模擬器回車、真機點擊“完成”發送評論161
7.18圖片與拍照評論的界面實現161
7.19實現從相冊選擇照片與拍照164
7.20icon圖片166
7.21刪除已選擇的圖片167
7.22在小程序中使用CSS3動畫168
7.23實現圖片評論的發送170
7.24實現語音消息的發送171
7.25實現語音消息的暫停與播放174
7.26用戶授權176
7.27解決真機運行時評論頁面滑動卡頓的問題177
7.28文章閱讀計數功能177
第8章背景音樂播放180
8.1顯示音樂播放圖標181
8.2切換音樂播放圖標182
8.3背景音樂播放的特點182
8.4實現單頁面背景音樂播放183
8.5監聽音樂播放185
8.6全局變量與全局音樂播放186
8.7音樂總控開關192
8.8顯示音樂的封面圖片194
第9章豐富文章頁面195
9.1將頁面分享給朋友和微信群196
9.2從swiper組件跳轉到文章詳情頁面197
9.3使用小程序動畫實現點贊特效199
第10章電影204
10.1小程序的tab選項卡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發送http/https請求219
10.10設置wx.request的超時時間221
10.11處理返回的電影數據221
10.12綁定處理后的電影數據224
10.13http和https在小程序中的使用說明226
10.14跳轉到更多電影頁面227
10.15編寫movie-grid-tpl模板229
10.16編寫“更多電影”頁面231
10.17實現頁面下拉刷新的“三部曲”234
10.18在模擬器中可執行下拉刷新但在真機中無法執行下拉刷新的常見錯誤237
10.19json中的backgroundColor配置的是哪里的顏色238
10.20實現上滑加載更多數據239
10.21動態設置導航欄loading圖標241
10.22電影搜索244
10.23電影詳情頁面249
10.24電影詳情頁面的骨架和樣式251
10.25編寫電影詳情頁面的業務邏輯代碼258
10.26預覽電影海報261
10.27設置電影頁面的導航欄標題262
第11章設置264
11.1設置頁面265
11.2獲取用戶基本信息272
11.3數據緩存的異步操作275
11.4獲取系統信息277
11.5獲取網絡狀態281
11.6獲取當前位置信息與當前速度信息282
11.7使用微信內置地圖查看位置信息283
11.8監聽羅盤數據制作一個簡易指南針284
11.9在小程序中實現搖一搖286
11.10掃碼289
11.11獲取小程序頁面二維碼292
11.12下載并預覽pdf、word等多種類型文檔293
第12章開放接口300
12.1準備工作301
12.2用戶登錄301
12.3用戶信息校驗307
12.4解析用戶加密數據獲取openId及UnionId313
12.5模板消息316
12.6form表單及picker組件321
12.7發送模板消息323
12.8微信支付328
12.9真實的微信小程序登錄狀態維護336
第13章雜項338
13.1wx:key339
13.2scroll-view組件:在js中控制滾動條343
13.3深入理解小程序的單向數據綁定機制348
13.4深入理解scroll-view組件的bindscrolltolower、lower-threshold屬性349
13.5微信小程序發布流程350