Web前端应用开发项目式教程（基于uni-app框架） 教案 教学设计 高秀艳 任务6-11 制作文章详情页-项目部署与发布

教学整体设计任务名称任务6制作文章详情页开课学期第3学期课程类型专业核心课授课班级授课学时8学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现“启嘉校园”项目的个人资料页面和个人资料扩展页面。通过该任务的实现让学生掌握uni-app中的view视图容器组件、picker组件、input组件、正则表达式、消息提示方法、页面跳转方法。通过单击社区首页“文章列表”中的文章卡片可以进入文章详情页，文章详情页包含文章的发布者信息、发布时间、标题、正文等内容，用户可对文章内容进行浏览、关注、转发、评论和点赞操作，也可在评论区查看、回复和点赞其他用户的评论，这是文章管理系统包含的常规功能，也是移动端系统最常见的交互手段，能够让用户有更好的应用体验。教学目标素质目标1.通过对组件的封装与复用，培养学习者遵守行业编码规范的意识。2.通过引导学习者自学官网开发手册，培养其热爱学习、主动学习的精神。3.通过解决软件兼容性问题，培养学习者追求软件高质量的职业意识。4.通过网络系统的开发，培养学习者的网络案例意识，通过健康用网传播正能量。知识目标1.掌握组件的复用。2.掌握onShareAppMessage小程序页面转发方法的使用。3.掌握Vue$nextTick回调延迟方法的使用。4.掌握Vuefilters过滤器方法的使用。5.掌握input组件always-embed和adjust-position属性的用法。能力目标1.能够使用组件提升代码复用率。2.能够使用onShareAppMessage方法实现转发页面的自定义信息设置。3.能够使用filters过滤器实现日期和时间格式化。4.能够解决iOS系统中键盘调起后的输入框被覆盖的问题。学情分析知识基础1.已掌握uni.chooseImage选择图片方法的使用。2.已掌握uni-apptextarea多行输入框组件的使用。技能基础1.能够使用uni.chooseImage方法实现本地相册获取图片或拍照。2.能够使用textarea组件实现显示已输入字数和字数上限的多行输入框。3.能够使用uni.navigateTo方法在页面跳转时传递话题参数。3.能够使用正则表达式完成文章信息验证。4.能够通过操作数组对象实现图片删除功能。学习特点与诉求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.介绍任务本任务将制作“启嘉校园”项目的文章详情页面，该页面包含文章的发布者信息、发布时间、标题、正文等内容，用户可对文章内容进行浏览、关注、转发、评论和点赞操作，也可在评论区查看、回复和点赞其他用户的评论。1.操作体验登录启嘉网，完成评论任务。2.回答问题通过自主操作体验，回答详情页面主要功能都包括哪些。3.了解任务认真听取教师介绍项目6的任务介绍，同时思考，个人信息页面哪些信息涉及用户隐私，需要更加注重用户信息安全。知识储备讲解1(35分钟)1.组件复用（1）什么是组件复用。（2）通过流程图或者思维导图介绍实现逻辑，解决重难点问题。2.组件复用代码演示组件复用可通过多种方式实现，例如：利用props传递数据，使子组件能根据父组件传递的数据进行定制化渲染；使用插槽，让父组件能插入自定义内容，使子组件更灵活；使用高阶组件，将组件逻辑封装为函数，或使用mixins，将共享逻辑封装在一起，减少重复编写。进行现场演示。3.组件拓展与演示组件拓展是指在已有组件的基础上进行修改和扩展，从而创建一个新组件。通常情况下，组件的拓展可以通过继承或者组合等方式来实现。在继承方式中，可以通过继承已有组件的方式来创建一个新的组件，并在新组件中添加新的属性和方法。1.聆听知识讲解组件复用认真听取教师讲解组件复用的语法格式，并思考如何应用到实际项目当中。2.观看演示组件复用的使用方法同步仿作认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听组件拓展的使用方法同步仿作认真听取教师对组件拓展部分的点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。认真观看教师演示，并仿作。第2学时情景导入与任务描述2(10分钟)引入提问常见跨端问题有哪些？创设情境以智慧职教icve微信小程序在不同手机中下拉显示为例，引出今天所学知识。3.介绍任务1.回答提问认真思考并回答教师提问。2.体验情境通过手机进入智慧职教MOOC微信小程序，观察不同手机下拉效果。3.了解任务认真听取教师介绍本节课的任务介绍。知识储备讲解2(35分钟)1.uni-app跨端兼容⚫样式兼容性问题⚫组件兼容性问题⚫API兼容性问题⚫生命周期兼容性问题⚫性能兼容性问题2.DOM更新回调在Vue更新DOM后，可能会需要访问更新后的DOM或者执行一些需要在DOM更新后才能执行的操作，这时可以使用$nextTick方法来保证在DOM更新完成后再执行这些操作。1.聆听知识讲解uni-app跨端兼容认真听取教师讲解uni-app跨端兼容，并思考如何应用到实际项目当中。2.观看演示uni-app跨端兼容同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听DOM更新回调认真听取教师对DOM更新回调部分的点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第3学时任务实施逻辑分析1(10分钟)1.任务介绍教师介绍本节课需要完成的任务：制作文章相关信息部分2.任务讲解教师讲解任务完成的步骤，必要的步骤进行代码演示。主要对照详情页的预期效果图进行页面的结构分析，分为文章详情区域和文章评论区域。首先新建页面文件，然后明确设计图中的内容。1.知晓任务听取教师讲解本次课要完成的任务，并认真查看详情页页面设计图。2.明确步骤跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现1(35分钟)1.分配小组教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第4学时任务实施逻辑分析2(10分钟)1.任务介绍教师介绍本节课需要完成的任务：制作文章主体信息部分2.任务讲解教师讲解任务完成的步骤，必要的步骤进行代码演示。1.知晓任务听取教师讲解本次课要完成的任务，并认真查看详情页页面设计图。2.明确步骤跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现2(35分钟)1.分配小组教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第5学时任务实施逻辑分析3(10分钟)1.任务介绍教师介绍本节课需要完成的任务：制作文章互动部分2.任务讲解教师讲解任务完成的步骤，必要的步骤进行代码演示。1.知晓任务听取教师讲解本次课要完成的任务，并认真查看详情页页面设计图。2.明确步骤跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现3(35分钟)1.分配小组教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第6学时任务实施逻辑分析4(10分钟)1.任务介绍教师介绍本节课需要完成的任务：制作评论标题与列表部分2.任务讲解教师讲解任务完成的步骤，必要的步骤进行代码演示。1.知晓任务听取教师讲解本次课要完成的任务，并认真查看详情页页面设计图。2.明确步骤跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现4(35分钟)1.分配小组教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第7学时任务实施逻辑分析5(10分钟)1.任务介绍教师介绍本节课需要完成的任务：制作发布评论部分2.任务讲解教师讲解任务完成的步骤，必要的步骤进行代码演示。1.知晓任务听取教师讲解本次课要完成的任务，并认真查看详情页页面设计图。2.明确步骤跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现5(35分钟)1.分配小组教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第8学时任务测试(35分钟)1.任务介绍教师介绍本次课要进行测试的测试任务。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学期课程类型专业核心课授课班级授课学时8学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现“启嘉校园”项目的。通过该任务的实现让学生掌握uni-app中的网络请求、生命周期管理等技术。教学目标素质目标1.通过模块封装和本地存储，培养学习者良好的编码习惯,提高积累开发技巧的意识。2.通过前后端分离开发模式，培养学习者团队合作精神和缜密思维习惯。3.通过登录注册功能的开发，培养学习者信息安全意识。4.通过开发框架的技术优势，培养学习者爱国情怀，推进文化自信自强。知识目标1.了解常用登录注册方式。2.了解微信小程序授权登录流程。3.了解请求封装方法及其优点。4.掌握使用uni.request方法进行接口调用。1845.掌握使用Vue实现后端数据绑定。6.掌握uni.login登录方法的使用。7.掌握本地缓存技术的使用。8.掌握uni-app条件编译的使用。9.掌握uni-app页面显示生命周期函数onShow的使用。10.掌握uni-appgetApp获取当前应用实例方法的使用。11.掌握uni-appglobalData全局变量机制的使用。能力目标1.能够使用uni-app调用后端接口。2.能够使用uni.login方法和后端登录接口实现微信小程序授权登录功能。3.能够使用本地缓存技术实现维护用户登录状态功能。4.能够使用uni-app条件编译兼容小程序和H5端在登录方式和网络请求地址上学情分析知识基础1.了解uni-app的基本概念、开发流程和组件库的使用。2.已熟悉微信小程序的基本架构、页面结构、API接口等。3.已掌握掌握基本的数据结构（如数组、对象、栈、队列等）和算法。技能基础1.已能够使用uni-app组件库搭建小程序视图页面。2.已能够处理常用组件事件响应。学习特点与诉求1.本环节任务设计知识点较为广泛，尤其是涉及网络访问的很多理论知识和实际操作技术，对学生理论理解程度及和操作技能的掌握熟练度有较高的要求。2.学生的自主学习能力有所欠缺，下发的在线学习资源点击率偏低。教学重点1.使用uni-app实现网络请求2.实现小程序的微信登录过程中的相关操作。教学难点1.生命周期管理。2.用户状态的获取和保存。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前预习任务，锻炼学生的自主学习能力，促进学生养成预习的学习习惯。本环节内容涉及的知识面非常宽泛，需要学生提前查阅资料，做好相关背景知识的预习。建议布置的任务清单如下：请查阅资料理解什么是“前后端分离”，为什么当前APP开发会普遍使用这种方式。（本节内容会涉及服务器端API的访问，学生需要明白为什么会这样做）理解网络传输本质，弄清什么事HTTP协议，它的具体工作过程是怎样的。（这部分内容涉及的理论知识非常多，课上并没有足够的时间去详细讲解，但又非常重要，所以需要学生提前做好资料查阅工作）什么是跨域。（这个是在网络请求过程中非常常见的问题，也是本任务中需要学习的技术之一，学生最好提前理解）什么事应用程序的生命周期，有什么用？2.知识图谱智能推荐拓展知识通过知识图谱向学生推送更多关于网络请求、生命周期等技术的背景知识、应用场景，及应用技巧，学习相关论文及实战项目中列举的拓展使用方法，以点带面，使学生知识储备更全面，理解更透彻，从而为本任务准确实施奠定雄厚的知识基础。教师活动学生活动1.发布任务。通过职教云发布预习任务。2.发布资料。通过职教云发布微课视频、PPT课件、虚拟仿真、知识图谱拓展阅读等学习资源。1.课前预习。通过微课和课件自主学习相关基础知识。2.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合制作个人资料页的实际工作过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生制作个人资料页的实操技能和工程素养。采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述向学生传递“多学习新技术，让软件生命力更持久”的思想，让学生养成“持续发展、终身学习”的习惯；通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过对删除功能关键代码的实现，培养学生“满足用户需求，提升软件价值”的职业素养；通过任务扩展，让学生了解图片存储的新技术、最优解决方案的选择，培养学生践行“技术为民，服务社会”的理念。教学环节教师活动学生活动第1学时情景导入与任务描述1(10分钟)1.任务引入。通过扫码演示本任务实现效果对本环节任务——启嘉校园的用户登录注册功能进行展示。2.发布问题。实现本人无需要怎样的步骤。3.介绍任务。本任务将实现启嘉校园的用户登录注册功能，常见的用户登录注册方式有账号密码登录、手机号或邮箱登录、第三方平台账号登录（如QQ、微信、微博等）、小程序授权登录等。由于启嘉校园是利用我国企业自主研发的跨平台应用框架uni-app开发的，具有一套代码多端发布的优势，因此为了兼容不同终端的登录，最终选择账号密码登录和微信授权登录两种方式，分别面向H5/安卓/iOS端和小程序端，本任务以微信小程序授权登录为例进行讲解。1.操作体验。扫码，体会启嘉校园用户登录过程，思考实现步骤。2.回答问题。通过自主操作体验，提出自己的解决方案。3.了解任务。认真听取教师介绍任务七的任务介绍，比较分析自己的解决方案。知识储备讲解1(35分钟)HTTP协议知识讲解。（1）简单介绍OSI模型，引入HTTP协议，重点阐明HTTP是应用层协议。（2）简单介绍HTTP协议特点。（3）简单介绍通信步骤。2.演示并分析Get、Post协议的请求过程。建议充分利用Chrome浏览器开发者工具中的Network功能。Get请求：可以访问网站，展示比较典型的Get请求，这里可以重点演示一下Get请求参数传递的方式以及在协议中的体现。Post请求。登录过程中主要的网络访问方式，可以通过邮箱登录来进行展示，建议教师比较Post与Get方式在参数传递过程中的差异。（3）分析并总结HTTP协议中最常用的两种请求方式，为稍后具体实现做铺垫。1.聆听知识讲解HTTP协议。认真听取教师讲解picker组件的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。2.观看演示picker组件使用方法同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听HTTP协议部分升华点拨笔记撰写。认真听取教师对该知识点的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第2学时情景导入与任务描述2(10分钟)1.引入提问。uni-app中怎样才能顺利实现一个后台接口的请求呢？2.引入uni-app的uni.request。（这里可以故意忽略白名单的问题，可以由学生主动提出，或者留在后边出现问题，以解决问题的形式进行讲解，学生印象会更深刻）3.介绍任务。1.回答提问。认真思考并回答教师提问。2.体验情境。通过手机进入智慧职教MOOC微信小程序，观察图标图片的清晰度。3.了解任务。认真听取教师介绍本节课的任务介绍，同时思考，手机页面如何确保图片显示清晰度。知识储备讲解2(35分钟)1.讲解uni。request方法，解释参数，编写代码演示运行过程。2.程序运行，发生跨域问题。提出问题，寻求解决方案。3.设置白名单4.详细解释为什么要设置白名单。跨域问题是怎样产生的。1.聆听知识讲解。认真听取教师讲解request方法各个参数的含义及使用方法。2.模仿教师操作实现请求过程。3.聆听request请求部分升华点拨笔记撰写，将核心知识及重要知识记录到课堂笔记当中。第3学时情景导入与任务描述3(10分钟)1.发布讨论。教师拿出手机运行某款游戏（最好是超级玛丽一类的小游戏，开启游戏背景音乐），游戏运行过程中由学生拨打教师电话，观察游戏变化，展开讨论？2.教师引入生命周期。3.介绍任务。解释本任务中生命周期具体使用1.回答讨论。认真思考并回答讨论。2.了解任务。认真听取教师介绍本节课的任务介绍，同时思考，如何解决提示框的使用过程中可能会受到原生端的限制和差异的问题。知识储备讲解3(35分钟)讲解生命周期基础知识及处理机制。编写代码，简单讲解并演示uni-app中各个生命周期函数的使用。3.uni-app常用提示框代码演示。现场演示常用提示框组件的每个属性使用方法。3.结合生命周期案例讲解getApp()和globalData全局变量机制4.uni-app常用提示框升华点拨。1.聆听知识讲解。2.观看演示，同步仿做。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听uni-app常用提示框升华点拨笔记撰写。认真听取教师对生命周期处理部分的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第4学时任务实施逻辑分析与实现讲解1(45分钟)1.任务介绍。教师介绍本节课需要完成的任务：微信授权登录（本环节内容包含通过微信授权登录以及使用本地缓存读取用户状态两个子任务）2.任务讲解。逻辑分析，解释首选流程接口分析：实现登录功能需要三个接口，分别为微信授权接口、后端登录接口和查询用户信息接口。3.教师讲解任务完成的步骤，必要的步骤进行代码演示。主要对照个人资料页的预期效果图进行页面的结构分析，分为用户基本资料区域和用户扩展资料区域。首先新建页面文件，然后明确设计图中的内容，下一步实现跳转到个人资料页。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看个人资料页设计图。2.明确步骤。跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。第5学时任务实施编码实现1(45分钟)1.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第6学时任务实施逻辑分析2(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：获取用户个人数据。2.任务讲解。教师讲解任务完成的步骤，必要的步骤进行代码演示。包含两个子任务通过网络请求获取用户个人数据判断登录状态点击头像登录1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看用户基本资料页设计图。2.明确步骤。跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现2(35分钟)1.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第7学时任务实施逻辑分析3(15分钟)1.任务介绍。教师介绍本节课需要完成的任务：通过本地缓存实现用户登录状态的维护。2.任务讲解。教师讲解任务完成的步骤，必要的步骤进行代码演示。1.知晓任务。听取教师讲解本次课要完成的任务，并认真查看用户扩展资料页设计图。2.明确步骤。跟随教师讲解的思路，对照设计图，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现3(30分钟)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.进行有效评价并记录过程成绩三、教学反思学习效果特色创新诊改措施教学整体设计任务名称任务8实现文章发布与文章分页功能开课学期第3学期课程类型专业核心课授课班级授课学时8学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现启嘉校园社区模块的文章发布和文章列表分页功能。通过该任务的实现让学生掌握uni-app上传组件的应用方法、页面间通信方法，以及移动端最为常见的“下拉刷新”和“上拉加载”分页方式。教学目标素质目标1.通过对uni.uploadFile文件上传方法的学习，培养学习者乐于探究、勇于创新的精神。2.通过完成“专业交流”版块的开发，增强学习者职业认同感。3.通过合理选择图片储存方式，培养学习者服务意识。知识目标1.了解图片、视频等文件托管储存的优点和实现原理。2.掌握uni.uploadFile文件上传方法的使用。3.掌握uni-app页面通讯方法的使用。能力目标1.能够使用uni.uploadFile方法实现图片上传功能。2.能够使用组件通讯方法在页面间传递数据。学情分析知识基础1.已了解ajax请求封装的方法及其优点。2.已掌握uni.request方法进行接口调用的方法。技能基础1.已具备基本的功能分析与理解能力。2.已能够完成ajax数据请求的调用。学习特点与诉求1.初步掌握了ajax请求封装的方法，希望得到更多的练习。2.在已有简单功能实现的基础上，希望尝试更复杂业务逻辑的实现。教学重点1.uni.uploadFile文件上传。2.下拉刷新和上拉加载分页功能的实现。3.uni-app页面间通讯教学难点1.uni-app页面间通讯。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前任务“了解移动端应用程序常见的分页方式”，锻炼学生自主检索、善于观察和总结规律的能力；通过布置课前任务“预习uni.uploadFile文件上传方法的使用”，锻炼学生自主学习能力，促进学生养成预习的学习习惯。2.以测验促进课堂提质增效通过布置异步数据请求的相关知识测验，教师可以更好地了解学生数据请求基础知识的学习需求和问题，总结提炼重难点知识，从而在课堂上进行更有针对性的讲解和讨论，提高教学质量和效果。教师活动学生活动1.发布任务。通过职教云或其他线上教学平台发布预习任务：（1）了解移动端应用程序常见的分页方式。（2）预习uni.uploadFile文件上传方法的使用。2.发布测验。通过职教云或其他线上教学平台发布异步数据请求的相关知识测验。3.发布资料。通过职教云发布微课视频、PPT课件、虚拟仿真等学习资源。4.批阅任务。分析知识测验结果，梳理重难点知识。1.课前预习。通过微课和课件自主学习uni.uploadFile方法的使用，并了解移动端常见分页方式。2.基础测验。通过职教云完成教师发布的数据请求相关知识的测验，并整理易错题，写好技术笔记。3.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合文章发布和文章列表页分析功能的实际开发过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生文章发布功能和分页功能的实操技能和职业素养，保证教学过程与工作一致，教学评价与企业评价一致。教学过程中采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述向学生传递“多学习新技术，让软件生命力更持久”的思想，让学生养成“持续发展、终身学习”的习惯；通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过对删除功能关键代码的实现，培养学生“满足用户需求，提升软件价值”的职业素养；通过任务扩展，让学生了解图片存储的新技术、最优解决方案的选择，培养学生践行“技术为民，服务社会”的理念。教学环节教师活动学生活动第1学时情景导入与任务描述1(10分钟)1.展示生活中常用的几款移动应用的列表页分页方式。美团外卖瀑布流分页美团外卖瀑布流分页腾讯新闻下拉加载分页腾讯新闻下拉加载分页铁路1铁路12306圆点分页2.引出知识储备中《8.4.1常见的分页方式》的内容。3.发布课堂讨论：总结常见移动端的分页方式都有哪些。1.观察并体验教师演示的几款常见应用的分页方式。2.小组讨论，再分析自己熟悉的移动应用的常见分页方式。3.总结本组讨论的结果，参与课堂讨论。知识储备讲解1(35分钟)1.讲解瀑布流分页和常规数字分页的实现原理。2.重点讲解下拉刷新和上拉加载的实现过程。（1）实现原理讲解。（2）通过流程图或者思维导图介绍实现逻辑，解决重难点问题。（3）关键代码演示。（4）指导学生仿作。（5）个别问题单独辅导，普遍问题集中讲解。1.听教师讲解知识。2.理解实现逻辑。3.根据教师的讲解，完成代码的编写。4.遇到问题，请教老师或同学。5.易错点整理笔记。第2学时情景导入与任务描述2(10分钟)1.提问：文件上传有哪些应用场景？更换微信头像更换微信头像发布抖音视频发布抖音视频2.引出知识储备中《8.4.2uni.uploadFile文件上传》的内容。3.引发思考：文件上传功能的实现，前端的开发是什么？文件提交给后端，后端又需要执行什么操作？1.观察并体验文件上传操作的执行逻辑。2.思考问题并小组讨论，分析文件上传操作时，前后端的执行逻辑。3.总结本组讨论的结果，参与课堂互动。知识储备讲解2(35分钟)1.讲解uni.uploadFile方法的语法格式及参数说明。2.案例式、分步骤、由浅入深讲解。（1）基本文件上传功能实现的逻辑讲解。（2）files参数、success回调、fail回调、complete回调函数的定义。（3）关键代码演示。（4）指导学生仿作。（5）个别问题单独辅导，普遍问题集中讲解。3.教学重点：回调函数的正确应用。4.教学难点：使用uploadTask对象实时显示上传进度。重难点解决办法：教师教师演示、学生反复练习。1.听教师讲解知识，理解实现逻辑。2.完成代码的编写。uni.chooseImage({success:(chooseImageRes)=>{consttempFilePaths=chooseImageRes.tempFilePaths;uni.uploadFile({url:'/upload',//仅为示例，非真实的接口地址filePath:tempFilePaths[0],name:'file',formData:{'user':'test'},success:(uploadFileRes)=>{console.log(uploadFileRes.data);}});}});4.调试、改bug，易错点整理笔记。第3学时情景导入与任务描述3(10分钟)1.通过设问引导教学内容：uni-app页面间通信的包括几种方式？2.带领学生一起回顾之前学过的页面之间的通信方式。3.引导学生思考文章发布后的实现逻辑：当文章发布成功后，点击“返回”按钮，回到列表页，列表页应该有何变化？有几种实现方式？（1）重新调用列表页接口（2）单独调用新发布文章的数据，并将其添加到列表页最上面。（3）从性能和用户易用性方面分析，那种解决方案更好？4.设问：如何在发布文章成功后，直接让列表页调用最新发布成功的文章信息？1.跟随教师思考并回答问题。2.认真听教师梳理授课思路。3.在了解最优解决方案后，思考编码逻辑，并认真听教师后面的讲解。知识储备讲解3(35分钟)1.讲解uni.$emit、uni.$on、uni.$once、uni.$off方法的功能。2.讲解利用自定义事件实现页面间通信的原理。（教学重难点）执行uni.$on执行uni.$on方法绑定事件执行uni.$emit方法触发事件页面A页面B页面A页面B解释：页面A通过原生事件处理程序（如，点击事件、失去焦点事件等）调用uni.$emit方法，从而触发目标页面（页面B）的事件监听（前提是页面B事先利用uni.$on注册了自定义事件的监听），在页面B触发自定义事件的处理函数中利用参数获取到页面A传递给它的数据。3.讲解并演示uni.$emit、uni.$on、uni.$once、uni.$off四个方法的使用，重点讲解前两个。1.认真听教师讲解，思考并回答问题。2.练习代码。代码段一：uni.$emit('update',{msg:'页面更新'})代码段二：uni.$on('update',function(data){ console.log('监听到事件来自update，携带参数msg为：'+data.msg);})3.调试、改bug，易错点整理笔记。4.帮助本组内其他同学解决问题。第4学时任务实施逻辑分析1(10分钟)1.任务及约束分析：教师带领学生一起进行子任务的需求功能分析，理解文章发布中涉及到的每一个字段、字段的功能及其字数和字符类型的限制。2.思政融入：通过对功能的分析引导学生“维护小程序平台的安全和健康，营造合法合规、良好道德规范的网络环境”社会责任感。3.组织学生以小组为单位阅读教材中p223-224页的业务实现逻辑分析，并理解其实现逻辑4.抽查1~2个小组对实现逻辑的理解。5.对理解错误或者不完善的地方教师进行补充说。1.以小组为单位分析此部分的实现逻辑分析。2.总结归纳：（1）文本（标题和正文）：重点，使用v-model实现数据双向绑定。（2）图片：上传图片个数验收，超出进行提示，成功后回调函数逻辑。（3）话题：“专业交流”和“表白墙”切换和传递参数的差别。3.回答问题，查漏补缺。任务实施编码实现1(35分钟)1.教师演示获取话题列表接口的封装过程。2.指导学生跟随练习上传图片接口的封装操作。3.巡回指导，并纠错。4.重点问题集中讲解，个别问题单独辅导。1.学生跟随教师练习获取话题接口的练习。importrequestfrom"@/api/index.js"//获取话题列表exportfunctiongetTopicListApi(){returnrequest({url:`/article-classify/topic-list`,method:'get'})}2.有问题请教老师或同组同学。3.调试代码，修改bug，整理笔记。4.帮助其他同学修改代码。第5学时任务实施编码实现2(30分钟)1.在职教云发布任务：按照获取话题列表接口的封装原理和封装步骤，封装发布文章接口的方法。2.巡回指导，并纠错。3.重点问题集中讲解，个别问题单独辅导。4.检查职教云提交的作业。5.点评作业。1.反复锤炼。2.认真完成教师发布的任务。//发布文章exportfunctionpostArticlesApi(familyId,articleTitle,articleContent,imgpath){returnrequest({url:'/IntactArticle',method:'post',data:{"familyId":familyId,"title":articleTitle,"content":articleContent,"imageLink":imgpath}})}3.提交职教云作业。4.认真听取教师对作业的点评。5.整理笔记，记录易错点。任务实施逻辑分析2(15分钟)1.讲解图片上传组件的实现逻辑。（1）定义data中的页面变量，保存上传数据和页面状态数据。（2）调用uni.chooseImage选择要上传的图片。（3）调用方法验证选择的图片数量和图片大小.（4）验证成功后，调用本地的图片上传方法。（5）调用uni.uploadFile并保存上传任务对象uploadTask。（6）为uploadTask定义onProgressUpdate事件的处理程序，随着上传的进度来更新页面显示的上传进度（7）定义上传成功和上传失败的回调函数。2.使用流程图为学生梳理上述的实现逻辑。选择图片——>验证图片——>上传图片——>进度监听——>成功或失败的处理。3.让学生理解上述处理，逻辑重点问题集中讲解，个别问题单独辅导。4.发布任务：学生以小组为单位实现图片的验证规则。1.理解实现逻辑。2.分组讨论实现过程。3.以小组为单位编写图片的验证逻辑。4.屏幕共享，讲解本小组编码逻辑的实现过程。5.组间互测，检查代码实现的逻辑是否正确。6.倾听其他小组的编码实现逻辑。7.整理笔记，记录易错点。第6学时任务实施编码实现3(30分钟)1.讲解并演示图片上传组件的实现过程。2.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。3.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。任务实施重点问题讲解(15分钟)1.重点问题回顾与讲解（1）Promise实例的封装（2）在Promise.then()方法中实现异步事件处理教学重难点1.听讲和认真理解。2.做技术笔记。第7学时任务实施逻辑分析3(10分钟)1.分析任务。要求学生以小组为单位阅读教材中《8.5.2获取文章列表》部分内容，完成以下三个部分的分析：（1）列表刷新功能分析。（2）实现逻辑分析。（3）后端接口分析。2.任意抽选3个不同的小组，上台展示本组分析成果。3.点评各组分析结果，使学生对这三部分的理解达到共识。4.教学重难点根据功能和接口参数，构建接口调用逻辑，实现真实数据展示使用图示法解决教学重难点！1.阅读教材资料。2.以小组为单位分析问题。3.上台表达本小组的成果。4.对本部分内容达成共识。5.设计图分析进行接口调用逻辑构建。任务实施编码实现4(25分钟)1.讲解并演示获取文章列表页面接口调用的实现过程。2.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。3.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。任务实施编码实现5(10分钟)1.讲解并演示真实数据页面绑定的实现过程。2.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。3.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。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.进行有效评价并记录过程成绩三、教学反思学习效果特色创新诊改措施教学整体设计任务名称任务9实现文章详情页相关功能开课学期第3学期课程类型专业核心课授课班级授课学时8学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现启嘉校园社区模块文章详情页中的相关功能。用户通过单击社区首页文章列表中的文章卡片可以进入文章详情页，文章详情页需要实现的功能包括展示文章的标题、正文、作者、发布日期；展示文章获得的点赞、转发和评论数量以及评论列表；对文章进行评论、点赞和转发，也可以对其他用户发布的评论进行回复和点赞；关注或取关作者。教学目标素质目标1.通过使用条件编译解决多端兼容，培养学习者科学、系统解决问题的意识。2.通过分享、点赞功能的实现，培养学习者尊重他人劳动成果、传播正能量的意识。知识目标1.了解H5端实现转发功能的方法。2.掌握uni.showLoading和uni.hideLoading显示和隐藏加载状态方法使用。3.掌握利用分割和拼接的方式实现字符串与数组之间的转换。能力目标1.能够使用条件编译兼容微信小程序端和H5端转发功能实现的差异。2.能够使用uni.showLoading和uni.hideLoading方法实现显示和隐藏接口数据请求中的加载状态。3.能够将图片地址字符串按指定字符分割成图片数组。学情分析知识基础1.已了解ajax请求封装的方法及其优点。2.已掌握uni.request方法进行接口调用的方法。技能基础1.已具备基本的功能分析与理解能力。2.已能够完成ajax数据请求的调用。学习特点与诉求1.初步掌握了ajax请求封装的方法，希望得到更多的练习。2.在已有简单功能实现的基础上，希望尝试更复杂业务逻辑的实现。教学重点1.uni.showLoading和uni.hideLoading显示和隐藏加载状态方法使用。2.微信小程序端和H5端转发功能实现。3.完成文章点赞、转发与关注作者功能、文章评论功能。教学难点1.微信小程序端和H5端转发功能实现。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前任务“商品评论区模块常见的功能有哪些”，锻炼学生自主检索、善于观察和总结规律的能力；通过布置课前任务“预习任务9实现文章详情页相关功能”，锻炼学生自主学习能力，促进学生养成预习的学习习惯。2.以测验促进课堂提质增效通过布置异步数据请求的相关知识测验，教师可以更好地了解学生数据请求基础知识的学习需求和问题，总结提炼重难点知识，从而在课堂上进行更有针对性的讲解和讨论，提高教学质量和效果。教师活动学生活动1.发布任务。通过职教云或其他线上教学平台发布预习任务：（1）了解评论区互动形式的分类、多向评论区展示结构。（2）预习任务9实现文章详情页相关功能。2.发布测验。通过职教云或其他线上教学平台发布异步数据请求的相关知识测验。3.发布资料。通过职教云发布微课视频、PPT课件、虚拟仿真等学习资源。4.批阅任务。分析知识测验结果，梳理重难点知识。1.课前预习。通过微课和课件自主学习实现文章详情页相关功能的相关知识，并了解评论区互动形式的分类、多向评论区展示结构。2.基础测验。通过职教云完成教师发布的数据请求相关知识的测验，并整理易错题，写好技术笔记。3.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合启嘉校园社区模块文章详情页中的相关功能的实际开发过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生文章详情页、点赞、转发与关注作者功能、文章评论功能的实操技能和职业素养，保证教学过程与工作一致，教学评价与企业评价一致。教学过程中采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述向学生传递“学会分享、关爱和尊重他人的良好品质，传播正能量，树立正确的人生观和价值观”的思想，让学生形成“尊重他人劳动成果、传播正能量”的意识；通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过对删除功能关键代码的实现，培养学生“满足用户需求，提升软件价值”的职业素养；通过任务扩展，让学生了解图片存储的新技术、最优解决方案的选择，培养学生践行“技术为民，服务社会”的理念。教学环节教师活动学生活动第1学时情景导入与任务描述1(10分钟)1.展示生活中常用的几款移动应用的文章详情页相关功能。学习强国文章详情页学习强国文章详情页京东商城商品详情页京东商城商品详情页2.引出知识储备中《9.4.1评论区互动形式》的内容。3.发布课堂讨论：总结常见移动端的文章详情页都有哪些相关功能。1.观察并体验教师演示的几款常见应用的文章详情页相关功能。2.小组讨论，再分析自己熟悉的移动应用的常见分页方式。3.总结本组讨论的结果，参与课堂讨论。知识储备讲解1(35分钟)1.讲解评论区互动形式、多向评论区展示结构。2.重点讲解多向评论的互动形式、主题式展示结构的实现过程。（1）实现原理讲解。（2）通过流程图或者思维导图介绍实现逻辑，解决重难点问题。（3）关键代码演示。（4）指导学生仿作。（5）个别问题单独辅导，普遍问题集中讲解。1.听教师讲解知识。2.理解实现逻辑。3.根据教师的讲解，完成代码的编写。4.遇到问题，请教老师或同学。5.易错点整理笔记。第2学时情景导入与任务描述2(10分钟)1.提问：用户进入文章详情页有几种情况，需要获取文章实体类种的哪些字段？2.引出任务实施中《9.5.1获取文章详情》的内容。3.引发思考：文章详情页经常会包含哪些子功能？1.观察并体验文章详情页的执行逻辑。2.思考问题并小组讨论，分析文章详情页操作时，前后端的执行逻辑。3.总结本组讨论的结果，参与课堂互动。任务实施编码实现2(35分钟)1.讲解文章详情页逻辑分析。2.分析文章详情页接口。3.编写调用获取文章详情接口的方法。2.案例式、分步骤、由浅入深讲解。（1）文章详情页功能实现的逻辑讲解。（2）利用分割和拼接的方式实现字符串与数组之间的转换。（3）关键代码演示。（4）指导学生仿作。（5）个别问题单独辅导，普遍问题集中讲解。3.教学重点：回调函数的正确应用。4.教学难点：能将图片地址字符串按指定字符分割成图片数组。重难点解决办法：教师教师演示、学生反复练习。1.听教师讲解知识，理解实现逻辑。2.完成代码的编写。在/api/community目录下新建article-details.js文件，编写调用获取文章详情接口的方法，关键代码如下：在article-details.vue中，调用getArticleContentApi方法获取文章详情数据，关键代码如下：3.调试、改bug，易错点整理笔记。4.帮助本组内其他同学解决问题。第3学时情景导入与任务描述3(10分钟)1.通过小组讨论导入教学内容：（1）文章点赞/取消点赞功能如何实现？2.任务及约束分析：教师带领学生一起进行子任务的需求功能分析，理解文章点赞/取消点赞功能中涉及到的每一个字段、字段的功能及其字数和字符类型的限制。引出任务实施中《9.5.2实现文章点赞、转发与关注作者功能》的内容。3.思政融入：通过对功能的分析引导学生“学会分享、关爱和尊重他人的良好品质，传播正能量，树立正确的人生观和价值观”。4.引导思考：如何实现文章点赞功能的逻辑分析？1.跟随教师思考并回答问题。2.认真听教师梳理授课思路。3.在了解实现过程，思考编码逻辑，并认真听教师后面的讲解。任务实施编码实现3(35分钟)1.讲解文章点赞/取消点赞功能的实现逻辑。2.讲解文章点赞/取消点赞接口详情。3.讲解并演示文章点赞/取消点赞功能的代码实现。4.指导学生跟随练习实现文章点赞/取消点赞功能接口的封装操作。5.巡回指导，并纠错。6重点问题集中讲解，个别问题单独辅导。1.认真听教师讲解，思考并回答问题。2.仿写代码。3.调试、改bug，易错点整理笔记。4.帮助本组内其他同学解决问题。第4学时情景导入与任务描述4(10分钟)1.小组讨论：（1）转发文章功能如何实现？（2）关注/取关用户功能如何实现？文章点赞/取消点赞功能如何实现？2.组织学生以小组为单位阅读教材中转发文章功能和关注/取关用户功能的业务实现逻辑分析，并理解其实现逻辑3.抽查1~2个小组对实现逻辑的理解。4.对理解错误或者不完善的地方教师进行补充说。1.以小组为单位分析此部分的实现逻辑分析。2.总结归纳代码实现逻辑3.回答问题，查漏补缺。任务实施编码实现4(35分钟)1.教师演示转发文章功能接口的封装过程。2.指导学生跟随练习实现转发文章功能接口的封装操作。3.教师演示关注/取关用户功能接口的封装过程。4.指导学生跟随练习实现关注/取关用户功能接口的封装操作。5.巡回指导，并纠错。6重点问题集中讲解，个别问题单独辅导。1.学生跟随教师练习，完成转发文章功能接口、关注/取关用户功能接口的练习。2.有问题请教老师或同组同学。3.调试代码，修改bug，整理笔记。4.帮助其他同学修改代码。第5学时情景导入与任务描述5(10分钟)1.提问：文章评论功能有几种评论形式？2.引出任务实施中《9.5.3实现文章评论功能》的内容。3.引发思考：文章评论功能经常会包含哪些子功能？1.观察并体验文章评论功能的执行逻辑。2.思考问题并小组讨论，分析文章评论功能操作时，前后端的执行逻辑。3.总结本组讨论的结果，参与课堂互动。任务实施逻辑分析5(35分钟)1.教师演示查询文章评论功能的封装过程。2.指导学生跟随练习实现查询文章评论功能的封装操作。3.巡回指导，并纠错。4.重点问题集中讲解，个别问题单独辅导。5.发布任务：学生以小组为单位实现查询文章评论功能。1.理解实现逻辑。2.分组讨论实现过程。3.以小组为单位编写文章评论功能的验证逻辑。4.屏幕共享，讲解本小组编码逻辑的实现过程。5.组间互测，检查代码实现的逻辑是否正确。6.倾听其他小组的编码实现逻辑。7.整理笔记，记录易错点。第6学时任务实施编码实现6(30分钟)1.教师演示发布文章评论功能的封装过程。2.指导学生跟随练习实现发布文章评论功能的封装操作。3.讲解并演示删除评论的实现过程。4.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。5.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。任务实施重点问题讲解(15分钟)1.重点问题回顾与讲解（教学重难点）（1）props方法的使用（2）评论组件的使用1.听讲和认真理解。2.做技术笔记。第7学时任务实施逻辑分析7(10分钟)1.分析任务。要求学生以小组为