Web前端应用开发项目式教程（基于uni-app框架） 教案-教学设计 任务5 制作文章发布页

教学整体设计任务名称任务5制作文章发布页开课学期第3学期课程类型专业核心课授课班级授课学时8学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现“启嘉校园”项目的文章发布页面。通过该任务的实现让学生掌握uni.chooseImage选择图片方法的使用。掌握uni-apptextarea多行输入框组件的使用。教学目标素质目标1.通过搭建文章发布页结构，把一个页面分成5个区域逐步开发，培养开发者的全局思维。2.通过任务四制作上传图片区域解决H5端无法限制上传数量问题，培养学习者敢于挑战、勇于探索的创新精神。知识目标1.掌握uni.chooseImage选择图片方法的使用。2.掌握uni-apptextarea多行输入框组件的使用。能力目标1.能够使用uni.chooseImage方法实现本地相册获取图片或拍照。2.能够使用textarea组件实现显示已输入字数和字数上限的多行输入框。3.能够使用uni.navigateTo方法在页面跳转时传递话题参数。4.能够使用正则表达式完成文章信息验证。5.能够通过操作数组对象实现图片删除功能。学情分析知识基础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.学生的自主学习能力有所欠缺教学重点1.uni.chooseImage选择图片方法的使用。2.uni-apptextarea多行输入框组件的使用。教学难点1.能够使用textarea组件实现显示已输入字数和字数上限的多行输入框。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前预习uni.chooseImage选择图片方法、uni-apptextarea多行输入框组件的使用，锻炼学生的自主学习能力，促进学生养成预习的学习习惯。2.以测验促进课堂提质增效通过布置预期内容中预习uni.chooseImage选择图片方法、uni-apptextarea多行输入框组件知识测验，教师可以更好地了解学生对本次任务基础知识的学习需求和问题，总结提炼重难点知识，从而在课堂上进行更有针对性的讲解和讨论，提高教学质量和效果。知识图谱智能推荐拓展知识通过知识图谱向学生推送更多关于uni.chooseImage选择图片方法、uni-apptextarea多行输入框组件的应用场景及应用技巧，学习相关论文及实战项目中列举的拓展使用方法，以点带面，使学生知识储备更全面，理解更透彻，从而为本任务准确实施奠定雄厚的知识基础。教师活动学生活动1.发布任务。通过职教云发布预习uni.chooseImage选择图片方法、uni-apptextarea多行输入框组件知识预习任务。2.发布测验。通过职教云发布预习uni.chooseImage选择图片方法、uni-apptextarea多行输入框组件知识测验。3.发布资料。通过职教云发布微课视频、PPT课件、虚拟仿真、知识图谱拓展阅读等学习资源。4.批阅任务。分析知识测验结果，梳理重难点知识。1.课前预习。通过微课和课件自主学习滚动预习uni.chooseImage选择图片方法、uni-apptextarea多行输入框组件相关基础知识。2.基础测验。通过职教云完成预习uni.chooseImage选择图片方法、uni-apptextarea多行输入框组件知识测验。3.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合制作个人资料页的实际工作过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生制作个人资料页的实操技能和工程素养。采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述向学生传递“多学习新技术，让软件生命力更持久”的思想，让学生养成“持续发展、终身学习”的习惯；通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过对删除功能关键代码的实现，培养学生“满足用户需求，提升软件价值”的职业素养；通过任务扩展，让学生了解图片存储的新技术、最优解决方案的选择，培养学生践行“技术为民，服务社会”的理念。教学环节教师活动学生活动第1学时情景项目导入(15分钟)1.导入项目。通过PPT课件展示文章发布页任务描述；2.发布讨论。引导学生通过查阅资料或者讨论实现文章发布页的功能。1.认真听讲。理解项目的需求和意义。2.小组讨论。分析项目实现的可能方式。3.小组分享。小组分享讨论结果。渐进任务分解(30分钟).1.发布讨论。项目实现的可能方式；2.教师点评。分析每组学生的结论，得出实现功能的基本思路和方式。3.任务分解。通过小组分享，引出任务实现的步骤：页面结构分析与搭建、制作导航栏区域、制作文字信息区域、制作上传图片区域、制作选择话题区域、制作发布按钮区域。1.小组讨论。项目实现的基本思路和方式。2.小组分享。小组分享讨论结果。3.认真听讲。通过教师讲解任务拆解，理解任务拆解的分析思路。第2学时组队任务执行(30分钟)1.发布任务。通过职教云发布页面结构分析与搭建任务单。2.知识讲解。通过PPT课件讲解页面结构分析与搭建的基础知识。3.教师点评。教师点评各小组成员分工和任务执行计划合理度。4.答疑解惑。解决学生在任务实操中遇到的技术难题。1.认真听讲。通过教师讲解基础知识，对课前预习的知识进行查漏补缺。思考如何实现任务单。2.情景演绎：小组成员通过角色扮演情景演绎，讨论组内成员分工。3.小组分享：小组分享成员分工和任务执行计划。4.任务执行。小组成员完成搭建文章发布页结构的任务实操。多元技能测评（15分钟）1.引导互评。引导各小组对上台分享的小组进行点评。2.教师点评。教师对各小组在搭建文章发布页结构过程中的技术实践应用能力，团队协作、工程思维、解决问题等能力进行评价。3.锦囊讲解。讲解搭建文章发布页结构任务实操重难点。1.小组分享。小组分享实操任务完成情况。2.生生互评。对其它小组的任务分享进行评价和学习。3.认真听讲。通过教师讲解任务实操重难点，分析小组任务单的缺陷，思考完善方案。第3学时组队任务执行(30分钟)1.发布任务。通过职教云发布导航栏区域制作任务单。2.知识讲解。通过PPT课件讲解制作导航栏区域的基础知识。3.教师点评。教师点评各小组成员分工和任务执行计划合理度。4.答疑解惑。解决学生在任务实操中遇到的技术难题。1.认真听讲。通过教师讲解基础知识，对课前预习的知识进行查漏补缺。思考如何实现任务单。2.情景演绎：小组成员通过角色扮演情景演绎，讨论组内成员分工。3.小组分享：小组分享成员分工和任务执行计划。4.任务执行。小组成员完成制作导航栏区域的任务实操。多元技能测评（15分钟）1.引导互评。引导各小组对上台分享的小组进行点评。2.教师点评。教师对各小组在制作导航栏区域过程中的技术实践应用能力，团队协作、工程思维、解决问题等能力进行评价。3.锦囊讲解。讲解制作导航栏区域任务实操重难点。1.小组分享。小组分享实操任务完成情况。2.生生互评。对其它小组的任务分享进行评价和学习。3.认真听讲。通过教师讲解任务实操重难点，分析小组任务单的缺陷，思考完善方案。第4学时组队任务执行(30分钟)1.发布任务。通过职教云发布制作文字信息区域任务单。2.知识讲解。通过PPT课件讲解制作文字信息区域的基础知识。3.教师点评。教师点评各小组成员分工和任务执行计划合理度。4.答疑解惑。解决学生在任务实操中遇到的技术难题。1.认真听讲。通过教师讲解基础知识，对课前预习的知识进行查漏补缺。思考如何实现任务单。2.情景演绎：小组成员通过角色扮演情景演绎，讨论组内成员分工。3.小组分享：小组分享成员分工和任务执行计划。4.任务执行。小组成员完成制作文字信息区域的任务实操。多元技能测评（15分钟）1.引导互评。引导各小组对上台分享的小组进行点评。2.教师点评。教师对各小组在制作文字信息区域过程中的技术实践应用能力，团队协作、工程思维、解决问题等能力进行评价。3.锦囊讲解。讲解制作文字信息区域任务实操重难点。1.小组分享。小组分享实操任务完成情况。2.生生互评。对其它小组的任务分享进行评价和学习。3.认真听讲。通过教师讲解任务实操重难点，分析小组任务单的缺陷，思考完善方案。第5学时组队任务执行(30分钟)1.发布任务。通过职教云发布制作上传图片区域任务单。2.知识讲解。通过PPT课件讲解制作上传图片区域的基础知识。3.教师点评。教师点评各小组成员分工和任务执行计划合理度。4.答疑解惑。解决学生在任务实操中遇到的技术难题。1.认真听讲。通过教师讲解基础知识，对课前预习的知识进行查漏补缺。思考如何实现任务单。2.情景演绎：小组成员通过角色扮演情景演绎，讨论组内成员分工。3.小组分享：小组分享成员分工和任务执行计划。4.任务执行。小组成员完成制作上传图片区域的任务实操。多元技能测评（15分钟）1.引导互评。引导各小组对上台分享的小组进行点评。2.教师点评。教师对各小组在制作上传图片区域过程中的技术实践应用能力，团队协作、工程思维、解决问题等能力进行评价。3.锦囊讲解。讲解制作上传图片区域任务实操重难点。1.小组分享。小组分享实操任务完成情况。2.生生互评。对其它小组的任务分享进行评价和学习。3.认真听讲。通过教师讲解任务实操重难点，分析小组任务单的缺陷，思考完善方案。第6学时组队任务执行(30分钟)1.发布任务。通过职教云发布制作选择话题区域任务单。2.知识讲解。通过PPT课件讲解制作选择话题区域的基础知识。3.教师点评。教师点评各小组成员分工和任务执行计划合理度。4.答疑解惑。解决学生在任务实操中遇到的技术难题。1.认真听讲。通过教师讲解基础知识，对课前预习的知识进行查漏补缺。思考如何实现任务单。2.情景演绎：小组成员通过角色扮演情景演绎，讨论组内成员分工。3.小组分享：小组分享成员分工和任务执行计划。4.任务执行。小组成员完成制作选择话题区域的任务实操。多元技能测评（15分钟）1.引导互评。引导各小组对上台分享的小组进行点评。2.教师点评。教师对各小组在制作选择话题区域过程中的技术实践应用能力，团队协作、工程思维、解决问题等能力进行评价。3.锦囊讲解。讲解制作选择话题区域任务实操重难点。1.小组分享。小组分享实操任务完成情况。2.生生互评。对其它小组的任务分享进行评价和学习。3.认真听讲。通过教师讲解任务实操重难点，分析小组任务单的缺陷，思考完善方案。第7学时组队任务执行(30分钟)1.发布任务。通过职教云发布制作发布按钮区域任务单。2.知识讲解。通过PPT课件讲解制作发布按钮区域的基础知识。3.教师点评。教师点评各小组成员分工和任务执行计划合理度。4.答疑解惑。解决学生在任务实操中遇到的技术难题。1.认真听讲。通过教师讲解基础知识，对课前预习的知识进行查漏补缺。思考如何实现任务单。2.情景演绎：小组成员通过角色扮演情景演绎，讨论组内成员分工。3.小组分享：小组分享成员分工和任务执行计划。4.任务执行。小组成员完成制作发布按钮区域的任务实操。多元技能测评（15分钟）1.引导互评。引导各小组对上台分享的小组进行点评。2.教师点评。教师对各小组在制作发布按钮区域过程中的技术实践应用能力，团队协作、工程思维、解决问题等能力进行评价。3.锦囊讲解。讲解制作发布按钮区域任务实操重难点。1.小组分享。小组分享实操任务完成情况。2.生生互评。对其它小组的任务分享进行评价和学习。3.认真听讲。通过教师讲解任务实操重难点，分析小组任务单的缺陷，思考完善方案。第8学时任务测试(25分钟)1.任务介绍。教师介绍本次课要进行测试的测试任务，UI页面测试、功能测试。2.知识讲解。教师介绍测试的概念，并对照企业测试流程讲解，测试要按照需求分析、计划、用例、执行、总结，五步流程进行测试。3.情景故事。教师播放测试相关情景动画，指明测试工作的重要性，提高学生对测试工作的责任心。4.需求分析讲解。教师讲解需求分析的方法，并以部分需求说明书为例，演示如何正确进行需求分析，提取测试功能点。5.分配小组。根据任务实施同学完成情况及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。6.制定计划讲解。教师引导学生小组内，要交叉进行测试，如A同学测试B同学的项目，测试之前先制定自己的测试计划并形成文字。7.编写用例讲解。教师讲解编写测试用例的技巧，并以部分功能为例进行演示。8.执行用例讲解。教师讲解执行用例注意要点。9.总结报告讲解。教师讲解编写总结报告要点。10.组间巡回指导。教师在组间进行巡回指导，遇到共性问题，在班级内统一点拨。1.知晓任务。认真听取教师讲解本次课的测试任务。2.学习测试概念及流程。认真听取教师讲解软件测试的概念及软件测试的基本流程。3.观看动画。认真观看教师播放的动画故事，并思考如何高效准确的进行测试。4.需求分析。认真听取教师讲解需求分析的方法，并跟随教师演示，同步提取测试功能点。5.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。6.制定计划。各小组内同学明确自己测试的内容，如，A同学测试B同学项目，B同学测试C同学项目，C同学测试A同学项目，并制定自己的测试计划