Web前端应用开发项目式教程（基于uni-app框架） 教案-教学设计 任务4 制作社区首页

教学整体设计任务名称任务4制作社区首页开课学期第3学期课程类型专业核心课授课班级授课学时8学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将制作“启嘉校园”项目的社区首页，社区首页主要展示用户发布的文章列表。通过该任务的实现让学生了解uni-app组件化,小程序页面转发方法、预览图片方法、上传图片方法、获取图片信息方法、可拖动区域组件的使用。教学目标素质目标1.通过采用组件化的方式制作搜索、选项卡、文章卡片和悬浮按钮，培养学习者高质量、持续性的开发意识。2.通过封装文章卡片组件，培养学习者注重细节、品质至上的工作态度。3.通过制作“社区首页”任务，提升学习者共创美好交流社区、营造良好网络环境的意识。知识目标1.了解uni-app组件化。2.了解/deep/深度作用选择器的用法。3.掌握uni-appeasyinput输入框增强组件的使用。4.掌握onShareAppMessage小程序页面转发方法的使用。5.掌握uni.previewImage预览图片方法的使用。6.掌握uni.chooseImage上传图片方法的使用。7.掌握uni.getImageInfo获取图片信息方法的使用。8.掌握uni-appmovable-area可拖动区域组件的使用。能力目标1.能够根据组件化思想完成组件封装。2.能够使用easyinput组件制作搜索输入框。3.能够使用onShareAppMessage方法实现页面转发。4.能够使用图片处理方法实现图片的上传和预览。5.能够使用movable-area组件实现元素的拖动。学情分析知识基础1.已掌握滚动选择器组件、单行输入框组件、图片组件的使用。2.已掌握uni.showToast消息提示方法的使用。3.已掌握uni-app页面跳转方法的使用。技能基础1.已具备使用uni.showToast方法完成消息提示。2.已具备使用uni-app页面跳转方法实现页面间跳转。3.已具备使用正则表达式完成手机号、微信号等信息的验证。学习特点与诉求1.学生对于模拟真实工作情景，开发实际项目授课方法兴趣浓厚，对所学知识接受度较高。2.学生自主解决问题的能力较差，任务拓展完成效果有待提高。教学重点1.uni-appeasyinput输入框增强组件、uni-appmovable-area可拖动区域组件的使用方法。2.预览图片方法、上传图片方法及获取图片信息方法的使用。教学难点1.能够根据组件化思想完成组件封装。2.能够使用onShareAppMessage方法实现页面转发。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前预习uni-appeasyinput输入框增强组件、uni-appmovable-area可拖动区域组件、预览图片方法、上传图片方法及获取图片信息方法的基础知识任务，锻炼学生的自主学习能力，促进学生养成预习的学习习惯。2.以测验促进课堂提质增效通过布置预期内容中输入框增强组件、可拖动区域组件、预览图片方法、上传图片方法及获取图片信息方法知识测验，教师可以更好地了解学生对本次任务基础知识的学习需求和问题，总结提炼重难点知识，从而在课堂上进行更有针对性的讲解和讨论，提高教学质量和效果。知识图谱智能推荐拓展知识通过知识图谱向学生推送更多关于输入框增强组件、可拖动区域组件、预览图片方法、上传图片方法及获取图片信息方法的应用场景，及使用技巧，学习与本任务相关的各种形式的配套资源，以点带面，使学生知识储备更全面，理解更透彻，从而为本任务准确实施奠定雄厚的知识基础。教师活动学生活动1.发布任务。通过智能教学平台发布输入框增强组件、可拖动区域组件、预览图片方法、上传图片方法及获取图片信息方法相关的基础知识预习任务。2.发布测验。通过智能教学平台发布输入框增强组件、可拖动区域组件、预览图片方法、上传图片方法及获取图片信息方法相关的知识测验。3.发布资料。通过智能教学平台发布微课视频、PPT课件、虚拟仿真、知识图谱拓展阅读等学习资源。4.批阅任务。分析知识测验结果，梳理重难点知识。1.课前预习。通过微课和课件自主学习输入框增强组件、可拖动区域组件、预览图片方法、上传图片方法及获取图片信息方法的相关基础知识。2.基础测验。通过智能教学平台完成教师发布的技术知识测验。3.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合制作社区首页的实际工作过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生制作社区首页的实操技能。采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述培养学生“共创美好交流社区，营造良好网络环境”的意识，通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过关键代码的实现，培养学生“注重细节，品质至上”的工作态度；通过任务扩展，让学生通过“二手”功能的实现，鼓励用户置换闲置物品，践行绿色、循环、低碳的可持续发展理念。第1学时教学环节教师活动学生活动情景导入与任务描述1(10分钟)1.情景导入。向学生演示常用的社交软件如“微博”、“豆瓣”，进入到相应平台的“首页”，点击文章分类，选择喜欢的文章，查看文章的转发量，评论数和点赞数等。2.介绍任务。本任务将制作“启嘉校园”项目的社区首页，社区首页主要展示用户发布的文章列表，文章列表分为综合推荐、我的关注、专业交流和表白墙四类。用户可以在社区首页搜索文章，也可以按类别以及文章的热度和发布时间查看文章。同时，在社区首页底部还有返回顶部和快捷发布按钮。3.提出问题。根据任务介绍，制造社区首页，你们的思路是什么？（学术回答问题后不做点评，让学生带着自己答案进行下面的学习，最终验证自己思路。）1.操作体验。观看教师演示常用社交软件的使用，重点关注首页的功能，同时操作一下自己常用社交软件，仔细了解这些类似软件的首页功能。2.了解任务。认真听取教师介绍项目4的任务介绍，同时要明确我们要有共创美好交流社区、营造良好网络环境的意识。3.回答问题。结合自己预习的知识，认真思考老师提出的问题，并举手回答问题。知识储备讲解1(20分钟)1.uni-app组件化知识讲解。（1）组件化的思想。（2）组件化开发的好处。（3）组件化开发的应用场景。2.uni-app组件化代码演示。实例演示uni-app组件化，实例中包括一个计数器组件和一个页面组件。计数器组件允许用户递增或递减计数器的值，页面组件使用计数器组件并在用户单击按钮时将计数器的值发送到服务器。3.uni-app组件化升华点拨。easycom是uni-app中的一种组件注册方式，在使用组件时不需要显式地导入和注册组件，而是通过easycom自动化机制，自动完成组件的注册。1.聆听知识讲解uni-app组件化。认真听取教师讲解uni-app组件化思想及应用组件化有何优势，并思考组件化的可应用场景。2.观看演示uni-app组件化应用同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听uni-app组件化升华点拨撰写笔记。认真听取教师对uni-app组件化的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。知识储备讲解2(10分钟)1.uni-easyinput输入框组件知识讲解。介绍uni-easyinput组件的主要功能和应用场景。2.输入框组件组件代码演示。介绍uni-easyinput组件的几种常见用法，同时代码演示。1.聆听知识讲解输入框组件。认真听取教师讲解输入框组件的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。2.观看输入框组件组件演示同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。第2学时知识储备讲解3(15分钟)1.发布讨论。讨论“同学们在使用社交软件平台时最常用的功能有哪些？”2.uni-app页面转发知识讲解。代码演示实现页面转发功能的方式有两种：uni.share方法，和使用onShareAppMessage生命周期函数。3.页面转发升华点拨。两种页面转发方法只能在微信小程序中使用其他平台需要使用平台提供的分享API实现。此外，在某些平台中，分享功能可能需要进行授权，需要在代码中添加相应的授权逻辑。1.参与讨论。积极参加讨论，把自己答案提交到智慧教学平台。2.观看演示页面转发使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听升华点拨撰写笔记。认真听取升华点拨讲解，并将重点知识记录到课堂笔记当中。知识储备讲解4(15分钟)1.随堂提问。教师提问“通过预习，请回答一下图片处理的几种方法”。2.图片处理方法知识讲解代码演示。代码演示图片处理的几种方法。1.回答问题。认真会议所预习的知识，积极回答教师问题。2.观看演示同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。知识储备讲解5(15分钟)1.movable-area可拖动区域组件知识讲解。讲解movable-area的属性及方法。2.movable-area可拖动区域组件代码演示。实例演示：，在一个1000rpx*1000rpx的可移动区域内放置了4个颜色方块。启用了缩放功能。可以通过拖动和缩放可移动区域来移动和缩放这些方块。3.movable-area可拖动区域组件升华点拨。movable-area组件必须包含一个子组件，它将作为可移动区域的内容。1.聆听知识讲解movable-area组件。认真听取教师讲解movable-area的属性及方法，并思考如何应用到实际项目当中。2.观看演示movable-area组件使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听华点拨撰写笔记。认真听取升华点拨讲解，并将重点知识记录到课堂笔记当中。第3学时任务实施逻辑分析1(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：新建名为“community”的Vue文件，搭建社区首页结构，通过单击页面底部标签栏中的“社区”进入。2.任务讲解。发布讨论：“首页结构细化为几部分较为合理，为什么？”。根据学生的讨论结果最终决定分为四部分比较合理。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看社区首页设计图。2.明确结构划分。听取教师的任务讲解，然后积极参加讨论。明确结构划分。任务实施编码实现1(35分钟)1.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.分配任务巡回指导。教师分配学生任务，实践新建首页文件，并用代码实现出页面结构。学生完成任务时教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。3.任务效果点评对比几组的最终实现效果，给出客观评价，如有问题的及时纠正。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过智慧教学平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。3.展示效果各组派代表展示自己的最终效果，等待教师点评，如有问题及时改正。避免给下面的任务实现留下隐患。第4学时任务实施逻辑分析2(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：制作搜索区域。分析搜索区域的结构，分为搜索区域由启嘉校园Logo和搜索框两部分。2.任务讲解。教师引导学生思考：因为搜索区域，在多个页面都有显示，所以就会用到组件化方法。把搜索区域自定义为组件。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看分析设计图。2.明确步骤。跟随教师讲解的思路，对照设计图，思考如何把搜索区域自定义为组件。任务实施编码实现2(35分钟)1.分配小组。分组完成任务，小组成员不变继续完成本次任务。2.分配任务巡回指导。教师分配学生任务，自定义搜索框组件，并使用它。学生完成任务时教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。3.任务效果点评对比几组的最终实现效果，给出客观评价，如有问题及时纠正。（重点查看各组是否使用了知识储备中的uni-easyinput输入框增强组件，引导学生活学活用，培养其对知识的实际应用能力）。1.组建小组。保持小组成员不变，继续在原来任务基础上完成本次任务。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过智慧教学平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。3.展示效果各组派代表展示自己的最终效果，等待教师点评，如有问题及时改正。避免给下面的任务实现留下隐患。第5学时任务实施逻辑分析3(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：制作选项卡区域。选项卡切换时，文章列表也会进行相应更新。2.任务讲解。教师引导学生思考：如何实现选项卡切换时，文章列表也会进行相应更新。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看分析设计图。2.明确思路。跟随教师讲解的思路，根据任务要求，思考在把选项卡区域定义为组件后如何实现选项卡切换时，文章列表也会进行相应更新。任务实施编码实现3(35分钟)1.知识讲解。（1）讲解父子组件通信知识。（2）案例实现父子组件通信。2.分配小组。分组完成任务，小组成员不变继续完成本次任务。3.巡回指导。教师分配学生任务，完成选项卡区域的制作。学生完成任务时教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。4.任务效果点评对比几组的最终实现效果，给出客观评价，如有问题及时纠正。1.聆听知识讲解。认真听取教师讲解父子组件通信的知识，并思考如何应用到实际项目当中。2.组建小组。保持小组成员不变，继续在原来任务基础上完成本次任务。3.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。3.展示效果各组派代表展示自己的最终效果，等待教师点评，如有问题及时改正。避免给下面的任务实现留下隐患。第6学时任务实施逻辑分析4(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：制作文章列表区域。2.任务讲解。教师讲解任务完成的思路，文章卡片组件按内容关联度可划分为文章发布信息、文章内容、图片列表和文章互动数据四部分。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看分析设计图。2.明确结构划分。跟随教师讲解的思路，根据任务要求，明确任务划分。任务实施编码实现4(35分钟)1.分配小组。分组完成任务，小组成员不变继续完成本次任务。2.分配任务巡回指导。教师分配学生任务，自定义文章卡片组件，并使用它。学生完成任务时教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。3.任务效果点评对比几组的最终实现效果，给出客观评价，如有问题及时纠正。（重点查看各组是如何实现当图片数量为1时，图片宽度占包裹容器的100%；当图片数量大于1时，图片列表为九宫格布局）。1.组建小组。保持小组成员不变，继续在原来任务基础上完成本次任务。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过智慧教学平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。3.展示效果各组派代表展示自己的最终效果，等待教师点评，如有问题及时改正。避免给下面的任务实现留下隐患。第7学时任务实施逻辑分析5(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：制作悬浮按钮，悬浮按钮区域由返回顶部按钮和快捷发布按钮组成，在页面中置顶显示。返回顶部按钮默认隐藏，用户下滑屏幕时显示；快捷发布按钮始终显示，且可拖动改变位置2.任务讲解。教师讲解任务完成的步骤，必要的步骤进行代码演示。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看设计图。2.明确步骤。跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现5(35分钟)1.分配小组。分组完成任务，小组成员不变继续完成本次任务。2.分配任务巡回指导。教师分配学生任务，学生完成任务时教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。3.任务效果点评对比几组的最终实现效果，给出客观评价，如有问题及时纠正。1.组建小组。保持小组成员不变，继续在原来任务基础上完成本次任务。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过智慧教学平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。3.展示效果各组派代表展示自己的最终效果，等待教师点评，如有问题及时改正。避免给下面的任务实现留下隐患。第8学时任务测试(35分钟)1.任务介绍。教师介绍本次课要进行测试的测试任务，UI页面测试、功能测试（选项卡正常切换、发布按钮、返回顶部按钮等功能）。2.知识讲解。教师介绍测试的概念，并对照企业测试流程讲解，测试要按照需求分析、计划、用例、执行、总结，五步流程进行测试。3.情景故事。教师播放测试相关情景动画，指明测试工作的重要性，提高学生对测试工作的责任心。4.需求分析讲解。教师讲解需求分析的方法，并以部分需求说明书为例，演示如何正确进行需求分析，提取测试功能点。5.分配小组。小组成员不变继续完成本次测试任务6.制定计划讲解。教师引导学生小组内，要交叉进行测试，如A同学测试B同学的项目，测试之前先制定自己的测试计划并形成文字。7.编写用例讲解。教师讲解编写测试用例的技巧，并以部分功能为例进行演示。8.执行用例讲解。教师讲解执行用例注意要点。9.总结报