Web前端應用開發(fā)項目式教程（基于uni-app框架） 教案-教學設計 任務5 制作文章發(fā)布頁

教學整體設計任務名稱任務5制作文章發(fā)布頁開課學期第3學期課程類型專業(yè)核心課授課班級授課學時8學時授課地點研討型智慧實訓室授課形式理實一體教學內容本任務將實現(xiàn)“啟嘉校園”項目的文章發(fā)布頁面。通過該任務的實現(xiàn)讓學生掌握uni.chooseImage選擇圖片方法的使用。掌握uni-apptextarea多行輸入框組件的使用。教學目標素質目標1.通過搭建文章發(fā)布頁結構，把一個頁面分成5個區(qū)域逐步開發(fā)，培養(yǎng)開發(fā)者的全局思維。2.通過任務四制作上傳圖片區(qū)域解決H5端無法限制上傳數(shù)量問題，培養(yǎng)學習者敢于挑戰(zhàn)、勇于探索的創(chuàng)新精神。知識目標1.掌握uni.chooseImage選擇圖片方法的使用。2.掌握uni-apptextarea多行輸入框組件的使用。能力目標1.能夠使用uni.chooseImage方法實現(xiàn)本地相冊獲取圖片或拍照。2.能夠使用textarea組件實現(xiàn)顯示已輸入字數(shù)和字數(shù)上限的多行輸入框。3.能夠使用uni.navigateTo方法在頁面跳轉時傳遞話題參數(shù)。4.能夠使用正則表達式完成文章信息驗證。5.能夠通過操作數(shù)組對象實現(xiàn)圖片刪除功能。學情分析知識基礎1.了解uni-app組件化。2.了解/deep/深度作用選擇器的用法。3.掌握uni-appeasyinput輸入框增強組件的使用。4.掌握onShareAppMessage小程序頁面轉發(fā)方法的使用。5.掌握uni.previewImage預覽圖片方法的使用。6.掌握uni.chooseImage上傳圖片方法的使用。7.掌握uni.getImageInfo獲取圖片信息方法的使用。8.掌握uni-appmovable-area可拖動區(qū)域組件的使用。技能基礎1.能夠根據(jù)組件化思想完成組件封裝。2.能夠使用easyinput組件制作搜索輸入框。3.能夠使用onShareAppMessage方法實現(xiàn)頁面轉發(fā)。4.能夠使用圖片處理方法實現(xiàn)圖片的上傳和預覽。5.能夠使用movable-area組件實現(xiàn)元素的拖動。學習特點與訴求1.學生對啟嘉校園開發(fā)項目具有很好的學習積極性。2.學生的自主學習能力有所欠缺教學重點1.uni.chooseImage選擇圖片方法的使用。2.uni-apptextarea多行輸入框組件的使用。教學難點1.能夠使用textarea組件實現(xiàn)顯示已輸入字數(shù)和字數(shù)上限的多行輸入框。教學策略教學方式方法1.任務驅動教學。2.組隊討論教學。3.啟發(fā)式教學。4.理實一體化教學。教學團隊1.企業(yè)工程師與校內專任教師共同開發(fā)課程項目、構造任務場景、設計教學實施過程、設計融入思政的課程評價體系并開展多元評價。2.校內教師重點負責課堂過程中的項目講解與項目實施。3.企業(yè)工程師在個別環(huán)節(jié)（如項目驗收等）參與雙師授課。4.企業(yè)工程師負責對項目完成情況給予工程化評價。5.學生助教負責協(xié)助教師開展課前及課后的拓展任務等。教學資源使用本書配套文檔、素材等資源教學評價

二、教學實施過程教學過程（一）課前1.以預習培養(yǎng)學生自主學習能力通過布置課前預習uni.chooseImage選擇圖片方法、uni-apptextarea多行輸入框組件的使用，鍛煉學生的自主學習能力，促進學生養(yǎng)成預習的學習習慣。2.以測驗促進課堂提質增效通過布置預期內容中預習uni.chooseImage選擇圖片方法、uni-apptextarea多行輸入框組件知識測驗，教師可以更好地了解學生對本次任務基礎知識的學習需求和問題，總結提煉重難點知識，從而在課堂上進行更有針對性的講解和討論，提高教學質量和效果。知識圖譜智能推薦拓展知識通過知識圖譜向學生推送更多關于uni.chooseImage選擇圖片方法、uni-apptextarea多行輸入框組件的應用場景及應用技巧，學習相關論文及實戰(zhàn)項目中列舉的拓展使用方法，以點帶面，使學生知識儲備更全面，理解更透徹，從而為本任務準確實施奠定雄厚的知識基礎。教師活動學生活動1.發(fā)布任務。通過職教云發(fā)布預習uni.chooseImage選擇圖片方法、uni-apptextarea多行輸入框組件知識預習任務。2.發(fā)布測驗。通過職教云發(fā)布預習uni.chooseImage選擇圖片方法、uni-apptextarea多行輸入框組件知識測驗。3.發(fā)布資料。通過職教云發(fā)布微課視頻、PPT課件、虛擬仿真、知識圖譜拓展閱讀等學習資源。4.批閱任務。分析知識測驗結果，梳理重難點知識。1.課前預習。通過微課和課件自主學習滾動預習uni.chooseImage選擇圖片方法、uni-apptextarea多行輸入框組件相關基礎知識。2.基礎測驗。通過職教云完成預習uni.chooseImage選擇圖片方法、uni-apptextarea多行輸入框組件知識測驗。3.資料學習。學習教師推動的視頻、PPT、虛擬仿真、知識圖譜拓展閱讀等，有問題同學可通過平臺在留言板留言進行提問。（二）課中1.課程教學設計遵循學生的技能成長規(guī)律和學習規(guī)律，緊密結合制作個人資料頁的實際工作過程，進行系統(tǒng)性的教學設計，構造“情景項目導入、漸進任務分解、組隊任務執(zhí)行、多元技能測評、凝練項目總結、激發(fā)構想延展”六步教學實施過程，確保學生能夠體驗真實的工作場景，通過循序漸進的任務開發(fā)，鍛煉學生制作個人資料頁的實操技能和工程素養(yǎng)。采用雙師教學、頭腦風暴、組隊開發(fā)、學生助教輔導等特色環(huán)節(jié)組織教學，充分發(fā)揮企業(yè)工程師、教師和學生的優(yōu)勢，結合利用現(xiàn)代信息技術平臺“職教云”輔助教學，激發(fā)教師授課激情、點燃學生學習熱情、提高課堂授課效果。2.思政教學設計本課程的思政教學設計滲透于每個任務的描述、素養(yǎng)目標、關鍵代碼的名師解惑、課上教學設計、課下任務拓展等多個環(huán)節(jié)，從而循序漸進、滲透式、全方位地落實思政教育“進教材、進課堂、進頭腦”。借助本章的任務描述向學生傳遞“多學習新技術，讓軟件生命力更持久”的思想，讓學生養(yǎng)成“持續(xù)發(fā)展、終身學習”的習慣；通過課堂中組織組隊任務實施，培養(yǎng)學生“團隊協(xié)作、互幫互助”的精神；通過對刪除功能關鍵代碼的實現(xiàn)，培養(yǎng)學生“滿足用戶需求，提升軟件價值”的職業(yè)素養(yǎng)；通過任務擴展，讓學生了解圖片存儲的新技術、最優(yōu)解決方案的選擇，培養(yǎng)學生踐行“技術為民，服務社會”的理念。教學環(huán)節(jié)教師活動學生活動第1學時情景項目導入(15分鐘)1.導入項目。通過PPT課件展示文章發(fā)布頁任務描述；2.發(fā)布討論。引導學生通過查閱資料或者討論實現(xiàn)文章發(fā)布頁的功能。1.認真聽講。理解項目的需求和意義。2.小組討論。分析項目實現(xiàn)的可能方式。3.小組分享。小組分享討論結果。漸進任務分解(30分鐘).1.發(fā)布討論。項目實現(xiàn)的可能方式；2.教師點評。分析每組學生的結論，得出實現(xiàn)功能的基本思路和方式。3.任務分解。通過小組分享，引出任務實現(xiàn)的步驟：頁面結構分析與搭建、制作導航欄區(qū)域、制作文字信息區(qū)域、制作上傳圖片區(qū)域、制作選擇話題區(qū)域、制作發(fā)布按鈕區(qū)域。1.小組討論。項目實現(xiàn)的基本思路和方式。2.小組分享。小組分享討論結果。3.認真聽講。通過教師講解任務拆解，理解任務拆解的分析思路。第2學時組隊任務執(zhí)行(30分鐘)1.發(fā)布任務。通過職教云發(fā)布頁面結構分析與搭建任務單。2.知識講解。通過PPT課件講解頁面結構分析與搭建的基礎知識。3.教師點評。教師點評各小組成員分工和任務執(zhí)行計劃合理度。4.答疑解惑。解決學生在任務實操中遇到的技術難題。1.認真聽講。通過教師講解基礎知識，對課前預習的知識進行查漏補缺。思考如何實現(xiàn)任務單。2.情景演繹：小組成員通過角色扮演情景演繹，討論組內成員分工。3.小組分享：小組分享成員分工和任務執(zhí)行計劃。4.任務執(zhí)行。小組成員完成搭建文章發(fā)布頁結構的任務實操。多元技能測評（15分鐘）1.引導互評。引導各小組對上臺分享的小組進行點評。2.教師點評。教師對各小組在搭建文章發(fā)布頁結構過程中的技術實踐應用能力，團隊協(xié)作、工程思維、解決問題等能力進行評價。3.錦囊講解。講解搭建文章發(fā)布頁結構任務實操重難點。1.小組分享。小組分享實操任務完成情況。2.生生互評。對其它小組的任務分享進行評價和學習。3.認真聽講。通過教師講解任務實操重難點，分析小組任務單的缺陷，思考完善方案。第3學時組隊任務執(zhí)行(30分鐘)1.發(fā)布任務。通過職教云發(fā)布導航欄區(qū)域制作任務單。2.知識講解。通過PPT課件講解制作導航欄區(qū)域的基礎知識。3.教師點評。教師點評各小組成員分工和任務執(zhí)行計劃合理度。4.答疑解惑。解決學生在任務實操中遇到的技術難題。1.認真聽講。通過教師講解基礎知識，對課前預習的知識進行查漏補缺。思考如何實現(xiàn)任務單。2.情景演繹：小組成員通過角色扮演情景演繹，討論組內成員分工。3.小組分享：小組分享成員分工和任務執(zhí)行計劃。4.任務執(zhí)行。小組成員完成制作導航欄區(qū)域的任務實操。多元技能測評（15分鐘）1.引導互評。引導各小組對上臺分享的小組進行點評。2.教師點評。教師對各小組在制作導航欄區(qū)域過程中的技術實踐應用能力，團隊協(xié)作、工程思維、解決問題等能力進行評價。3.錦囊講解。講解制作導航欄區(qū)域任務實操重難點。1.小組分享。小組分享實操任務完成情況。2.生生互評。對其它小組的任務分享進行評價和學習。3.認真聽講。通過教師講解任務實操重難點，分析小組任務單的缺陷，思考完善方案。第4學時組隊任務執(zhí)行(30分鐘)1.發(fā)布任務。通過職教云發(fā)布制作文字信息區(qū)域任務單。2.知識講解。通過PPT課件講解制作文字信息區(qū)域的基礎知識。3.教師點評。教師點評各小組成員分工和任務執(zhí)行計劃合理度。4.答疑解惑。解決學生在任務實操中遇到的技術難題。1.認真聽講。通過教師講解基礎知識，對課前預習的知識進行查漏補缺。思考如何實現(xiàn)任務單。2.情景演繹：小組成員通過角色扮演情景演繹，討論組內成員分工。3.小組分享：小組分享成員分工和任務執(zhí)行計劃。4.任務執(zhí)行。小組成員完成制作文字信息區(qū)域的任務實操。多元技能測評（15分鐘）1.引導互評。引導各小組對上臺分享的小組進行點評。2.教師點評。教師對各小組在制作文字信息區(qū)域過程中的技術實踐應用能力，團隊協(xié)作、工程思維、解決問題等能力進行評價。3.錦囊講解。講解制作文字信息區(qū)域任務實操重難點。1.小組分享。小組分享實操任務完成情況。2.生生互評。對其它小組的任務分享進行評價和學習。3.認真聽講。通過教師講解任務實操重難點，分析小組任務單的缺陷，思考完善方案。第5學時組隊任務執(zhí)行(30分鐘)1.發(fā)布任務。通過職教云發(fā)布制作上傳圖片區(qū)域任務單。2.知識講解。通過PPT課件講解制作上傳圖片區(qū)域的基礎知識。3.教師點評。教師點評各小組成員分工和任務執(zhí)行計劃合理度。4.答疑解惑。解決學生在任務實操中遇到的技術難題。1.認真聽講。通過教師講解基礎知識，對課前預習的知識進行查漏補缺。思考如何實現(xiàn)任務單。2.情景演繹：小組成員通過角色扮演情景演繹，討論組內成員分工。3.小組分享：小組分享成員分工和任務執(zhí)行計劃。4.任務執(zhí)行。小組成員完成制作上傳圖片區(qū)域的任務實操。多元技能測評（15分鐘）1.引導互評。引導各小組對上臺分享的小組進行點評。2.教師點評。教師對各小組在制作上傳圖片區(qū)域過程中的技術實踐應用能力，團隊協(xié)作、工程思維、解決問題等能力進行評價。3.錦囊講解。講解制作上傳圖片區(qū)域任務實操重難點。1.小組分享。小組分享實操任務完成情況。2.生生互評。對其它小組的任務分享進行評價和學習。3.認真聽講。通過教師講解任務實操重難點，分析小組任務單的缺陷，思考完善方案。第6學時組隊任務執(zhí)行(30分鐘)1.發(fā)布任務。通過職教云發(fā)布制作選擇話題區(qū)域任務單。2.知識講解。通過PPT課件講解制作選擇話題區(qū)域的基礎知識。3.教師點評。教師點評各小組成員分工和任務執(zhí)行計劃合理度。4.答疑解惑。解決學生在任務實操中遇到的技術難題。1.認真聽講。通過教師講解基礎知識，對課前預習的知識進行查漏補缺。思考如何實現(xiàn)任務單。2.情景演繹：小組成員通過角色扮演情景演繹，討論組內成員分工。3.小組分享：小組分享成員分工和任務執(zhí)行計劃。4.任務執(zhí)行。小組成員完成制作選擇話題區(qū)域的任務實操。多元技能測評（15分鐘）1.引導互評。引導各小組對上臺分享的小組進行點評。2.教師點評。教師對各小組在制作選擇話題區(qū)域過程中的技術實踐應用能力，團隊協(xié)作、工程思維、解決問題等能力進行評價。3.錦囊講解。講解制作選擇話題區(qū)域任務實操重難點。1.小組分享。小組分享實操任務完成情況。2.生生互評。對其它小組的任務分享進行評價和學習。3.認真聽講。通過教師講解任務實操重難點，分析小組任務單的缺陷，思考完善方案。第7學時組隊任務執(zhí)行(30分鐘)1.發(fā)布任務。通過職教云發(fā)布制作發(fā)布按鈕區(qū)域任務單。2.知識講解。通過PPT課件講解制作發(fā)布按鈕區(qū)域的基礎知識。3.教師點評。教師點評各小組成員分工和任務執(zhí)行計劃合理度。4.答疑解惑。解決學生在任務實操中遇到的技術難題。1.認真聽講。通過教師講解基礎知識，對課前預習的知識進行查漏補缺。思考如何實現(xiàn)任務單。2.情景演繹：小組成員通過角色扮演情景演繹，討論組內成員分工。3.小組分享：小組分享成員分工和任務執(zhí)行計劃。4.任務執(zhí)行。小組成員完成制作發(fā)布按鈕區(qū)域的任務實操。多元技能測評（15分鐘）1.引導互評。引導各小組對上臺分享的小組進行點評。2.教師點評。教師對各小組在制作發(fā)布按鈕區(qū)域過程中的技術實踐應用能力，團隊協(xié)作、工程思維、解決問題等能力進行評價。3.錦囊講解。講解制作發(fā)布按鈕區(qū)域任務實操重難點。1.小組分享。小組分享實操任務完成情況。2.生生互評。對其它小組的任務分享進行評價和學習。3.認真聽講。通過教師講解任務實操重難點，分析小組任務單的缺陷，思考完善方案。第8學時任務測試(25分鐘)1.任務介紹。教師介紹本次課要進行測試的測試任務，UI頁面測試、功能測試。2.知識講解。教師介紹測試的概念，并對照企業(yè)測試流程講解，測試要按照需求分析、計劃、用例、執(zhí)行、總結，五步流程進行測試。3.情景故事。教師播放測試相關情景動畫，指明測試工作的重要性，提高學生對測試工作的責任心。4.需求分析講解。教師講解需求分析的方法，并以部分需求說明書為例，演示如何正確進行需求分析，提取測試功能點。5.分配小組。根據(jù)任務實施同學完成情況及學生組隊意愿，3人組成一隊，盡量讓強弱互補，形成互相幫扶小組。6.制定計劃講解。教師引導學生小組內，要交叉進行測試，如A同學測試B同學的項目，測試之前先制定自己的測試計劃并形成文字。7.編寫用例講解。教師講解編寫測試用例的技巧，并以部分功能為例進行演示。8.執(zhí)行用例講解。教師講解執(zhí)行用例注意要點。9.總結報告講解。教師講解編寫總結報告要點。10.組間巡回指導。教師在組間進行巡回指導，遇到共性問題，在班級內統(tǒng)一點撥。1.知曉任務。認真聽取教師講解本次課的測試任務。2.學習測試概念及流程。認真聽取教師講解軟件測試的概念及軟件測試的基本流程。3.觀看動畫。認真觀看教師播放的動畫故事，并思考如何高效準確的進行測試。4.需求分析。認真聽取教師講解需求分析的方法，并跟隨教師演示，同步提取測試功能點。5.組建小組。在教師的引導下，結合自己意愿，組成3人一組的團隊。6.制定計劃。各小組內同學明確自己測試的內容，如，A同學測試B同學項目，B同學測試C同學項目，C同學測試A同學項目，并制定自己的測試計劃