(4)《微信小程序开发》教学设计模板v3.0

《微信小程序开发》教学设计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课件六、教学环节设计序时间设计意图及资源准教学内容教师活动学生活动号分配备本环节主要以学生熟知的案例引入新学生根据提问内容引多媒体讲解，演示操知，突出本章课的“小程2课概述及小程发思考，总结序”是什么，特点有时哪些。1作，向学生提问，引导重点，利于学生接序使用方法学生思考受。资源准备：公众号、二维码、小程序让学生理解小程序学生根据提问内容引特性内特性多媒体讲解，向学生提1课并回答总结难点内容做铺垫。涵，为本章小程序2发思考，分析问，引导学生思考时“小程序的特性”。资源准备：HTML5、APP本环节主要以学生自主学习为主，尝试注册，教师讲解多媒体讲解开发流程，学生进行小程序注册3课注册难点为辅，充3注册演示操作注册流程，引及信息完善导学生自主操作时分发挥学生学习主观能动性。资源准备：教学PPT本环节主要以学生自主学习为主，尝试注册，教师讲解多媒体讲解开发流程，注册难点为辅，充工学生进行小程序工具2课分发挥学生学习主演示操作安装开发具、基本操作，引导学的使用生自主操作4开发时观能动性。资源准备：教学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不合格B良好C合格D不合格4、熟悉开发工具界面，掌握基本操作A优秀八、特色与创新根据学生在课堂的表现、课后作业的完成情况总结本节课学生的完成情况，对教学重点——电岗位，发激学生的学习兴子商务运营的基本内涵予以强调，说明电子商务运营对应的主要工作趣。教学单元名称helloworld小程序入门实战一、教学目标分析（知识、技能、素质）课时10（1）了解页面组件的构成（2）理解wxml的页面逻辑结构（3）掌握app.json的基本配置（4）掌握wxml与js数据绑定方法二、教学内容分析教学基本内容：1新建一个小程序项目2小程序视图界面构成3helloworld默认小程序修改4制作项目启动页（上）之自适应单位：RPX5制作项目启动页（中）之样式与弹性盒子模型6制作项目启动页（下）之小程序app.json基础配置教学重点：理论：页面组件理论基础知识，实践：制作项目启动页教学难点：制作项目启动页——PRX、弹性盒子模型三、学情分析本章内容开始进入具体的编程学习，利用默认小程序，让学生产生熟悉感，再循序渐进加深学习的难度和深度，避免学生陷入倦怠，为后续的阅读器项目作一个引子，从基本的结构构建中学生更容易理解小程序的开发流程。四、教学策略选择与设计采用杜威实用主义务驱动等课堂教学方法，以多媒体网络技术、案例模板分析为手段，立体呈现案例来突破本章的重难点，以便学生更好完成Reader项目的开发，提高学生学习效率。的教学模式，以班级为单位组织教学。本章主要以演示法、案例分析法、任五、教学环境及资源准备环境：多媒体实验教室资源：PPT课件软件：小程序WEB开发工具六、教学环节设计序时间设计意图及资源准教学内容教师活动学生活动号分配备本环节主要以学生自主学习为主，尝试注册，教师讲解多媒体讲解开发流程，注册难点为辅，充分发挥学生学习主观能动性。演示操作安装开发工学生进行小程序工具2课1开发具、基本操作，引导学的使用生自主操作时资源准备：教学PPT、小程序web开发工具让学生能够独立新Helloworld演示操作，引导学生思学生根据画出的逻辑考项目的逻辑结构，编结构图，编写wxml建项目，并理解其项目操作4课时2中逻辑结构。（初始页+上）写文件文件案例准备：helloworld案例让学生理解项目启Helloworld演示操作，引导学生思学生根据画出的逻辑3项目操作考项目的样式与内容，结构图，进行配置文4课动页如何设计。时案例准备：helloworld案例（中+下）编写文件件、样式文件编写七、教学考核评价设计考核具体内容（1）利用微信小程序web开发工具，新建一个helloworld的小程序,作业请参考截图：（2）*在（1）的基础上，充分理解各个工程文件的含义，尝试修改（1）的小程序，作业请参考两个截图：考核知识内容等级1、页面组件的理解2、页面逻辑结构分析A优秀B良好C合格D不合格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、小程序开发后台完成新闻列表滚动演示操作，引导学生自学生操新闻栏效果。4课2Swiper组件作实现功能时主动手操作资源准备：Reader项目（1）完成导航栏页面结构搭建；演示操作，引导学生自（2）完成导航栏样式修改。资源准备：Reader项目8课3导航栏学生操作实现功能时主动手操作完成wxml页面与js的数据绑定，规演示操作，引导学生自范文件，养成良好4课4数据绑定学生操作实现功能主动手操作的操作习惯。时资源准备：Reader项目完成wx：for列表渲染效果，规范文演示操作，引导学生自件操作，养成良好4课5列表渲染学生操作实现功能主动手操作的操作习惯。时资源准备：Reader项目完成初始页与新闻列表页的打通连事件与事件演示操作，引导学生自4课6学生操作实现功能接。时对象主动手操作资源准备：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开发工具六、教学环节设计序时间设计意图及资源准教学内容教师活动学生活动号分配备完成新闻详情页的基本设置，并连通新闻列表页。资源准备：Reader项目新闻详情页演示操作，引导学生自5课时1学生操作实现功能制作主动手操作将详情页中的收藏、分享按钮进行动态数据绑演示操作，引导学生自2课动态数据绑定填2定填充详情页学生操作实现功能主动手操作时充。资源准备：Reader项目利用实现详情页中的收storage缓演示操作，引导学生自3存功能实现主动手操作4课藏、分享的功能。学生操作实现功能学生操作实现功能时资源准备：Reader项目详情页文章分享与收藏优化用户体验交互感受，收藏、分享均由反馈。资源准备：Reader项目演示操作，引导学生自3课时4交互反馈主动手操作了解两者区别，可避免因程序代码过1课多出现的无理由报学生操作实现功能时错。同步与异步演示操作，引导学生自5方法比较主动手操作资源准备：Reader项目设置新闻详情页中播放音乐的功能，4课并进行人性化处学生操作实现功能时理。资源准备：Reader音乐播放功演示操作，引导学生自6能设置与优主动手操作化项目尽可能模拟真机的体验感受，处理缓存template的实1课际问题，为程序开学生操作实现功能时发提供更切实的体验。清理缓存与演示操作，引导学生自7template内主动手操作路问题资源准备：Reader项目七、教学考核评价设计考核具体内容；完成reader整体项目。实现几个页面的跳转。效果参照下图：至少完成以下要求：（1）文章收藏、分享功能；（2）收藏、分享的交互反馈；（3）播放音乐（实现全局同步）功能考核标准：考核知识内容等级1、熟练掌握wxml、wxss、js的配合基A优秀B良好C合格D不合格本配置方法2、掌握动态数据绑定使用方法3、掌握缓存storage的基本用法A优秀B良好C合格D不合格A优秀B良好C合格D不合格4、了解小程序API接口的属性与方法，A优秀B良好C合格D不合格掌握其中wx.Showtoast的用法5、了解同步与异步的方法，并可以加以A优秀B良好C合格D不合格区别