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

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

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

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

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

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