基于Vue的微信小程序開發(fā)實(shí)踐教程
定 價(jià):39.8 元
叢書名:“十三五”高等職業(yè)教育規(guī)劃教材
- 作者:張廷杭,仲寶才 著
- 出版時(shí)間:2020/6/1
- ISBN:9787113268930
- 出 版 社:中國鐵道出版社
- 中圖法分類:TN929.53
- 頁碼:228
- 紙張:膠版紙
- 版次:1
- 開本:16開
本書通過“博客小程序”項(xiàng)目完整地講解基于Vue的微信小程序開發(fā)流程。全書共13章,其中前7章著重講解微信小程序開發(fā)的基礎(chǔ)知識(shí),包括框架簡介、頁面布局、動(dòng)畫實(shí)現(xiàn)、事件處理、網(wǎng)絡(luò)請(qǐng)求和頁面渲染;第8~13章著重講解項(xiàng)目實(shí)戰(zhàn)相關(guān)知識(shí),包括音視頻處理、文件上傳和下載、網(wǎng)絡(luò)通信、定位和在線支付。通過知識(shí)點(diǎn)與實(shí)踐相結(jié)合,可使讀者掌握知識(shí)的同時(shí)學(xué)會(huì)知識(shí)的運(yùn)用,并且感受項(xiàng)目開發(fā)的樂趣。
本書適合作為高等院校計(jì)算機(jī)相關(guān)專業(yè)“微信小程序開發(fā)”課程的教材,也可以作為廣大開發(fā)人員和編程愛好者的參考用書。
本書適合作為高等院校計(jì)算機(jī)相關(guān)專業(yè)“微信小程序開發(fā)”課程的教材,也可以作為廣大開發(fā)人員和編程愛好者的參考用書。
前 言
近年來隨著互聯(lián)網(wǎng)的快速發(fā)展,Web前端開發(fā)在國內(nèi)掀起一股熱潮。尤其是HTML?5提升了瀏覽器客戶端的開發(fā)能力,使客戶端應(yīng)用更加豐富。依托HTML 5的相關(guān)技術(shù),衍生出大量的前端框架,推動(dòng)了前后端分離的實(shí)現(xiàn),Vue是其中優(yōu)秀的代表。
微信小程序是一種不需要下載安裝就可以使用的應(yīng)用程序。它依托微信生態(tài),可以在微信內(nèi)被便捷地獲取和傳播,用戶掃一掃或者搜一搜即可打開應(yīng)用。
Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架,采用自底向上增量開發(fā)設(shè)計(jì)。開發(fā)者通常把Vue.js簡稱為Vue,本書遵循該約定。Vue 的核心庫只關(guān)注視圖層,方便與第三方庫或既有項(xiàng)目整合。mpvue是一個(gè)使用Vue開發(fā)小程序的前端框架,它修改了Vue的runtime和compilper實(shí)現(xiàn),使其可以運(yùn)行在小程序環(huán)境中。本書中采用了mpvue框架來開發(fā)微信小程序。
市面上關(guān)于小程序和Vue框架應(yīng)用開發(fā)的書籍很多,但是大部分都集中在基礎(chǔ)知識(shí)的講解,對(duì)于使用mpvue將Vue和小程序結(jié)合開發(fā)的案例,卻鮮有涉及。本書以一個(gè)線上項(xiàng)目開發(fā)過程為主線,詳細(xì)講解具體模塊知識(shí)點(diǎn)及其在開發(fā)場景的應(yīng)用,最終使讀者掌握微信小程序開發(fā)過程。
本書具有以下特點(diǎn):
。1)層次分明,循序漸進(jìn)。本書從第2章到第7章介紹基礎(chǔ)知識(shí);從第8章到12章,著重講解應(yīng)用實(shí)戰(zhàn)相關(guān)知識(shí);第13章講解應(yīng)用擴(kuò)展知識(shí)。讀者學(xué)習(xí)知識(shí)的同時(shí),可完整體驗(yàn)整個(gè)開發(fā)過程。
(2)結(jié)構(gòu)清晰,內(nèi)容簡練。每章節(jié)從基礎(chǔ)知識(shí)介紹入手,將相關(guān)知識(shí)點(diǎn)用于實(shí)際應(yīng)用中并進(jìn)行適當(dāng)拓展。
。3)案例驅(qū)動(dòng),源碼追溯。本書所有案例均可以通過提供的示例代碼查看;相關(guān)功能的效果,均可以使用微信搜索小程序找到配套案例應(yīng)用。
(4)配圖豐富,圖文并茂。本書使用較多的圖片介紹應(yīng)用界面,幫助開發(fā)者理解知識(shí)點(diǎn)。
本書包括基礎(chǔ)知識(shí)和實(shí)踐知識(shí),方便有前端開發(fā)基礎(chǔ)的讀者快速入門小程序開發(fā),適合已經(jīng)掌握HTML 5、CSS 3和JavaScript基礎(chǔ)知識(shí)的讀者,在書中不僅可以學(xué)習(xí)Vue相關(guān)知識(shí),還可以學(xué)習(xí)小程序特有的知識(shí)點(diǎn)。
本書配套案例使用說明:
。1)博客小程序配套源代碼地址(后文簡稱博客源代碼):https://github.com/itbook- program/itbook-blog。
。2)其他學(xué)習(xí)案例源碼地址(后文簡稱學(xué)習(xí)案例源代碼):https://github.com/itbook- program/itbook-demo。
。3)小程序端配套的后臺(tái)管理系統(tǒng)地址:https://admin.itbook.club進(jìn)入。
。4)小程序API接口地址:https://doc.itbook.club/swagger-ui.html查看。
本書由張廷杭、仲寶才任主編,姚鑫、顏德彪任副主編。其中:第1、2章由姚鑫編寫,第3~6章由仲寶才編寫,第7~12章由張廷杭編寫,第13章由顏德彪編寫。張廷杭完成配套后臺(tái)系統(tǒng)的開發(fā)工作,仲寶才負(fù)責(zé)全文的審閱和校訂工作。
由于時(shí)間倉促,編者水平有限,書中難免存在疏漏與不妥之處,懇請(qǐng)廣大讀者批評(píng)指正。
編 者
2019年12月
張廷杭,有三年前端開發(fā)經(jīng)驗(yàn),曾就職于SAP成都,目前就職于中國移動(dòng)咪咕公司。自2017年小程序推出以來,就開始學(xué)習(xí)小程序開發(fā),目前已經(jīng)上線10余款小程序。有豐富的小程序開發(fā)經(jīng)驗(yàn)。仲寶才,副教授,目前在成都東軟學(xué)院任職,10多年高校教學(xué)經(jīng)驗(yàn),在JavaEE應(yīng)用開發(fā)、Android應(yīng)用開發(fā)和小程序開發(fā)方面具有豐富的實(shí)踐和教學(xué)經(jīng)驗(yàn)。
目 錄
第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實(shí)踐 24
小結(jié) 28
習(xí)題 28
第3章 布局模塊 30
3.1 模塊概述 30
3.2 模塊知識(shí)點(diǎn) 31
3.2.1 基礎(chǔ)布局 31
3.2.2 Flex布局 34
3.2.3 Grid布局 39
3.3 應(yīng)用實(shí)踐 44
3.3.1 首頁布局 44
3.3.2 授權(quán)頁布局 50
3.4 知識(shí)拓展 54
3.4.1 界面適配 54
3.4.2 響應(yīng)式布局 54
小結(jié) 61
習(xí)題 61
第4章 動(dòng)畫模塊 63
4.1 模塊概述 63
4.2 模塊知識(shí)點(diǎn)——?jiǎng)赢嫽A(chǔ) 64
4.3 應(yīng)用實(shí)踐 70
4.3.1 上拉加載,下拉刷新頁 70
4.3.2 Loading頁 75
4.4 知識(shí)拓展 78
4.4.1 認(rèn)識(shí)Canvas與SVG 78
4.4.2 Animate動(dòng)畫庫 78
4.4.3 3D動(dòng)畫 79
小結(jié) 82
習(xí)題 83
第5章 事件模塊 85
5.1 模塊概述 85
5.2 模塊知識(shí)點(diǎn) 85
5.2.1 點(diǎn)擊事件 86
5.2.2 拖動(dòng)事件 86
5.2.3 滑動(dòng)事件 88
5.2.4 長按事件 89
5.3 應(yīng)用實(shí)踐 90
5.3.1 消息發(fā)送頁 90
5.3.2 輪播展示頁 94
5.4 知識(shí)拓展 99
5.4.1 事件代理與委托 99
5.4.2 函數(shù)去抖與節(jié)流 102
小結(jié) 104
習(xí)題 104
第6章 網(wǎng)絡(luò)請(qǐng)求模塊 106
6.1 模塊概述 106
6.2 模塊知識(shí)點(diǎn) 107
6.2.1 Ajax請(qǐng)求 107
6.2.2 微信小程序網(wǎng)絡(luò)請(qǐng)求 109
6.2.3 請(qǐng)求封裝 110
6.3 應(yīng)用實(shí)踐 113
6.3.1 動(dòng)態(tài)加載列表頁 113
6.3.2 文章發(fā)布頁 119
6.4 知識(shí)拓展 124
6.4.1 常用HTTP狀態(tài)碼 124
6.4.2 Restful風(fēng)格API 125
6.4.3 Fetch與Ajax比較 125
6.4.4 form-data、x-www-form-urlencoded、raw、binary的區(qū)別 126
小結(jié) 126
習(xí)題 126
第7章 頁面渲染模塊 128
7.1 模塊概述 128
7.2 模塊知識(shí)點(diǎn) 128
7.2.1 mpvue渲染機(jī)制 128
7.2.2 小程序渲染機(jī)制 129
7.2.3 動(dòng)態(tài)渲染數(shù)據(jù) 130
7.3 應(yīng)用實(shí)踐——數(shù)據(jù)統(tǒng)計(jì)頁 134
7.4 知識(shí)拓展 140
7.4.1 基于D3.js的數(shù)據(jù)展示平臺(tái) 140
7.4.2 初識(shí)Three.js 143
小結(jié) 148
習(xí)題 149
第8章 音頻、視頻模塊 151
8.1 模塊概述 151
8.2 模塊知識(shí)點(diǎn) 151
8.2.1 小程序音頻 151
8.2.2 小程序視頻 154
8.3 應(yīng)用實(shí)踐——音頻、視頻展示頁 154
8.4 知識(shí)拓展 157
8.4.1 視頻彈幕展示 157
8.4.2 基于小程序的直播 158
小結(jié) 161
習(xí)題 161
第9章 文件模塊 162
9.1 模塊概述 162
9.2 模塊知識(shí)點(diǎn) 163
9.2.1 文件上傳、下載 163
9.2.2 文件緩存 166
9.3 應(yīng)用實(shí)踐 166
9.3.1 視頻上傳頁 166
9.3.2 文件下載頁 170
9.4 知識(shí)拓展——斷點(diǎn)續(xù)傳 171
小結(jié) 174
習(xí)題 174
第10章 通信模塊 175
10.1 模塊概述 175
10.2 模塊知識(shí)點(diǎn) 176
10.2.1 Ajax輪詢 176
10.2.2 Ajax長輪詢 176
10.2.3 WebSocket通信 176
10.2.4 Vue頁面通信 177
10.3 應(yīng)用實(shí)踐 181
10.3.1 消息發(fā)送頁 181
10.3.2 系統(tǒng)消息推送頁 183
10.3.3 點(diǎn)對(duì)點(diǎn)推送頁 184
10.4 知識(shí)拓展 189
小結(jié) 191
習(xí)題 191
第11章 定位模塊 192
11.1 模塊概述 192
11.2 模塊知識(shí)點(diǎn) 192
11.2.1 HTML 5地理定位 192
11.2.2 微信小程序地理定位 193
11.3 應(yīng)用實(shí)踐 195
11.3.1 位置信息展示頁 195
11.3.2 范圍內(nèi)容搜索頁 196
11.4 應(yīng)用拓展 202
11.4.1 常用平臺(tái)經(jīng)緯度轉(zhuǎn)化 202
11.4.2 位置距離點(diǎn)計(jì)算 203
小結(jié) 203
習(xí)題 203
第12章 支付模塊 205
12.1 模塊概述 205
12.2 模塊知識(shí)點(diǎn) 205
12.2.1 微信支付接入流程 205
12.2.2 微信支付開發(fā)流程 206
12.3 應(yīng)用實(shí)踐 207
12.4 應(yīng)用拓展 212
小結(jié) 213
習(xí)題 213
第13章 應(yīng)用擴(kuò)展 215
13.1 應(yīng)用優(yōu)化 215
13.2 部署發(fā)布 220
小結(jié) 220
習(xí)題 220