Web前端应用开发项目式教程（基于uni-app框架） 教案-教学设计 任务2 制作个人中心页

教学整体设计任务名称任务2制作个人中心页开课学期第3学期课程类型专业核心课授课班级授课学时8学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现“启嘉校园”项目的个人中心页面，包括头部区域、导航栏、功能列表区域、“联系我们”模态框。通过该任务的实现让学生掌握uni-app中的视图容器组件、触摸事件touch、页面生命周期。教学目标素质目标1.通过给新建变量、类选择器等命名培养学习者在编程中规范命名的意识。2.通过项目使用的国产跨平台移动应用开发框架uni-app，培养学习者的爱国情怀，增强科技创新的自信心。3.通过以学生社交生态为主题的项目开发，提高学习者科技赋能数字生活的意识。4.通过任务拓展“二手”功能的实现，培养学习者树立坚持节约优先，持续发展的理念。知识目标1.了解移动端尺寸单位。2.掌握页面路由和自定义导航栏的配置。3.掌握uni-appview视图容器组件的使用。4.掌握uni-apppopup弹出层组件的使用。5.掌握uni-apptext基础内容组件的使用。6.掌握uni-app扩展组件的使用。7.掌握Sass基础语法。能力目标1.能够使用MasterGo查看设计图标注信息。2.能够使用uni-app视图容器组件搭建静态页面结构。3.能够使用Sass预处理器修饰页面样式。学情分析知识基础1.已掌握需求文档分析方法。2.已掌握接口文档分析方法。3.已掌握前端、后端、项目环境搭建方法。技能基础1.已具备分析需求文档能力。2.已具备分析接口文档能力。3.已具备搭建前端、后端、项目开发环境能力。学习特点与诉求1.完成项目1后，学生对启嘉校园开发项目产生了极大兴趣，具有很好的学习积极性。2.学生比较喜欢实践类教学方法，理论教学超过35分钟，就会注意力不集中。教学重点1.页面路由和自定义导航栏的配置方法2.view、popup、text组件的使用方法。教学难点1.根据项目需求，使用MasterGo查看设计图标信息。2.准确应用Sass预处理器修饰页面样式。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前预习uni-appview视图容器组件、popup弹出层组件、text基础内容组件基础知识的任务，锻炼学生的自主学习能力，促进学生养成预习的学习习惯。2.以测验促进课堂提质增效通过布置预期内容中view视图容器组件、popup弹出层组件、text基础内容组件知识测验，教师可以更好地了解学生对本次任务基础知识的学习需求和问题，总结提炼重难点知识，从而在课堂上进行更有针对性的讲解和讨论，提高教学质量和效果。知识图谱智能推荐拓展知识通过知识图谱向学生推送更多关于view视图容器组件、popup弹出层组件、text基础内容组件的应用场景，及应用技巧，学习相关论文及实战项目中列举的拓展使用方法，以点带面，使学生知识储备更全面，理解更透彻，从而为本任务准确实施奠定雄厚的知识基础。教师活动学生活动1.发布任务。通过职教云发布view视图容器组件、popup弹出层组件、text基础内容组件基础知识预习任务。2.发布测验。通过职教云发布view视图容器组件、popup弹出层组件、text基础内容组件知识测验。3.发布资料。通过职教云发布微课视频、PPT课件、虚拟仿真、知识图谱拓展阅读等学习资源。4.批阅任务。分析知识测验结果，梳理重难点知识。1.课前预习。通过微课和课件自主学习view视图容器组件、popup弹出层组件、text基础内容组件相关基础知识。2.基础测验。通过职教云完成view视图容器组件、popup弹出层组件、text基础内容组件知识测验。3.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合制作个人资料页的实际工作过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生制作个人资料页的实操技能和工程素养。采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述向学生传递“多学习新技术，让软件生命力更持久”的思想，让学生养成“持续发展、终身学习”的习惯；通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过对删除功能关键代码的实现，培养学生“满足用户需求，提升软件价值”的职业素养；通过任务扩展，让学生了解图片存储的新技术、最优解决方案的选择，培养学生践行“技术为民，服务社会”的理念。第1学时教学环节教师活动学生活动情景导入与任务描述1(10分钟)1.情景导入。通过演示教师编写的scroll-view使用的小案例，引出今天的学习内容。2.发布问题。Scroll-view有什么作用？常用于哪些场景？3.介绍任务。本任务将制作“启嘉校园”项目的个人中心页，主要内容包括用户头像、昵称、ID、商品管理和账号认证等。1.操作体验。认真观看教师的演示，并在教师指导下，查看scroll-view的用法。2.回答问题。认真回答教师的问题。3.了解任务。认真听取教师介绍项目2的任务介绍，同时思考，如何实现个人中心页面。知识储备讲解1(35分钟)1.scroll-view知识讲解。（1）实现原理讲解。（2）通过流程图或者思维导图介绍实现逻辑，解决重难点问题。2.scroll-view组件代码演示。scroll-view是uni-app框架中的一个组件，用于创建可滚动的视图区域，常用于长列表、滚动图像等场景。该组件用法比较简单，只需要将要滚动的内容放在scroll-view内即可.3.scroll-view组件升华点拨。教师对scroll-view组件使用中常见问题进行讲解，以及注意事项进行说明。4.触摸事件touch组件知识讲解。（1）实现原理讲解。（2）通过流程图或者思维导图介绍实现逻辑，解决重难点问题。5.touch组件代码演示。6.touch组件升华点拨。教师对touch组件使用中常见问题进行讲解，以及注意事项进行说明。1.聆听知识讲解scroll-view组件。认真听取教师讲解scroll-view组件的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。2.观看演示scroll-view组件使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听scroll-view组件升华点拨笔记撰写。认真听取教师对scroll-view组件部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。4.聆听知识讲解touch组件。认真听取教师讲解touch组件的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。5.观看touch组件演示同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。6.聆听touch组件升华点拨笔记撰写。认真听取教师对touch组件部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第2学时教学环节教师活动学生活动情景导入与任务描述2(10分钟)1.发布讨论。什么是页面生命周期？2.创设情境。通过动画演示什么是页面生命周期。3.介绍任务。1.回答讨论。认真思考并回答教师发布的讨论。2.观看动画。认真观看教师播放的动画，初步了解什么是页面生命周期。3.了解任务。认真听取教师介绍本节课的任务介绍，同时思考，如何实现页面从创建到销毁的整个过程。知识储备讲解2(35分钟)1.页面生命周期知识讲解。在uni-app中，页面生命周期指的是页面从创建到销毁的整个过程所经历的一系列事件。并介绍生命周期中的监听页面加载、监听页面显示、监听页面初次渲染、监听页面隐藏、监听页面卸载、监听页面下拉刷新、监听页面上拉触底。2.页面生命周期代码演示。现场演示页面生命周期的每个属性使用方法。3.页面生命周期知识升华点拨。在实际开发中，开发者可以根据自己的需求合理利用这些生命周期函数，从而提高页面的交互性和用户体验。1.聆听知识讲解页面生命周期。认真听取教师讲解页面生命周期的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。2.观看演示页面生命周期使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听页面生命周期知识升华点拨笔记撰写。认真听取教师对页面生命周期部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第3学时教学环节教师活动学生活动情景导入与任务描述3(10分钟)1.发布讨论。你知道原生导航栏和自定义导航栏有什么区别吗？创设情境。以某购物平台的导航栏为例，引出今天要学的内容。3.介绍任务。1.回答讨论。认真思考并回答讨论。2.体验情境。进入购物平台，查看该平台的导航栏布局。3.了解任务。认真听取教师介绍本节课的任务介绍，同时思考，导航栏一般包括哪些信息？知识储备讲解3(35分钟)1.原生导航栏和默认导航栏知识讲解。导航栏包括标题、返回按钮、右侧按钮等元素。开发者可以通过uni-app提供的API来实现原生导航栏的设置和控制2.导航栏代码演示。现场演示导航栏的每个属性使用方法。3.导航栏升华点拨。原生导航栏可以使应用界面更加美观和统一，但它的功能相对简单，如果需要实现更多的自定义功能和样式，建议使用自定义导航栏。聆听知识讲解原生导航栏和默认导航栏认真听取教师讲解原生导航栏和默认导航栏的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。2.观看演示导航栏使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听导航栏升华点拨笔记撰写。认真听取教师对导航栏相关知识部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第4学时教学环节教师活动学生活动情景导入与任务描述4(10分钟)1.发布讨论。你知道底部tabbar的主要作用是什么吗？创设情境。以编写的简短小案例演示页面跳转的过程。3.介绍任务。1.回答讨论。认真思考并回答讨论。2.体验情境。观看底部tabbar情景案例演示。3.了解任务。认真听取教师介绍本节课的任务介绍，同时思考，tabBar有哪些配置项呢？知识储备讲解4(35分钟)1.底部tabbar知识讲解。tabBar是移动端应用常见的底部标签栏，用于实现页面之间的快速切换，小程序中通常将其分为底部tabBar和顶部tabBar。uni-app中的tabBar可以配置的标签数量最少为2个，最多为5个.2.底部tabbar代码演示。现场演示页面跳转不同方法的使用方法。3.底部tabbar升华点拨。1.聆听知识讲解tabbar知识。认真听取教师讲解底部tabbar使用方法，并思考如何应用到实际项目当中。2.观看演示底部tabbar使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听底部tabbar升华点拨笔记撰写。认真听取教师对底部tabbar部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第5学时教学环节教师活动学生活动任务实施逻辑分析1(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：页面结构分析与搭建、制作头部区域。2.任务讲解。教师讲解任务完成的步骤，必要的步骤进行代码演示。主要对照页面结构及头部区域的预期效果图进行页面的结构分析。首先新建页面文件，然后明确设计图中的内容，下一步实现头部区域制作。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看头部区域设计图2.明确步骤。跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现1(35分钟)1.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第6学时教学环节教师活动学生活动任务实施逻辑分析2(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：制作自定义导航栏、制作圆弧功能列表区域。2.任务讲解。教师讲解任务完成的步骤，必要的步骤进行代码演示。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看导航栏区域设计图。2.明确步骤。跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现2(35分钟)1.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第7学时教学环节教师活动学生活动任务实施逻辑分析3(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：制作底部标签栏区域，“联系我们”模态框。2.任务讲解。教师讲解任务完成的步骤，必要的步骤进行代码演示。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看底部标签栏设计图。2.明确步骤。跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现3(35分钟)1.分配小组。根据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第8学时教学环节教师活动学生活动任务测试(35分钟)1.任务介绍。教师介绍本次课要进行测试的测试任务，UI页面测试、功能测试。2.知识讲解。教师介绍测试的概念，并对照企业测试流程讲解，测试要按照需求分析、计划、用例、执行、总结，五步流程进行测试。3.情景故事。教师播放测试相关情景动画，指明测试工作的重要性，提高学生对测试工作的责任心。4.需求分析讲解。教师讲解需求分析的方法，并以部分需求说明书为例，演示如何正确进行需求分析，提取测试功能点。5.分配小组。根据任务实施同学完成情况及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。6.制定计划讲解。教师引导学生小组内，要交叉进行测试，如A同学测试B同学的项目，测试之前先制定自己的测试计划并形成文字。7.编写用例讲解。教师讲解编写测试用例的技巧，并以部分功能为例进行演示。8.执行用例讲解。教师讲解执行用例注意要点。9.总结报告讲解。教师讲解编写总结报告要点。10.组间巡回指导。教师在组间进行巡回指导，遇到共性问题，在班级内统一点拨。1.知晓任务。认真听取教师讲解本次课的测试任务。2.学习测试概念及流程。认真听取教师讲解软件测试的概念及软件测试的基本