微信小程序开发实战-微课视频版

《微信小程序开发实战-微课视频版 （1600分钟视频 21个完整项目案例）》共包含20章，每章均以项目为驱动，将微信小程序的基础知识点分解实现。全书案例由浅入深，从基础篇的创建第一个微信小程序开始，到应用篇的各类API的实现，包括天气查询、口述校史、电子书橱、医疗急救卡、会议邀请函、指南针和手绘时钟等项目； 本书在游戏篇还包含了拼图、推箱子和贪吃蛇游戏； 在提高篇引入了小程序云开发的概念，例如带有云数据库的高校新闻网、带有云存储的电子书橱； 最后在综合篇给出图片分享社区案例，介绍了第三方Vant Weapp组件库，并结合云开发技术实现了生日管家小程序。

《微信小程序开发实战-微课视频版 （1600分钟视频 21个完整项目案例）》包含完整项目案例21个，均在微信web开发者工具和真机中调试通过，并提供全套项目案例源代码、练习题和视频讲解等电子资源供读者下载。本书适用于微信小程序爱好者、程序设计人员和计算机相关专业学生。

周文洁，澳大利亚墨尔本大学信息技术专业毕业，工学硕士学位。曾任职于微软大中华区客

户服务与技术支持中心，现任职于安徽师范大学，从事教学、系统运维和研发等工作。教育

部2018年第一批产学协同育人项目——微信事业部“微信小程序课程改革”负责人。主要从

事Java程序设计、Android程序设计、HTML5网页前端设计等课程教学工作，擅长案例式教学模式，并开发过多个商业项目。近年来出版Web前端开发技术系列教材，独立编著了《HTML5网页前端设计》和《微信小程序开发零基础入门》等教材。

《微信小程序开发实战-微课视频版 （1600分钟视频 21个完整项目案例）》是《微信小程序开发零基础入门》一书的配套实战项目教程，也可单独为具有一定小程序前端开发基础的读者使用。全书以项目驱动为宗旨，循序渐进、案例丰富，详细介绍了微信小程序的入门基础知识与使用技巧。本书包含完整项目案例21个，均在微信web开发者工具（目前版本为1.02.1906141）和真机中调试通过，并提供全套项目案例源代码、练习题和视频讲解等电子资源供读者下载。

前言

本书以项目驱动为宗旨，循序渐进、案例丰富，详细介绍了微信小程序的入门基础知识与使用技巧。

全书共包含20章，可分为以下6个部分：

第一部分是入门篇，包括第1章和第2章。其中第1章是开发前的准备，详细讲解如何注册开发者账号和完善信息，以及开发工具的下载与安装； 第2章是第一个微信小程序，从零开始讲解如何新建项目、真机预览调试等操作，并基于该项目介绍自动生成和手动创建小程序项目的方式。

第二部分是基础篇，包括第3章和第4章。其中第3章是小程序框架，以列表和九宫格两种布局为例，讲解小程序如何使用flex布局进行页面规划； 第4章是小程序组件，以猜数字小游戏为例，介绍表单中文本输入框、按钮等组件的用法。

第三部分是应用篇，包括第5章~第11章。这7个章节分别应用微信小程序中的网络API、媒体API、文件API、数据API、位置API、设备API以及界面API，每个API均对应一个完整的项目实例，包括天气查询、口述校史、电子书橱、医疗急救卡、会议邀请函、指南针和手绘时钟。

第四部分是游戏篇，包括第12章~第14章。这3个章节基于画布组件和绘图相关API分别实现简易版的拼图游戏、推箱子游戏和贪吃蛇游戏。

第五部分是提高篇，包括第15章~第18章。其中第15章综合应用之前所学的小程序前端知识开发一款基于模拟数据的高校新闻网小程序； 第16章和第17章对第15章的项目进行改造，第16章接入自行搭建的服务器后端，形成全栈小程序，第17章引入云开发的概念，直接开通云环境即可快速迭代上线； 第18章对第7章的电子书橱项目进行改造，

接入云存储功能，可以更方便地下载电子书。

第六部分是综合篇，包括第19章和第20章。其中第19章是对全套云能力的综合应用，实现多用户的图片分享社区； 第20章结合云能力和第三方组件库Vant Weapp快速搭建美观、大方的UI界面，实现一款生日管家小程序。

本书有如下几个特点：

（1） 知识全面，循序渐进。

本书首先介绍一些基于小程序框架和组件的基础项目，帮助读者打好基本功； 然后正式进入小程序各类应用API的相关项目介绍，让读者有针对性地逐步巩固常用小程序API的用法； 接着介绍3款小游戏项目，让读者对未来小游戏的开发学习打下基础。在提高篇补充全栈开发和云开发技术，读者可以根据实际情况自行选择使用第三方服务器或云数据库进行快速开发。最后提供两个综合项目实例，让读者进一步提高对于知识的综合应用能力。

（2） 项目驱动，实用性强。

全书前11章将主教材各章节的知识点融入综合项目案例中，帮助读者更好地理解所学知识。第12章~第20章额外提供了游戏开发、全栈开发、云开发和第三方UI组件的应用，具有较强的实用价值，也适合培养读者的动手能力。

（3） 步骤详细，易于理解。

本书思路清晰，知识点循序渐进展开，每章的项目案例均分步骤讲解，读者可以看到从界面设计开始到样式美化以及功能逻辑完成的整个变化过程。读者跟着每章综合案例独立完成开发过程，即可达到小程序前端开发的基本要求。

注： 本书包含21个完整项目案例，均在微信web开发者工具（目前最新版本为v1.02.1906141）和真机中调试通过。本书提供1600分钟的视频讲解，扫描书中相应章节的二维码可以在线观看学习； 本书还提供教学大纲、教学课件、期末试卷、课后拓展作业，扫描封底的课件二维码可以下载。

由于未来微信开发工具软件版本升级和官方文档变更等原因，有可能会导致您在学习时个别功能无法正确显示，如遇此情况请扫描下方二维码查看常见问题汇总文档，我们将会定期更新该文档并告知原因和解决方案。

版本更新

源码+赠送资源

最后感谢清华大学出版社魏江江分社长、王冰飞编辑以及相关工作人员，非常荣幸能有机会与卓越的你们再度合作； 感谢家人和朋友给予的关心和大力支持，本书能够完成与你们的鼓励是分不开的； 特别感谢刘昕语的支持，让我可以专注于书稿的编写、修订。

愿本书能够对读者学习微信小程序有所帮助，并真诚地欢迎读者批评指正，希望能与读者朋友们共同学习成长，在浩瀚的技术之海不断前行。

作者

2019年10月

目录

入门篇

第1章开发前的准备

1.1注册小程序

1.1.1注册开发者账号

1.1.2完善小程序信息

1.1.3管理小程序成员

1.2小程序开发工具

1.2.1软件的下载与安装

1.2.2开发者工具的登录

第2章第一个微信小程序

2.1自动生成小程序

2.1.1项目创建

2.1.2真机预览

2.1.3完整代码展示

2.2手动创建小程序

2.2.1项目创建

2.2.2页面配置

2.2.3视图设计

2.2.4逻辑实现

2.2.5完整代码展示

基础篇

第3章小程序框架

3.1列表布局小程序

3.1.1项目创建

3.1.2页面配置

3.1.3视图设计

3.1.4逻辑实现

3.1.5完整代码展示

3.2九宫格布局小程序

3.2.1项目创建

3.2.2页面配置

3.2.3视图设计

3.2.4逻辑实现

3.2.5完整代码展示

第4章小程序组件·猜数字游戏

4.1项目创建

4.2页面配置

4.2.1创建页面文件

4.2.2删除和修改文件

4.3视图设计

4.3.1导航栏设计

4.3.2公共样式设计

4.3.3页面设计

4.4逻辑实现

4.4.1游戏页面的逻辑实现

4.4.2首页的逻辑实现

4.5完整代码展示

4.5.1主体文件代码展示

4.5.2首页代码展示

4.5.3“游戏规则”页面代码展示

4.5.4“关于我们”页面代码展示

4.5.5开始游戏（game）代码展示

应用篇

第5章小程序网络API·天气查询

5.1准备工作

5.1.1API密钥申请

5.1.2API调用方法

5.1.3服务器域名配置

5.2项目创建

5.3页面配置

5.3.1创建页面文件

5.3.2删除和修改文件

5.3.3创建其他文件

5.4视图设计

5.4.1导航栏设计

5.4.2页面设计

5.5逻辑实现

5.5.1更新省、市、区信息

5.5.2获取实况天气数据

5.5.3更新页面天气信息

5.6完整代码展示

第6章小程序媒体API·口述校史

6.1项目创建

6.2页面配置

6.2.1创建页面文件

6.2.2删除和修改文件

6.2.3创建其他文件

6.3视图设计

6.3.1导航栏设计

6.3.2页面设计

6.4逻辑实现

6.4.1更新播放列表

6.4.2点击播放视频

6.4.3发送弹幕

6.5完整代码展示

第7章小程序文件API·电子书橱

7.1准备工作

7.2项目创建

7.3页面配置

7.3.1创建页面文件

7.3.2删除和修改文件

7.4视图设计

7.4.1导航栏设计

7.4.2页面设计

7.5逻辑实现

7.5.1更新图书列表

7.5.2封装提示消息

7.5.3打开指定图书

7.5.4保存下载的图书

7.5.5下载并阅读图书

7.6完整代码展示

第8章小程序数据API·医疗急救卡

8.1项目介绍

8.2项目创建

8.3页面配置

8.3.1创建页面文件

8.3.2删除和修改文件

8.4视图设计

8.4.1导航栏设计

8.4.2页面设计

8.5逻辑实现

8.5.1尚未创建医疗急救卡的首页的逻辑实现

8.5.2医疗急救卡创建页的逻辑实现

8.5.3已经创建急救卡的首页的逻辑实现

8.6完整代码展示

8.6.1应用文件代码展示

8.6.2页面文件代码展示

第9章小程序位置API·会议邀请函

9.1项目创建

9.2页面配置

9.2.1创建页面文件

9.2.2删除和修改文件

9.2.3创建其他文件

9.3视图设计

9.3.1导航栏设计

9.3.2页面设计

9.4逻辑实现

9.4.1更新嘉宾列表

9.4.2更新地图位置

9.4.3查看地图详情

9.5完整代码展示

第10章小程序设备API·指南针

10.1项目创建

10.2页面配置

10.2.1创建页面文件

10.2.2删除和修改文件

10.2.3创建其他文件

10.3视图设计

10.3.1导航栏设计

10.3.2页面设计

10.4逻辑实现

10.4.1指南针旋转动画

10.4.2更新角度和方向信息

10.4.3更新地理位置信息

10.5完整代码展示

第11章小程序界面API·手绘时钟

11.1项目创建

11.2页面配置

11.2.1创建页面文件

11.2.2删除和修改文件

11.3视图设计

11.3.1导航栏设计

11.3.2页面设计

11.4逻辑实现

11.4.1创建画布上下文

11.4.2绘制时钟刻度

11.4.3绘制时钟指针

11.4.4显示数字电子时钟

11.4.5每秒实时更新

11.5完整代码展示

游戏篇

第12章小程序游戏·拼图游戏

12.1需求分析

12.1.1首页功能需求

12.1.2游戏页功能需求

12.2项目创建

12.3页面配置

12.3.1创建页面文件

12.3.2删除和修改文件

12.3.3创建其他文件

12.4视图设计

12.4.1导航栏设计

12.4.2页面设计

12.5逻辑实现

12.5.1首页逻辑

12.5.2游戏页逻辑

12.6完整代码展示

12.6.1应用文件代码展示

12.6.2页面文件代码展示

第13章小程序游戏·推箱子游戏

13.1需求分析

13.1.1首页功能需求

13.1.2游戏页功能需求

13.2项目创建

13.3页面配置

13.3.1创建页面文件

13.3.2删除和修改文件

13.3.3创建其他文件

13.4视图设计

13.4.1导航栏设计

13.4.2页面设计

13.5逻辑实现

13.5.1公共逻辑

13.5.2首页逻辑

13.5.3游戏页逻辑

13.6完整代码展示

13.6.1应用文件代码展示

13.6.2公共函数文件代码展示

13.6.3页面文件代码展示

第14章小程序游戏·贪吃蛇游戏

14.1需求分析

14.1.1首页功能需求

14.1.2游戏页功能需求

14.2项目创建

14.3页面配置

14.3.1创建页面文件

14.3.2删除和修改文件

14.3.3创建其他文件

14.4视图设计

14.4.1导航栏设计

14.4.2页面设计

14.5数据模型设计

14.5.1贪吃蛇模型设计

14.5.2蛇身移动模型

14.5.3蛇吃食物模型

14.6逻辑实现

14.6.1首页逻辑

14.6.2游戏页逻辑

14.7完整代码展示

14.7.1应用文件代码展示

14.7.2页面文件代码展示

提高篇

第15章小程序前端综合实例·基于模拟数据的高校新闻网

15.1需求分析

15.1.1首页功能需求

15.1.2新闻页功能需求

15.1.3个人中心页功能需求

15.2项目创建

15.3页面配置

15.3.1创建页面文件

15.3.2删除和修改文件

15.3.3创建其他文件

15.4视图设计

15.4.1导航栏设计

15.4.2tabBar设计

15.4.3页面设计

15.5逻辑实现

15.5.1公共逻辑

15.5.2首页逻辑

15.5.3新闻页逻辑

15.5.4个人中心页逻辑

15.5.5清除临时数据

15.6完整代码展示

15.6.1应用文件代码展示

15.6.2公共函数文件代码展示

15.6.3页面文件代码展示

15.7项目小结

第16章小程序全栈开发·基于WAMP的高校新闻网

16.1初始化项目

16.1.1现有项目导入

16.1.2后端逻辑实现

16.1.3公共逻辑

16.2首页改造

16.2.1新闻列表展示

16.2.2加载更多新闻

16.2.3点击跳转新闻内容

16.3新闻页改造

16.4个人中心页改造

16.5完整代码展示

16.5.1应用文件代码展示

16.5.2公共函数文件代码展示

16.5.3页面文件代码展示

第17章小程序云开发·基于云数据库的高校新闻网

17.1云开发简介

17.1.1什么是云开发

17.1.2云开发能力介绍

17.1.3云开发的开通步骤

17.2初始化项目

17.2.1创建云模板项目

17.2.2迁移老项目

17.2.3部署云数据库

17.3首页改造

17.3.1展示新闻列表

17.3.2展示滚动图片

17.3.3触底自动加载新闻列表

17.3.4点击新闻列表传递新闻编号

17.4新闻阅读页改造

17.5个人中心页改造

17.6完整代码展示

17.6.1应用文件代码展示

17.6.2公共函数文件代码展示

17.6.3页面文件代码展示

第18章小程序云开发·基于云存储的电子书橱

18.1初始化项目

18.1.1创建云模板项目

18.1.2迁移老项目

18.1.3部署云文件存储

18.1.4部署云数据库

18.2首页改造

18.2.1展示图书列表

18.2.2点击跳转图书详情页

18.3图书详情页改造

18.3.1页面设计

18.3.2页面逻辑

18.3.3阅读图书功能

18.4完整代码展示

18.4.1应用文件代码展示

18.4.2页面文件代码展示

综合篇

第19章小程序云开发·基于全套云能力的图片分享社区

19.1初始化项目

19.1.1创建云模板项目

19.1.2部署云数据库

19.1.3创建页面文件

19.2视图设计

19.2.1导航栏设计

19.2.2页面设计

19.3逻辑实现

19.3.1用户个人信息获取逻辑

19.3.2上传图片页逻辑

19.3.3首页逻辑

19.3.4个人主页逻辑

19.3.5图片展示页逻辑

19.4完整代码展示

19.4.1应用文件代码展示

19.4.2云函数文件代码展示

19.4.3页面文件代码展示

第20章小程序UI组件库·基于Vant Weapp的生日管家

20.1小程序自定义组件简介

20.1.1什么是自定义组件

20.1.2自定义组件的引用方式

20.1.3小程序UI组件库Vant Weapp

20.1.4Vant Weapp的下载和安装

20.2需求分析

20.2.1首页功能需求

20.2.2好友信息编辑页功能需求

20.2.3好友信息展示页功能需求

20.3初始化项目

20.3.1创建云模板项目

20.3.2部署云数据库

20.3.3创建页面文件

20.3.4创建其他文件

20.4视图设计

20.4.1导航栏设计

20.4.2页面设计

20.5逻辑实现

20.5.1公共逻辑

20.5.2好友信息编辑页逻辑

20.5.3首页逻辑

20.5.4好友信息展示页逻辑

20.6完整代码展示

20.6.1应用文件代码展示

20.6.2公共函数文件代码展示

20.6.3页面文件代码展示

附录A服务器部署

A.1服务器域名配置

A.1.1配置流程

A.1.2HTTPS证书

A.2临时服务器部署

A.2.1软件部署

A.2.2网络请求

A.2.3跳过域名校验

附录B可视化数据库搭建

B.1软件部署

B.2创建数据库

B.3分配用户权限

附录C后端框架搭建

C.1后端框架部署

C.2数据库对接配置

C.3接口制作示例

附录D个人开发者服务类目以及小程序场景值、小程序预定颜色