本书通过“博客小程序”项目完整地讲解基于Vue的微信小程序开发流程。全书共13章，其中前7章着重讲解微信小程序开发的基础知识，包括框架简介、页面布局、动画实现、事件处理、网络请求和页面渲染；第8～13章着重讲解项目实战相关知识，包括音视频处理、文件上传和下载、网络通信、定位和在线支付。通过知识点与实践相结合，可使读者掌握知识的同时学会知识的运用，并且感受项目开发的乐趣。
　　本书适合作为高等院校计算机相关专业“微信小程序开发”课程的教材，也可以作为广大开发人员和编程爱好者的参考用书。

本书适合作为高等院校计算机相关专业“微信小程序开发”课程的教材，也可以作为广大开发人员和编程爱好者的参考用书。

前 言
　　
　　
　　近年来随着互联网的快速发展，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月

张廷杭，有三年前端开发经验，曾就职于SAP成都，目前就职于中国移动咪咕公司。自2017年小程序推出以来，就开始学习小程序开发，目前已经上线10余款小程序。有丰富的小程序开发经验。仲宝才，副教授，目前在成都东软学院任职，10多年高校教学经验，在JavaEE应用开发、Android应用开发和小程序开发方面具有丰富的实践和教学经验。

目 录
　　
　　
第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