刘晖：微信小程序开发实战详解

【课程收益】

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

课程分为以下6个部分：

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

第二部分是基础篇，以列表和九宫格两种布局为例，讲解小程序如何使用flex布局进行页面规划；从案例入手，介绍表单中文本输入框、按钮等组件的用法。

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

第四部分是游戏篇，基于画布组件和绘图相关API分别实现简易版的拼图游戏、推箱子游戏和贪吃蛇游戏。

第五部分是提高篇，综合应用之前所学的小程序前端知识开发一款基于模拟数据的小程序；对项目进行改造，接入自行搭建的服务器后端，形成全栈小程序，引入云开发的概念，直接开通云环境即可快速迭代上线；

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

【课程时长】

2天（6小时/天）

【课程大纲】

第一部分 入门篇

第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逻辑实现

第二部分 基础篇

第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逻辑实现

第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更新页面天气信息

第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发送弹幕

第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下载并阅读图书

第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查看地图详情

第10章小程序设备API 案例5

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更新地理位置信息

第11章小程序界面API 案例6

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每秒实时更新

第四部分 游戏篇

第12章 小程序游戏 案例1

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游戏页逻辑

第13章 小程序游戏 案例2

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游戏页逻辑

第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游戏页逻辑

第五部分 提高篇

第15章 小程序前端综合实例 案例1

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章 小程序全栈开发 案例2

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章小程序云开发 案例3

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章小程序云开发 案例4

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阅读图书功能

第六部分 综合篇

第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组件库 案例

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页面文件代码展示