第1章 微信小程序簡介 1
1.1 什麼是微信小程序 2
1.2 什麼類型的應用適閤用小程序開發 5
1.3 小程序與原生App(iOS、Android)的優劣對比 6
1.4 小程序會淘汰原生App嗎 10
1.5 Web前端的未來 10
1.6 Web前端開發者與小程序 11
1.7 MINA框架與微信小程序 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.5 Flex布局 36
3.6 小程序自適應單位rpx簡介 39
3.7 全局樣式文件app.wxss 42
3.8 頁麵的根元素page 42
3.9 app.json中的window配置項 44
第4章 文章列錶頁麵 47
4.1 文章列錶頁麵元素分析及準備工作 48
4.2 swiper組件 50
4.3 Boolean值的陷阱 53
4.4 構建文章列錶的骨架和樣式 54
4.5 image組件的4種縮放模式與9種裁剪模式 57
4.5.1 scaleToFill 58
4.5.2 aspectFit 58
4.5.3 aspectFill 59
4.5.4 widthFix 60
4.5.5 9種裁剪模式 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:for 76
4.10 配置單個頁麵導航欄背景色 79
4.11 從歡迎頁麵跳轉到文章頁麵 80
4.11.1 事件 80
4.11.2 redirectTo與navigateTo 82
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.5 include與import引用模闆的區彆 92
5.6 CSS的模塊化 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:else 127
7.2.2 實現收藏點擊功能 128
7.2.3 交互反饋wx:showToast 130
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.11 wx:if與hidden控製元素顯示和隱藏 152
7.12 實現文字評論框和語音評論框的切換 152
7.13 input組件 153
7.14 bindinput事件 154
7.15 屏蔽評論關鍵字 155
7.16 實現自定義發送按鈕 157
7.17 同時支持模擬器迴車、真機點擊“完成”發送評論 161
7.18 圖片與拍照評論的界麵實現 161
7.19 實現從相冊選擇照片與拍照 164
7.20 icon圖片 166
7.21 刪除已選擇的圖片 167
7.22 在小程序中使用CSS 3動畫 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.9 wx.request發送http/https請求 219
10.10 設置wx.request的超時時間 221
10.11 處理返迴的電影數據 221
10.12 綁定處理後的電影數據 224
10.13 http和https在小程序中的使用說明 226
10.14 跳轉到更多電影頁麵 227
10.15 編寫movie-grid-tpl模闆 229
10.16 編寫“更多電影”頁麵 231
10.17 實現頁麵下拉刷新的“三部麯” 234
10.18 在模擬器中可執行下拉刷新但在真機中無法執行下拉刷新的常見錯誤 237
10.19 json中的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及UnionId 313
12.5 模闆消息 316
12.6 form錶單及picker組件 321
12.7 發送模闆消息 323
12.8 微信支付 328
12.9 真實的微信小程序登錄狀態維護 336
第13章 雜項 338
13.1 wx:key 339
13.2 scroll-view組件:在js中控製滾動條 343
13.3 深入理解小程序的單嚮數據綁定機製 348
13.4 深入理解scroll-view組件的bindscrolltolower、lower-threshold屬性 349
13.5 微信小程序發布流程 350
· · · · · · (
收起)