微信小程序项目开发实战

本书从实战出发，精心挑选并详解介绍了5个小程序项目案例的开发过程，从而通过项目实战的方式帮助读者理解小程序开发中的各个知识点。本书共11章，分为3篇。第1篇“入门与开发环境搭建”，带领读者创建第一个小程序，并进一步搭建小程序开发的工程化框架；第2篇“项目开发实战”，重点介绍汇率计算器、便签应用、新闻客户端、2048小游戏、网易云音乐小程序5个实际项目案例的开发；第3篇“难点解析与上线运营”，重点介绍小程序开发中常见的难点问题，以及小程序的测试、数据上报和持续运营等知识，帮助读者全面了解小程序的整个生命周期。本书内容丰富，实用性强，适合小程序开发人员及爱好者阅读，尤其适合有一定小程序开发经验的项目开发人员阅读。另外，本书也可以作为相关院校和培训机构的教材。

微信小程序发展到今天已经逐渐成熟，越来越多的开发者想要加入到小程序开发的队伍中来，但是很多开发者在查阅了官方文档后不知道下一步该做什么。本书的目的就是为读者提供小程序的通用开发流程，通过项目实战的方式让读者真正学会小程序开发。
　　目前市面上有许多小程序开发的相关书籍，这些书籍大多是对官方文档的解读，读者阅读完后虽然能对API有一些了解，但是对实际工作中遇到的问题依然不知该如何下手。本书从小程序开发的入门必备知识及开发环境的工程化搭建讲起，然后精心挑选了5个项目实战案例，带领读者通过实践的方式学习微信小程序开发，最后对小程序开发中的重点和难点做了讲解，并对小程序的上线运营做了相关介绍。本书涉及用户交互、UI刷新、富文本展示、数据缓存、前后端交互、Canvas绘制等小程序开发知识。书中涉及的项目开发案例由易到难，由浅入深，可以帮助读者通过实战掌握小程序API的使用，从而构建小程序开发的知识体系。
　　相信在笔者的带领下，读者能够较为轻松地学习并演练书中的每一个项目案例，从而对小程序的开发有更加深刻的认识，并具备实际的小程序开发能力，胜任相关的工作岗位。
本书特色
　　1．不是对API文档的简单罗列，而是通过实际项目带领读者学习
　　本书并不是对相关API进行“干巴巴”的罗列，而是通过多个项目案例带领读者由浅入深地进行学习，从而让读者在项目实战的过程中掌握这些API的使用。
　　2．不仅涉及小程序开发，而且涉及前端开发
　　虽然本书主要介绍的是小程序项目开发，但是在讲解的过程中不仅涉及小程序的开发技巧，而且涉及前端工程化、CSS样式技巧、命令行工具的使用和Git技巧等。本书不仅能帮助读者掌握小程序的开发方法，而且能帮助读者成为一名前端工程师。
　　3．项目案例由浅入深，涉及小程序开发的方方面面
　　本书介绍的项目案例涉及小程序开发的方方面面，包括UI布局、动画开发、缓存设置、网络交互等。这些项目案例由易到难，读者能够循序渐进地掌握。
　　4．项目案例典型，有较高的应用价值
　　本书介绍的项目案例非常典型，覆盖常见的小程序类型，所涉及的知识点在小程序开发中经常会用到。读者对项目案例略加修改，即可将其迁移到自己的项目中，从而提高开发效率。
　　5．提供完善的技术支持
　　本书提供了专门的技术支持邮箱[email protected]和[email protected]。读者在阅读本书的过程中若有疑问，可以通过发送邮件获得帮助。另外，读者还可以在笔者的GitHub上讨论相关问题。
本书知识体系
　　第1篇 入门与开发环境搭建（第1、2章）
　　本篇首先带领读者通过基本方式创建第一个小程序，并介绍小程序中UI组件的使用、页面的刷新及动画制作API的使用，让读者对小程序开发有一个初步的认识。然后进一步搭建小程序开发的工程化框架，为后续小程序的开发打下坚实的基础。
　　第2篇 项目开发实战（第3～9章）
　　本篇重点介绍汇率计算器、便签应用、新闻客户端、2048小游戏和音乐小程序5个实际项目案例的开发过程。本篇介绍的项目由易到难，涵盖小程序API的方方面面，如网络请求、数据缓存、动画绘制、Canvas绘制等。在本篇中，介绍了不同复杂度的项目，以便读者提高对不同复杂度小程序的开发能力。
　　第3篇 难点解析与上线运营（第10、11章）
　　本篇重点介绍小程序开发中常见的难点问题，并给出解决实际问题的源代码，以提高读者解决疑难问题的能力。另外，本篇还介绍了小程序的测试、数据上报和持续运营等知识，以帮助读者全方位了解小程序的整个生命周期。
配套资源获取
　　本书涉及的案例源代码可以在笔者的GitHub仓库中进行下载，地址如下：
　　https://github.com/ssthouse/mini-program-development-code
　　另外，也可以在华章公司的网站（www.hzbook.com）上搜索到本书，然后在本书页面上找到下载链接进行下载。
读者对象
* 想从事小程序开发的人员；
* 小程序项目开发人员；
* 前端开发人员；
* 有小程序开发基础，需要提升项目经验的人员；
* 想通过项目实战提高开发水平的人员；
* 想了解小程序开发流程的程序员；
* 大中专院校的学生；
* 相关培训机构的学员。
阅读建议
* 如果读者完全没有小程序的开发经验，建议先阅读小程序的官方文档，然后再阅读本书，并进行开发实践。
* 本书第2章介绍的开发环境搭建极为重要，读者在本章中能够学到许多前端工程化方面的知识，因此在进行项目实战前，请务必认真阅读本章。
* 虽然本书中的所有项目案例均提供了完整的源代码，但是希望读者在开发时不要直接复制、粘贴源代码，而是亲自编写一遍代码，因为只有这样才能真正掌握开发技巧，对相关知识的理解也会更加深刻。
* 本书第10章为小程序开发难点解析，建议读者在阅读的同时进行编码实践。这些难点问题在读者今后的小程序开发工作中几乎都会遇到，提前掌握它们大有裨益。
售后支持
　　由于作者水平所限，加之时间仓促，书中可能还存在一些疏漏和不足之处，敬请各位读者批评指正。在阅读本书时若有疑问，请发送电子邮件以获得帮助。

前言
第1篇 入门与开发环境搭建
第1章 首个小程序——Hello World 2
1.1 项目创建 2
1.1.1 使用IDE创建项目 2
1.1.2 项目结构介绍 3
1.2 UI组件的使用 7
1.2.1 组件介绍 7
1.2.2 前端杂谈：attribute与property 9
1.2.3 更新页面UI 10
1.3 动画API的使用 11
1.3.1 动画API示例 12
1.3.2 对比Web动画 13
1.3.3 添加动画效果 13
1.4 本章小结 15
第2章 工程化小程序开发 16
2.1 为什么要工程化 16
2.1.1 工程化的好处 16
2.1.2 前端工程化介绍 17
2.2 一步步教你完成webpack配置 21
2.2.1 文件目录打包 21
2.2.2 ES 6自动编译 27
2.2.3 将测试文件从代码包中剔除 29
2.2.4 Sass/Less自动编译 30
2.2.5 小程序热更新 32
2.3 打造自己的项目模板 34
2.3.1 本地初始化项目 35
2.3.2 创建远端项目 37
2.3.3 关联本地项目到远端仓库 39
2.3.4 为模板项目打上tag标签 40
2.3.5 使用模板创建新项目 41
2.4 本章小结 42
第2篇 项目开发实战
第3章 汇率计算器 44
3.1 静态数据展示 44
3.1.1 创建项目 44
3.1.2 页面组成分析 44
3.1.3 页面搭建 46
3.2 基本功能实现 52
3.3 基础货币切换 54
3.4 保存用户设置 59
3.5 本章小结 61
第4章 便签应用 63
4.1 基本页面搭建 63
4.1.1 页面组成分析 63
4.1.2 页面搭建 64
4.2 实现便签管理 68
4.2.1 接口设计 68
4.2.2 接口实现 69
4.2.3 接口调用 71
4.3 实现纯文本便签 73
4.3.1 editor组件简介 73
4.3.2 实现便签编辑页面 74
4.4 实现富文本编辑 75
4.4.1 editor富文本API介绍 75
4.4.2 实现页面布局 76
4.4.3 实现富文本样式 77
4.5 本章小结 78
第5章 新闻客户端 79
5.1 功能分析 79
5.2 API获取及封装 80
5.2.1 获取API 80
5.2.2 封装API调用函数 80
5.3 实现基本的新闻列表 83
5.4 实现新闻话题切换 86
5.5 使用webview实现新闻详情页 89
5.6 实现新闻列表滑动切换 91
5.7 自定义新闻标签 95
5.8 本章小结 102
第6章 2048小游戏（上） 103
6.1 功能分析 103
6.2 基本布局的实现 103
6.2.1 整体页面布局 103
6.2.2 中间的game-panel布局 107
6.3 用户手势检测 110
6.4 滑动逻辑的实现 114
6.4.1 抽取Board类用于管理棋盘 114
6.4.2 实现初始化棋盘逻辑 116
6.4.3 实现初始化棋盘滑动逻辑 117
6.5 方块合并及新方块生成的实现 121
6.5.1 实现方块合并 121
6.5.2 新方块生成 123
6.6 游戏状态管理 125
6.6.1 游戏分数计算 125
6.6.2 游戏结束处理 127
6.6.3 历史最高分记录 130
6.7 UI优化 132
6.8 本章小结 133
第7章 2048小游戏（下） 134
7.1 canvas的使用 134
7.1.1 搭建canvas测试页面 134
7.1.2 在小程序中调用canvas接口 136
7.2 canvas绘图API的使用 138
7.2.1 矩形绘制API 138
7.2.2 path的使用 140
7.2.3 曲线绘制 140
7.3 在canvas中实现动画效果 143
7.4 使用canvas绘制2048静态页面 146
7.4.1 修改棋盘布局 146
7.4.2 改造Board类 147
7.4.3 绘制棋盘静态画面 148
7.5 绘制动画效果 153
7.5.1 绘制方块移动动画 154
7.5.2 绘制新方块出现动画 156
7.6 本章小结 156
第8章 音乐小程序（上） 157
8.1 准备工作 157
8.1.1 启动后端服务 157
8.1.2 创建小程序前端项目 158
8.2 主页面基本框架搭建 160
8.2.1 静态顶部tab的实现 160
8.2.2 tab动态切换的实现 162
8.3 “个性推荐”tab 164
8.3.1 搭建基本结构 165
8.3.2 “推荐歌单”部分的实现 167
8.3.3 “最新音乐”部分的实现 173
8.3.4 “推荐MV”和“主播电台”部分的实现 176
8.4 “歌单”tab 179
8.4.1 全部歌单列表实现 179
8.4.2 切换歌单分类 185
8.5 “主播电台”tab 190
8.5.1 组件创建 190
8.5.2 实现“精彩节目”页面 191
8.5.3 实现“推荐电台”页面 193
8.5.4 实现热门电台部分 196
8.6 “排行榜”tab 198
8.6.1 组件创建 198
8.6.2 数据获取 198
8.6.3 排行榜列表的实现 200
8.7 本章小结 201
第9章 音乐小程序（下） 202
9.1 音乐播放页 202
9.1.1 页面创建 203
9.1.2 静态页面展示 204
9.1.3 音频数据获取 208
9.1.4 音乐播放控制 210
9.1.5 唱片机效果实现 214
9.1.6 音乐进度组件 216
9.1.7 歌词组件 222
9.2 歌单详情页 230
9.2.1 页面创建 230
9.2.2 数据获取 230
9.2.3 静态数据展示 232
9.2.4 跳转逻辑实现 239
9.2.5 排行榜详情页 240
9.3 评论页 240
9.3.1 页面创建 240
9.3.2 数据拉取 241
9.3.3 数据展示 242
9.4 MV页 251
9.4.1 页面创建 251
9.4.2 数据获取 252
9.4.3 基本布局及MV播放 254
9.4.4 “详情”tab展示 256
9.4.5 “评论”tab展示 257
9.4.6 “相关MV”tab展示 258
9.5 用户详情页 259
9.5.1 页面创建 259
9.5.2 数据获取 260
9.5.3 个人信息展示部分 262
9.5.4 歌单列表部分 265
9.6 电台详情页 267
9.6.1 页面创建 267
9.6.2