目  錄


第1章  概述 1
1.1  微信小程序概述 1
1.2  小程序分析 1
1.3  模塊展示 2
第2章  框架簡介 8
2.1  微信小程序框架簡介 8
2.1.1  小程序配置 8
2.1.2  小程序框架 9
2.1.3  小程序接口 10
2.2  Vue框架簡介 13
2.2.1  Vue配置 14
2.2.2  Vue組件 18
2.2.3  Vue工具 19
2.3  mpvue框架簡介 21
2.3.1  mpvue配置 21
2.3.2  mpvue生命周期 22
2.3.3  mpvue實踐 24
小結 28
習題 28
第3章  布局模塊 30
3.1  模塊概述 30
3.2  模塊知識點 31
3.2.1  基礎布局 31
3.2.2  Flex布局 34
3.2.3  Grid布局 39
3.3  應用實踐 44
3.3.1  首頁布局 44
3.3.2  授權頁布局 50
3.4  知識拓展 54
3.4.1  界面適配 54
3.4.2  響應式布局 54
小結 61
習題 61
第4章  動畫模塊 63
4.1  模塊概述 63
4.2  模塊知識點——動畫基礎 64
4.3  應用實踐 70
4.3.1  上拉加載，下拉刷新頁 70
4.3.2  Loading頁 75
4.4  知識拓展 78
4.4.1  認識Canvas與SVG 78
4.4.2  Animate動畫庫 78
4.4.3  3D動畫 79
小結 82
習題 83
第5章  事件模塊 85
5.1  模塊概述 85
5.2  模塊知識點 85
5.2.1  點擊事件 86
5.2.2  拖動事件 86
5.2.3  滑動事件 88
5.2.4  長按事件 89
5.3  應用實踐 90
5.3.1  消息發送頁 90
5.3.2  輪播展示頁 94
5.4  知識拓展 99
5.4.1  事件代理與委托 99
5.4.2  函數去抖與節流 102
小結 104
習題 104
第6章  網絡請求模塊 106
6.1  模塊概述 106
6.2  模塊知識點 107
6.2.1  Ajax請求 107
6.2.2  微信小程序網絡請求 109
6.2.3  請求封裝 110
6.3  應用實踐 113
6.3.1  動態加載列表頁 113
6.3.2  文章發布頁 119
6.4  知識拓展 124
6.4.1  常用HTTP狀態碼 124
6.4.2  Restful風格API 125
6.4.3  Fetch與Ajax比較 125
6.4.4  form-data、x-www-form-urlencoded、raw、binary的區別 126
小結 126
習題 126
第7章  頁面渲染模塊 128
7.1  模塊概述 128
7.2  模塊知識點 128
7.2.1  mpvue渲染機制 128
7.2.2  小程序渲染機制 129
7.2.3  動態渲染數據 130
7.3  應用實踐——數據統計頁 134
7.4  知識拓展 140
7.4.1  基於D3.js的數據展示平臺 140
7.4.2  初識Three.js 143
小結 148
習題 149
第8章  音頻、視頻模塊 151
8.1  模塊概述 151
8.2  模塊知識點 151
8.2.1  小程序音頻 151
8.2.2  小程序視頻 154
8.3  應用實踐——音頻、視頻展示頁 154
8.4  知識拓展 157
8.4.1  視頻彈幕展示 157
8.4.2  基於小程序的直播 158
小結 161
習題 161
第9章  文件模塊 162
9.1  模塊概述 162
9.2  模塊知識點 163
9.2.1  文件上傳、下載 163
9.2.2  文件緩存 166
9.3  應用實踐 166
9.3.1  視頻上傳頁 166
9.3.2  文件下載頁 170
9.4  知識拓展——斷點續傳 171
小結 174
習題 174
第10章  通信模塊 175
10.1  模塊概述 175
10.2  模塊知識點 176
10.2.1  Ajax輪詢 176
10.2.2  Ajax長輪詢 176
10.2.3  WebSocket通信 176
10.2.4  Vue頁面通信 177
10.3  應用實踐 181
10.3.1  消息發送頁 181
10.3.2  繫統消息推送頁 183
10.3.3  點對點推送頁 184
10.4  知識拓展 189
小結 191
習題 191
第11章  定位模塊 192
11.1  模塊概述 192
11.2  模塊知識點 192
11.2.1  HTML 5地理定位 192
11.2.2  微信小程序地理定位 193
11.3  應用實踐 195
11.3.1  位置信息展示頁 195
11.3.2  範圍內容搜索頁 196
11.4  應用拓展 202
11.4.1  常用平臺經緯度轉化 202
11.4.2  位置距離點計算 203
小結 203
習題 203
第12章  支付模塊 205
12.1  模塊概述 205
12.2  模塊知識點 205
12.2.1  微信支付接入流程 205
12.2.2  微信支付開發流程 206
12.3  應用實踐 207
12.4  應用拓展 212
小結 213
習題 213
第13章  應用擴展 215
13.1  應用優化 215
13.2  部署發布 220
小結 220
習題 220

前  言


近年來隨著互聯網的快速發展，Web前端開發在國內掀起一股熱潮。尤其是HTML?5提升了瀏覽器客戶端的開發能力，使客戶端應用更加豐富。依托HTML 5的相關技術，衍生出大量的前端框架，推動了前後端分離的實現，Vue是其中優秀的代表。
微信小程序是一種不需要下載安裝就可以使用的應用程序。它依托微信生態，可以在微信內被便捷地獲取和傳播，用戶掃一掃或者搜一搜即可打開應用。
Vue.js是一套構建用戶界面的漸進式框架，采用自底向上增量開發設計。開發者通常把Vue.js簡稱為Vue，本書遵循該約定。Vue 的核心庫隻關注視圖層，方便與第三方庫或既有項目整合。mpvue是一個使用Vue開發小程序的前端框架，它修改了Vue的runtime和compilper實現，使其可以運行在小程序環境中。本書中采用了mpvue框架來開發微信小程序。
市面上關於小程序和Vue框架應用開發的書籍很多，但是大部分都集中在基礎知識的講解，對於使用mpvue將Vue和小程序結合開發的案例，卻鮮有涉及。本書以一個線上項目開發過程為主線，詳細講解具體模塊知識點及其在開發場景的應用，終使讀者掌握微信小程序開發過程。
本書具有以下特點：
（1）層次分明，循序漸進。本書從第2章到第7章介紹基礎知識；從第8章到12章，著重講解應用實戰相關知識；第13章講解應用擴展知識。讀者學習知識的同時，可完整體驗整個開發過程。
（2）結構清晰，內容簡練。每章節從基礎知識介紹入手，將相關知識點用於實際應用中並進行適當拓展。
（3）案例驅動，源碼追溯。本書所有案例均可以通過提供的示例代碼查看；相關功能的效果，均可以使用微信搜索小程序找到配套案例應用。
（4）配圖豐富，圖文並茂。本書使用較多的圖片介紹應用界面，幫助開發者理解知識點。
本書包括基礎知識和實踐知識，方便有前端開發基礎的讀者快速入門小程序開發，適合已經掌握HTML 5、CSS 3和JavaScript基礎知識的讀者，在書中不僅可以學習Vue相關知識，還可以學習小程序特有的知識點。
本書配套案例使用說明：
（1）博客小程序配套源代碼地址（後文簡稱博客源代碼）：https://github.com/itbook- program/itbook-blog。
（2）其他學習案例源碼地址（後文簡稱學習案例源代碼）：https://github.com/itbook- program/itbook-demo。
（3）小程序端配套的後臺管理繫統地址：https://admin.itbook.club進入。
（4）小程序API接口地址：https://doc.itbook.club/swagger-ui.html查看。
本書由張廷杭、仲寶纔任主編，姚鑫、顏德彪任副主編。其中：第1、2章由姚鑫編寫，第3~6章由仲寶纔編寫，第7~12章由張廷杭編寫，第13章由顏德彪編寫。張廷杭完成配套後臺繫統的開發工作，仲寶纔負責全文的審閱和校訂工作。
由於時間倉促，編者水平有限，書中難免存在疏漏與不妥之處，懇請廣大讀者批評指正。

編  者  
2019年12月