4《微信小程序开发》教学设计模板 v30.docx
《4《微信小程序开发》教学设计模板 v30.docx》由会员分享，可在线阅读，更多相关《4《微信小程序开发》教学设计模板 v30.docx（19页珍藏版）》请在冰豆网上搜索。
4《微信小程序开发》教学设计模板v30
《微信小程序开发》教学设计
2018-2019学年第二学期
课程性质：
专业课程
课程类型：
必修
所属专业：
电子商务技术
*************************
2019年2月8日
教学单元名称
开发环境搭建
课时
8
一、教学目标分析（知识、技能、素质）
（1）了解微信小程序的特征，使用场景
（2）理解小程序的几种操作流程
（3）了解小程序特性
（4）熟悉小程序开发过程
（5）注册小程序
（6）实现环境搭建
二、教学内容分析
教学基本内容：
1.1概述
1.1.1小程序是什么
1.1.2小程序的使命
1.2注册小程序
1.3完善信息
1.4开发环境准备
教学重点：
认识小程序，注册、完善信息操作流程
教学难点：
小程序特性，小程序开发过程
三、学情分析
学生在学习本章内容之前已有使用过小程序的经验，在这些基础上，学生能够较容易理解小程序特性，但学生缺乏对小程序开发的学习。
四、教学策略选择与设计
采用杜威实用主义的教学模式，以班级为单位组织教学。
本章主要以讲授法、讨论法、演示法课堂教学方法，以多媒体网络技术为手段，立体呈现案例来突破本章的重难点，以便学生更好认识小程序，提高学生学习效率。
五、教学环境及资源准备
环境：
多媒体实验教室
资源：
PPT课件
六、教学环节设计
序号
教学内容
教师活动
学生活动
时间分配
设计意图及资源准备
1
概述及小程序使用方法
多媒体讲解，演示操作，向学生提问，引导学生思考
学生根据提问内容引发思考，总结“小程序”是什么，特点有哪些。
2课时
本环节主要以学生熟知的案例引入新知，突出本章课的重点，利于学生接受。
资源准备：
公众号、二维码、小程序
2
小程序特性分析
多媒体讲解，向学生提问，引导学生思考
学生根据提问内容引发思考，并回答总结“小程序的特性”。
1课时
让学生理解小程序特性内涵，为本章难点内容做铺垫。
资源准备：
HTML5、APP
3
注册
多媒体讲解开发流程，演示操作注册流程，引导学生自主操作
学生进行小程序注册及信息完善
3课时
本环节主要以学生自主学习为主，尝试注册，教师讲解注册难点为辅，充分发挥学生学习主观能动性。
资源准备：
教学PPT
4
开发
多媒体讲解开发流程，演示操作安装开发工具、基本操作，引导学生自主操作
学生进行小程序工具的使用
2课时
本环节主要以学生自主学习为主，尝试注册，教师讲解注册难点为辅，充分发挥学生学习主观能动性。
资源准备：
教学PPT、小程序web开发工具
七、教学考核评价设计
具体考核内容：
思考题：
1、小程序有“小程序商店”吗？
2、小程序可以分享吗？
3、小程序可以订阅吗？
4、小程序可以推送消息吗？
5、小程序是要取代APP吗？
操作题：
注册并下载小程序开发web工具
考核标准：
考核知识内容
等级
1、认识小程序，了解使用操作流程
A优秀B良好C合格D不合格
2、小程序特性，与APP、HTML5的对比
A优秀B良好C合格D不合格
3、注册及完善微信小程序
A优秀B良好C合格D不合格
4、熟悉开发工具界面，掌握基本操作
A优秀B良好C合格D不合格
八、特色与创新
根据学生在课堂的表现、课后作业的完成情况总结本节课学生的完成情况，对教学重点——电子商务运营的基本内涵予以强调，说明电子商务运营对应的主要工作岗位，激发学生的学习兴趣。
教学单元名称
helloworld小程序入门实战
课时
10
一、教学目标分析（知识、技能、素质）
（1）了解页面组件的构成
（2）理解wxml的页面逻辑结构
（3）掌握app.json的基本配置
（4）掌握wxml与js数据绑定方法
二、教学内容分析
教学基本内容：
1新建一个小程序项目
2小程序视图界面构成
3helloworld默认小程序修改
4制作项目启动页（上）之自适应单位：
RPX
5制作项目启动页（中）之样式与弹性盒子模型
6制作项目启动页（下）之小程序app.json基础配置
教学重点：
理论：
页面组件理论基础知识，实践：
制作项目启动页
教学难点：
制作项目启动页——PRX、弹性盒子模型
三、学情分析
本章内容开始进入具体的编程学习，利用默认小程序，让学生产生熟悉感，再循序渐进加深学习的难度和深度，避免学生陷入倦怠，为后续的阅读器项目作一个引子，从基本的结构构建中学生更容易理解小程序的开发流程。
四、教学策略选择与设计
采用杜威实用主义的教学模式，以班级为单位组织教学。
本章主要以演示法、案例分析法、任务驱动等课堂教学方法，以多媒体网络技术、案例模板分析为手段，立体呈现案例来突破本章的重难点，以便学生更好完成Reader项目的开发，提高学生学习效率。
五、教学环境及资源准备
环境：
多媒体实验教室
资源：
PPT课件
软件：
小程序WEB开发工具
六、教学环节设计
序号
教学内容
教师活动
学生活动
时间分配
设计意图及资源准备
1
开发
多媒体讲解开发流程，演示操作安装开发工具、基本操作，引导学生自主操作
学生进行小程序工具的使用
2课时
本环节主要以学生自主学习为主，尝试注册，教师讲解注册难点为辅，充分发挥学生学习主观能动性。
资源准备：
教学PPT、小程序web开发工具
2
Helloworld项目操作（初始页+上）
演示操作，引导学生思考项目的逻辑结构，编写文件
学生根据画出的逻辑结构图，编写wxml文件
4课时
让学生能够独立新建项目，并理解其中逻辑结构。
案例准备：
helloworld案例
3
Helloworld项目操作（中+下）
演示操作，引导学生思考项目的样式与内容，编写文件
学生根据画出的逻辑结构图，进行配置文件、样式文件编写
4课时
让学生理解项目启动页如何设计。
案例准备：
helloworld案例
七、教学考核评价设计
考核具体内容
（1）利用微信小程序web开发工具，新建一个helloworld的小程序,作业请参考截图：
（2）*在
（1）的基础上，充分理解各个工程文件的含义，尝试修改
（1）的小程序，作业请参考两个截图：
考核知识内容
等级
1、页面组件的理解
A优秀B良好C合格D不合格
2、页面逻辑结构分析
A优秀B良好C合格D不合格
2、熟悉开发工具界面，掌握基本操作
A优秀B良好C合格D不合格
考核标准：
八、特色与创新
理论+实践的融合。
本章利用各种通俗易懂的案例，以最详尽的方式给学生展现小程序中页面组件中包含部分；在此基础上，以系统的项目式方法让学生进行实践操作，加深对理论的内化吸收。
教学单元名称
阅读器小程序实战——新闻列表页
课时
24
一、教学目标分析（知识、技能、素质）
（1）掌握真机运行程序的方法
（2）学会使用小程序开发者后台
（3）掌握组件中视图容器swiper组件使用方法
（4）掌握wxml数据绑定mustache{{}}语法使用方法
（5）掌握wxml列表渲染wx:
for使用方法
（6）掌握wxml事件bindtap的使用方法
二、教学内容分析
教学基本内容：
1实操概述及真机运行小程序及小程序开发者后台简介
2使用使用Swiper组件构建轮播图
3构建新闻列表
4js文件结构与Page页面的生命周期
5数据绑定
6使用列表渲染wx：
for改写新闻列表
教学重点：
视图层wxml中数据绑定、列表渲染、事件的使用方法
教学难点：
视图层wxml中列表渲染使用方法、js文件结构与Page页面的生命周期
三、学情分析
学生在前一章已独立新建了一个初始页，在此基础上，再引入视图层wxml的几种框架结构代入实操中，学生更利于融合前面的理论知识，完成小程序的第二个页面。
本章难度比前一章加大，对学生的逻辑思维、网站开发技术都提出了较高的要求。
四、教学策略选择与设计
采用杜威实用主义的教学模式，以班级为单位组织教学。
本章主要以演示法、任务驱动等课堂教学方法，以多媒体网络技术、案例模板分析为手段，立体呈现案例来突破本章的重难点，以便学生更好完成新闻列表页面，提高学生学习效率。
五、教学环境及资源准备
环境：
多媒体实验教室
资源：
Reader项目
软件：
小程序WEB开发工具
六、教学环节设计
序号
教学内容
教师活动
学生活动
时间分配
设计意图及资源准备
1
实操逻辑框架介绍+小程序开发后台介绍
多媒体讲解本章实验主要内容、介绍小程序公众平台程序开发后台
学生理解本章分支项目的逻辑结构、利用微信公众平台介绍作为自主学习辅助
1课时
这部分帮助学生梳理接下来项目的逻辑框架；另一方面让学生参考微信开发后台辅助自己查阅语句，完成项目。
资源准备：
PPT、小程序开发后台
2
Swiper组件
演示操作，引导学生自主动手操作
学生操作实现功能
4课时
完成新闻列表滚动新闻栏效果。
资源准备：
Reader项目
3
导航栏
演示操作，引导学生自主动手操作
学生操作实现功能
8课时
（1）完成导航栏页面结构搭建；
（2）完成导航栏样式修改。
资源准备：
Reader项目
4
数据绑定
演示操作，引导学生自主动手操作
学生操作实现功能
4课时
完成wxml页面与js的数据绑定，规范文件，养成良好的操作习惯。
资源准备：
Reader项目
5
列表渲染
演示操作，引导学生自主动手操作
学生操作实现功能
4课时
完成wx：
for列表渲染效果，规范文件操作，养成良好的操作习惯。
资源准备：
Reader项目
6
事件与事件对象
演示操作，引导学生自主动手操作
学生操作实现功能
4课时
完成初始页与新闻列表页的打通连接。
资源准备：
Reader项目
七、教学考核评价设计
具体考核内容：
Reader项目分支作业——构建新闻列表页。
要求：
（1）通过初始页可跳转到新闻列表页；
（2）新闻列表页在顶部有滚动新闻效果；
（3）导航栏的文章显示六条。
效果参考（样式色彩、图片可根据个人喜好设计）：
考核标准：
考核知识内容
等级
1、掌握组件中视图容器swiper组件使用方法
A优秀B良好C合格D不合格
2、掌握wxml数据绑定mustache{{}}语法使用方法
A优秀B良好C合格D不合格
3、掌握wxml列表渲染wx:
for使用方法
A优秀B良好C合格D不合格
4、掌握wxml事件bindtap的使用方法
A优秀B良好C合格D不合格
八、特色与创新
理论+实践的融合。
本章以系统的项目式方法让学生进行实践操作，加深对理论的内化吸收。
教学单元名称
阅读器小程序实战进阶——新闻详情页
课时
20
一、教学目标分析（知识、技能、素质）
（1）熟练掌握wxml、wxss、js的配合基本配置方法
（2）掌握动态数据绑定使用方法
（3）掌握缓存storage的基本用法
（4）了解小程序API接口的属性与方法，掌握其中wx.Showtoast的用法
（5）了解同步与异步的方法，并可以加以区别使用
（6）了解音乐播放组件、API方法，掌握playbackgroundaudio（）和pausebackgroundaudio（）的使用方法
（7）掌握监听音乐播放、监听音乐停止的方法，调节音乐流媒体与界面保持一致
（8）了解清理缓存与template内路问题
（9）掌握小程序开发的基本技能
（10）具备小程序开发程序员的基本素质
二、教学内容分析
教学基本内容：
1从文章列表跳转到新闻详情页面
2先静后动，构建新闻详情页面样式
3配置全局导航栏颜色
4使用数据填充新闻详情页面
5缓存Storage的基本用法
6使用缓存实现文章收藏功能
7交互反馈
7.1交互反馈
7.2操作反馈
*8同步异步方法对比
9PlayBackgroundAudio音乐播放实现
9.1基本配置
9.2完善与优化
教学重点：
1、动态数据绑定：
Appdata使用方法
2、分享、收藏功能实现：
Storage缓存的基本用法
3、API接口属性、方法
4、音乐播放组件、方法的使用
5、监听音乐的同步
6、清理缓存与template内路问题
教学难点：
1、storage缓存的是与非的语句表达
2、监听音乐的同步——全局变量globalData的使用方法
3、清理缓存与template内路问题
三、学情分析
学生在前一章已完成两个页面的跳转与编程环境的优化，在此基础上，需要填充第三级页面，这一章调用的函数、使用方法较多，对于已经有较多经验学生而言，已经可以比较快速的上手。
四、教学策略选择与设计
采用杜威实用主义的教学模式，以班级为单位组织教学。
本章主要以演示法、任务驱动等课堂教学方法，以多媒体网络技术、案例模板分析为手段，立体呈现案例来突破本章的重难点，以便学生更好完成新闻详情页面，提高学生学习效率。
五、教学环境及资源准备
环境：
多媒体实验教室
资源：
Reader项目
软件：
小程序WEB开发工具
六、教学环节设计
序号
教学内容
教师活动
学生活动
时间分配
设计意图及资源准备
1
新闻详情页制作
演示操作，引导学生自主动手操作
学生操作实现功能
5课时
完成新闻详情页的基本设置，并连通新闻列表页。
资源准备：
Reader项目
2
动态数据绑定填充详情页
演示操作，引导学生自主动手操作
学生操作实现功能
2课时
将详情页中的收藏、分享按钮进行动态数据绑定填充。
资源准备：
Reader项目
3
利用storage缓存功能实现详情页文章分享与收藏
演示操作，引导学生自主动手操作
学生操作实现功能
4课时
实现详情页中的收藏、分享的功能。
资源准备：
Reader项目
4
交互反馈
演示操作，引导学生自主动手操作
学生操作实现功能
3课时
优化用户体验交互感受，收藏、分享均由反馈。
资源准备：
Reader项目
5
同步与异步方法比较
演示操作，引导学生自主动手操作
学生操作实现功能
1课时
了解两者区别，可避免因程序代码过多出现的无理由报错。
资源准备：
Reader项目
6
音乐播放功能设置与优化
演示操作，引导学生自主动手操作
学生操作实现功能
4课时
设置新闻详情页中播放音乐的功能，并进行人性化处理。
资源准备：
Reader项目
7
清理缓存与template内路问题
演示操作，引导学生自主动手操作
学生操作实现功能
1课时
尽可能模拟真机的体验感受，处理缓存template的实际问题，为程序开发提供更切实的体验。
资源准备：
Reader项目
七、教学考核评价设计
考核具体内容；
完成reader整体项目。
实现几个页面的跳转。
效果参照下图：
至少完成以下要求：
（1）文章收藏、分享功能；
（2）收藏、分享的交互反馈；
（3）播放音乐（实现全局同步）功能
考核标准：
考核知识内容
等级
1、熟练掌握wxml、wxss、js的配合基本配置方法
A优秀B良好C合格D不合格
2、掌握动态数据绑定使用方法
A优秀B良好C合格D不合格
3、掌握缓存storage的基本用法
A优秀B良好C合格D不合格
4、了解小程序API接口的属性与方法，掌握其中wx.Showtoast的用法
A优秀B良好C合格D不合格
5、了解同步与异步的方法，并可以加以区别使用
A优秀B良好C合格D不合格
6、掌握playbackgroundaudio（）和pausebackgroundaudio（）的使用方法
A优秀B良好C合格D不合格
7、掌握监听音乐播放、监听音乐停止的方法，调节音乐流媒体与界面保持一致
A优秀B良好C合格D不合格
八、特色与创新
理论+实践的融合。
本章以系统的项目式方法让学生进行实践操作，加深对理论的内化吸收。
教学单元名称
课程项目汇报
课时
2
一、教学目标分析（知识、技能、素质）
（1）掌握小程序开发的基本技能
（2）具备小程序开发程序员的基本素质
二、教学内容分析
教学基本内容：
1.对每位学生的课程汇报进行简明扼要的点评，指出报告及课程汇报的优缺点
2.对课程进行总结，把课程与后续课程之间的关系进行概要性说明。
教学重点：
小程序开发的主要流程和内容
教学难点：
小程序开发Reader项目的具体实施
三、学情分析
学生已经完成了本学期所有理论学习。
现缺乏一个系统的总结过程。
四、教学策略选择与设计
任务驱动，学生以小组形式展开课程汇报，最后进行汇报成果的点评。
五、教学环境及资源准备
环境：
多媒体实验教室
资源：
Reader项目
软件：
小程序WEB开发工具
七、教学考核评价设计
1、实验报告20分（主要看报告完成度、代码规范性）。
2、小程序运行的流畅性及功能实现情况50分（主要从js、wxml、wxss、json文件代码规范性来检验）。
3、汇报表达效果30分（要求表达清晰，能够回答教师的提问）。
八、特色与创新
学期课程以项目汇报结束，以实践加深了学生对本课程的理解，为学生今后踏上小程序开发之路提供了良好的实践基础。
升级会员 