《微信小程序项目案例开发》教学大纲教案Word格式文档下载.docx
《《微信小程序项目案例开发》教学大纲教案Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《《微信小程序项目案例开发》教学大纲教案Word格式文档下载.docx（35页珍藏版）》请在冰豆网上搜索。
难点：
理解native、视图层和渲染层的通信原理，掌握网络通信、媒体组件应用、文件操作、读写缓存等机制原理与限制，canvas画图和动画设计，小程序云开发技巧等。
04教学内容和学时分配
（一）第1章浅谈微信小程序
2学时
主要内容：
介绍小程序的诞生、特点和主要功能，讲解如何注册开发者账号和完善信息、开发工具的下载与安装使用，以及简单小程序项目目录结构。
微信小程序发者账号的创建，开发者工具的使用。
熟悉开发者工具的使用及理解小程序项目各类主体文件的作用。
（二）第2章小程序的视图与渲染
2学时
介绍小程序的视图层及渲染过程，讲解各种页面的数据绑定方法，使用模板与引用代码段的步骤及其相关案例。
WXML文件代码的基础语法，数据绑定与渲染标签。
条件渲染及列表渲染的方法，模板的引用。
（三）第3章小程序的事件
1学时
介绍小程序的事件与事件对象的概念，讲解事件类型及事件绑定类型的案例。
常用的事件对象及其对应的绑定方式。
事件的两大类型冒泡与非冒泡事件，以及如何阻止冒泡事件。
（四）第4章【扶贫超市Part1】开发准备
介绍扶贫超市实战项目的基本功能及需求分析，申请账号并新建项目，完成扶贫超市项目的第一部分内容。
项目需求分析和功能模块划分，申请账号并创建项目雏形框架。
项目需求分析和功能模块划分。
（五）第5章小程序项目的配置与生命周期1学时
介绍小程序项目的app.json全局配置，讲解小程序的生命周期和全局变量与函数。
小程序项目的全局配置，页面、窗口、tabBar等配置方法。
小程序的生命周期，app对象和变量函数。
（六）第6章小程序页面的配置与生命周期2学时
讲解微信小程序页面的窗口配置，页面生命周期函数及执行过程，并结合新闻客户端案例学习页面跳转和参数传递。
掌握小程序的页面生命周期函数，页面跳转和参数传递的过程。
理解小程序页面生命周期函数的执行顺序和过程。
（七）第7章【扶贫超市Part2】项目页面框架配置1学时
完成扶贫超市项目页面框架配置，主要包含项目目录整理、项目tarBar配置以及项目窗口配置。
项目目录结构的搭建与tarBar和window配置。
项目页面框架的全局设计与属性值配置。
（八）第8章页面布局2学时
讲解视图层和基础布局模型flex的用法，相对定位与绝对定位布局，并通过简易计算器案例讲解布局实战。
flex布局与相对、绝对定位布局。
flex布局的理解和配置。
（九）第9章小程序的样式基础2学时
讲解样式的基本使用、样式属性的配置，以及样式选择器的使用。
样式的基本用法和样式属性的配置。
样式选择器的用法
（十）第10章组件4学时
按照功能分类依次介绍视图容器、基础内容、表单、导航、多媒体和地图组件的用法。
掌握小程序视图层各类组件的用法
小程序组件的运用场景，了解各组件的主要配置属性及效果
（十一）第11章操作反馈工具与简单的界面API2学时
讲解四种操作反馈工具toast、modal、loading和action-sheet的基本使用，并结合案例介绍几种页面反馈API的基本使用，包括设置背景、设置tabBar、动态加载字体、下拉刷新等。
小程序各种页面反馈工具和界面API的使用
tabBar与页面导航的切换方法，Background背景样式的设置
（十二）第12章【扶贫超市Part3】主要页面的UI2学时
讲解扶贫超市项目的主要页面UI设计过程，包括首页页面、分类页面、购物车页面、“我的”页面、管理端商品管理页面等页面的UI设计。
各主要页面的UI设计和样式代码编写。
页面UI的flex布局和样式效果调试。
（十三）第13章认识云开发项目2学时
介绍微信小程序云开发的概念及其组成部分，创建云开发项目实例讲解构建和部署云环境，完成新建云函数、获取openid、管理文件和操作数据库等任务内容。
云函数的创建和调用，云开发数据库的原理理解和操作使用。
云开发数据库的原理理解和操作过程。
（十四）第14章云开发数据库2学时
介绍云开发数据库的概念，并详细介绍其数据类型、权限控制、安全规则等，并演示云开发数据库的复杂操作。
掌握小程序云开发的数据库类型和权限控制，并学会基本的数据库操作。
云开发数据库的查询匹配及联表查询。
（十五）第15章云函数及其调试2学时
讲解小程序的云函数新建、部署和调用过程，包括云函数的常见操作和调试测试。
掌握熟悉云函数中JS语法书写、函数调用和调试。
云函数的云端调试和本地调试方法。
（十六）第16章【扶贫超市Part4】构建数据库与商品管理2学时
讲解扶贫超市项目的后台部分，主要包括数据库设计和云端集合操作，并结合云端数据库完善项目中的商品管理wxml代码和JS逻辑函数设计。
数据库的设计，相关逻辑函数的编写。
云函数的调用。
（十七）第17章系统底层的基础API2学时
介绍了获取系统信息API、定时器API和扫码API，并讲解了API函数的调试方法。
小程序系统底层API的用法和调试方法。
小程序开发工具调试模式调试方法及断点调试方法。
（十八）第18章网络与文件上传API2学时
讲解微信小程序网络API和文件API的用法，包括发起和中断请求，文件传输、保存、信息获取，文件的打开删除等操作，以及号码归属地查询小程序案例讲解了wx.request的应用。
小程序各类网络API和文件API的用法与限制
网络请求的原理，本地文件与临时文件区别用法，以及各类API对文件源的要求。
（十九）第19章数据缓存API2学时
讲解微信小程序数据缓存API的用法，包括本地缓存、数据的存储、获取、删除、清空等操作，并讲解与缓存相关的API函数测试案例。
小程序各类数据缓存API的用法。
异步数据与同步数据的区别，缓存原理与限制。
（二十）第20章位置API2学时
讲解微信小程序位置API的用法，包括位置信息的获取，获取和选择位置，查看位置，地图组件控制，并讲解位置API测试和路径导航案例。
小程序各类位置API的用法。
两种地图坐标系的区别，标记的处理。
（二十一）第21章获取用户信息及登录态管理2学时
介绍用户数据信息分类与开放数据获取流程，讲解用户登录态管理及其实现机制。
小程序获取用户信息的相关API及其用法。
用户登录态的实现机制。
（二十二）第22章【扶贫超市Part5】商品图片上传功能2学时
完成扶贫超市项目的商品图片上传功能部分，包括本地图片选择及云开发端将图片写入数据库等操作，实现图片的选择上传、预览与删除等功能。
图片选择上传、预览与删除功能的实现
图片的选择上传与删除逻辑实现。
（二十三）第23章扶贫超市项目功能完善6学时
完善扶贫超市项目的其他主要功能，包括商品详情页面、购物车管理、结算与确认订单、设置收货地址、提交订单并支付等相关功能页面的页面效果和业务逻辑实现。
项目各主要功能部分的页面和逻辑代码编写。
云函数的调用以及部分功能如订单支付的逻辑处理。
09教学日历
05选用教材
12教案
课程
名称
总
计：
48
学时
类别
专业选修课
学分
3.0
周学时：
04
编码
开课
学期
任课
教师
职称
授课
对象
具有数据库、WEB开发或前端基础的学生
选课
人数
教材
微信小程序贯穿式项目实战
作者
兰红
出版社及
出版时间
清华大学出版社
2021年1月
简介
本课程基于微信小程序平台开发，从基础开始学习，循序渐进，通过理论知识与大量的案例来介绍微信小程序开发的各方面知识。
具体内容包括：
微信小程序的前端基础知识、小程序项目全局配置、页面配置以及生命周期、小程序开发的页面布局、样式、组件使用、云开发的项目构建及数据库、API函数的使用，最后讲解“扶贫超市购物程序”微信小程序项目案例的综合设计与完整实现。
通过本课程的学习，使学生对微信小程序有较好的理解，对小程序的开发有较好的掌握。
专业技能方面，加强实训教学，通过大量的上机练习、代码阅读、代码改错、规范化检查，训练学生编写程序的熟练度和规范性；
通过项目实践，提升动手能力，将所学知识整合运用到项目中。
职业素质方面，通过项目组角色分配、技术研讨等多种训练手段，培养学生具备良好的职业习惯，实现学生在校即具备准职业人素养的目标。
教学
目的
本课程将以项目驱动为宗旨，以丰富案例作实践，并以“扶贫超市购物程序”项目作为贯穿课程的实战项目，从零开始系统讲授微信小程序开发的入门基础知识与开发技巧。
结合课堂讲授、课程实验、网络教学资源共享等方式，使学生系统地理解和掌握微信小程序的设计、开发和实现方法。
方法
程序设计类的课程需要大量的实操训练，因而课程教学采用机房授课，便于加强学生实践操作，同时课堂教学与网络教学相结合，以提高学生的思维能力、综合能力与创新能力。
1.1.
本课程主要采用机房授课，理论方面多媒体课件+板书，实践方面带领学生针对具体问题分析需求，设计解决方案，学习相关知识点和API，然后代码实现。
2.2.
通过网络教学平台+课程实验+课程视频的授课方式，帮助学生理解重点难点内容。
3.2.师生通过电话、QQ、微信、课程网络教学平台留言窗口等多种方式建立联系、答疑。
4.3.通过案例演示和新技术新方法介绍，让学生学会使用文献检索工具查找资料并将理论与实际应用结合起来，激发学习兴趣。
重点
课程的重点在于培养学生基于微信平台开发的能力，了解小程序框架原理，各类组件API的应用效果和使用方式，灵活应用前端基本编程方法和技巧，掌握微信小程序开发的完整设计、实现、测试和发布。
难点
课程的难点在于培养学生面对具体需求独立思考、分析问题和创新设计的能力。
要求
使学习者在学习过程中逐步理解微信小程序框架基本原理，熟悉常用的API，掌握各类组件及事件处理，能够结合Web后台实现程序前端设计，为学生学习后续从事计算机专业开发、考研、考软件设计师等打下良好的软件开发基础。
考核
方式
1.本课程以考核为主：
2.过程考评可增加在线测验，题型主要有：
选择题、填空题、简答题、代码阅读题、代码设计题。
3.实验注重过程考核：
包括平时的上机实验（20%）+结课前的机考（10%），上机实验包括：
实验预习（5%）、出勤率（5%）、完成情况（30%）、现场提问（30%）、实验报告（30%）。
实验内容主要是根据课程进度完成所需的项目功能，为最终实现完整项目做准备。
4.
最终作品为微信小程序前端+PHP/Servlet后台的完整项目，作品发布并演示，撰写报告。
参考
资料
[1]
兰红.微信小程序贯穿式项目实战[M].
北京:
清华大学出版社,2021.
[2]
周文洁.微信小程序开发零基础入门[M].
清华大学出版社,2019.
起周
止周
第1周~第12周
第
1
讲
授课内容
浅谈微信小程序
教学目的
与要求
了解小程序的诞生、特点和主要功能，学会如何注册开发者账号和完善信息、开发工具的下载与安装使用，以及理解简单小程序项目目录结构。
熟悉开发者工具的使用及理解项目各类主体文件的作用。
教学进程
安排
1.1
小程序简介
1.2
小程序开发准备
1.3
小程序开发工具的使用
1.4
小程序项目目录结构
课后学习
任务布置
小程序开发者工具环境配置，完善开发者账号信息
简单小程序的调试运行和真机测试
主要
参考资料
教材：
课后总结分析
开发者账号注册的注意事项，运用开发者工具进行简单小程序项目真机调试，在手机端实现成功运行第一个微信小程序“Hello，Word！
”。
2
小程序的视图与渲染
了解小程序的视图层及渲染过程，学会各种页面的数据绑定方法，标签渲染、模板与代码段的定义和引用使用等
2.1
视图与渲染过程
2.2
数据绑定
2.3
渲染标签
2.4
模板与引用
案例九九乘法表
完善九九乘法表案例
课后
总结分析
复习WXML、WXSS、JS代码语法，参考HTML网页知识。
3
小程序的事件基础与项目基本配置
理解小程序的事件与事件对象的概念，了解事件类型及事件绑定类型的知识；
学会小程序项目的全局配置，掌握小程序的生命周期和全局变量与函数的用法。
常用的事件对象及其对应的绑定方式，项目的全局配置方法。
冒泡与非冒泡事件，小程序的生命周期。
3.1
事件对象
3.2
事件类型
3.3
事件绑定类型
5.1app.json配置属性
5.2
页面配置
5.3
窗口配置
5.4tabBar配置
5.5
网络超时配置
5.6
权限配置
5.7
小程序的生命周期
案例使用app对象的案例
1.
冒泡事件测试案例实现。
2.
生命周期测试案例和app对象测试案例实现。
及时复习熟悉项目配置和生命周期的执行过程，并熟练使用事件和获取事件相关对象的数据信息。
4
小程序页面的配置与生命周期
了解微信小程序页面的窗口配置，并能区分页面配置和全局配置；
理解页面生命周期函数及执行过程，并结合新闻客户端案例掌握页面跳转和参数传递方法。
掌握页面生命周期函数，页面跳转和参数传递的过程。
6.1
小程序的页面配置
6.2
页面的生命周期
6.3
页面跳转
6.4
页面间的参数传递
案例
新闻客户端
完善新闻客户端案例
复习页面生命周期函数的用法，页面的三种切换方式。
5
实战项目“扶贫超市”的前期工作
完成“扶贫超市”项目Part1和Part2:
了解项目基本功能及需求分析，申请账号并新建项目；
对项目进行页面框架配置，主要包含项目目录整理、项目tarBar配置以及项目窗口配置。
项目需求分析和功能模块划分，申请账号，创建项目框架并进行项目目录结构的搭建与全局配置
需求分析和功能模块划分，页面框架的全局设计与属性值配置
4.1
项目背景与需求
4.2
开发准备
7.1
项目目录整理
7.2
项目tabBar配置
7.3
项目窗口配置
完善该项目的前期框架设计与tabBar和window配置
熟悉新建小程序项目的流程步骤，并熟练掌握相关属性配置
6讲
页面布局
掌握视图层和基础布局模型flex的用法，相对定位与绝对定位布局，并通过简易计算器案例进行布局实战
8.1
页面布局概述
8.2flex布局基本概念
8.3flex布局案例
8.4flex容器属性详解
8.5flex项目属性详解
8.6
相对定位和绝对定位布局
简易计算器
课本flex布局相关内容的源码学习；
完善简易计算器案例。
复习flex布局，相对定位与绝对定位的样式编写。
7讲
小程序的样式基础
掌握样式的基本使用、样式属性的配置，以及样式选择器的使用。
掌握样式的基本用法和样式属性的配置。
样式选择器的用法。
9.1
样式的基本使用
9.2
样式的属性
9.3
样式选择器的使用
尺寸属性测试案例
边距属性测试案例
复习样式选择器的用法。
8
组件
掌握视图容器、基础内容、表单组件的用法
掌握小程序视图层各类组件的用法。
小程序组件的运用场景，各组件的主要属性配置及效果。
10.1
初始组件
10.2
视图容器组件
10.3
基础内容组件
10.4
表单组件
各组件的测试案例源码学习
及时复习熟悉各组件的使用场景及API函数用法。
9
组件（续）
掌握form表单提交组件、导航组件、多媒体组件和地图组件的用法
10.5form表单提交组件
10.6
导航组件navigator
10.7
多媒体组件
10.8
地图map
10
操作反馈工具与简单的界面API
了解四种操作反馈工具toast、modal、loading和action-sheet的基本
升级会员 