《小程序项目开发实战》从实战出发，精心挑选了5个小程序项目案例，并详细介绍它们的开发过程，从而帮助读者理解小程序开发中的各个知识点。不同于已经出版的一些小程序书籍只是简单罗列API文档，本书没有对API泛泛而谈，而是在项目实战中讲解API的使用技巧，帮助读者更好地掌握小程序开发技术。本书涉及的项目案例均给出了详尽的源代码和讲解，不仅可以教会读者如何开发小程序，而且还可以启发读者的开发思路。

《小程序项目开发实战》共11章，分为3篇。篇“入门与开发环境搭建”，带领读者创建个小程序，并进一步搭建小程序开发的工程化框架；第2篇“项目开发实战”，重点介绍汇率计算器、便签应用、新闻客户端、2048小游戏和音乐小程序5个实际项目案例的开发过程；第3篇“难点解析与上线运营”，重点介绍小程序开发中常见的难点问题，以及小程序的测试、数据上报和持续运营等知识，帮助读者全面了解小程序的整个生命周期。

《小程序项目开发实战》内容丰富，实用性强，适合小程序开发人员及爱好者阅读，尤其适合有小程序开发经验的项目开发人员阅读。另外，本书也可以作为相关院校和培训机构的教材。

篇 入门与开发环境搭建

章 小程序——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 数据获取 268

9.6.3 电台信息展示部分 270

9.6.4 节目列表部分 272

9.7 电台节目播放页 273

9.7.1 页面创建 273

9.7.2 数据获取 274

9.7.3 电台信息展示部分 275

9.8 本章小结 279

第3篇 难点解析与上线运营

0章 小程序开发难点解析 282

10.1 多图列表页面性能问题 282

10.1.1 问题分析 282

10.1.2 如何解决 285

10.1.3 总结思路 288

10.2 代码包的大小限制 289

10.2.1 如何减少代码包的大小 289

10.2.2 为什么存在该限制 290

10.3 图片懒加载问题 291

10.3.1 分析解决方案 291

10.3.2 实现一个可复用的懒加载组件 292

10.3.3 测试使用懒加载组件 295

10.4 页面数量限制问题 297

10.4.1 分析目前的问题 298

10.4.2 实现页面数量突破限制 299

10.4.3 测试效果 302

10.5 本章小结 304

1章 小程序上线及运营 305

11.1 数据埋点 305

11.1.1 自定义平台数据上报 305

11.1.2 小程序接口数据上报 307

11.2 小程序测试 310

11.2.1 单元测试 310

11.2.2 UI适配 316

11.2.3 旁路测试 318

11.2.4 错误上报 320

11.3 小程序运营 321

11.3.1 提交审核 321

11.3.2 提升用户黏性 323

11.3.3 广告接入 324

11.4 本章小结 327

沈顺天 前端开发工程师。曾任Works Applications软件开发工程师，现任腾讯（上海）科技有限公司前端开发高级工程师。在腾讯公司参与开发了天天P图、疯狂变脸和换个头像等多款小程序。热爱开源，在GitHub上有多个开源项目。

诚意之作，腾讯公司前端开发高级工程师倾力打造；

全面分享来自小程序开创者腾讯公司的一线开发实战经验；

腾讯、百度、小红书等知名公司的3位技术专家力荐；

并非对API进行“干巴巴”的罗列，而是通过5个项目案例带领读者学习；

不仅介绍小程序开发知识，而且介绍前端工程化、CSS样式及Git技巧等内容；

项目案例涉及UI布局、动画开发、缓存设置和网络交互等小程序开发的方方面面；

项目案例典型，覆盖常见的小程序类型，读者略加修改即可迁移到自己的项目中；

提供电子邮箱方便答疑解惑，并提供作者的GitHub供读者讨论相关问题。