4《微信小程序开发》教学设计模板 v30.docx

1、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 开发环境准备教学重点：认识小程序，注册、完善信息操作流程教学难

2、点：小程序特性，小程序开发过程 三、学情分析学生在学习本章内容之前已有使用过小程序的经验，在这些基础上，学生能够较容易理解小程序特性，但学生缺乏对小程序开发的学习。四、教学策略选择与设计采用杜威实用主义的教学模式，以班级为单位组织教学。本章主要以讲授法、讨论法、演示法课堂教学方法，以多媒体网络技术为手段，立体呈现案例来突破本章的重难点，以便学生更好认识小程序，提高学生学习效率。五、教学环境及资源准备环境：多媒体实验教室资源：PPT课件六、教学环节设计序号教学内容教师活动学生活动时间分配设计意图及资源准备1概述及小程序使用方法多媒体讲解，演示操作，向学生提问，引导学生思考学生根据提问内容引发思考

3、，总结“小程序”是什么，特点有哪些。2课时本环节主要以学生熟知的案例引入新知，突出本章课的重点，利于学生接受。资源准备：公众号、二维码、小程序2小程序特性分析多媒体讲解，向学生提问，引导学生思考学生根据提问内容引发思考，并回答总结“小程序的特性”。1课时让学生理解小程序特性内涵，为本章难点内容做铺垫。资源准备：HTML5、APP3注册多媒体讲解开发流程，演示操作注册流程，引导学生自主操作学生进行小程序注册及信息完善3课时本环节主要以学生自主学习为主，尝试注册，教师讲解注册难点为辅，充分发挥学生学习主观能动性。资源准备：教学PPT4开发多媒体讲解开发流程，演示操作安装开发工具、基本操作，引导学生

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、熟悉

5、开发工具界面，掌握基本操作A优秀 B良好C合格 D不合格八、特色与创新根据学生在课堂的表现、课后作业的完成情况总结本节课学生的完成情况，对教学重点电子商务运营的基本内涵予以强调，说明电子商务运营对应的主要工作岗位，激发学生的学习兴趣。教学单元名称helloworld小程序入门实战课时10一、教学目标分析（知识、技能、素质）（1）了解页面组件的构成（2）理解wxml的页面逻辑结构（3）掌握app.json的基本配置（4）掌握wxml与js数据绑定方法二、教学内容分析教学基本内容：1 新建一个小程序项目2 小程序视图界面构成3 helloworld默认小程序修改4 制作项目启动页（上）之自适应单位

6、：RPX5制作项目启动页（中）之样式与弹性盒子模型6 制作项目启动页（下）之小程序app.json基础配置 教学重点：理论：页面组件理论基础知识，实践：制作项目启动页教学难点：制作项目启动页PRX、弹性盒子模型三、学情分析本章内容开始进入具体的编程学习，利用默认小程序，让学生产生熟悉感，再循序渐进加深学习的难度和深度，避免学生陷入倦怠，为后续的阅读器项目作一个引子，从基本的结构构建中学生更容易理解小程序的开发流程。四、教学策略选择与设计采用杜威实用主义的教学模式，以班级为单位组织教学。本章主要以演示法、案例分析法、任务驱动等课堂教学方法，以多媒体网络技术、案例模板分析为手段，立体呈现案例来突破

7、本章的重难点，以便学生更好完成Reader项目的开发，提高学生学习效率。五、教学环境及资源准备环境：多媒体实验教室 资源：PPT课件软件：小程序WEB开发工具六、教学环节设计序号教学内容教师活动学生活动时间分配设计意图及资源准备1开发多媒体讲解开发流程，演示操作安装开发工具、基本操作，引导学生自主操作学生进行小程序工具的使用2课时本环节主要以学生自主学习为主，尝试注册，教师讲解注册难点为辅，充分发挥学生学习主观能动性。资源准备：教学PPT、小程序web开发工具2Helloworld项目操作（初始页+上）演示操作，引导学生思考项目的逻辑结构，编写文件学生根据画出的逻辑结构图，编写wxml文件4课

8、时让学生能够独立新建项目，并理解其中逻辑结构。案例准备：helloworld案例3Helloworld项目操作（中+下）演示操作，引导学生思考项目的样式与内容，编写文件学生根据画出的逻辑结构图，进行配置文件、样式文件编写4课时让学生理解项目启动页如何设计。案例准备：helloworld案例七、教学考核评价设计考核具体内容（1）利用微信小程序web开发工具，新建一个helloworld的小程序,作业请参考截图：（2）*在（1）的基础上，充分理解各个工程文件的含义，尝试修改（1）的小程序，作业请参考两个截图： 考核知识内容等级1、页面组件的理解A优秀 B良好C合格 D不合格2、页面逻辑结构分析A优

9、秀 B良好C合格 D不合格2、熟悉开发工具界面，掌握基本操作A优秀 B良好C合格 D不合格考核标准：八、特色与创新理论+实践的融合。本章利用各种通俗易懂的案例，以最详尽的方式给学生展现小程序中页面组件中包含部分；在此基础上，以系统的项目式方法让学生进行实践操作，加深对理论的内化吸收。教学单元名称阅读器小程序实战新闻列表页课时24一、教学目标分析（知识、技能、素质）（1）掌握真机运行程序的方法（2）学会使用小程序开发者后台（3）掌握组件中视图容器swiper组件使用方法（4）掌握wxml数据绑定mustache语法使用方法（5）掌握wxml列表渲染 wx:for使用方法（6）掌握wxml事件bi

10、ndtap的使用方法二、教学内容分析教学基本内容： 1 实操概述及真机运行小程序及小程序开发者后台简介 2 使用使用Swiper组件构建轮播图 3 构建新闻列表 4 js文件结构与Page页面的生命周期 5 数据绑定 6 使用列表渲染wx：for改写新闻列表教学重点：视图层wxml中数据绑定、列表渲染、事件的使用方法教学难点：视图层wxml中列表渲染使用方法、js文件结构与Page页面的生命周期 三、学情分析学生在前一章已独立新建了一个初始页，在此基础上，再引入视图层wxml的几种框架结构代入实操中，学生更利于融合前面的理论知识，完成小程序的第二个页面。本章难度比前一章加大，对学生的逻辑思维、

11、网站开发技术都提出了较高的要求。四、教学策略选择与设计采用杜威实用主义的教学模式，以班级为单位组织教学。本章主要以演示法、任务驱动等课堂教学方法，以多媒体网络技术、案例模板分析为手段，立体呈现案例来突破本章的重难点，以便学生更好完成新闻列表页面，提高学生学习效率。五、教学环境及资源准备环境：多媒体实验教室 资源：Reader项目软件：小程序WEB开发工具六、教学环节设计序号教学内容教师活动学生活动时间分配设计意图及资源准备1实操逻辑框架介绍+小程序开发后台介绍多媒体讲解本章实验主要内容、介绍小程序公众平台程序开发后台学生理解本章分支项目的逻辑结构、利用微信公众平台介绍作为自主学习辅助1课时这部

12、分帮助学生梳理接下来项目的逻辑框架；另一方面让学生参考微信开发后台辅助自己查阅语句，完成项目。资源准备：PPT、小程序开发后台2Swiper组件演示操作，引导学生自主动手操作学生操作实现功能4课时完成新闻列表滚动新闻栏效果。资源准备：Reader项目3导航栏演示操作，引导学生自主动手操作学生操作实现功能8课时（1）完成导航栏页面结构搭建；（2）完成导航栏样式修改。资源准备：Reader项目4数据绑定演示操作，引导学生自主动手操作学生操作实现功能4课时完成wxml页面与js的数据绑定，规范文件，养成良好的操作习惯。资源准备：Reader项目5列表渲染演示操作，引导学生自主动手操作学生操作实现功能

13、4课时完成wx：for列表渲染效果，规范文件操作，养成良好的操作习惯。资源准备：Reader项目6事件与事件对象演示操作，引导学生自主动手操作学生操作实现功能4课时完成初始页与新闻列表页的打通连接。资源准备：Reader项目七、教学考核评价设计具体考核内容：Reader项目分支作业构建新闻列表页。要求：（1）通过初始页可跳转到新闻列表页；（2）新闻列表页在顶部有滚动新闻效果；（3）导航栏的文章显示六条。效果参考（样式色彩、图片可根据个人喜好设计）： 考核标准：考核知识内容等级1、掌握组件中视图容器swiper组件使用方法A优秀 B良好C合格 D不合格2、掌握wxml数据绑定mustache语法

14、使用方法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）了解同步与异步的方法，

15、并可以加以区别使用（6）了解音乐播放组件、API方法，掌握playbackgroundaudio（）和pausebackgroundaudio（）的使用方法（7）掌握监听音乐播放、监听音乐停止的方法，调节音乐流媒体与界面保持一致（8）了解清理缓存与template内路问题（9）掌握小程序开发的基本技能（10）具备小程序开发程序员的基本素质二、教学内容分析教学基本内容：1 从文章列表跳转到新闻详情页面2 先静后动，构建新闻详情页面样式3 配置全局导航栏颜色4 使用数据填充新闻详情页面5 缓存Storage的基本用法6 使用缓存实现文章收藏功能7 交互反馈7.1 交互反馈7.2 操作反馈* 8 同

16、步异步方法对比9 PlayBackgroundAudio音乐播放实现 9.1 基本配置 9.2 完善与优化教学重点：1、动态数据绑定：Appdata使用方法2、分享、收藏功能实现：Storage缓存的基本用法3、API接口属性、方法4、音乐播放组件、方法的使用5、监听音乐的同步6、清理缓存与template内路问题教学难点：1、storage缓存的是与非的语句表达2、监听音乐的同步全局变量globalData的使用方法3、清理缓存与template内路问题三、学情分析学生在前一章已完成两个页面的跳转与编程环境的优化，在此基础上，需要填充第三级页面，这一章调用的函数、使用方法较多，对于已经有较多

17、经验学生而言，已经可以比较快速的上手。四、教学策略选择与设计采用杜威实用主义的教学模式，以班级为单位组织教学。本章主要以演示法、任务驱动等课堂教学方法，以多媒体网络技术、案例模板分析为手段，立体呈现案例来突破本章的重难点，以便学生更好完成新闻详情页面，提高学生学习效率。五、教学环境及资源准备环境：多媒体实验教室 资源：Reader项目软件：小程序WEB开发工具六、教学环节设计序号教学内容教师活动学生活动时间分配设计意图及资源准备1新闻详情页制作演示操作，引导学生自主动手操作学生操作实现功能5课时完成新闻详情页的基本设置，并连通新闻列表页。资源准备：Reader项目2动态数据绑定填充详情页演示操

18、作，引导学生自主动手操作学生操作实现功能2课时将详情页中的收藏、分享按钮进行动态数据绑定填充。资源准备：Reader项目3利用storage缓存功能实现详情页文章分享与收藏演示操作，引导学生自主动手操作学生操作实现功能4课时实现详情页中的收藏、分享的功能。资源准备：Reader项目4交互反馈演示操作，引导学生自主动手操作学生操作实现功能3课时优化用户体验交互感受，收藏、分享均由反馈。资源准备：Reader项目5同步与异步方法比较演示操作，引导学生自主动手操作学生操作实现功能1课时了解两者区别，可避免因程序代码过多出现的无理由报错。资源准备：Reader项目6音乐播放功能设置与优化演示操作，引导

19、学生自主动手操作学生操作实现功能4课时设置新闻详情页中播放音乐的功能，并进行人性化处理。资源准备：Reader项目7清理缓存与template内路问题演示操作，引导学生自主动手操作学生操作实现功能1课时尽可能模拟真机的体验感受，处理缓存template的实际问题，为程序开发提供更切实的体验。资源准备：Reader项目七、教学考核评价设计考核具体内容；完成reader整体项目。实现几个页面的跳转。效果参照下图：至少完成以下要求：（1）文章收藏、分享功能；（2）收藏、分享的交互反馈；（3）播放音乐（实现全局同步）功能考核标准：考核知识内容等级1、熟练掌握wxml、wxss、js的配合基本配置方法A

20、优秀 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不合格八、特色与创新理论+实践的融合。

21、本章以系统的项目式方法让学生进行实践操作，加深对理论的内化吸收。教学单元名称课程项目汇报课时2一、教学目标分析（知识、技能、素质）（1）掌握小程序开发的基本技能（2）具备小程序开发程序员的基本素质二、教学内容分析教学基本内容：1.对每位学生的课程汇报进行简明扼要的点评，指出报告及课程汇报的优缺点2.对课程进行总结，把课程与后续课程之间的关系进行概要性说明。 教学重点：小程序开发的主要流程和内容教学难点：小程序开发Reader项目的具体实施 三、学情分析学生已经完成了本学期所有理论学习。现缺乏一个系统的总结过程。四、教学策略选择与设计任务驱动，学生以小组形式展开课程汇报，最后进行汇报成果的点评。五、教学环境及资源准备环境：多媒体实验教室 资源：Reader项目软件：小程序WEB开发工具七、教学考核评价设计1、实验报告20分（主要看报告完成度、代码规范性）。2、小程序运行的流畅性及功能实现情况 50分（主要从js、wxml、wxss、json文件代码规范性来检验）。3、汇报表达效果30分（要求表达清晰，能够回答教师的提问）。八、特色与创新学期课程以项目汇报结束，以实践加深了学生对本课程的理解，为学生今后踏上小程序开发之路提供了良好的实践基础。