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

教学整体设计任务名称任务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.总结报告讲解。教师讲解编