Web前端应用开发项目式教程（基于uni-app框架） 教案全套-教学设计 高秀艳 任务1-11 制作个人中心页-项目部署与发布

教学整体设计任务名称任务1制作个人中心页开课学期第3学期课程类型专业核心课授课班级授课学时4学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现“启嘉校园”项目的项目开发准备工作，包括产品需求文档分析、页面设计图分析、搭建前端开发环境、后端开发环境、创建项目开发目录。教学目标素质目标1.通过搭建项目开发环境，增强学习者的系统思维能力，养成统筹全局的习惯。2.通过学习MasterGo的使用，增强学习者合理使用工具和技术的能力，养成优化方法，提高工作效率的习惯。知识目标1.了解产品需求文档的作用。2.了解页面设计图的作用。3.了解字体图标的作用。4.了解接口文档的作用。5.掌握搭建前端开发环境的方法。6.掌握搭建后端开发环境的方法。能力目标1.能够使用MasterGo查看项目设计图。2.能够在Windows操作系统中安装HBuilderX。3.能够在Windows操作系统中安装微信开发者工具。4.能够使用HBuilderX创建uni-app项目。5.能够使用HBuilderX运行项目预览效果。学情分析知识基础1.已掌握微信小程序相关知识。2.已掌握软件测试相关知识。技能基础1.已具备微信小程序开发能力。2.已具备手机端小程序软件测试能力。学习特点与诉求1.学生对于真实项目开发具有浓厚兴趣，喜欢具有挑战性的项目内容。2.学生比较喜欢实践类教学方法，理论教学超过35分钟，就会注意力不集中。教学重点1.前端、后端环境搭建方法2.需求文档分析方法。教学难点1.灵活高效搭建前端、后端环境。2.准确对需求文档进行分析。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前预习产品需求文档分析、查看页面设计图、查看接口文档的任务，锻炼学生的自主学习能力，促进学生养成预习的学习习惯。2.以测验促进课堂提质增效通过布置预期内容中需求分析分析、页面设计图分析、接口文档分析知识测验，教师可以更好地了解学生对本次任务基础知识的学习需求和问题，总结提炼重难点知识，从而在课堂上进行更有针对性的讲解和讨论，提高教学质量和效果。知识图谱智能推荐拓展知识通过知识图谱向学生推送更多关于本节所学知识的应用场景，及应用技巧，学习相关论文及实战项目中列举的拓展使用方法，以点带面，使学生知识储备更全面，理解更透彻，从而为本任务准确实施奠定雄厚的知识基础。教师活动学生活动1.发布任务。通过职教云发布预习任务。2.发布测验。通过职教云发布知识测验。3.发布资料。通过职教云发布微课视频、PPT课件、虚拟仿真、知识图谱拓展阅读等学习资源。4.批阅任务。分析知识测验结果，梳理重难点知识。1.课前预习。通过微课和课件自主学习基础知识。2.基础测验。通过职教云完成知识测验。3.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合制作个人资料页的实际工作过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生制作个人资料页的实操技能和工程素养。采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述向学生传递“多学习新技术，让软件生命力更持久”的思想，让学生养成“持续发展、终身学习”的习惯；通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过对删除功能关键代码的实现，培养学生“满足用户需求，提升软件价值”的职业素养；通过任务扩展，让学生了解图片存储的新技术、最优解决方案的选择，培养学生践行“技术为民，服务社会”的理念。第1学时教学环节教师活动学生活动情景导入与任务描述1(10分钟)1.情景导入。通过播放动画说明需求文档的重要性。2.发布讨论。你认为需求文档有必要进行详细分析吗？3.介绍任务。本任务将完成“启嘉校园”项目开始前的开发准备工作，主要包括了解开发中使用的项目资源和项目资源使用方法，部署前、后端开发环境，以及创建项目开发目录。本任务将尽可能详细地为读者讲解如何使用HBuilderX创建uni-app项目和项目文件，引导读者以全局视野了解uni-app项目，形成以系统思维方式解决问题的习惯。1.操作体验。认真观看教师播放动画。2.回答问题。认真回答教师的问题。3.了解任务。认真听取教师介绍项目1的任务介绍，同时思考，如何高效搭建开发环境。知识储备讲解1(35分钟)1.产品需求分档概念讲解。（1）实现原理讲解。（2）通过流程图或者思维导图介绍实现逻辑，解决重难点问题。2.查看“启嘉校园”需求分档。讲解什么是页面设计图，如何查看设计标注，如何下载图片素材、字体图标。3.需求文档分析升华点拨。教师对需求文档分析的重要性及分析中常见问题进行讲解，以及注意事项进行说明。1.聆听知识讲解产品需求文档。认真听取教师讲解产品需求文档的概念，并思考如何准确分析需求分档。2.聆听“启嘉校园”需求文档分析。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听需求文档分析升华点拨笔记撰写。认真听取教师对需求文档分析的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第2学时教学环节教师活动学生活动情景导入与任务描述2(10分钟)1.发布讨论。什么是接口文档？2.创设情境。通过动画演示什么是接口文档3.介绍任务。1.回答讨论。认真思考并回答教师发布的讨论。2.观看动画。认真观看教师播放的动画，初步了解什么是页面生命周期。3.了解任务。认真听取教师介绍本节课的任务介绍，同时思考，如何快速准确查看接口文档。知识储备讲解2(35分钟)1.接口文档知识讲解。接口主要用来向开发者服务器传递数据，接口文档即应用程序接口的说明文档，又称为API文档，用来描述系统所提供接口信息的文档。2.“启嘉校园”项目源码。“启嘉校园”项目功能完整，代码量大，告诉同学们源码的下载地址及方法。1.聆听知识讲解页面生命周期。认真听取教师讲解页面生命周期的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。2.查看“启嘉校园”项目源码。登录网址，查看源码，有必要的同学可进行下载。第3学时教学环节教师活动学生活动任务实施逻辑分析1(10分钟)1.发布讨论。你认为不同的开发工具对于软件开发有影响吗？创设情境。播放动画，引导同学在环境安装过程中细致耐心。3.介绍任务。1.回答讨论。认真思考并回答讨论。2.观看动画。观看动画，调整心态，接下来的环境安装会遇到很多问题，细致耐心，不断尝试，攻坚克难。3.了解任务。认真听取教师介绍本节课的任务介绍。任务实施编码实现1(35分钟)1.搭建前端开发环境。介绍前端开发环境需要的工具，并发送给学生。2.前端开发环境安装演示。带领学生安装环境。3.搭建后端开发环境。介绍后端开发环境需要的工具，并发送给学生。4.后端开发环境安装演示。带领学生安装环境。聆听讲解认真听取教师讲解后端开发环境所需工具，并进行下载。2.同步安装环境。认真观看教师演示，同步安装，遇到问题及时向教师提问。第4学时教学环节教师活动学生活动任务实施逻辑分析2(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：创建项目开发目录、运行项目、任务测试。2.任务讲解。1.知晓任务。听取教师讲解本次课要完成的任务。2.明确步骤。跟随教师讲解的思路，建立项目开发目录，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现2(20分钟)1.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。任务测试与评价（15分钟）1.环境及项目测试。2.组间巡回指导。教师在组间进行巡回指导，遇到共性问题，在班级内统一点拨。3.任务评分。企业教师和授课教师对学生整体任务实施情况，测试情况进行评分。同时引导学生进行组内评分，组间互评。4.教师点评。企业教师和授课教师分别对班级内评分最高的2组，及评分较低的2组进行点评，指出本次任务中，同学们的优秀做法，及共性问题。1.完成测试。2.完成评价。3.聆听点评。认真听取企业教师及专业教师对本次任务的评价，学习优秀经验，同时比对自己任务完成情况，查漏补缺，利用课下时间进行提升。（三）课后1.以测验巩固基础知识通过布置知识技能测验，组织学生助教线上答疑为学生提供学习辅导，帮助学生查漏补缺、理解和消化基础知识。2.以预习培养学生自主学习能力通过布置课前预习制作个人中心页基础知识的任务，锻炼学生的自主学习能力，促进学生养成预习的学习习惯。课后活动1.组织学生完成任务拓展模块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.学习测试概念及流程。认真听取教师讲解软件测试的概念及软件测试的基本流程。3.观看动画。认真观看教师播放的动画故事，并思考如何高效准确的进行测试。4.需求分析。认真听取教师讲解需求分析的方法，并跟随教师演示，同步提取测试功能点。5.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。6.制定计划。各小组内同学明确自己测试的内容，如，A同学测试B同学项目，B同学测试C同学项目，C同学测试A同学项目，并制定自己的测试计划。7.编写用例。学生认真听取教师讲解测试用例的编写要点，并同步进行仿做。完成整个测试模块的测试用例编写。8.执行用例。学生执行在上节课中编写的测试用例，并将缺陷记录下来，执行完测试用例编写测试报告。有问题的同学，可进行组内讨论，组间求助，也可以随时向教师提出问题，还可以通过在线平台观看视频讲解。任务评价(10分钟)1.任务评分。企业教师和授课教师对学生整体任务实施情况，测试情况进行评分。同时引导学生进行组内评分，组间互评。2.教师点评。企业教师和授课教师分别对班级内评分最高的2组，及评分较低的2组进行点评，指出本次任务中，同学们的优秀做法，及共性问题。1.学生展示。学生展示自己的任务完成情况，并对自己在任务完成及任务测试过程中遇到的问题及解决对策进行展示。在教师的引导下进行评分。2.聆听点评。认真听取企业教师及专业教师对本次任务的评价，学习优秀经验，同时比对自己任务完成情况，查漏补缺，利用课下时间进行提升。（三）课后1.以测验巩固基础知识通过布置知识技能测验，组织学生助教线上答疑为学生提供学习辅导，帮助学生查漏补缺、理解和消化基础知识。2.以预习培养学生自主学习能力通过布置课前预习制作个人资料页基础知识的任务，锻炼学生的自主学习能力，促进学生养成预习的学习习惯。课后活动1.组织学生完成任务拓展模块2.进行有效评价并记录过程成绩三、教学反思学习效果特色创新诊改措施教学整体设计任务名称任务3制作个人资料页开课学期第3学期课程类型专业核心课授课班级授课学时8学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现“启嘉校园”项目的个人资料页面和个人资料扩展页面。通过该任务的实现让学生掌握uni-app中的view视图容器组件、picker组件、input组件、正则表达式、消息提示方法、页面跳转方法。教学目标素质目标1.通过学习使用正则表达式完成手机号、微信号等信息的验证方法，培养学习者发现问题、分析问题、解决问题的能力。2.通过实现“用户扩展资料区域”中用户信息显示的功能，强化学习者个人信息保护意识。3.通过巩固拓展练习，培养学习者脚踏实地、躬身力行的实践精神。知识目标1.掌握uni-apppicker滚动选择器组件的使用。2.掌握uni-appinput单行输入框组件的使用。3.掌握uni-appimage图片组件的使用。4.掌握uni.showToast消息提示方法的使用。5.掌握uni-app页面跳转方法的使用。6.掌握正则表达式的使用。能力目标1.能够使用picker组件完成滚动选择性别。2.能够使用input组件完成内容的输入。3.能够使用image组件完成图像的展示及缩放、裁剪等操作。4.能够使用uni.showToast方法完成消息提示。5.能够使用uni-app页面跳转方法实现页面间跳转。6.能够使用正则表达式完成手机号、微信号等信息的验证。学情分析知识基础1.已掌握页面路由和自定义导航栏的配置。2.已掌握uni-appview视图容器组件及弹出层组件使用方法。3.已掌握uni-apptext基础内容组件和扩展组件的使用方法。技能基础1.已具备使用MasterGo查看设计图标注信息。2.已具备使用uni-app视图容器组件搭建静态页面结构。3.已具备使用Sass预处理器修饰页面样式。学习特点与诉求1.完成项目1和项目2后，学生对启嘉校园开发项目产生了极大兴趣，具有很好的学习积极性。2.学生的自主学习能力有所欠缺，下发的在线学习资源点击率偏低。教学重点1.uni-apppicker滚动选择器组件、input单行输入框组件使用方法。2.消息提示方法及页面跳转方法的使用。教学难点1.根据项目需求，灵活准确设置滚动选择器组件样式。2.准确应用正则表达式的不同方法进行输入内容正确性验证。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前预习uni-apppicker滚动选择器组件、input单行输入框组件、image图片组件基础知识的任务，锻炼学生的自主学习能力，促进学生养成预习的学习习惯。2.以测验促进课堂提质增效通过布置预期内容中滚动选择器组件、单行输入框组件、图片组件知识测验，教师可以更好地了解学生对本次任务基础知识的学习需求和问题，总结提炼重难点知识，从而在课堂上进行更有针对性的讲解和讨论，提高教学质量和效果。知识图谱智能推荐拓展知识通过知识图谱向学生推送更多关于滚动选择器组件、input单行输入框组件、image图片组件的应用场景，及应用技巧，学习相关论文及实战项目中列举的拓展使用方法，以点带面，使学生知识储备更全面，理解更透彻，从而为本任务准确实施奠定雄厚的知识基础。教师活动学生活动1.发布任务。通过职教云发布滚动选择器组件、单行输入框组件、图片组件基础知识预习任务。2.发布测验。通过职教云发布滚动选择器组件、单行输入框组件、图片组件知识测验。3.发布资料。通过职教云发布微课视频、PPT课件、虚拟仿真、知识图谱拓展阅读等学习资源。4.批阅任务。分析知识测验结果，梳理重难点知识。1.课前预习。通过微课和课件自主学习滚动选择器组件、单行输入框组件、图片组件相关基础知识。2.基础测验。通过职教云完成滚动选择器组件、单行输入框组件、图片组件知识测验。3.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合制作个人资料页的实际工作过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生制作个人资料页的实操技能和工程素养。采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述向学生传递“多学习新技术，让软件生命力更持久”的思想，让学生养成“持续发展、终身学习”的习惯；通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过对删除功能关键代码的实现，培养学生“满足用户需求，提升软件价值”的职业素养；通过任务扩展，让学生了解图片存储的新技术、最优解决方案的选择，培养学生践行“技术为民，服务社会”的理念。第1学时教学环节教师活动学生活动情景导入与任务描述1(10分钟)1.情景导入。通过演示小艺同学登录QQ以后，进入个人资料页面，进行修改头像、昵称等信息，引出今天的任务内容。并现场引导同学，登录自己的QQ账号，进入个人资料页面，进行信息修改。2.发布问题。个人资料页面主要功能都包括哪些？3.介绍任务。本任务将制作“启嘉校园”项目的个人资料页面，该页面主要用于修改用户基本信息，包括用户的头像、昵称、个性签名、性别、手机号和微信号。个人资料往往涉及用户多项个人信息，开发者在开发过程中应充分关注用户信息安全。1.操作体验。认真聆听教师对小艺同学个人资料页面的修改过程，同时在教师的引导下，登录自己的QQ账号，进行信息修改。2.回答问题。通过自主操作体验，回答个人资料页面主要功能都包括哪些。3.了解任务。认真听取教师介绍项目3的任务介绍，同时思考，个人信息页面哪些信息涉及用户隐私，需要更加注重用户信息安全。知识储备讲解1(35分钟)1.picker组件知识讲解。（1）实现原理讲解。（2）通过流程图或者思维导图介绍实现逻辑，解决重难点问题。2.picker组件代码演示。picker组件的使用比较简单，只需在页面的<template>中添加picker组件并设置相应的属性，如mode、range等。在<script>中定义相应的数据和方法。进行现场演示。3.picker组件升华点拨。picker和picker-view都是非常有用的组件，可以为uni-app应用程序创建交互式选择器。选择哪个组件取决于应用程序的需求，如果只需要选择单个值可以使用picker；如果需要选择多个值或创建复杂的交互式界面，则应选择picker-view。4.input组件知识讲解。该组件在移动端应用时常见的属性及事件如下：1.confirm-type属性与confirm-hold属性。2.@input事件。3.@confirm事件。5.input组件代码演示。6.input组件升华点拨。其实v-model双向绑定针对input控件，内部也是通过@input事件实现的。1.聆听知识讲解picker组件。认真听取教师讲解picker组件的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。2.观看演示picker组件使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听picker组件升华点拨笔记撰写。认真听取教师对picker组件部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。4.聆听知识讲解input组件。认真听取教师讲解input组件的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。5.观看input组件演示同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。6.聆听input组件升华点拨笔记撰写。认真听取教师对input组件部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第2学时教学环节教师活动学生活动情景导入与任务描述2(10分钟)1.引入提问。image组件有哪些属性？2.创设情境。以智慧职教icve微信小程序中图片显示为例，引出今天所学知识。3.介绍任务。1.回答提问。认真思考并回答教师提问。2.体验情境。通过手机进入智慧职教MOOC微信小程序，观察图标图片的清晰度。3.了解任务。认真听取教师介绍本节课的任务介绍，同时思考，手机页面如何确保图片显示清晰度。知识储备讲解2(35分钟)1.image组件知识讲解。src属性，mode属性，lazy-load属性，show-menu-by-longpress属性，bindload和binderror事件处理。2.image组件代码演示。现场演示image组件的每个属性使用方法。3.image组件升华点拨。在移动端使用image组件时，需要注意以下几点：图片大小和质量：移动设备的屏幕尺寸和分辨率相对较小，因此需要对图片大小和质量进行适当的优化，以提高页面加载速度和用户体验。图片路径：在移动端，图片路径建议使用相对路径或CDN地址，避免使用本地绝对路径，以确保图片能够正确加载。图片缓存：移动设备的存储空间有限，因此需要合理地管理图片缓存，避免占用过多的存储空间。图片展示模式：在移动端，由于屏幕尺寸和分辨率的限制，需要根据具体场景选择合适的图片展示模式，以确保图片能够正确展示并满足用户需求。1.聆听知识讲解image组件。认真听取教师讲解image组件的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。2.观看演示image组件使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听image组件升华点拨笔记撰写。认真听取教师对image组件部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第3学时教学环节教师活动学生活动情景导入与任务描述3(10分钟)1.发布讨论。你知道哪些uni-app中的消息提示框？创设情境。以微信登录中用户名或密码输入错误的消息提示框为例，引出今天所学知识。3.介绍任务。1.回答讨论。认真思考并回答讨论。2.体验情境。通过登录微信页面输入错误的用户名或密码观察消息提示框。3.了解任务。认真听取教师介绍本节课的任务介绍，同时思考，如何解决提示框的使用过程中可能会受到原生端的限制和差异的问题。知识储备讲解3(35分钟)1.uni-app常用提示框知识讲解。showToast消息提示框、showLoading加载提示框、showModal模态框、showActionSheet列表选择提示框。2.uni-app常用提示框代码演示。现场演示常用提示框组件的每个属性使用方法。3.uni-app常用提示框升华点拨。在uni-app中，提示框的使用可能会受到原生端的限制和差异，需要根据实际情况进行调整和处理。1.聆听知识讲解uni-app常用提示框组件。认真听取教师讲解uni-app常用提示框的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。2.观看演示uni-app常用提示框使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听uni-app常用提示框升华点拨笔记撰写。认真听取教师对uni-app常用提示框部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第4学时教学环节教师活动学生活动情景导入与任务描述4(10分钟)1.发布讨论。你知道哪些页面跳转的情况呢？创设情境。以编写的简短小案例演示页面跳转的过程。3.介绍任务。1.回答讨论。认真思考并回答讨论。2.体验情境。观看页面跳转过程。3.了解任务。认真听取教师介绍本节课的任务介绍，同时思考，如何解决页面跳转返回可能会被原生端屏蔽或者显示异常的问题。知识储备讲解4(35分钟)1.uni-app页面跳转知识讲解。uni.navigateTo方法、uni.redirectTo方法、uni.navigateBack方法2.uni-app页面跳转代码演示。现场演示页面跳转不同方法的使用方法。3.uni-app页面跳转升华点拨。页面跳转返回时需要注意返回的页面层数，如果delta属性大于当前页面栈的长度，将无法返回到目标页面。页面跳转返回时可以使用uni.getStorageSync方法获取之前存储的数据，以便进行页面跳转后的操作。在一些情况下，页面跳转返回可能会被原生端屏蔽或者显示异常，需要根据实际情况进行调整和处理。4.发布知识储备测验。在职教云平台发布测验，对任务3中的所有知识储备知识进行测验。5.升华点拨。根据同学测验情况，对易错易混淆难掌握知识进行升华点拨。1.聆听知识讲解uni-app页面跳转组件。认真听取教师讲解uni-app页面跳转的不同方法及使用方法，并思考如何应用到实际项目当中。2.观看演示uni-app页面跳转方法使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听uni-app页面跳转升华点拨笔记撰写。认真听取教师对uni-app页面跳转部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。参加测验。在职教云平台参加测验。5.查漏补缺。认真听取教师升华点拨，必要知识点记录到课堂笔记中。第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.任务介绍。教师介绍本节课需要完成的任务：制作用户扩展资料区域，用户扩展资料区域可划分为用户ID、用户性别、用户手机号、用户微信号及保存按钮五个部分，每个部分独占一行且宽度相同距左右两边有固定的间距。2.任务讲解。教师讲解任务完成的步骤，必要的步骤进行代码演示。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看用户扩展资料页设计图。2.明确步骤。跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现3(35分钟)1.分配小组。根据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第8学时教学环节教师活动学生活动第8学时任务测试(35分钟)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同学项目，并制定自己的测试计划。7.编写用例。学生认真听取教师讲解测试用例的编写要点，并同步进行仿做。完成整个测试模块的测试用例编写。8.执行用例。学生执行在上节课中编写的测试用例，并将缺陷记录下来，执行完测试用例编写测试报告。有问题的同学，可进行组内讨论，组间求助，也可以随时向教师提出问题，还可以通过在线平台观看视频讲解。任务评价(10分钟)1.任务评分。企业教师和授课教师对学生整体任务实施情况，测试情况进行评分。同时引导学生进行组内评分，组间互评。2.教师点评。企业教师和授课教师分别对班级内评分最高的2组，及评分较低的2组进行点评，指出本次任务中，同学们的优秀做法，及共性问题。1.学生展示。学生展示自己的任务完成情况，并对自己在任务完成及任务测试过程中遇到的问题及解决对策进行展示。在教师的引导下进行评分。2.聆听点评。认真听取企业教师及专业教师对本次任务的评价，学习优秀经验，同时比对自己任务完成情况，查漏补缺，利用课下时间进行提升。（三）课后1.以测验巩固基础知识通过布置知识技能测验，组织学生助教线上答疑为学生提供学习辅导，帮助学生查漏补缺、理解和消化基础知识。2.以预习培养学生自主学习能力通过布置课前预习制作社区首页基础知识的任务，锻炼学生的自主学习能力，促进学生养成预习的学习习惯。课后活动1.组织学生完成任务拓展模块2.进行有效评价并记录过程成绩三、教学反思学习效果特色创新诊改措施教学整体设计任务名称任务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.巡回指导。教师分配学生任务