Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架） 教案 教學(xué)設(shè)計(jì) 高秀艷 任務(wù)6-11 制作文章詳情頁-項(xiàng)目部署與發(fā)布

教學(xué)整體設(shè)計(jì)任務(wù)名稱任務(wù)6制作文章詳情頁開課學(xué)期第3學(xué)期課程類型專業(yè)核心課授課班級(jí)授課學(xué)時(shí)8學(xué)時(shí)授課地點(diǎn)研討型智慧實(shí)訓(xùn)室授課形式理實(shí)一體教學(xué)內(nèi)容本任務(wù)將實(shí)現(xiàn)“啟嘉校園”項(xiàng)目的個(gè)人資料頁面和個(gè)人資料擴(kuò)展頁面。通過該任務(wù)的實(shí)現(xiàn)讓學(xué)生掌握uni-app中的view視圖容器組件、picker組件、input組件、正則表達(dá)式、消息提示方法、頁面跳轉(zhuǎn)方法。通過單擊社區(qū)首頁“文章列表”中的文章卡片可以進(jìn)入文章詳情頁，文章詳情頁包含文章的發(fā)布者信息、發(fā)布時(shí)間、標(biāo)題、正文等內(nèi)容，用戶可對(duì)文章內(nèi)容進(jìn)行瀏覽、關(guān)注、轉(zhuǎn)發(fā)、評(píng)論和點(diǎn)贊操作，也可在評(píng)論區(qū)查看、回復(fù)和點(diǎn)贊其他用戶的評(píng)論，這是文章管理系統(tǒng)包含的常規(guī)功能，也是移動(dòng)端系統(tǒng)最常見的交互手段，能夠讓用戶有更好的應(yīng)用體驗(yàn)。教學(xué)目標(biāo)素質(zhì)目標(biāo)1.通過對(duì)組件的封裝與復(fù)用，培養(yǎng)學(xué)習(xí)者遵守行業(yè)編碼規(guī)范的意識(shí)。2.通過引導(dǎo)學(xué)習(xí)者自學(xué)官網(wǎng)開發(fā)手冊(cè)，培養(yǎng)其熱愛學(xué)習(xí)、主動(dòng)學(xué)習(xí)的精神。3.通過解決軟件兼容性問題，培養(yǎng)學(xué)習(xí)者追求軟件高質(zhì)量的職業(yè)意識(shí)。4.通過網(wǎng)絡(luò)系統(tǒng)的開發(fā)，培養(yǎng)學(xué)習(xí)者的網(wǎng)絡(luò)案例意識(shí)，通過健康用網(wǎng)傳播正能量。知識(shí)目標(biāo)1.掌握組件的復(fù)用。2.掌握onShareAppMessage小程序頁面轉(zhuǎn)發(fā)方法的使用。3.掌握Vue$nextTick回調(diào)延遲方法的使用。4.掌握Vuefilters過濾器方法的使用。5.掌握input組件always-embed和adjust-position屬性的用法。能力目標(biāo)1.能夠使用組件提升代碼復(fù)用率。2.能夠使用onShareAppMessage方法實(shí)現(xiàn)轉(zhuǎn)發(fā)頁面的自定義信息設(shè)置。3.能夠使用filters過濾器實(shí)現(xiàn)日期和時(shí)間格式化。4.能夠解決iOS系統(tǒng)中鍵盤調(diào)起后的輸入框被覆蓋的問題。學(xué)情分析知識(shí)基礎(chǔ)1.已掌握uni.chooseImage選擇圖片方法的使用。2.已掌握uni-apptextarea多行輸入框組件的使用。技能基礎(chǔ)1.能夠使用uni.chooseImage方法實(shí)現(xiàn)本地相冊(cè)獲取圖片或拍照。2.能夠使用textarea組件實(shí)現(xiàn)顯示已輸入字?jǐn)?shù)和字?jǐn)?shù)上限的多行輸入框。3.能夠使用uni.navigateTo方法在頁面跳轉(zhuǎn)時(shí)傳遞話題參數(shù)。3.能夠使用正則表達(dá)式完成文章信息驗(yàn)證。4.能夠通過操作數(shù)組對(duì)象實(shí)現(xiàn)圖片刪除功能。學(xué)習(xí)特點(diǎn)與訴求1.【完成前導(dǎo)項(xiàng)目后，學(xué)生對(duì)項(xiàng)目是否產(chǎn)生了興趣？】2.【學(xué)生自主學(xué)習(xí)能力是否提高？】教學(xué)重點(diǎn)掌握組件的復(fù)用與拓展教學(xué)難點(diǎn)運(yùn)用組件的復(fù)用與拓展實(shí)現(xiàn)文章詳情頁頁面教學(xué)策略教學(xué)方式方法1.任務(wù)驅(qū)動(dòng)2.組隊(duì)討論3.啟發(fā)式4.理實(shí)一體化教學(xué)團(tuán)隊(duì)1.企業(yè)工程師與校內(nèi)專任教師共同開發(fā)課程項(xiàng)目、構(gòu)造任務(wù)場景、設(shè)計(jì)教學(xué)實(shí)施過程、設(shè)計(jì)融入思政的課程評(píng)價(jià)體系并開展多元評(píng)價(jià)。2.校內(nèi)教師重點(diǎn)負(fù)責(zé)課堂過程中的項(xiàng)目講解與項(xiàng)目實(shí)施。3.企業(yè)工程師在個(gè)別環(huán)節(jié)（如項(xiàng)目驗(yàn)收等）參與雙師授課。4.企業(yè)工程師負(fù)責(zé)對(duì)項(xiàng)目完成情況給予工程化評(píng)價(jià)。5.學(xué)生助教負(fù)責(zé)協(xié)助教師開展課前及課后的拓展任務(wù)等。教學(xué)資源使用本書配套文檔、素材等資源教學(xué)評(píng)價(jià)

二、教學(xué)實(shí)施過程教學(xué)過程（一）課前1.以預(yù)習(xí)培養(yǎng)學(xué)生自主學(xué)習(xí)能力通過布置課前預(yù)習(xí)組件的復(fù)用與拓展任務(wù)，鍛煉學(xué)生的自主學(xué)習(xí)能力，促進(jìn)學(xué)生養(yǎng)成預(yù)習(xí)的學(xué)習(xí)習(xí)慣。2.以測驗(yàn)促進(jìn)課堂提質(zhì)增效通過布置預(yù)期內(nèi)容中組件的復(fù)用與拓展知識(shí)測驗(yàn)，教師可以更好地了解學(xué)生對(duì)本次任務(wù)基礎(chǔ)知識(shí)的學(xué)習(xí)需求和問題，總結(jié)提煉重難點(diǎn)知識(shí)，從而在課堂上進(jìn)行更有針對(duì)性的講解和討論，提高教學(xué)質(zhì)量和效果。知識(shí)圖譜智能推薦拓展知識(shí)通過知識(shí)圖譜向?qū)W生推送更多關(guān)于組件復(fù)用與拓展的應(yīng)用場景，及應(yīng)用技巧，學(xué)習(xí)相關(guān)論文及實(shí)戰(zhàn)項(xiàng)目中列舉的拓展使用方法，以點(diǎn)帶面，使學(xué)生知識(shí)儲(chǔ)備更全面，理解更透徹，從而為本任務(wù)準(zhǔn)確實(shí)施奠定雄厚的知識(shí)基礎(chǔ)。教師活動(dòng)學(xué)生活動(dòng)1.發(fā)布任務(wù)通過職教云發(fā)布組件復(fù)用與拓展基礎(chǔ)知識(shí)預(yù)習(xí)任務(wù)。2.發(fā)布測驗(yàn)通過職教云發(fā)布組件復(fù)用與拓展知識(shí)測驗(yàn)。3.發(fā)布資料通過職教云發(fā)布微課視頻、PPT課件、虛擬仿真、知識(shí)圖譜拓展閱讀等學(xué)習(xí)資源。4.批閱任務(wù)分析知識(shí)測驗(yàn)結(jié)果，梳理重難點(diǎn)知識(shí)。1.課前預(yù)習(xí)通過微課和課件自主學(xué)習(xí)組件復(fù)用與拓展相關(guān)基礎(chǔ)知識(shí)。2.基礎(chǔ)測驗(yàn)通過職教云完成組件復(fù)用與拓展知識(shí)測驗(yàn)。3.資料學(xué)習(xí)學(xué)習(xí)教師推動(dòng)的視頻、PPT、虛擬仿真、知識(shí)圖譜拓展閱讀等，有問題同學(xué)可通過平臺(tái)在留言板留言進(jìn)行提問。（二）課中1.課程教學(xué)設(shè)計(jì)遵循學(xué)生的技能成長規(guī)律和學(xué)習(xí)規(guī)律，緊密結(jié)合制作“文章詳情頁”的實(shí)際工作過程，進(jìn)行系統(tǒng)性的教學(xué)設(shè)計(jì)，構(gòu)造“情景項(xiàng)目導(dǎo)入、漸進(jìn)任務(wù)分解、組隊(duì)任務(wù)執(zhí)行、多元技能測評(píng)、凝練項(xiàng)目總結(jié)、激發(fā)構(gòu)想延展”六步教學(xué)實(shí)施過程，確保學(xué)生能夠體驗(yàn)真實(shí)的工作場景，通過循序漸進(jìn)的任務(wù)開發(fā)，鍛煉學(xué)生制作“文章詳情頁”的實(shí)操技能和工程素養(yǎng)。采用雙師教學(xué)、頭腦風(fēng)暴、組隊(duì)開發(fā)、學(xué)生助教輔導(dǎo)等特色環(huán)節(jié)組織教學(xué)，充分發(fā)揮企業(yè)工程師、教師和學(xué)生的優(yōu)勢(shì)，結(jié)合利用現(xiàn)代信息技術(shù)平臺(tái)“職教云”輔助教學(xué)，激發(fā)教師授課激情、點(diǎn)燃學(xué)生學(xué)習(xí)熱情、提高課堂授課效果。2.思政教學(xué)設(shè)計(jì)本課程的思政教學(xué)設(shè)計(jì)滲透于每個(gè)任務(wù)的描述、素養(yǎng)目標(biāo)、關(guān)鍵代碼的名師解惑、課上教學(xué)設(shè)計(jì)、課下任務(wù)拓展等多個(gè)環(huán)節(jié)，從而循序漸進(jìn)、滲透式、全方位地落實(shí)思政教育“進(jìn)教材、進(jìn)課堂、進(jìn)頭腦”。借助本章的任務(wù)描述向?qū)W生傳遞“多學(xué)習(xí)新技術(shù)，讓軟件生命力更持久”的思想，讓學(xué)生養(yǎng)成“持續(xù)發(fā)展、終身學(xué)習(xí)”的習(xí)慣；通過課堂中組織組隊(duì)任務(wù)實(shí)施，培養(yǎng)學(xué)生“團(tuán)隊(duì)協(xié)作、互幫互助”的精神；通過對(duì)刪除功能關(guān)鍵代碼的實(shí)現(xiàn)，培養(yǎng)學(xué)生“滿足用戶需求，提升軟件價(jià)值”的職業(yè)素養(yǎng)；通過任務(wù)擴(kuò)展，讓學(xué)生了解新技術(shù)、最優(yōu)解決方案的選擇，培養(yǎng)學(xué)生踐行“技術(shù)為民，服務(wù)社會(huì)”的理念。教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)第1學(xué)時(shí)情景導(dǎo)入與任務(wù)描述1(10分鐘)1.情景導(dǎo)入布置啟嘉網(wǎng)評(píng)論任務(wù)，引出本次學(xué)習(xí)內(nèi)容。2.發(fā)布問題詳情頁面主要功能都包括哪些？3.介紹任務(wù)本任務(wù)將制作“啟嘉校園”項(xiàng)目的文章詳情頁面，該頁面包含文章的發(fā)布者信息、發(fā)布時(shí)間、標(biāo)題、正文等內(nèi)容，用戶可對(duì)文章內(nèi)容進(jìn)行瀏覽、關(guān)注、轉(zhuǎn)發(fā)、評(píng)論和點(diǎn)贊操作，也可在評(píng)論區(qū)查看、回復(fù)和點(diǎn)贊其他用戶的評(píng)論。1.操作體驗(yàn)登錄啟嘉網(wǎng)，完成評(píng)論任務(wù)。2.回答問題通過自主操作體驗(yàn)，回答詳情頁面主要功能都包括哪些。3.了解任務(wù)認(rèn)真聽取教師介紹項(xiàng)目6的任務(wù)介紹，同時(shí)思考，個(gè)人信息頁面哪些信息涉及用戶隱私，需要更加注重用戶信息安全。知識(shí)儲(chǔ)備講解1(35分鐘)1.組件復(fù)用（1）什么是組件復(fù)用。（2）通過流程圖或者思維導(dǎo)圖介紹實(shí)現(xiàn)邏輯，解決重難點(diǎn)問題。2.組件復(fù)用代碼演示組件復(fù)用可通過多種方式實(shí)現(xiàn)，例如：利用props傳遞數(shù)據(jù)，使子組件能根據(jù)父組件傳遞的數(shù)據(jù)進(jìn)行定制化渲染；使用插槽，讓父組件能插入自定義內(nèi)容，使子組件更靈活；使用高階組件，將組件邏輯封裝為函數(shù)，或使用mixins，將共享邏輯封裝在一起，減少重復(fù)編寫。進(jìn)行現(xiàn)場演示。3.組件拓展與演示組件拓展是指在已有組件的基礎(chǔ)上進(jìn)行修改和擴(kuò)展，從而創(chuàng)建一個(gè)新組件。通常情況下，組件的拓展可以通過繼承或者組合等方式來實(shí)現(xiàn)。在繼承方式中，可以通過繼承已有組件的方式來創(chuàng)建一個(gè)新的組件，并在新組件中添加新的屬性和方法。1.聆聽知識(shí)講解組件復(fù)用認(rèn)真聽取教師講解組件復(fù)用的語法格式，并思考如何應(yīng)用到實(shí)際項(xiàng)目當(dāng)中。2.觀看演示組件復(fù)用的使用方法同步仿作認(rèn)真觀看教師演示，并進(jìn)行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進(jìn)行提問。3.聆聽組件拓展的使用方法同步仿作認(rèn)真聽取教師對(duì)組件拓展部分的點(diǎn)撥講解，并將核心知識(shí)及重要知識(shí)記錄到課堂筆記當(dāng)中。認(rèn)真觀看教師演示，并仿作。第2學(xué)時(shí)情景導(dǎo)入與任務(wù)描述2(10分鐘)引入提問常見跨端問題有哪些？創(chuàng)設(shè)情境以智慧職教icve微信小程序在不同手機(jī)中下拉顯示為例，引出今天所學(xué)知識(shí)。3.介紹任務(wù)1.回答提問認(rèn)真思考并回答教師提問。2.體驗(yàn)情境通過手機(jī)進(jìn)入智慧職教MOOC微信小程序，觀察不同手機(jī)下拉效果。3.了解任務(wù)認(rèn)真聽取教師介紹本節(jié)課的任務(wù)介紹。知識(shí)儲(chǔ)備講解2(35分鐘)1.uni-app跨端兼容?樣式兼容性問題?組件兼容性問題?API兼容性問題?生命周期兼容性問題?性能兼容性問題2.DOM更新回調(diào)在Vue更新DOM后，可能會(huì)需要訪問更新后的DOM或者執(zhí)行一些需要在DOM更新后才能執(zhí)行的操作，這時(shí)可以使用$nextTick方法來保證在DOM更新完成后再執(zhí)行這些操作。1.聆聽知識(shí)講解uni-app跨端兼容認(rèn)真聽取教師講解uni-app跨端兼容，并思考如何應(yīng)用到實(shí)際項(xiàng)目當(dāng)中。2.觀看演示uni-app跨端兼容同步仿做。認(rèn)真觀看教師演示，并進(jìn)行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進(jìn)行提問。3.聆聽DOM更新回調(diào)認(rèn)真聽取教師對(duì)DOM更新回調(diào)部分的點(diǎn)撥講解，并將核心知識(shí)及重要知識(shí)記錄到課堂筆記當(dāng)中。第3學(xué)時(shí)任務(wù)實(shí)施邏輯分析1(10分鐘)1.任務(wù)介紹教師介紹本節(jié)課需要完成的任務(wù)：制作文章相關(guān)信息部分2.任務(wù)講解教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。主要對(duì)照詳情頁的預(yù)期效果圖進(jìn)行頁面的結(jié)構(gòu)分析，分為文章詳情區(qū)域和文章評(píng)論區(qū)域。首先新建頁面文件，然后明確設(shè)計(jì)圖中的內(nèi)容。1.知曉任務(wù)聽取教師講解本次課要完成的任務(wù)，并認(rèn)真查看詳情頁頁面設(shè)計(jì)圖。2.明確步驟跟隨教師講解的思路，對(duì)照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)1(35分鐘)1.分配小組教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第4學(xué)時(shí)任務(wù)實(shí)施邏輯分析2(10分鐘)1.任務(wù)介紹教師介紹本節(jié)課需要完成的任務(wù)：制作文章主體信息部分2.任務(wù)講解教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。1.知曉任務(wù)聽取教師講解本次課要完成的任務(wù)，并認(rèn)真查看詳情頁頁面設(shè)計(jì)圖。2.明確步驟跟隨教師講解的思路，對(duì)照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)2(35分鐘)1.分配小組教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第5學(xué)時(shí)任務(wù)實(shí)施邏輯分析3(10分鐘)1.任務(wù)介紹教師介紹本節(jié)課需要完成的任務(wù)：制作文章互動(dòng)部分2.任務(wù)講解教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。1.知曉任務(wù)聽取教師講解本次課要完成的任務(wù)，并認(rèn)真查看詳情頁頁面設(shè)計(jì)圖。2.明確步驟跟隨教師講解的思路，對(duì)照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)3(35分鐘)1.分配小組教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第6學(xué)時(shí)任務(wù)實(shí)施邏輯分析4(10分鐘)1.任務(wù)介紹教師介紹本節(jié)課需要完成的任務(wù)：制作評(píng)論標(biāo)題與列表部分2.任務(wù)講解教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。1.知曉任務(wù)聽取教師講解本次課要完成的任務(wù)，并認(rèn)真查看詳情頁頁面設(shè)計(jì)圖。2.明確步驟跟隨教師講解的思路，對(duì)照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)4(35分鐘)1.分配小組教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第7學(xué)時(shí)任務(wù)實(shí)施邏輯分析5(10分鐘)1.任務(wù)介紹教師介紹本節(jié)課需要完成的任務(wù)：制作發(fā)布評(píng)論部分2.任務(wù)講解教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。1.知曉任務(wù)聽取教師講解本次課要完成的任務(wù)，并認(rèn)真查看詳情頁頁面設(shè)計(jì)圖。2.明確步驟跟隨教師講解的思路，對(duì)照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)5(35分鐘)1.分配小組教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第8學(xué)時(shí)任務(wù)測試(35分鐘)1.任務(wù)介紹教師介紹本次課要進(jìn)行測試的測試任務(wù)。2.知識(shí)講解教師介紹測試的概念，并對(duì)照企業(yè)測試流程講解，測試要按照需求分析、計(jì)劃、用例、執(zhí)行、總結(jié)，五步流程進(jìn)行測試。3.情景故事教師播放測試相關(guān)情景動(dòng)畫，指明測試工作的重要性，提高學(xué)生對(duì)測試工作的責(zé)任心。4.需求分析講解教師講解需求分析的方法，并以部分需求說明書為例，演示如何正確進(jìn)行需求分析，提取測試功能點(diǎn)。5.分配小組根據(jù)任務(wù)實(shí)施同學(xué)完成情況及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。6.制定計(jì)劃講解教師引導(dǎo)學(xué)生小組內(nèi)，要交叉進(jìn)行測試，如A同學(xué)測試B同學(xué)的項(xiàng)目，測試之前先制定自己的測試計(jì)劃并形成文字。7.編寫用例講解教師講解編寫測試用例的技巧，并以部分功能為例進(jìn)行演示。8.執(zhí)行用例講解教師講解執(zhí)行用例注意要點(diǎn)。9.總結(jié)報(bào)告講解教師講解編寫總結(jié)報(bào)告要點(diǎn)。10.組間巡回指導(dǎo)教師在組間進(jìn)行巡回指導(dǎo)，遇到共性問題，在班級(jí)內(nèi)統(tǒng)一點(diǎn)撥。1.知曉任務(wù)認(rèn)真聽取教師講解本次課的測試任務(wù)。2.學(xué)習(xí)測試概念及流程認(rèn)真聽取教師講解軟件測試的概念及軟件測試的基本流程。3.觀看動(dòng)畫認(rèn)真觀看教師播放的動(dòng)畫故事，并思考如何高效準(zhǔn)確的進(jìn)行測試。4.需求分析認(rèn)真聽取教師講解需求分析的方法，并跟隨教師演示，同步提取測試功能點(diǎn)。5.組建小組在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。6.制定計(jì)劃各小組內(nèi)同學(xué)明確自己測試的內(nèi)容，如，A同學(xué)測試B同學(xué)項(xiàng)目，B同學(xué)測試C同學(xué)項(xiàng)目，C同學(xué)測試A同學(xué)項(xiàng)目，并制定自己的測試計(jì)劃。7.編寫用例學(xué)生認(rèn)真聽取教師講解測試用例的編寫要點(diǎn)，并同步進(jìn)行仿做。完成整個(gè)測試模塊的測試用例編寫。8.執(zhí)行用例學(xué)生執(zhí)行在上節(jié)課中編寫的測試用例，并將缺陷記錄下來，執(zhí)行完測試用例編寫測試報(bào)告。有問題的同學(xué)，可進(jìn)行組內(nèi)討論，組間求助，也可以隨時(shí)向教師提出問題，還可以通過在線平臺(tái)觀看視頻講解。任務(wù)評(píng)價(jià)(10分鐘)1.任務(wù)評(píng)分企業(yè)教師和授課教師對(duì)學(xué)生整體任務(wù)實(shí)施情況，測試情況進(jìn)行評(píng)分。同時(shí)引導(dǎo)學(xué)生進(jìn)行組內(nèi)評(píng)分，組間互評(píng)。2.教師點(diǎn)評(píng)企業(yè)教師和授課教師分別對(duì)班級(jí)內(nèi)評(píng)分最高的2組，及評(píng)分較低的2組進(jìn)行點(diǎn)評(píng)，指出本次任務(wù)中，同學(xué)們的優(yōu)秀做法，及共性問題。1.學(xué)生展示學(xué)生展示自己的任務(wù)完成情況，并對(duì)自己在任務(wù)完成及任務(wù)測試過程中遇到的問題及解決對(duì)策進(jìn)行展示。在教師的引導(dǎo)下進(jìn)行評(píng)分。2.聆聽點(diǎn)評(píng)認(rèn)真聽取企業(yè)教師及專業(yè)教師對(duì)本次任務(wù)的評(píng)價(jià)，學(xué)習(xí)優(yōu)秀經(jīng)驗(yàn)，同時(shí)比對(duì)自己任務(wù)完成情況，查漏補(bǔ)缺，利用課下時(shí)間進(jìn)行提升。（三）課后1.以測驗(yàn)鞏固基礎(chǔ)知識(shí)通過布置知識(shí)技能測驗(yàn)，組織學(xué)生助教線上答疑為學(xué)生提供學(xué)習(xí)輔導(dǎo)，幫助學(xué)生查漏補(bǔ)缺、理解和消化基礎(chǔ)知識(shí)。2.以預(yù)習(xí)培養(yǎng)學(xué)生自主學(xué)習(xí)能力通過布置課前預(yù)習(xí)制作社區(qū)首頁基礎(chǔ)知識(shí)的任務(wù)，鍛煉學(xué)生的自主學(xué)習(xí)能力，促進(jìn)學(xué)生養(yǎng)成預(yù)習(xí)的學(xué)習(xí)習(xí)慣。課后活動(dòng)1.組織學(xué)生完成任務(wù)拓展模塊2.進(jìn)行有效評(píng)價(jià)并記錄過程成績?nèi)⒔虒W(xué)反思學(xué)習(xí)效果特色創(chuàng)新診改措施教學(xué)整體設(shè)計(jì)任務(wù)名稱任務(wù)七：實(shí)現(xiàn)登錄注冊(cè)功能開課學(xué)期第3學(xué)期課程類型專業(yè)核心課授課班級(jí)授課學(xué)時(shí)8學(xué)時(shí)授課地點(diǎn)研討型智慧實(shí)訓(xùn)室授課形式理實(shí)一體教學(xué)內(nèi)容本任務(wù)將實(shí)現(xiàn)“啟嘉校園”項(xiàng)目的。通過該任務(wù)的實(shí)現(xiàn)讓學(xué)生掌握uni-app中的網(wǎng)絡(luò)請(qǐng)求、生命周期管理等技術(shù)。教學(xué)目標(biāo)素質(zhì)目標(biāo)1.通過模塊封裝和本地存儲(chǔ)，培養(yǎng)學(xué)習(xí)者良好的編碼習(xí)慣,提高積累開發(fā)技巧的意識(shí)。2.通過前后端分離開發(fā)模式，培養(yǎng)學(xué)習(xí)者團(tuán)隊(duì)合作精神和縝密思維習(xí)慣。3.通過登錄注冊(cè)功能的開發(fā)，培養(yǎng)學(xué)習(xí)者信息安全意識(shí)。4.通過開發(fā)框架的技術(shù)優(yōu)勢(shì)，培養(yǎng)學(xué)習(xí)者愛國情懷，推進(jìn)文化自信自強(qiáng)。知識(shí)目標(biāo)1.了解常用登錄注冊(cè)方式。2.了解微信小程序授權(quán)登錄流程。3.了解請(qǐng)求封裝方法及其優(yōu)點(diǎn)。4.掌握使用uni.request方法進(jìn)行接口調(diào)用。1845.掌握使用Vue實(shí)現(xiàn)后端數(shù)據(jù)綁定。6.掌握uni.login登錄方法的使用。7.掌握本地緩存技術(shù)的使用。8.掌握uni-app條件編譯的使用。9.掌握uni-app頁面顯示生命周期函數(shù)onShow的使用。10.掌握uni-appgetApp獲取當(dāng)前應(yīng)用實(shí)例方法的使用。11.掌握uni-appglobalData全局變量機(jī)制的使用。能力目標(biāo)1.能夠使用uni-app調(diào)用后端接口。2.能夠使用uni.login方法和后端登錄接口實(shí)現(xiàn)微信小程序授權(quán)登錄功能。3.能夠使用本地緩存技術(shù)實(shí)現(xiàn)維護(hù)用戶登錄狀態(tài)功能。4.能夠使用uni-app條件編譯兼容小程序和H5端在登錄方式和網(wǎng)絡(luò)請(qǐng)求地址上學(xué)情分析知識(shí)基礎(chǔ)1.了解uni-app的基本概念、開發(fā)流程和組件庫的使用。2.已熟悉微信小程序的基本架構(gòu)、頁面結(jié)構(gòu)、API接口等。3.已掌握掌握基本的數(shù)據(jù)結(jié)構(gòu)（如數(shù)組、對(duì)象、棧、隊(duì)列等）和算法。技能基礎(chǔ)1.已能夠使用uni-app組件庫搭建小程序視圖頁面。2.已能夠處理常用組件事件響應(yīng)。學(xué)習(xí)特點(diǎn)與訴求1.本環(huán)節(jié)任務(wù)設(shè)計(jì)知識(shí)點(diǎn)較為廣泛，尤其是涉及網(wǎng)絡(luò)訪問的很多理論知識(shí)和實(shí)際操作技術(shù)，對(duì)學(xué)生理論理解程度及和操作技能的掌握熟練度有較高的要求。2.學(xué)生的自主學(xué)習(xí)能力有所欠缺，下發(fā)的在線學(xué)習(xí)資源點(diǎn)擊率偏低。教學(xué)重點(diǎn)1.使用uni-app實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求2.實(shí)現(xiàn)小程序的微信登錄過程中的相關(guān)操作。教學(xué)難點(diǎn)1.生命周期管理。2.用戶狀態(tài)的獲取和保存。教學(xué)策略教學(xué)方式方法1.任務(wù)驅(qū)動(dòng)教學(xué)。2.組隊(duì)討論教學(xué)。3.啟發(fā)式教學(xué)。4.理實(shí)一體化教學(xué)。教學(xué)團(tuán)隊(duì)1.企業(yè)工程師與校內(nèi)專任教師共同開發(fā)課程項(xiàng)目、構(gòu)造任務(wù)場景、設(shè)計(jì)教學(xué)實(shí)施過程、設(shè)計(jì)融入思政的課程評(píng)價(jià)體系并開展多元評(píng)價(jià)。2.校內(nèi)教師重點(diǎn)負(fù)責(zé)課堂過程中的項(xiàng)目講解與項(xiàng)目實(shí)施。3.企業(yè)工程師在個(gè)別環(huán)節(jié)（如項(xiàng)目驗(yàn)收等）參與雙師授課。4.企業(yè)工程師負(fù)責(zé)對(duì)項(xiàng)目完成情況給予工程化評(píng)價(jià)。5.學(xué)生助教負(fù)責(zé)協(xié)助教師開展課前及課后的拓展任務(wù)等。教學(xué)資源使用本書配套文檔、素材等資源教學(xué)評(píng)價(jià)

二、教學(xué)實(shí)施過程教學(xué)過程（一）課前1.以預(yù)習(xí)培養(yǎng)學(xué)生自主學(xué)習(xí)能力通過布置課前預(yù)習(xí)任務(wù)，鍛煉學(xué)生的自主學(xué)習(xí)能力，促進(jìn)學(xué)生養(yǎng)成預(yù)習(xí)的學(xué)習(xí)習(xí)慣。本環(huán)節(jié)內(nèi)容涉及的知識(shí)面非常寬泛，需要學(xué)生提前查閱資料，做好相關(guān)背景知識(shí)的預(yù)習(xí)。建議布置的任務(wù)清單如下：請(qǐng)查閱資料理解什么是“前后端分離”，為什么當(dāng)前APP開發(fā)會(huì)普遍使用這種方式。（本節(jié)內(nèi)容會(huì)涉及服務(wù)器端API的訪問，學(xué)生需要明白為什么會(huì)這樣做）理解網(wǎng)絡(luò)傳輸本質(zhì)，弄清什么事HTTP協(xié)議，它的具體工作過程是怎樣的。（這部分內(nèi)容涉及的理論知識(shí)非常多，課上并沒有足夠的時(shí)間去詳細(xì)講解，但又非常重要，所以需要學(xué)生提前做好資料查閱工作）什么是跨域。（這個(gè)是在網(wǎng)絡(luò)請(qǐng)求過程中非常常見的問題，也是本任務(wù)中需要學(xué)習(xí)的技術(shù)之一，學(xué)生最好提前理解）什么事應(yīng)用程序的生命周期，有什么用？2.知識(shí)圖譜智能推薦拓展知識(shí)通過知識(shí)圖譜向?qū)W生推送更多關(guān)于網(wǎng)絡(luò)請(qǐng)求、生命周期等技術(shù)的背景知識(shí)、應(yīng)用場景，及應(yīng)用技巧，學(xué)習(xí)相關(guān)論文及實(shí)戰(zhàn)項(xiàng)目中列舉的拓展使用方法，以點(diǎn)帶面，使學(xué)生知識(shí)儲(chǔ)備更全面，理解更透徹，從而為本任務(wù)準(zhǔn)確實(shí)施奠定雄厚的知識(shí)基礎(chǔ)。教師活動(dòng)學(xué)生活動(dòng)1.發(fā)布任務(wù)。通過職教云發(fā)布預(yù)習(xí)任務(wù)。2.發(fā)布資料。通過職教云發(fā)布微課視頻、PPT課件、虛擬仿真、知識(shí)圖譜拓展閱讀等學(xué)習(xí)資源。1.課前預(yù)習(xí)。通過微課和課件自主學(xué)習(xí)相關(guān)基礎(chǔ)知識(shí)。2.資料學(xué)習(xí)。學(xué)習(xí)教師推動(dòng)的視頻、PPT、虛擬仿真、知識(shí)圖譜拓展閱讀等，有問題同學(xué)可通過平臺(tái)在留言板留言進(jìn)行提問。（二）課中1.課程教學(xué)設(shè)計(jì)遵循學(xué)生的技能成長規(guī)律和學(xué)習(xí)規(guī)律，緊密結(jié)合制作個(gè)人資料頁的實(shí)際工作過程，進(jìn)行系統(tǒng)性的教學(xué)設(shè)計(jì)，構(gòu)造“情景項(xiàng)目導(dǎo)入、漸進(jìn)任務(wù)分解、組隊(duì)任務(wù)執(zhí)行、多元技能測評(píng)、凝練項(xiàng)目總結(jié)、激發(fā)構(gòu)想延展”六步教學(xué)實(shí)施過程，確保學(xué)生能夠體驗(yàn)真實(shí)的工作場景，通過循序漸進(jìn)的任務(wù)開發(fā)，鍛煉學(xué)生制作個(gè)人資料頁的實(shí)操技能和工程素養(yǎng)。采用雙師教學(xué)、頭腦風(fēng)暴、組隊(duì)開發(fā)、學(xué)生助教輔導(dǎo)等特色環(huán)節(jié)組織教學(xué)，充分發(fā)揮企業(yè)工程師、教師和學(xué)生的優(yōu)勢(shì)，結(jié)合利用現(xiàn)代信息技術(shù)平臺(tái)“職教云”輔助教學(xué)，激發(fā)教師授課激情、點(diǎn)燃學(xué)生學(xué)習(xí)熱情、提高課堂授課效果。2.思政教學(xué)設(shè)計(jì)本課程的思政教學(xué)設(shè)計(jì)滲透于每個(gè)任務(wù)的描述、素養(yǎng)目標(biāo)、關(guān)鍵代碼的名師解惑、課上教學(xué)設(shè)計(jì)、課下任務(wù)拓展等多個(gè)環(huán)節(jié)，從而循序漸進(jìn)、滲透式、全方位地落實(shí)思政教育“進(jìn)教材、進(jìn)課堂、進(jìn)頭腦”。借助本章的任務(wù)描述向?qū)W生傳遞“多學(xué)習(xí)新技術(shù)，讓軟件生命力更持久”的思想，讓學(xué)生養(yǎng)成“持續(xù)發(fā)展、終身學(xué)習(xí)”的習(xí)慣；通過課堂中組織組隊(duì)任務(wù)實(shí)施，培養(yǎng)學(xué)生“團(tuán)隊(duì)協(xié)作、互幫互助”的精神；通過對(duì)刪除功能關(guān)鍵代碼的實(shí)現(xiàn)，培養(yǎng)學(xué)生“滿足用戶需求，提升軟件價(jià)值”的職業(yè)素養(yǎng)；通過任務(wù)擴(kuò)展，讓學(xué)生了解圖片存儲(chǔ)的新技術(shù)、最優(yōu)解決方案的選擇，培養(yǎng)學(xué)生踐行“技術(shù)為民，服務(wù)社會(huì)”的理念。教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)第1學(xué)時(shí)情景導(dǎo)入與任務(wù)描述1(10分鐘)1.任務(wù)引入。通過掃碼演示本任務(wù)實(shí)現(xiàn)效果對(duì)本環(huán)節(jié)任務(wù)——啟嘉校園的用戶登錄注冊(cè)功能進(jìn)行展示。2.發(fā)布問題。實(shí)現(xiàn)本人無需要怎樣的步驟。3.介紹任務(wù)。本任務(wù)將實(shí)現(xiàn)啟嘉校園的用戶登錄注冊(cè)功能，常見的用戶登錄注冊(cè)方式有賬號(hào)密碼登錄、手機(jī)號(hào)或郵箱登錄、第三方平臺(tái)賬號(hào)登錄（如QQ、微信、微博等）、小程序授權(quán)登錄等。由于啟嘉校園是利用我國企業(yè)自主研發(fā)的跨平臺(tái)應(yīng)用框架uni-app開發(fā)的，具有一套代碼多端發(fā)布的優(yōu)勢(shì)，因此為了兼容不同終端的登錄，最終選擇賬號(hào)密碼登錄和微信授權(quán)登錄兩種方式，分別面向H5/安卓/iOS端和小程序端，本任務(wù)以微信小程序授權(quán)登錄為例進(jìn)行講解。1.操作體驗(yàn)。掃碼，體會(huì)啟嘉校園用戶登錄過程，思考實(shí)現(xiàn)步驟。2.回答問題。通過自主操作體驗(yàn)，提出自己的解決方案。3.了解任務(wù)。認(rèn)真聽取教師介紹任務(wù)七的任務(wù)介紹，比較分析自己的解決方案。知識(shí)儲(chǔ)備講解1(35分鐘)HTTP協(xié)議知識(shí)講解。（1）簡單介紹OSI模型，引入HTTP協(xié)議，重點(diǎn)闡明HTTP是應(yīng)用層協(xié)議。（2）簡單介紹HTTP協(xié)議特點(diǎn)。（3）簡單介紹通信步驟。2.演示并分析Get、Post協(xié)議的請(qǐng)求過程。建議充分利用Chrome瀏覽器開發(fā)者工具中的Network功能。Get請(qǐng)求：可以訪問網(wǎng)站，展示比較典型的Get請(qǐng)求，這里可以重點(diǎn)演示一下Get請(qǐng)求參數(shù)傳遞的方式以及在協(xié)議中的體現(xiàn)。Post請(qǐng)求。登錄過程中主要的網(wǎng)絡(luò)訪問方式，可以通過郵箱登錄來進(jìn)行展示，建議教師比較Post與Get方式在參數(shù)傳遞過程中的差異。（3）分析并總結(jié)HTTP協(xié)議中最常用的兩種請(qǐng)求方式，為稍后具體實(shí)現(xiàn)做鋪墊。1.聆聽知識(shí)講解HTTP協(xié)議。認(rèn)真聽取教師講解picker組件的語法格式，屬性說明及使用方法，并思考如何應(yīng)用到實(shí)際項(xiàng)目當(dāng)中。2.觀看演示picker組件使用方法同步仿做。認(rèn)真觀看教師演示，并進(jìn)行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進(jìn)行提問。3.聆聽HTTP協(xié)議部分升華點(diǎn)撥筆記撰寫。認(rèn)真聽取教師對(duì)該知識(shí)點(diǎn)的升華點(diǎn)撥講解，并將核心知識(shí)及重要知識(shí)記錄到課堂筆記當(dāng)中。第2學(xué)時(shí)情景導(dǎo)入與任務(wù)描述2(10分鐘)1.引入提問。uni-app中怎樣才能順利實(shí)現(xiàn)一個(gè)后臺(tái)接口的請(qǐng)求呢？2.引入uni-app的uni.request。（這里可以故意忽略白名單的問題，可以由學(xué)生主動(dòng)提出，或者留在后邊出現(xiàn)問題，以解決問題的形式進(jìn)行講解，學(xué)生印象會(huì)更深刻）3.介紹任務(wù)。1.回答提問。認(rèn)真思考并回答教師提問。2.體驗(yàn)情境。通過手機(jī)進(jìn)入智慧職教MOOC微信小程序，觀察圖標(biāo)圖片的清晰度。3.了解任務(wù)。認(rèn)真聽取教師介紹本節(jié)課的任務(wù)介紹，同時(shí)思考，手機(jī)頁面如何確保圖片顯示清晰度。知識(shí)儲(chǔ)備講解2(35分鐘)1.講解uni。request方法，解釋參數(shù)，編寫代碼演示運(yùn)行過程。2.程序運(yùn)行，發(fā)生跨域問題。提出問題，尋求解決方案。3.設(shè)置白名單4.詳細(xì)解釋為什么要設(shè)置白名單。跨域問題是怎樣產(chǎn)生的。1.聆聽知識(shí)講解。認(rèn)真聽取教師講解request方法各個(gè)參數(shù)的含義及使用方法。2.模仿教師操作實(shí)現(xiàn)請(qǐng)求過程。3.聆聽request請(qǐng)求部分升華點(diǎn)撥筆記撰寫，將核心知識(shí)及重要知識(shí)記錄到課堂筆記當(dāng)中。第3學(xué)時(shí)情景導(dǎo)入與任務(wù)描述3(10分鐘)1.發(fā)布討論。教師拿出手機(jī)運(yùn)行某款游戲（最好是超級(jí)瑪麗一類的小游戲，開啟游戲背景音樂），游戲運(yùn)行過程中由學(xué)生撥打教師電話，觀察游戲變化，展開討論？2.教師引入生命周期。3.介紹任務(wù)。解釋本任務(wù)中生命周期具體使用1.回答討論。認(rèn)真思考并回答討論。2.了解任務(wù)。認(rèn)真聽取教師介紹本節(jié)課的任務(wù)介紹，同時(shí)思考，如何解決提示框的使用過程中可能會(huì)受到原生端的限制和差異的問題。知識(shí)儲(chǔ)備講解3(35分鐘)講解生命周期基礎(chǔ)知識(shí)及處理機(jī)制。編寫代碼，簡單講解并演示uni-app中各個(gè)生命周期函數(shù)的使用。3.uni-app常用提示框代碼演示?，F(xiàn)場演示常用提示框組件的每個(gè)屬性使用方法。3.結(jié)合生命周期案例講解getApp()和globalData全局變量機(jī)制4.uni-app常用提示框升華點(diǎn)撥。1.聆聽知識(shí)講解。2.觀看演示，同步仿做。認(rèn)真觀看教師演示，并進(jìn)行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進(jìn)行提問。3.聆聽uni-app常用提示框升華點(diǎn)撥筆記撰寫。認(rèn)真聽取教師對(duì)生命周期處理部分的升華點(diǎn)撥講解，并將核心知識(shí)及重要知識(shí)記錄到課堂筆記當(dāng)中。第4學(xué)時(shí)任務(wù)實(shí)施邏輯分析與實(shí)現(xiàn)講解1(45分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：微信授權(quán)登錄（本環(huán)節(jié)內(nèi)容包含通過微信授權(quán)登錄以及使用本地緩存讀取用戶狀態(tài)兩個(gè)子任務(wù)）2.任務(wù)講解。邏輯分析，解釋首選流程接口分析：實(shí)現(xiàn)登錄功能需要三個(gè)接口，分別為微信授權(quán)接口、后端登錄接口和查詢用戶信息接口。3.教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。主要對(duì)照個(gè)人資料頁的預(yù)期效果圖進(jìn)行頁面的結(jié)構(gòu)分析，分為用戶基本資料區(qū)域和用戶擴(kuò)展資料區(qū)域。首先新建頁面文件，然后明確設(shè)計(jì)圖中的內(nèi)容，下一步實(shí)現(xiàn)跳轉(zhuǎn)到個(gè)人資料頁。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認(rèn)真查看個(gè)人資料頁設(shè)計(jì)圖。2.明確步驟。跟隨教師講解的思路，對(duì)照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。第5學(xué)時(shí)任務(wù)實(shí)施編碼實(shí)現(xiàn)1(45分鐘)1.分配小組。教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施。認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第6學(xué)時(shí)任務(wù)實(shí)施邏輯分析2(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：獲取用戶個(gè)人數(shù)據(jù)。2.任務(wù)講解。教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。包含兩個(gè)子任務(wù)通過網(wǎng)絡(luò)請(qǐng)求獲取用戶個(gè)人數(shù)據(jù)判斷登錄狀態(tài)點(diǎn)擊頭像登錄1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認(rèn)真查看用戶基本資料頁設(shè)計(jì)圖。2.明確步驟。跟隨教師講解的思路，對(duì)照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)2(35分鐘)1.分配小組。教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施。認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第7學(xué)時(shí)任務(wù)實(shí)施邏輯分析3(15分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：通過本地緩存實(shí)現(xiàn)用戶登錄狀態(tài)的維護(hù)。2.任務(wù)講解。教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認(rèn)真查看用戶擴(kuò)展資料頁設(shè)計(jì)圖。2.明確步驟。跟隨教師講解的思路，對(duì)照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)3(30分鐘)1.分配小組。根據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施。認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第8學(xué)時(shí)任務(wù)測試(35分鐘)本環(huán)節(jié)任務(wù)較為復(fù)雜，涉及的背景知識(shí)也比較廣泛，綜合性較強(qiáng)。1.任務(wù)介紹。教師介紹本次課要進(jìn)行測試的測試任務(wù)，UI頁面測試、功能測試（頁面跳轉(zhuǎn)、修改、保存等按鈕功能）。2.知識(shí)講解。教師介紹測試的概念，并對(duì)照企業(yè)測試流程講解，測試要按照需求分析、計(jì)劃、用例、執(zhí)行、總結(jié)，五步流程進(jìn)行測試。3.情景故事。教師播放測試相關(guān)情景動(dòng)畫，指明測試工作的重要性，提高學(xué)生對(duì)測試工作的責(zé)任心。4.需求分析講解。教師講解需求分析的方法，并以部分需求說明書為例，演示如何正確進(jìn)行需求分析，提取測試功能點(diǎn)。5.分配小組。根據(jù)任務(wù)實(shí)施同學(xué)完成情況及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。6.制定計(jì)劃講解。教師引導(dǎo)學(xué)生小組內(nèi)，要交叉進(jìn)行測試，如A同學(xué)測試B同學(xué)的項(xiàng)目，測試之前先制定自己的測試計(jì)劃并形成文字。7.編寫用例講解。教師講解編寫測試用例的技巧，并以部分功能為例進(jìn)行演示。8.執(zhí)行用例講解。教師講解執(zhí)行用例注意要點(diǎn)。9.總結(jié)報(bào)告講解。教師講解編寫總結(jié)報(bào)告要點(diǎn)。10.組間巡回指導(dǎo)。教師在組間進(jìn)行巡回指導(dǎo)，遇到共性問題，在班級(jí)內(nèi)統(tǒng)一點(diǎn)撥。1.知曉任務(wù)。認(rèn)真聽取教師講解本次課的測試任務(wù)。2.學(xué)習(xí)測試概念及流程。認(rèn)真聽取教師講解軟件測試的概念及軟件測試的基本流程。3.觀看動(dòng)畫。認(rèn)真觀看教師播放的動(dòng)畫故事，并思考如何高效準(zhǔn)確的進(jìn)行測試。4.需求分析。認(rèn)真聽取教師講解需求分析的方法，并跟隨教師演示，同步提取測試功能點(diǎn)。5.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。6.制定計(jì)劃。各小組內(nèi)同學(xué)明確自己測試的內(nèi)容，如，A同學(xué)測試B同學(xué)項(xiàng)目，B同學(xué)測試C同學(xué)項(xiàng)目，C同學(xué)測試A同學(xué)項(xiàng)目，并制定自己的測試計(jì)劃。7.編寫用例。學(xué)生認(rèn)真聽取教師講解測試用例的編寫要點(diǎn)，并同步進(jìn)行仿做。完成整個(gè)測試模塊的測試用例編寫。8.執(zhí)行用例。學(xué)生執(zhí)行在上節(jié)課中編寫的測試用例，并將缺陷記錄下來，執(zhí)行完測試用例編寫測試報(bào)告。有問題的同學(xué)，可進(jìn)行組內(nèi)討論，組間求助，也可以隨時(shí)向教師提出問題，還可以通過在線平臺(tái)觀看視頻講解。任務(wù)評(píng)價(jià)(10分鐘)1.任務(wù)評(píng)分。企業(yè)教師和授課教師對(duì)學(xué)生整體任務(wù)實(shí)施情況，測試情況進(jìn)行評(píng)分。同時(shí)引導(dǎo)學(xué)生進(jìn)行組內(nèi)評(píng)分，組間互評(píng)。2.教師點(diǎn)評(píng)。企業(yè)教師和授課教師分別對(duì)班級(jí)內(nèi)評(píng)分最高的2組，及評(píng)分較低的2組進(jìn)行點(diǎn)評(píng)，指出本次任務(wù)中，同學(xué)們的優(yōu)秀做法，及共性問題。1.學(xué)生展示。學(xué)生展示自己的任務(wù)完成情況，并對(duì)自己在任務(wù)完成及任務(wù)測試過程中遇到的問題及解決對(duì)策進(jìn)行展示。在教師的引導(dǎo)下進(jìn)行評(píng)分。2.聆聽點(diǎn)評(píng)。認(rèn)真聽取企業(yè)教師及專業(yè)教師對(duì)本次任務(wù)的評(píng)價(jià)，學(xué)習(xí)優(yōu)秀經(jīng)驗(yàn)，同時(shí)比對(duì)自己任務(wù)完成情況，查漏補(bǔ)缺，利用課下時(shí)間進(jìn)行提升。（三）課后1.以測驗(yàn)鞏固基礎(chǔ)知識(shí)通過布置知識(shí)技能測驗(yàn)，組織學(xué)生助教線上答疑為學(xué)生提供學(xué)習(xí)輔導(dǎo)，幫助學(xué)生查漏補(bǔ)缺、理解和消化基礎(chǔ)知識(shí)。2.以預(yù)習(xí)培養(yǎng)學(xué)生自主學(xué)習(xí)能力通過布置課前預(yù)習(xí)制作社區(qū)首頁基礎(chǔ)知識(shí)的任務(wù)，鍛煉學(xué)生的自主學(xué)習(xí)能力，促進(jìn)學(xué)生養(yǎng)成預(yù)習(xí)的學(xué)習(xí)習(xí)慣。課后活動(dòng)1.組織學(xué)生完成任務(wù)拓展模塊2.進(jìn)行有效評(píng)價(jià)并記錄過程成績?nèi)⒔虒W(xué)反思學(xué)習(xí)效果特色創(chuàng)新診改措施教學(xué)整體設(shè)計(jì)任務(wù)名稱任務(wù)8實(shí)現(xiàn)文章發(fā)布與文章分頁功能開課學(xué)期第3學(xué)期課程類型專業(yè)核心課授課班級(jí)授課學(xué)時(shí)8學(xué)時(shí)授課地點(diǎn)研討型智慧實(shí)訓(xùn)室授課形式理實(shí)一體教學(xué)內(nèi)容本任務(wù)將實(shí)現(xiàn)啟嘉校園社區(qū)模塊的文章發(fā)布和文章列表分頁功能。通過該任務(wù)的實(shí)現(xiàn)讓學(xué)生掌握uni-app上傳組件的應(yīng)用方法、頁面間通信方法，以及移動(dòng)端最為常見的“下拉刷新”和“上拉加載”分頁方式。教學(xué)目標(biāo)素質(zhì)目標(biāo)1.通過對(duì)uni.uploadFile文件上傳方法的學(xué)習(xí)，培養(yǎng)學(xué)習(xí)者樂于探究、勇于創(chuàng)新的精神。2.通過完成“專業(yè)交流”版塊的開發(fā)，增強(qiáng)學(xué)習(xí)者職業(yè)認(rèn)同感。3.通過合理選擇圖片儲(chǔ)存方式，培養(yǎng)學(xué)習(xí)者服務(wù)意識(shí)。知識(shí)目標(biāo)1.了解圖片、視頻等文件托管儲(chǔ)存的優(yōu)點(diǎn)和實(shí)現(xiàn)原理。2.掌握uni.uploadFile文件上傳方法的使用。3.掌握uni-app頁面通訊方法的使用。能力目標(biāo)1.能夠使用uni.uploadFile方法實(shí)現(xiàn)圖片上傳功能。2.能夠使用組件通訊方法在頁面間傳遞數(shù)據(jù)。學(xué)情分析知識(shí)基礎(chǔ)1.已了解ajax請(qǐng)求封裝的方法及其優(yōu)點(diǎn)。2.已掌握uni.request方法進(jìn)行接口調(diào)用的方法。技能基礎(chǔ)1.已具備基本的功能分析與理解能力。2.已能夠完成ajax數(shù)據(jù)請(qǐng)求的調(diào)用。學(xué)習(xí)特點(diǎn)與訴求1.初步掌握了ajax請(qǐng)求封裝的方法，希望得到更多的練習(xí)。2.在已有簡單功能實(shí)現(xiàn)的基礎(chǔ)上，希望嘗試更復(fù)雜業(yè)務(wù)邏輯的實(shí)現(xiàn)。教學(xué)重點(diǎn)1.uni.uploadFile文件上傳。2.下拉刷新和上拉加載分頁功能的實(shí)現(xiàn)。3.uni-app頁面間通訊教學(xué)難點(diǎn)1.uni-app頁面間通訊。教學(xué)策略教學(xué)方式方法1.任務(wù)驅(qū)動(dòng)教學(xué)。2.組隊(duì)討論教學(xué)。3.啟發(fā)式教學(xué)。4.理實(shí)一體化教學(xué)。教學(xué)團(tuán)隊(duì)1.企業(yè)工程師與校內(nèi)專任教師共同開發(fā)課程項(xiàng)目、構(gòu)造任務(wù)場景、設(shè)計(jì)教學(xué)實(shí)施過程、設(shè)計(jì)融入思政的課程評(píng)價(jià)體系并開展多元評(píng)價(jià)。2.校內(nèi)教師重點(diǎn)負(fù)責(zé)課堂過程中的項(xiàng)目講解與項(xiàng)目實(shí)施。3.企業(yè)工程師在個(gè)別環(huán)節(jié)（如項(xiàng)目驗(yàn)收等）參與雙師授課。4.企業(yè)工程師負(fù)責(zé)對(duì)項(xiàng)目完成情況給予工程化評(píng)價(jià)。5.學(xué)生助教負(fù)責(zé)協(xié)助教師開展課前及課后的拓展任務(wù)等。教學(xué)資源使用本書配套文檔、素材等資源教學(xué)評(píng)價(jià)

二、教學(xué)實(shí)施過程教學(xué)過程（一）課前1.以預(yù)習(xí)培養(yǎng)學(xué)生自主學(xué)習(xí)能力通過布置課前任務(wù)“了解移動(dòng)端應(yīng)用程序常見的分頁方式”，鍛煉學(xué)生自主檢索、善于觀察和總結(jié)規(guī)律的能力；通過布置課前任務(wù)“預(yù)習(xí)uni.uploadFile文件上傳方法的使用”，鍛煉學(xué)生自主學(xué)習(xí)能力，促進(jìn)學(xué)生養(yǎng)成預(yù)習(xí)的學(xué)習(xí)習(xí)慣。2.以測驗(yàn)促進(jìn)課堂提質(zhì)增效通過布置異步數(shù)據(jù)請(qǐng)求的相關(guān)知識(shí)測驗(yàn)，教師可以更好地了解學(xué)生數(shù)據(jù)請(qǐng)求基礎(chǔ)知識(shí)的學(xué)習(xí)需求和問題，總結(jié)提煉重難點(diǎn)知識(shí)，從而在課堂上進(jìn)行更有針對(duì)性的講解和討論，提高教學(xué)質(zhì)量和效果。教師活動(dòng)學(xué)生活動(dòng)1.發(fā)布任務(wù)。通過職教云或其他線上教學(xué)平臺(tái)發(fā)布預(yù)習(xí)任務(wù)：（1）了解移動(dòng)端應(yīng)用程序常見的分頁方式。（2）預(yù)習(xí)uni.uploadFile文件上傳方法的使用。2.發(fā)布測驗(yàn)。通過職教云或其他線上教學(xué)平臺(tái)發(fā)布異步數(shù)據(jù)請(qǐng)求的相關(guān)知識(shí)測驗(yàn)。3.發(fā)布資料。通過職教云發(fā)布微課視頻、PPT課件、虛擬仿真等學(xué)習(xí)資源。4.批閱任務(wù)。分析知識(shí)測驗(yàn)結(jié)果，梳理重難點(diǎn)知識(shí)。1.課前預(yù)習(xí)。通過微課和課件自主學(xué)習(xí)uni.uploadFile方法的使用，并了解移動(dòng)端常見分頁方式。2.基礎(chǔ)測驗(yàn)。通過職教云完成教師發(fā)布的數(shù)據(jù)請(qǐng)求相關(guān)知識(shí)的測驗(yàn)，并整理易錯(cuò)題，寫好技術(shù)筆記。3.資料學(xué)習(xí)。學(xué)習(xí)教師推動(dòng)的視頻、PPT、虛擬仿真、知識(shí)圖譜拓展閱讀等，有問題同學(xué)可通過平臺(tái)在留言板留言進(jìn)行提問。（二）課中1.課程教學(xué)設(shè)計(jì)遵循學(xué)生的技能成長規(guī)律和學(xué)習(xí)規(guī)律，緊密結(jié)合文章發(fā)布和文章列表頁分析功能的實(shí)際開發(fā)過程，進(jìn)行系統(tǒng)性的教學(xué)設(shè)計(jì)，構(gòu)造“情景項(xiàng)目導(dǎo)入、漸進(jìn)任務(wù)分解、組隊(duì)任務(wù)執(zhí)行、多元技能測評(píng)、凝練項(xiàng)目總結(jié)、激發(fā)構(gòu)想延展”六步教學(xué)實(shí)施過程，確保學(xué)生能夠體驗(yàn)真實(shí)的工作場景，通過循序漸進(jìn)的任務(wù)開發(fā)，鍛煉學(xué)生文章發(fā)布功能和分頁功能的實(shí)操技能和職業(yè)素養(yǎng)，保證教學(xué)過程與工作一致，教學(xué)評(píng)價(jià)與企業(yè)評(píng)價(jià)一致。教學(xué)過程中采用雙師教學(xué)、頭腦風(fēng)暴、組隊(duì)開發(fā)、學(xué)生助教輔導(dǎo)等特色環(huán)節(jié)組織教學(xué)，充分發(fā)揮企業(yè)工程師、教師和學(xué)生的優(yōu)勢(shì)，結(jié)合利用現(xiàn)代信息技術(shù)平臺(tái)“職教云”輔助教學(xué)，激發(fā)教師授課激情、點(diǎn)燃學(xué)生學(xué)習(xí)熱情、提高課堂授課效果。2.思政教學(xué)設(shè)計(jì)本課程的思政教學(xué)設(shè)計(jì)滲透于每個(gè)任務(wù)的描述、素養(yǎng)目標(biāo)、關(guān)鍵代碼的名師解惑、課上教學(xué)設(shè)計(jì)、課下任務(wù)拓展等多個(gè)環(huán)節(jié)，從而循序漸進(jìn)、滲透式、全方位地落實(shí)思政教育“進(jìn)教材、進(jìn)課堂、進(jìn)頭腦”。借助本章的任務(wù)描述向?qū)W生傳遞“多學(xué)習(xí)新技術(shù)，讓軟件生命力更持久”的思想，讓學(xué)生養(yǎng)成“持續(xù)發(fā)展、終身學(xué)習(xí)”的習(xí)慣；通過課堂中組織組隊(duì)任務(wù)實(shí)施，培養(yǎng)學(xué)生“團(tuán)隊(duì)協(xié)作、互幫互助”的精神；通過對(duì)刪除功能關(guān)鍵代碼的實(shí)現(xiàn)，培養(yǎng)學(xué)生“滿足用戶需求，提升軟件價(jià)值”的職業(yè)素養(yǎng)；通過任務(wù)擴(kuò)展，讓學(xué)生了解圖片存儲(chǔ)的新技術(shù)、最優(yōu)解決方案的選擇，培養(yǎng)學(xué)生踐行“技術(shù)為民，服務(wù)社會(huì)”的理念。教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)第1學(xué)時(shí)情景導(dǎo)入與任務(wù)描述1(10分鐘)1.展示生活中常用的幾款移動(dòng)應(yīng)用的列表頁分頁方式。美團(tuán)外賣瀑布流分頁美團(tuán)外賣瀑布流分頁騰訊新聞下拉加載分頁騰訊新聞下拉加載分頁鐵路1鐵路12306圓點(diǎn)分頁2.引出知識(shí)儲(chǔ)備中《8.4.1常見的分頁方式》的內(nèi)容。3.發(fā)布課堂討論：總結(jié)常見移動(dòng)端的分頁方式都有哪些。1.觀察并體驗(yàn)教師演示的幾款常見應(yīng)用的分頁方式。2.小組討論，再分析自己熟悉的移動(dòng)應(yīng)用的常見分頁方式。3.總結(jié)本組討論的結(jié)果，參與課堂討論。知識(shí)儲(chǔ)備講解1(35分鐘)1.講解瀑布流分頁和常規(guī)數(shù)字分頁的實(shí)現(xiàn)原理。2.重點(diǎn)講解下拉刷新和上拉加載的實(shí)現(xiàn)過程。（1）實(shí)現(xiàn)原理講解。（2）通過流程圖或者思維導(dǎo)圖介紹實(shí)現(xiàn)邏輯，解決重難點(diǎn)問題。（3）關(guān)鍵代碼演示。（4）指導(dǎo)學(xué)生仿作。（5）個(gè)別問題單獨(dú)輔導(dǎo)，普遍問題集中講解。1.聽教師講解知識(shí)。2.理解實(shí)現(xiàn)邏輯。3.根據(jù)教師的講解，完成代碼的編寫。4.遇到問題，請(qǐng)教老師或同學(xué)。5.易錯(cuò)點(diǎn)整理筆記。第2學(xué)時(shí)情景導(dǎo)入與任務(wù)描述2(10分鐘)1.提問：文件上傳有哪些應(yīng)用場景？更換微信頭像更換微信頭像發(fā)布抖音視頻發(fā)布抖音視頻2.引出知識(shí)儲(chǔ)備中《8.4.2uni.uploadFile文件上傳》的內(nèi)容。3.引發(fā)思考：文件上傳功能的實(shí)現(xiàn)，前端的開發(fā)是什么？文件提交給后端，后端又需要執(zhí)行什么操作？1.觀察并體驗(yàn)文件上傳操作的執(zhí)行邏輯。2.思考問題并小組討論，分析文件上傳操作時(shí)，前后端的執(zhí)行邏輯。3.總結(jié)本組討論的結(jié)果，參與課堂互動(dòng)。知識(shí)儲(chǔ)備講解2(35分鐘)1.講解uni.uploadFile方法的語法格式及參數(shù)說明。2.案例式、分步驟、由淺入深講解。（1）基本文件上傳功能實(shí)現(xiàn)的邏輯講解。（2）files參數(shù)、success回調(diào)、fail回調(diào)、complete回調(diào)函數(shù)的定義。（3）關(guān)鍵代碼演示。（4）指導(dǎo)學(xué)生仿作。（5）個(gè)別問題單獨(dú)輔導(dǎo)，普遍問題集中講解。3.教學(xué)重點(diǎn)：回調(diào)函數(shù)的正確應(yīng)用。4.教學(xué)難點(diǎn)：使用uploadTask對(duì)象實(shí)時(shí)顯示上傳進(jìn)度。重難點(diǎn)解決辦法：教師教師演示、學(xué)生反復(fù)練習(xí)。1.聽教師講解知識(shí)，理解實(shí)現(xiàn)邏輯。2.完成代碼的編寫。uni.chooseImage({success:(chooseImageRes)=>{consttempFilePaths=chooseImageRes.tempFilePaths;uni.uploadFile({url:'/upload',//僅為示例，非真實(shí)的接口地址filePath:tempFilePaths[0],name:'file',formData:{'user':'test'},success:(uploadFileRes)=>{console.log(uploadFileRes.data);}});}});4.調(diào)試、改bug，易錯(cuò)點(diǎn)整理筆記。第3學(xué)時(shí)情景導(dǎo)入與任務(wù)描述3(10分鐘)1.通過設(shè)問引導(dǎo)教學(xué)內(nèi)容：uni-app頁面間通信的包括幾種方式？2.帶領(lǐng)學(xué)生一起回顧之前學(xué)過的頁面之間的通信方式。3.引導(dǎo)學(xué)生思考文章發(fā)布后的實(shí)現(xiàn)邏輯：當(dāng)文章發(fā)布成功后，點(diǎn)擊“返回”按鈕，回到列表頁，列表頁應(yīng)該有何變化？有幾種實(shí)現(xiàn)方式？（1）重新調(diào)用列表頁接口（2）單獨(dú)調(diào)用新發(fā)布文章的數(shù)據(jù)，并將其添加到列表頁最上面。（3）從性能和用戶易用性方面分析，那種解決方案更好？4.設(shè)問：如何在發(fā)布文章成功后，直接讓列表頁調(diào)用最新發(fā)布成功的文章信息？1.跟隨教師思考并回答問題。2.認(rèn)真聽教師梳理授課思路。3.在了解最優(yōu)解決方案后，思考編碼邏輯，并認(rèn)真聽教師后面的講解。知識(shí)儲(chǔ)備講解3(35分鐘)1.講解uni.$emit、uni.$on、uni.$once、uni.$off方法的功能。2.講解利用自定義事件實(shí)現(xiàn)頁面間通信的原理。（教學(xué)重難點(diǎn)）執(zhí)行uni.$on執(zhí)行uni.$on方法綁定事件執(zhí)行uni.$emit方法觸發(fā)事件頁面A頁面B頁面A頁面B解釋：頁面A通過原生事件處理程序（如，點(diǎn)擊事件、失去焦點(diǎn)事件等）調(diào)用uni.$emit方法，從而觸發(fā)目標(biāo)頁面（頁面B）的事件監(jiān)聽（前提是頁面B事先利用uni.$on注冊(cè)了自定義事件的監(jiān)聽），在頁面B觸發(fā)自定義事件的處理函數(shù)中利用參數(shù)獲取到頁面A傳遞給它的數(shù)據(jù)。3.講解并演示uni.$emit、uni.$on、uni.$once、uni.$off四個(gè)方法的使用，重點(diǎn)講解前兩個(gè)。1.認(rèn)真聽教師講解，思考并回答問題。2.練習(xí)代碼。代碼段一：uni.$emit('update',{msg:'頁面更新'})代碼段二：uni.$on('update',function(data){ console.log('監(jiān)聽到事件來自u(píng)pdate，攜帶參數(shù)msg為：'+data.msg);})3.調(diào)試、改bug，易錯(cuò)點(diǎn)整理筆記。4.幫助本組內(nèi)其他同學(xué)解決問題。第4學(xué)時(shí)任務(wù)實(shí)施邏輯分析1(10分鐘)1.任務(wù)及約束分析：教師帶領(lǐng)學(xué)生一起進(jìn)行子任務(wù)的需求功能分析，理解文章發(fā)布中涉及到的每一個(gè)字段、字段的功能及其字?jǐn)?shù)和字符類型的限制。2.思政融入：通過對(duì)功能的分析引導(dǎo)學(xué)生“維護(hù)小程序平臺(tái)的安全和健康，營造合法合規(guī)、良好道德規(guī)范的網(wǎng)絡(luò)環(huán)境”社會(huì)責(zé)任感。3.組織學(xué)生以小組為單位閱讀教材中p223-224頁的業(yè)務(wù)實(shí)現(xiàn)邏輯分析，并理解其實(shí)現(xiàn)邏輯4.抽查1~2個(gè)小組對(duì)實(shí)現(xiàn)邏輯的理解。5.對(duì)理解錯(cuò)誤或者不完善的地方教師進(jìn)行補(bǔ)充說。1.以小組為單位分析此部分的實(shí)現(xiàn)邏輯分析。2.總結(jié)歸納：（1）文本（標(biāo)題和正文）：重點(diǎn)，使用v-model實(shí)現(xiàn)數(shù)據(jù)雙向綁定。（2）圖片：上傳圖片個(gè)數(shù)驗(yàn)收，超出進(jìn)行提示，成功后回調(diào)函數(shù)邏輯。（3）話題：“專業(yè)交流”和“表白墻”切換和傳遞參數(shù)的差別。3.回答問題，查漏補(bǔ)缺。任務(wù)實(shí)施編碼實(shí)現(xiàn)1(35分鐘)1.教師演示獲取話題列表接口的封裝過程。2.指導(dǎo)學(xué)生跟隨練習(xí)上傳圖片接口的封裝操作。3.巡回指導(dǎo)，并糾錯(cuò)。4.重點(diǎn)問題集中講解，個(gè)別問題單獨(dú)輔導(dǎo)。1.學(xué)生跟隨教師練習(xí)獲取話題接口的練習(xí)。importrequestfrom"@/api/index.js"http://獲取話題列表exportfunctiongetTopicListApi(){returnrequest({url:`/article-classify/topic-list`,method:'get'})}2.有問題請(qǐng)教老師或同組同學(xué)。3.調(diào)試代碼，修改bug，整理筆記。4.幫助其他同學(xué)修改代碼。第5學(xué)時(shí)任務(wù)實(shí)施編碼實(shí)現(xiàn)2(30分鐘)1.在職教云發(fā)布任務(wù)：按照獲取話題列表接口的封裝原理和封裝步驟，封裝發(fā)布文章接口的方法。2.巡回指導(dǎo)，并糾錯(cuò)。3.重點(diǎn)問題集中講解，個(gè)別問題單獨(dú)輔導(dǎo)。4.檢查職教云提交的作業(yè)。5.點(diǎn)評(píng)作業(yè)。1.反復(fù)錘煉。2.認(rèn)真完成教師發(fā)布的任務(wù)。//發(fā)布文章exportfunctionpostArticlesApi(familyId,articleTitle,articleContent,imgpath){returnrequest({url:'/IntactArticle',method:'post',data:{"familyId":familyId,"title":articleTitle,"content":articleContent,"imageLink":imgpath}})}3.提交職教云作業(yè)。4.認(rèn)真聽取教師對(duì)作業(yè)的點(diǎn)評(píng)。5.整理筆記，記錄易錯(cuò)點(diǎn)。任務(wù)實(shí)施邏輯分析2(15分鐘)1.講解圖片上傳組件的實(shí)現(xiàn)邏輯。（1）定義data中的頁面變量，保存上傳數(shù)據(jù)和頁面狀態(tài)數(shù)據(jù)。（2）調(diào)用uni.chooseImage選擇要上傳的圖片。（3）調(diào)用方法驗(yàn)證選擇的圖片數(shù)量和圖片大小.（4）驗(yàn)證成功后，調(diào)用本地的圖片上傳方法。（5）調(diào)用uni.uploadFile并保存上傳任務(wù)對(duì)象uploadTask。（6）為uploadTask定義onProgressUpdate事件的處理程序，隨著上傳的進(jìn)度來更新頁面顯示的上傳進(jìn)度（7）定義上傳成功和上傳失敗的回調(diào)函數(shù)。2.使用流程圖為學(xué)生梳理上述的實(shí)現(xiàn)邏輯。選擇圖片——>驗(yàn)證圖片——>上傳圖片——>進(jìn)度監(jiān)聽——>成功或失敗的處理。3.讓學(xué)生理解上述處理，邏輯重點(diǎn)問題集中講解，個(gè)別問題單獨(dú)輔導(dǎo)。4.發(fā)布任務(wù)：學(xué)生以小組為單位實(shí)現(xiàn)圖片的驗(yàn)證規(guī)則。1.理解實(shí)現(xiàn)邏輯。2.分組討論實(shí)現(xiàn)過程。3.以小組為單位編寫圖片的驗(yàn)證邏輯。4.屏幕共享，講解本小組編碼邏輯的實(shí)現(xiàn)過程。5.組間互測，檢查代碼實(shí)現(xiàn)的邏輯是否正確。6.傾聽其他小組的編碼實(shí)現(xiàn)邏輯。7.整理筆記，記錄易錯(cuò)點(diǎn)。第6學(xué)時(shí)任務(wù)實(shí)施編碼實(shí)現(xiàn)3(30分鐘)1.講解并演示圖片上傳組件的實(shí)現(xiàn)過程。2.分配小組。教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。3.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施。認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施重點(diǎn)問題講解(15分鐘)1.重點(diǎn)問題回顧與講解（1）Promise實(shí)例的封裝（2）在Promise.then()方法中實(shí)現(xiàn)異步事件處理教學(xué)重難點(diǎn)1.聽講和認(rèn)真理解。2.做技術(shù)筆記。第7學(xué)時(shí)任務(wù)實(shí)施邏輯分析3(10分鐘)1.分析任務(wù)。要求學(xué)生以小組為單位閱讀教材中《8.5.2獲取文章列表》部分內(nèi)容，完成以下三個(gè)部分的分析：（1）列表刷新功能分析。（2）實(shí)現(xiàn)邏輯分析。（3）后端接口分析。2.任意抽選3個(gè)不同的小組，上臺(tái)展示本組分析成果。3.點(diǎn)評(píng)各組分析結(jié)果，使學(xué)生對(duì)這三部分的理解達(dá)到共識(shí)。4.教學(xué)重難點(diǎn)根據(jù)功能和接口參數(shù)，構(gòu)建接口調(diào)用邏輯，實(shí)現(xiàn)真實(shí)數(shù)據(jù)展示使用圖示法解決教學(xué)重難點(diǎn)！1.閱讀教材資料。2.以小組為單位分析問題。3.上臺(tái)表達(dá)本小組的成果。4.對(duì)本部分內(nèi)容達(dá)成共識(shí)。5.設(shè)計(jì)圖分析進(jìn)行接口調(diào)用邏輯構(gòu)建。任務(wù)實(shí)施編碼實(shí)現(xiàn)4(25分鐘)1.講解并演示獲取文章列表頁面接口調(diào)用的實(shí)現(xiàn)過程。2.分配小組。教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。3.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施。認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)5(10分鐘)1.講解并演示真實(shí)數(shù)據(jù)頁面綁定的實(shí)現(xiàn)過程。2.分配小組。教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。3.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施。認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第8學(xué)時(shí)任務(wù)測試(35分鐘)1.任務(wù)介紹。教師介紹本次課要進(jìn)行測試的測試任務(wù)，UI頁面測試、功能測試（頁面跳轉(zhuǎn)、修改、保存等按鈕功能）。2.知識(shí)講解。教師介紹測試的概念，并對(duì)照企業(yè)測試流程講解，測試要按照需求分析、計(jì)劃、用例、執(zhí)行、總結(jié)，五步流程進(jìn)行測試。3.情景故事。教師播放測試相關(guān)情景動(dòng)畫，指明測試工作的重要性，提高學(xué)生對(duì)測試工作的責(zé)任心。4.需求分析講解。教師講解需求分析的方法，并以部分需求說明書為例，演示如何正確進(jìn)行需求分析，提取測試功能點(diǎn)。5.分配小組。根據(jù)任務(wù)實(shí)施同學(xué)完成情況及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。6.制定計(jì)劃講解。教師引導(dǎo)學(xué)生小組內(nèi)，要交叉進(jìn)行測試，如A同學(xué)測試B同學(xué)的項(xiàng)目，測試之前先制定自己的測試計(jì)劃并形成文字。7.編寫用例講解。教師講解編寫測試用例的技巧，并以部分功能為例進(jìn)行演示。8.執(zhí)行用例講解。教師講解執(zhí)行用例注意要點(diǎn)。9.總結(jié)報(bào)告講解。教師講解編寫總結(jié)報(bào)告要點(diǎn)。10.組間巡回指導(dǎo)。教師在組間進(jìn)行巡回指導(dǎo)，遇到共性問題，在班級(jí)內(nèi)統(tǒng)一點(diǎn)撥。1.知曉任務(wù)。認(rèn)真聽取教師講解本次課的測試任務(wù)。2.學(xué)習(xí)測試概念及流程。認(rèn)真聽取教師講解軟件測試的概念及軟件測試的基本流程。3.觀看動(dòng)畫。認(rèn)真觀看教師播放的動(dòng)畫故事，并思考如何高效準(zhǔn)確的進(jìn)行測試。4.需求分析。認(rèn)真聽取教師講解需求分析的方法，并跟隨教師演示，同步提取測試功能點(diǎn)。5.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。6.制定計(jì)劃。各小組內(nèi)同學(xué)明確自己測試的內(nèi)容，如，A同學(xué)測試B同學(xué)項(xiàng)目，B同學(xué)測試C同學(xué)項(xiàng)目，C同學(xué)測試A同學(xué)項(xiàng)目，并制定自己的測試計(jì)劃。7.編寫用例。學(xué)生認(rèn)真聽取教師講解測試用例的編寫要點(diǎn)，并同步進(jìn)行仿做。完成整個(gè)測試模塊的測試用例編寫。8.執(zhí)行用例。學(xué)生執(zhí)行在上節(jié)課中編寫的測試用例，并將缺陷記錄下來，執(zhí)行完測試用例編寫測試報(bào)告。有問題的同學(xué)，可進(jìn)行組內(nèi)討論，組間求助，也可以隨時(shí)向教師提出問題，還可以通過在線平臺(tái)觀看視頻講解。任務(wù)測試與評(píng)價(jià)(10分鐘)1.任務(wù)評(píng)分。企業(yè)教師和授課教師對(duì)學(xué)生整體任務(wù)實(shí)施情況，測試情況進(jìn)行評(píng)分。同時(shí)引導(dǎo)學(xué)生進(jìn)行組內(nèi)評(píng)分，組間互評(píng)。2.教師點(diǎn)評(píng)。企業(yè)教師和授課教師分別對(duì)班級(jí)內(nèi)評(píng)分最高的2組，及評(píng)分較低的2組進(jìn)行點(diǎn)評(píng)，指出本次任務(wù)中，同學(xué)們的優(yōu)秀做法，及共性問題。1.學(xué)生展示。學(xué)生展示自己的任務(wù)完成情況，并對(duì)自己在任務(wù)完成及任務(wù)測試過程中遇到的問題及解決對(duì)策進(jìn)行展示。在教師的引導(dǎo)下進(jìn)行評(píng)分。2.聆聽點(diǎn)評(píng)。認(rèn)真聽取企業(yè)教師及專業(yè)教師對(duì)本次任務(wù)的評(píng)價(jià)，學(xué)習(xí)優(yōu)秀經(jīng)驗(yàn)，同時(shí)比對(duì)自己任務(wù)完成情況，查漏補(bǔ)缺，利用課下時(shí)間進(jìn)行提升。（三）課后1.以測驗(yàn)鞏固基礎(chǔ)知識(shí)通過布置知識(shí)技能測驗(yàn)，組織學(xué)生助教線上答疑為學(xué)生提供學(xué)習(xí)輔導(dǎo)，幫助學(xué)生查漏補(bǔ)缺、理解和消化基礎(chǔ)知識(shí)。2.以預(yù)習(xí)培養(yǎng)學(xué)生自主學(xué)習(xí)能力通過布置課前預(yù)習(xí)實(shí)現(xiàn)文章詳情頁相關(guān)功能的任務(wù)，鍛煉學(xué)生的自主學(xué)習(xí)能力，促進(jìn)學(xué)生養(yǎng)成預(yù)習(xí)的學(xué)習(xí)習(xí)慣。課后活動(dòng)1.組織學(xué)生完成任務(wù)拓展模塊2.進(jìn)行有效評(píng)價(jià)并記錄過程成績?nèi)?、教學(xué)反思學(xué)習(xí)效果特色創(chuàng)新診改措施教學(xué)整體設(shè)計(jì)任務(wù)名稱任務(wù)9實(shí)現(xiàn)文章詳情頁相關(guān)功能開課學(xué)期第3學(xué)期課程類型專業(yè)核心課授課班級(jí)授課學(xué)時(shí)8學(xué)時(shí)授課地點(diǎn)研討型智慧實(shí)訓(xùn)室授課形式理實(shí)一體教學(xué)內(nèi)容本任務(wù)將實(shí)現(xiàn)啟嘉校園社區(qū)模塊文章詳情頁中的相關(guān)功能。用戶通過單擊社區(qū)首頁文章列表中的文章卡片可以進(jìn)入文章詳情頁，文章詳情頁需要實(shí)現(xiàn)的功能包括展示文章的標(biāo)題、正文、作者、發(fā)布日期；展示文章獲得的點(diǎn)贊、轉(zhuǎn)發(fā)和評(píng)論數(shù)量以及評(píng)論列表；對(duì)文章進(jìn)行評(píng)論、點(diǎn)贊和轉(zhuǎn)發(fā)，也可以對(duì)其他用戶發(fā)布的評(píng)論進(jìn)行回復(fù)和點(diǎn)贊；關(guān)注或取關(guān)作者。教學(xué)目標(biāo)素質(zhì)目標(biāo)1.通過使用條件編譯解決多端兼容，培養(yǎng)學(xué)習(xí)者科學(xué)、系統(tǒng)解決問題的意識(shí)。2.通過分享、點(diǎn)贊功能的實(shí)現(xiàn)，培養(yǎng)學(xué)習(xí)者尊重他人勞動(dòng)成果、傳播正能量的意識(shí)。知識(shí)目標(biāo)1.了解H5端實(shí)現(xiàn)轉(zhuǎn)發(fā)功能的方法。2.掌握uni.showLoading和uni.hideLoading顯示和隱藏加載狀態(tài)方法使用。3.掌握利用分割和拼接的方式實(shí)現(xiàn)字符串與數(shù)組之間的轉(zhuǎn)換。能力目標(biāo)1.能夠使用條件編譯兼容微信小程序端和H5端轉(zhuǎn)發(fā)功能實(shí)現(xiàn)的差異。2.能夠使用uni.showLoading和uni.hideLoading方法實(shí)現(xiàn)顯示和隱藏接口數(shù)據(jù)請(qǐng)求中的加載狀態(tài)。3.能夠?qū)D片地址字符串按指定字符分割成圖片數(shù)組。學(xué)情分析知識(shí)基礎(chǔ)1.已了解ajax請(qǐng)求封裝的方法及其優(yōu)點(diǎn)。2.已掌握uni.request方法進(jìn)行接口調(diào)用的方法。技能基礎(chǔ)1.已具備基本的功能分析與理解能力。2.已能夠完成ajax數(shù)據(jù)請(qǐng)求的調(diào)用。學(xué)習(xí)特點(diǎn)與訴求1.初步掌握了ajax請(qǐng)求封裝的方法，希望得到更多的練習(xí)。2.在已有簡單功能實(shí)現(xiàn)的基礎(chǔ)上，希望嘗試更復(fù)雜業(yè)務(wù)邏輯的實(shí)現(xiàn)。教學(xué)重點(diǎn)1.uni.showLoading和uni.hideLoading顯示和隱藏加載狀態(tài)方法使用。2.微信小程序端和H5端轉(zhuǎn)發(fā)功能實(shí)現(xiàn)。3.完成文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能、文章評(píng)論功能。教學(xué)難點(diǎn)1.微信小程序端和H5端轉(zhuǎn)發(fā)功能實(shí)現(xiàn)。教學(xué)策略教學(xué)方式方法1.任務(wù)驅(qū)動(dòng)教學(xué)。2.組隊(duì)討論教學(xué)。3.啟發(fā)式教學(xué)。4.理實(shí)一體化教學(xué)。教學(xué)團(tuán)隊(duì)1.企業(yè)工程師與校內(nèi)專任教師共同開發(fā)課程項(xiàng)目、構(gòu)造任務(wù)場景、設(shè)計(jì)教學(xué)實(shí)施過程、設(shè)計(jì)融入思政的課程評(píng)價(jià)體系并開展多元評(píng)價(jià)。2.校內(nèi)教師重點(diǎn)負(fù)責(zé)課堂過程中的項(xiàng)目講解與項(xiàng)目實(shí)施。3.企業(yè)工程師在個(gè)別環(huán)節(jié)（如項(xiàng)目驗(yàn)收等）參與雙師授課。4.企業(yè)工程師負(fù)責(zé)對(duì)項(xiàng)目完成情況給予工程化評(píng)價(jià)。5.學(xué)生助教負(fù)責(zé)協(xié)助教師開展課前及課后的拓展任務(wù)等。教學(xué)資源使用本書配套文檔、素材等資源教學(xué)評(píng)價(jià)

二、教學(xué)實(shí)施過程教學(xué)過程（一）課前1.以預(yù)習(xí)培養(yǎng)學(xué)生自主學(xué)習(xí)能力通過布置課前任務(wù)“商品評(píng)論區(qū)模塊常見的功能有哪些”，鍛煉學(xué)生自主檢索、善于觀察和總結(jié)規(guī)律的能力；通過布置課前任務(wù)“預(yù)習(xí)任務(wù)9實(shí)現(xiàn)文章詳情頁相關(guān)功能”，鍛煉學(xué)生自主學(xué)習(xí)能力，促進(jìn)學(xué)生養(yǎng)成預(yù)習(xí)的學(xué)習(xí)習(xí)慣。2.以測驗(yàn)促進(jìn)課堂提質(zhì)增效通過布置異步數(shù)據(jù)請(qǐng)求的相關(guān)知識(shí)測驗(yàn)，教師可以更好地了解學(xué)生數(shù)據(jù)請(qǐng)求基礎(chǔ)知識(shí)的學(xué)習(xí)需求和問題，總結(jié)提煉重難點(diǎn)知識(shí)，從而在課堂上進(jìn)行更有針對(duì)性的講解和討論，提高教學(xué)質(zhì)量和效果。教師活動(dòng)學(xué)生活動(dòng)1.發(fā)布任務(wù)。通過職教云或其他線上教學(xué)平臺(tái)發(fā)布預(yù)習(xí)任務(wù)：（1）了解評(píng)論區(qū)互動(dòng)形式的分類、多向評(píng)論區(qū)展示結(jié)構(gòu)。（2）預(yù)習(xí)任務(wù)9實(shí)現(xiàn)文章詳情頁相關(guān)功能。2.發(fā)布測驗(yàn)。通過職教云或其他線上教學(xué)平臺(tái)發(fā)布異步數(shù)據(jù)請(qǐng)求的相關(guān)知識(shí)測驗(yàn)。3.發(fā)布資料。通過職教云發(fā)布微課視頻、PPT課件、虛擬仿真等學(xué)習(xí)資源。4.批閱任務(wù)。分析知識(shí)測驗(yàn)結(jié)果，梳理重難點(diǎn)知識(shí)。1.課前預(yù)習(xí)。通過微課和課件自主學(xué)習(xí)實(shí)現(xiàn)文章詳情頁相關(guān)功能的相關(guān)知識(shí)，并了解評(píng)論區(qū)互動(dòng)形式的分類、多向評(píng)論區(qū)展示結(jié)構(gòu)。2.基礎(chǔ)測驗(yàn)。通過職教云完成教師發(fā)布的數(shù)據(jù)請(qǐng)求相關(guān)知識(shí)的測驗(yàn)，并整理易錯(cuò)題，寫好技術(shù)筆記。3.資料學(xué)習(xí)。學(xué)習(xí)教師推動(dòng)的視頻、PPT、虛擬仿真、知識(shí)圖譜拓展閱讀等，有問題同學(xué)可通過平臺(tái)在留言板留言進(jìn)行提問。（二）課中1.課程教學(xué)設(shè)計(jì)遵循學(xué)生的技能成長規(guī)律和學(xué)習(xí)規(guī)律，緊密結(jié)合啟嘉校園社區(qū)模塊文章詳情頁中的相關(guān)功能的實(shí)際開發(fā)過程，進(jìn)行系統(tǒng)性的教學(xué)設(shè)計(jì)，構(gòu)造“情景項(xiàng)目導(dǎo)入、漸進(jìn)任務(wù)分解、組隊(duì)任務(wù)執(zhí)行、多元技能測評(píng)、凝練項(xiàng)目總結(jié)、激發(fā)構(gòu)想延展”六步教學(xué)實(shí)施過程，確保學(xué)生能夠體驗(yàn)真實(shí)的工作場景，通過循序漸進(jìn)的任務(wù)開發(fā)，鍛煉學(xué)生文章詳情頁、點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能、文章評(píng)論功能的實(shí)操技能和職業(yè)素養(yǎng)，保證教學(xué)過程與工作一致，教學(xué)評(píng)價(jià)與企業(yè)評(píng)價(jià)一致。教學(xué)過程中采用雙師教學(xué)、頭腦風(fēng)暴、組隊(duì)開發(fā)、學(xué)生助教輔導(dǎo)等特色環(huán)節(jié)組織教學(xué)，充分發(fā)揮企業(yè)工程師、教師和學(xué)生的優(yōu)勢(shì)，結(jié)合利用現(xiàn)代信息技術(shù)平臺(tái)“職教云”輔助教學(xué)，激發(fā)教師授課激情、點(diǎn)燃學(xué)生學(xué)習(xí)熱情、提高課堂授課效果。2.思政教學(xué)設(shè)計(jì)本課程的思政教學(xué)設(shè)計(jì)滲透于每個(gè)任務(wù)的描述、素養(yǎng)目標(biāo)、關(guān)鍵代碼的名師解惑、課上教學(xué)設(shè)計(jì)、課下任務(wù)拓展等多個(gè)環(huán)節(jié)，從而循序漸進(jìn)、滲透式、全方位地落實(shí)思政教育“進(jìn)教材、進(jìn)課堂、進(jìn)頭腦”。借助本章的任務(wù)描述向?qū)W生傳遞“學(xué)會(huì)分享、關(guān)愛和尊重他人的良好品質(zhì)，傳播正能量，樹立正確的人生觀和價(jià)值觀”的思想，讓學(xué)生形成“尊重他人勞動(dòng)成果、傳播正能量”的意識(shí)；通過課堂中組織組隊(duì)任務(wù)實(shí)施，培養(yǎng)學(xué)生“團(tuán)隊(duì)協(xié)作、互幫互助”的精神；通過對(duì)刪除功能關(guān)鍵代碼的實(shí)現(xiàn)，培養(yǎng)學(xué)生“滿足用戶需求，提升軟件價(jià)值”的職業(yè)素養(yǎng)；通過任務(wù)擴(kuò)展，讓學(xué)生了解圖片存儲(chǔ)的新技術(shù)、最優(yōu)解決方案的選擇，培養(yǎng)學(xué)生踐行“技術(shù)為民，服務(wù)社會(huì)”的理念。教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)第1學(xué)時(shí)情景導(dǎo)入與任務(wù)描述1(10分鐘)1.展示生活中常用的幾款移動(dòng)應(yīng)用的文章詳情頁相關(guān)功能。學(xué)習(xí)強(qiáng)國文章詳情頁學(xué)習(xí)強(qiáng)國文章詳情頁京東商城商品詳情頁京東商城商品詳情頁2.引出知識(shí)儲(chǔ)備中《9.4.1評(píng)論區(qū)互動(dòng)形式》的內(nèi)容。3.發(fā)布課堂討論：總結(jié)常見移動(dòng)端的文章詳情頁都有哪些相關(guān)功能。1.觀察并體驗(yàn)教師演示的幾款常見應(yīng)用的文章詳情頁相關(guān)功能。2.小組討論，再分析自己熟悉的移動(dòng)應(yīng)用的常見分頁方式。3.總結(jié)本組討論的結(jié)果，參與課堂討論。知識(shí)儲(chǔ)備講解1(35分鐘)1.講解評(píng)論區(qū)互動(dòng)形式、多向評(píng)論區(qū)展示結(jié)構(gòu)。2.重點(diǎn)講解多向評(píng)論的互動(dòng)形式、主題式展示結(jié)構(gòu)的實(shí)現(xiàn)過程。（1）實(shí)現(xiàn)原理講解。（2）通過流程圖或者思維導(dǎo)圖介紹實(shí)現(xiàn)邏輯，解決重難點(diǎn)問題。（3）關(guān)鍵代碼演示。（4）指導(dǎo)學(xué)生仿作。（5）個(gè)別問題單獨(dú)輔導(dǎo)，普遍問題集中講解。1.聽教師講解知識(shí)。2.理解實(shí)現(xiàn)邏輯。3.根據(jù)教師的講解，完成代碼的編寫。4.遇到問題，請(qǐng)教老師或同學(xué)。5.易錯(cuò)點(diǎn)整理筆記。第2學(xué)時(shí)情景導(dǎo)入與任務(wù)描述2(10分鐘)1.提問：用戶進(jìn)入文章詳情頁有幾種情況，需要獲取文章實(shí)體類種的哪些字段？2.引出任務(wù)實(shí)施中《9.5.1獲取文章詳情》的內(nèi)容。3.引發(fā)思考：文章詳情頁經(jīng)常會(huì)包含哪些子功能？1.觀察并體驗(yàn)文章詳情頁的執(zhí)行邏輯。2.思考問題并小組討論，分析文章詳情頁操作時(shí)，前后端的執(zhí)行邏輯。3.總結(jié)本組討論的結(jié)果，參與課堂互動(dòng)。任務(wù)實(shí)施編碼實(shí)現(xiàn)2(35分鐘)1.講解文章詳情頁邏輯分析。2.分析文章詳情頁接口。3.編寫調(diào)用獲取文章詳情接口的方法。2.案例式、分步驟、由淺入深講解。（1）文章詳情頁功能實(shí)現(xiàn)的邏輯講解。（2）利用分割和拼接的方式實(shí)現(xiàn)字符串與數(shù)組之間的轉(zhuǎn)換。（3）關(guān)鍵代碼演示。（4）指導(dǎo)學(xué)生仿作。（5）個(gè)別問題單獨(dú)輔導(dǎo)，普遍問題集中講解。3.教學(xué)重點(diǎn)：回調(diào)函數(shù)的正確應(yīng)用。4.教學(xué)難點(diǎn)：能將圖片地址字符串按指定字符分割成圖片數(shù)組。重難點(diǎn)解決辦法：教師教師演示、學(xué)生反復(fù)練習(xí)。1.聽教師講解知識(shí)，理解實(shí)現(xiàn)邏輯。2.完成代碼的編寫。在/api/community目錄下新建article-details.js文件，編寫調(diào)用獲取文章詳情接口的方法，關(guān)鍵代碼如下：在article-details.vue中，調(diào)用getArticleContentApi方法獲取文章詳情數(shù)據(jù)，關(guān)鍵代碼如下：3.調(diào)試、改bug，易錯(cuò)點(diǎn)整理筆記。4.幫助本組內(nèi)其他同學(xué)解決問題。第3學(xué)時(shí)情景導(dǎo)入與任務(wù)描述3(10分鐘)1.通過小組討論導(dǎo)入教學(xué)內(nèi)容：（1）文章點(diǎn)贊/取消點(diǎn)贊功能如何實(shí)現(xiàn)？2.任務(wù)及約束分析：教師帶領(lǐng)學(xué)生一起進(jìn)行子任務(wù)的需求功能分析，理解文章點(diǎn)贊/取消點(diǎn)贊功能中涉及到的每一個(gè)字段、字段的功能及其字?jǐn)?shù)和字符類型的限制。引出任務(wù)實(shí)施中《9.5.2實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能》的內(nèi)容。3.思政融入：通過對(duì)功能的分析引導(dǎo)學(xué)生“學(xué)會(huì)分享、關(guān)愛和尊重他人的良好品質(zhì)，傳播正能量，樹立正確的人生觀和價(jià)值觀”。4.引導(dǎo)思考：如何實(shí)現(xiàn)文章點(diǎn)贊功能的邏輯分析？1.跟隨教師思考并回答問題。2.認(rèn)真聽教師梳理授課思路。3.在了解實(shí)現(xiàn)過程，思考編碼邏輯，并認(rèn)真聽教師后面的講解。任務(wù)實(shí)施編碼實(shí)現(xiàn)3(35分鐘)1.講解文章點(diǎn)贊/取消點(diǎn)贊功能的實(shí)現(xiàn)邏輯。2.講解文章點(diǎn)贊/取消點(diǎn)贊接口詳情。3.講解并演示文章點(diǎn)贊/取消點(diǎn)贊功能的代碼實(shí)現(xiàn)。4.指導(dǎo)學(xué)生跟隨練習(xí)實(shí)現(xiàn)文章點(diǎn)贊/取消點(diǎn)贊功能接口的封裝操作。5.巡回指導(dǎo)，并糾錯(cuò)。6重點(diǎn)問題集中講解，個(gè)別問題單獨(dú)輔導(dǎo)。1.認(rèn)真聽教師講解，思考并回答問題。2.仿寫代碼。3.調(diào)試、改bug，易錯(cuò)點(diǎn)整理筆記。4.幫助本組內(nèi)其他同學(xué)解決問題。第4學(xué)時(shí)情景導(dǎo)入與任務(wù)描述4(10分鐘)1.小組討論：（1）轉(zhuǎn)發(fā)文章功能如何實(shí)現(xiàn)？（2）關(guān)注/取關(guān)用戶功能如何實(shí)現(xiàn)？文章點(diǎn)贊/取消點(diǎn)贊功能如何實(shí)現(xiàn)？2.組織學(xué)生以小組為單位閱讀教材中轉(zhuǎn)發(fā)文章功能和關(guān)注/取關(guān)用戶功能的業(yè)務(wù)實(shí)現(xiàn)邏輯分析，并理解其實(shí)現(xiàn)邏輯3.抽查1~2個(gè)小組對(duì)實(shí)現(xiàn)邏輯的理解。4.對(duì)理解錯(cuò)誤或者不完善的地方教師進(jìn)行補(bǔ)充說。1.以小組為單位分析此部分的實(shí)現(xiàn)邏輯分析。2.總結(jié)歸納代碼實(shí)現(xiàn)邏輯3.回答問題，查漏補(bǔ)缺。任務(wù)實(shí)施編碼實(shí)現(xiàn)4(35分鐘)1.教師演示轉(zhuǎn)發(fā)文章功能接口的封裝過程。2.指導(dǎo)學(xué)生跟隨練習(xí)實(shí)現(xiàn)轉(zhuǎn)發(fā)文章功能接口的封裝操作。3.教師演示關(guān)注/取關(guān)用戶功能接口的封裝過程。4.指導(dǎo)學(xué)生跟隨練習(xí)實(shí)現(xiàn)關(guān)注/取關(guān)用戶功能接口的封裝操作。5.巡回指導(dǎo)，并糾錯(cuò)。6重點(diǎn)問題集中講解，個(gè)別問題單獨(dú)輔導(dǎo)。1.學(xué)生跟隨教師練習(xí)，完成轉(zhuǎn)發(fā)文章功能接口、關(guān)注/取關(guān)用戶功能接口的練習(xí)。2.有問題請(qǐng)教老師或同組同學(xué)。3.調(diào)試代碼，修改bug，整理筆記。4.幫助其他同學(xué)修改代碼。第5學(xué)時(shí)情景導(dǎo)入與任務(wù)描述5(10分鐘)1.提問：文章評(píng)論功能有幾種評(píng)論形式？2.引出任務(wù)實(shí)施中《9.5.3實(shí)現(xiàn)文章評(píng)論功能》的內(nèi)容。3.引發(fā)思考：文章評(píng)論功能經(jīng)常會(huì)包含哪些子功能？1.觀察并體驗(yàn)文章評(píng)論功能的執(zhí)行邏輯。2.思考問題并小組討論，分析文章評(píng)論功能操作時(shí)，前后端的執(zhí)行邏輯。3.總結(jié)本組討論的結(jié)果，參與課堂互動(dòng)。任務(wù)實(shí)施邏輯分析5(35分鐘)1.教師演示查詢文章評(píng)論功能的封裝過程。2.指導(dǎo)學(xué)生跟隨練習(xí)實(shí)現(xiàn)查詢文章評(píng)論功能的封裝操作。3.巡回指導(dǎo)，并糾錯(cuò)。4.重點(diǎn)問題集中講解，個(gè)別問題單獨(dú)輔導(dǎo)。5.發(fā)布任務(wù)：學(xué)生以小組為單位實(shí)現(xiàn)查詢文章評(píng)論功能。1.理解實(shí)現(xiàn)邏輯。2.分組討論實(shí)現(xiàn)過程。3.以小組為單位編寫文章評(píng)論功能的驗(yàn)證邏輯。4.屏幕共享，講解本小組編碼邏輯的實(shí)現(xiàn)過程。5.組間互測，檢查代碼實(shí)現(xiàn)的邏輯是否正確。6.傾聽其他小組的編碼實(shí)現(xiàn)邏輯。7.整理筆記，記錄易錯(cuò)點(diǎn)。第6學(xué)時(shí)任務(wù)實(shí)施編碼實(shí)現(xiàn)6(30分鐘)1.教師演示發(fā)布文章評(píng)論功能的封裝過程。2.指導(dǎo)學(xué)生跟隨練習(xí)實(shí)現(xiàn)發(fā)布文章評(píng)論功能的封裝操作。3.講解并演示刪除評(píng)論的實(shí)現(xiàn)過程。4.分配小組。教師依據(jù)知識(shí)儲(chǔ)備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。5.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡短講解點(diǎn)撥。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施。認(rèn)真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺(tái)向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施重點(diǎn)問題講解(15分鐘)1.重點(diǎn)問題回顧與講解（教學(xué)重難點(diǎn)）（1）props方法的使用（2）評(píng)論組件的使用1.聽講和認(rèn)真理解。2.做技術(shù)筆記。第7學(xué)時(shí)任務(wù)實(shí)施邏輯分析7(10分鐘)1.分析任務(wù)。要求學(xué)生以小組為