【课程收益】
课程以项目驱动为宗旨,循序渐进、案例丰富,详细介绍了微信小程序的入门基础知识与使用技巧。
课程分为以下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页面文件代码展示