Web前端應(yīng)用開發(fā)項目式教程（基于uni-app框架） 教案-教學(xué)設(shè)計 任務(wù)4 制作社區(qū)首頁

教學(xué)整體設(shè)計任務(wù)名稱任務(wù)4制作社區(qū)首頁開課學(xué)期第3學(xué)期課程類型專業(yè)核心課授課班級授課學(xué)時8學(xué)時授課地點研討型智慧實訓(xùn)室授課形式理實一體教學(xué)內(nèi)容本任務(wù)將制作“啟嘉校園”項目的社區(qū)首頁，社區(qū)首頁主要展示用戶發(fā)布的文章列表。通過該任務(wù)的實現(xiàn)讓學(xué)生了解uni-app組件化,小程序頁面轉(zhuǎn)發(fā)方法、預(yù)覽圖片方法、上傳圖片方法、獲取圖片信息方法、可拖動區(qū)域組件的使用。教學(xué)目標素質(zhì)目標1.通過采用組件化的方式制作搜索、選項卡、文章卡片和懸浮按鈕，培養(yǎng)學(xué)習(xí)者高質(zhì)量、持續(xù)性的開發(fā)意識。2.通過封裝文章卡片組件，培養(yǎng)學(xué)習(xí)者注重細節(jié)、品質(zhì)至上的工作態(tài)度。3.通過制作“社區(qū)首頁”任務(wù)，提升學(xué)習(xí)者共創(chuàng)美好交流社區(qū)、營造良好網(wǎng)絡(luò)環(huán)境的意識。知識目標1.了解uni-app組件化。2.了解/deep/深度作用選擇器的用法。3.掌握uni-appeasyinput輸入框增強組件的使用。4.掌握onShareAppMessage小程序頁面轉(zhuǎn)發(fā)方法的使用。5.掌握uni.previewImage預(yù)覽圖片方法的使用。6.掌握uni.chooseImage上傳圖片方法的使用。7.掌握uni.getImageInfo獲取圖片信息方法的使用。8.掌握uni-appmovable-area可拖動區(qū)域組件的使用。能力目標1.能夠根據(jù)組件化思想完成組件封裝。2.能夠使用easyinput組件制作搜索輸入框。3.能夠使用onShareAppMessage方法實現(xiàn)頁面轉(zhuǎn)發(fā)。4.能夠使用圖片處理方法實現(xiàn)圖片的上傳和預(yù)覽。5.能夠使用movable-area組件實現(xiàn)元素的拖動。學(xué)情分析知識基礎(chǔ)1.已掌握滾動選擇器組件、單行輸入框組件、圖片組件的使用。2.已掌握uni.showToast消息提示方法的使用。3.已掌握uni-app頁面跳轉(zhuǎn)方法的使用。技能基礎(chǔ)1.已具備使用uni.showToast方法完成消息提示。2.已具備使用uni-app頁面跳轉(zhuǎn)方法實現(xiàn)頁面間跳轉(zhuǎn)。3.已具備使用正則表達式完成手機號、微信號等信息的驗證。學(xué)習(xí)特點與訴求1.學(xué)生對于模擬真實工作情景，開發(fā)實際項目授課方法興趣濃厚，對所學(xué)知識接受度較高。2.學(xué)生自主解決問題的能力較差，任務(wù)拓展完成效果有待提高。教學(xué)重點1.uni-appeasyinput輸入框增強組件、uni-appmovable-area可拖動區(qū)域組件的使用方法。2.預(yù)覽圖片方法、上傳圖片方法及獲取圖片信息方法的使用。教學(xué)難點1.能夠根據(jù)組件化思想完成組件封裝。2.能夠使用onShareAppMessage方法實現(xiàn)頁面轉(zhuǎn)發(fā)。教學(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)教師重點負責(zé)課堂過程中的項目講解與項目實施。3.企業(yè)工程師在個別環(huán)節(jié)（如項目驗收等）參與雙師授課。4.企業(yè)工程師負責(zé)對項目完成情況給予工程化評價。5.學(xué)生助教負責(zé)協(xié)助教師開展課前及課后的拓展任務(wù)等。教學(xué)資源使用本書配套文檔、素材等資源教學(xué)評價

二、教學(xué)實施過程教學(xué)過程（一）課前1.以預(yù)習(xí)培養(yǎng)學(xué)生自主學(xué)習(xí)能力通過布置課前預(yù)習(xí)uni-appeasyinput輸入框增強組件、uni-appmovable-area可拖動區(qū)域組件、預(yù)覽圖片方法、上傳圖片方法及獲取圖片信息方法的基礎(chǔ)知識任務(wù)，鍛煉學(xué)生的自主學(xué)習(xí)能力，促進學(xué)生養(yǎng)成預(yù)習(xí)的學(xué)習(xí)習(xí)慣。2.以測驗促進課堂提質(zhì)增效通過布置預(yù)期內(nèi)容中輸入框增強組件、可拖動區(qū)域組件、預(yù)覽圖片方法、上傳圖片方法及獲取圖片信息方法知識測驗，教師可以更好地了解學(xué)生對本次任務(wù)基礎(chǔ)知識的學(xué)習(xí)需求和問題，總結(jié)提煉重難點知識，從而在課堂上進行更有針對性的講解和討論，提高教學(xué)質(zhì)量和效果。知識圖譜智能推薦拓展知識通過知識圖譜向?qū)W生推送更多關(guān)于輸入框增強組件、可拖動區(qū)域組件、預(yù)覽圖片方法、上傳圖片方法及獲取圖片信息方法的應(yīng)用場景，及使用技巧，學(xué)習(xí)與本任務(wù)相關(guān)的各種形式的配套資源，以點帶面，使學(xué)生知識儲備更全面，理解更透徹，從而為本任務(wù)準確實施奠定雄厚的知識基礎(chǔ)。教師活動學(xué)生活動1.發(fā)布任務(wù)。通過智能教學(xué)平臺發(fā)布輸入框增強組件、可拖動區(qū)域組件、預(yù)覽圖片方法、上傳圖片方法及獲取圖片信息方法相關(guān)的基礎(chǔ)知識預(yù)習(xí)任務(wù)。2.發(fā)布測驗。通過智能教學(xué)平臺發(fā)布輸入框增強組件、可拖動區(qū)域組件、預(yù)覽圖片方法、上傳圖片方法及獲取圖片信息方法相關(guān)的知識測驗。3.發(fā)布資料。通過智能教學(xué)平臺發(fā)布微課視頻、PPT課件、虛擬仿真、知識圖譜拓展閱讀等學(xué)習(xí)資源。4.批閱任務(wù)。分析知識測驗結(jié)果，梳理重難點知識。1.課前預(yù)習(xí)。通過微課和課件自主學(xué)習(xí)輸入框增強組件、可拖動區(qū)域組件、預(yù)覽圖片方法、上傳圖片方法及獲取圖片信息方法的相關(guān)基礎(chǔ)知識。2.基礎(chǔ)測驗。通過智能教學(xué)平臺完成教師發(fā)布的技術(shù)知識測驗。3.資料學(xué)習(xí)。學(xué)習(xí)教師推動的視頻、PPT、虛擬仿真、知識圖譜拓展閱讀等，有問題同學(xué)可通過平臺在留言板留言進行提問。（二）課中1.課程教學(xué)設(shè)計遵循學(xué)生的技能成長規(guī)律和學(xué)習(xí)規(guī)律，緊密結(jié)合制作社區(qū)首頁的實際工作過程，進行系統(tǒng)性的教學(xué)設(shè)計，構(gòu)造“情景項目導(dǎo)入、漸進任務(wù)分解、組隊任務(wù)執(zhí)行、多元技能測評、凝練項目總結(jié)、激發(fā)構(gòu)想延展”六步教學(xué)實施過程，確保學(xué)生能夠體驗真實的工作場景，通過循序漸進的任務(wù)開發(fā)，鍛煉學(xué)生制作社區(qū)首頁的實操技能。采用雙師教學(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)目標、關(guān)鍵代碼的名師解惑、課上教學(xué)設(shè)計、課下任務(wù)拓展等多個環(huán)節(jié)，從而循序漸進、滲透式、全方位地落實思政教育“進教材、進課堂、進頭腦”。借助本章的任務(wù)描述培養(yǎng)學(xué)生“共創(chuàng)美好交流社區(qū)，營造良好網(wǎng)絡(luò)環(huán)境”的意識，通過課堂中組織組隊任務(wù)實施，培養(yǎng)學(xué)生“團隊協(xié)作、互幫互助”的精神；通過關(guān)鍵代碼的實現(xiàn)，培養(yǎng)學(xué)生“注重細節(jié)，品質(zhì)至上”的工作態(tài)度；通過任務(wù)擴展，讓學(xué)生通過“二手”功能的實現(xiàn)，鼓勵用戶置換閑置物品，踐行綠色、循環(huán)、低碳的可持續(xù)發(fā)展理念。第1學(xué)時教學(xué)環(huán)節(jié)教師活動學(xué)生活動情景導(dǎo)入與任務(wù)描述1(10分鐘)1.情景導(dǎo)入。向?qū)W生演示常用的社交軟件如“微博”、“豆瓣”，進入到相應(yīng)平臺的“首頁”，點擊文章分類，選擇喜歡的文章，查看文章的轉(zhuǎn)發(fā)量，評論數(shù)和點贊數(shù)等。2.介紹任務(wù)。本任務(wù)將制作“啟嘉校園”項目的社區(qū)首頁，社區(qū)首頁主要展示用戶發(fā)布的文章列表，文章列表分為綜合推薦、我的關(guān)注、專業(yè)交流和表白墻四類。用戶可以在社區(qū)首頁搜索文章，也可以按類別以及文章的熱度和發(fā)布時間查看文章。同時，在社區(qū)首頁底部還有返回頂部和快捷發(fā)布按鈕。3.提出問題。根據(jù)任務(wù)介紹，制造社區(qū)首頁，你們的思路是什么？（學(xué)術(shù)回答問題后不做點評，讓學(xué)生帶著自己答案進行下面的學(xué)習(xí)，最終驗證自己思路。）1.操作體驗。觀看教師演示常用社交軟件的使用，重點關(guān)注首頁的功能，同時操作一下自己常用社交軟件，仔細了解這些類似軟件的首頁功能。2.了解任務(wù)。認真聽取教師介紹項目4的任務(wù)介紹，同時要明確我們要有共創(chuàng)美好交流社區(qū)、營造良好網(wǎng)絡(luò)環(huán)境的意識。3.回答問題。結(jié)合自己預(yù)習(xí)的知識，認真思考老師提出的問題，并舉手回答問題。知識儲備講解1(20分鐘)1.uni-app組件化知識講解。（1）組件化的思想。（2）組件化開發(fā)的好處。（3）組件化開發(fā)的應(yīng)用場景。2.uni-app組件化代碼演示。實例演示uni-app組件化，實例中包括一個計數(shù)器組件和一個頁面組件。計數(shù)器組件允許用戶遞增或遞減計數(shù)器的值，頁面組件使用計數(shù)器組件并在用戶單擊按鈕時將計數(shù)器的值發(fā)送到服務(wù)器。3.uni-app組件化升華點撥。easycom是uni-app中的一種組件注冊方式，在使用組件時不需要顯式地導(dǎo)入和注冊組件，而是通過easycom自動化機制，自動完成組件的注冊。1.聆聽知識講解uni-app組件化。認真聽取教師講解uni-app組件化思想及應(yīng)用組件化有何優(yōu)勢，并思考組件化的可應(yīng)用場景。2.觀看演示uni-app組件化應(yīng)用同步仿做。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進行提問。3.聆聽uni-app組件化升華點撥撰寫筆記。認真聽取教師對uni-app組件化的升華點撥講解，并將核心知識及重要知識記錄到課堂筆記當(dāng)中。知識儲備講解2(10分鐘)1.uni-easyinput輸入框組件知識講解。介紹uni-easyinput組件的主要功能和應(yīng)用場景。2.輸入框組件組件代碼演示。介紹uni-easyinput組件的幾種常見用法，同時代碼演示。1.聆聽知識講解輸入框組件。認真聽取教師講解輸入框組件的語法格式，屬性說明及使用方法，并思考如何應(yīng)用到實際項目當(dāng)中。2.觀看輸入框組件組件演示同步仿做。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進行提問。第2學(xué)時知識儲備講解3(15分鐘)1.發(fā)布討論。討論“同學(xué)們在使用社交軟件平臺時最常用的功能有哪些？”2.uni-app頁面轉(zhuǎn)發(fā)知識講解。代碼演示實現(xiàn)頁面轉(zhuǎn)發(fā)功能的方式有兩種：uni.share方法，和使用onShareAppMessage生命周期函數(shù)。3.頁面轉(zhuǎn)發(fā)升華點撥。兩種頁面轉(zhuǎn)發(fā)方法只能在微信小程序中使用其他平臺需要使用平臺提供的分享API實現(xiàn)。此外，在某些平臺中，分享功能可能需要進行授權(quán)，需要在代碼中添加相應(yīng)的授權(quán)邏輯。1.參與討論。積極參加討論，把自己答案提交到智慧教學(xué)平臺。2.觀看演示頁面轉(zhuǎn)發(fā)使用方法同步仿做。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進行提問。3.聆聽升華點撥撰寫筆記。認真聽取升華點撥講解，并將重點知識記錄到課堂筆記當(dāng)中。知識儲備講解4(15分鐘)1.隨堂提問。教師提問“通過預(yù)習(xí)，請回答一下圖片處理的幾種方法”。2.圖片處理方法知識講解代碼演示。代碼演示圖片處理的幾種方法。1.回答問題。認真會議所預(yù)習(xí)的知識，積極回答教師問題。2.觀看演示同步仿做。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進行提問。知識儲備講解5(15分鐘)1.movable-area可拖動區(qū)域組件知識講解。講解movable-area的屬性及方法。2.movable-area可拖動區(qū)域組件代碼演示。實例演示：，在一個1000rpx*1000rpx的可移動區(qū)域內(nèi)放置了4個顏色方塊。啟用了縮放功能?？梢酝ㄟ^拖動和縮放可移動區(qū)域來移動和縮放這些方塊。3.movable-area可拖動區(qū)域組件升華點撥。movable-area組件必須包含一個子組件，它將作為可移動區(qū)域的內(nèi)容。1.聆聽知識講解movable-area組件。認真聽取教師講解movable-area的屬性及方法，并思考如何應(yīng)用到實際項目當(dāng)中。2.觀看演示movable-area組件使用方法同步仿做。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進行提問。3.聆聽華點撥撰寫筆記。認真聽取升華點撥講解，并將重點知識記錄到課堂筆記當(dāng)中。第3學(xué)時任務(wù)實施邏輯分析1(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：新建名為“community”的Vue文件，搭建社區(qū)首頁結(jié)構(gòu)，通過單擊頁面底部標簽欄中的“社區(qū)”進入。2.任務(wù)講解。發(fā)布討論：“首頁結(jié)構(gòu)細化為幾部分較為合理，為什么？”。根據(jù)學(xué)生的討論結(jié)果最終決定分為四部分比較合理。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認真查看社區(qū)首頁設(shè)計圖。2.明確結(jié)構(gòu)劃分。聽取教師的任務(wù)講解，然后積極參加討論。明確結(jié)構(gòu)劃分。任務(wù)實施編碼實現(xiàn)1(35分鐘)1.分配小組。教師依據(jù)知識儲備階段的測驗結(jié)果，及學(xué)生組隊意愿，3人組成一隊，盡量讓強弱互補，形成互相幫扶小組。2.分配任務(wù)巡回指導(dǎo)。教師分配學(xué)生任務(wù)，實踐新建首頁文件，并用代碼實現(xiàn)出頁面結(jié)構(gòu)。學(xué)生完成任務(wù)時教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級內(nèi)向同學(xué)進行簡短講解點撥。3.任務(wù)效果點評對比幾組的最終實現(xiàn)效果，給出客觀評價，如有問題的及時糾正。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團隊。2.任務(wù)實施。認真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過智慧教學(xué)平臺向其他組進行求助提問，也可到在線資源中觀看視頻進行學(xué)習(xí)。3.展示效果各組派代表展示自己的最終效果，等待教師點評，如有問題及時改正。避免給下面的任務(wù)實現(xiàn)留下隱患。第4學(xué)時任務(wù)實施邏輯分析2(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：制作搜索區(qū)域。分析搜索區(qū)域的結(jié)構(gòu)，分為搜索區(qū)域由啟嘉校園Logo和搜索框兩部分。2.任務(wù)講解。教師引導(dǎo)學(xué)生思考：因為搜索區(qū)域，在多個頁面都有顯示，所以就會用到組件化方法。把搜索區(qū)域自定義為組件。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認真查看分析設(shè)計圖。2.明確步驟。跟隨教師講解的思路，對照設(shè)計圖，思考如何把搜索區(qū)域自定義為組件。任務(wù)實施編碼實現(xiàn)2(35分鐘)1.分配小組。分組完成任務(wù)，小組成員不變繼續(xù)完成本次任務(wù)。2.分配任務(wù)巡回指導(dǎo)。教師分配學(xué)生任務(wù)，自定義搜索框組件，并使用它。學(xué)生完成任務(wù)時教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級內(nèi)向同學(xué)進行簡短講解點撥。3.任務(wù)效果點評對比幾組的最終實現(xiàn)效果，給出客觀評價，如有問題及時糾正。（重點查看各組是否使用了知識儲備中的uni-easyinput輸入框增強組件，引導(dǎo)學(xué)生活學(xué)活用，培養(yǎng)其對知識的實際應(yīng)用能力）。1.組建小組。保持小組成員不變，繼續(xù)在原來任務(wù)基礎(chǔ)上完成本次任務(wù)。2.任務(wù)實施。認真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過智慧教學(xué)平臺向其他組進行求助提問，也可到在線資源中觀看視頻進行學(xué)習(xí)。3.展示效果各組派代表展示自己的最終效果，等待教師點評，如有問題及時改正。避免給下面的任務(wù)實現(xiàn)留下隱患。第5學(xué)時任務(wù)實施邏輯分析3(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：制作選項卡區(qū)域。選項卡切換時，文章列表也會進行相應(yīng)更新。2.任務(wù)講解。教師引導(dǎo)學(xué)生思考：如何實現(xiàn)選項卡切換時，文章列表也會進行相應(yīng)更新。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認真查看分析設(shè)計圖。2.明確思路。跟隨教師講解的思路，根據(jù)任務(wù)要求，思考在把選項卡區(qū)域定義為組件后如何實現(xiàn)選項卡切換時，文章列表也會進行相應(yīng)更新。任務(wù)實施編碼實現(xiàn)3(35分鐘)1.知識講解。（1）講解父子組件通信知識。（2）案例實現(xiàn)父子組件通信。2.分配小組。分組完成任務(wù)，小組成員不變繼續(xù)完成本次任務(wù)。3.巡回指導(dǎo)。教師分配學(xué)生任務(wù)，完成選項卡區(qū)域的制作。學(xué)生完成任務(wù)時教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級內(nèi)向同學(xué)進行簡短講解點撥。4.任務(wù)效果點評對比幾組的最終實現(xiàn)效果，給出客觀評價，如有問題及時糾正。1.聆聽知識講解。認真聽取教師講解父子組件通信的知識，并思考如何應(yīng)用到實際項目當(dāng)中。2.組建小組。保持小組成員不變，繼續(xù)在原來任務(wù)基礎(chǔ)上完成本次任務(wù)。3.任務(wù)實施。認真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺向其他組進行求助提問，也可到在線資源中觀看視頻進行學(xué)習(xí)。3.展示效果各組派代表展示自己的最終效果，等待教師點評，如有問題及時改正。避免給下面的任務(wù)實現(xiàn)留下隱患。第6學(xué)時任務(wù)實施邏輯分析4(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：制作文章列表區(qū)域。2.任務(wù)講解。教師講解任務(wù)完成的思路，文章卡片組件按內(nèi)容關(guān)聯(lián)度可劃分為文章發(fā)布信息、文章內(nèi)容、圖片列表和文章互動數(shù)據(jù)四部分。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認真查看分析設(shè)計圖。2.明確結(jié)構(gòu)劃分。跟隨教師講解的思路，根據(jù)任務(wù)要求，明確任務(wù)劃分。任務(wù)實施編碼實現(xiàn)4(35分鐘)1.分配小組。分組完成任務(wù)，小組成員不變繼續(xù)完成本次任務(wù)。2.分配任務(wù)巡回指導(dǎo)。教師分配學(xué)生任務(wù)，自定義文章卡片組件，并使用它。學(xué)生完成任務(wù)時教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級內(nèi)向同學(xué)進行簡短講解點撥。3.任務(wù)效果點評對比幾組的最終實現(xiàn)效果，給出客觀評價，如有問題及時糾正。（重點查看各組是如何實現(xiàn)當(dāng)圖片數(shù)量為1時，圖片寬度占包裹容器的100%；當(dāng)圖片數(shù)量大于1時，圖片列表為九宮格布局）。1.組建小組。保持小組成員不變，繼續(xù)在原來任務(wù)基礎(chǔ)上完成本次任務(wù)。2.任務(wù)實施。認真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過智慧教學(xué)平臺向其他組進行求助提問，也可到在線資源中觀看視頻進行學(xué)習(xí)。3.展示效果各組派代表展示自己的最終效果，等待教師點評，如有問題及時改正。避免給下面的任務(wù)實現(xiàn)留下隱患。第7學(xué)時任務(wù)實施邏輯分析5(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：制作懸浮按鈕，懸浮按鈕區(qū)域由返回頂部按鈕和快捷發(fā)布按鈕組成，在頁面中置頂顯示。返回頂部按鈕默認隱藏，用戶下滑屏幕時顯示；快捷發(fā)布按鈕始終顯示，且可拖動改變位置2.任務(wù)講解。教師講解任務(wù)完成的步驟，必要的步驟進行代碼演示。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認真查看設(shè)計圖。2.明確步驟。跟隨教師講解的思路，對照設(shè)計圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時可到線上資源進行學(xué)習(xí)。任務(wù)實施編碼實現(xiàn)5(35分鐘)1.分配小組。分組完成任務(wù)，小組成員不變繼續(xù)完成本次任務(wù)。2.分配任務(wù)巡回指導(dǎo)。教師分配學(xué)生任務(wù)，學(xué)生完成任務(wù)時教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級內(nèi)向同學(xué)進行簡短講解點撥。3.任務(wù)效果點評對比幾組的最終實現(xiàn)效果，給出客觀評價，如有問題及時糾正。1.組建小組。保持小組成員不變，繼續(xù)在原來任務(wù)基礎(chǔ)上完成本次任務(wù)。2.任務(wù)實施。認真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過智慧教學(xué)平臺向其他組進行求助提問，也可到在線資源中觀看視頻進行學(xué)習(xí)。3.展示效果各組派代表展示自己的最終效果，等待教師點評，如有問題及時改正。避免給下面的任務(wù)實現(xiàn)留下隱患。第8學(xué)時任務(wù)測試(35分鐘)1.任務(wù)介紹。教師介紹本次課要進行測試的測試任務(wù)，UI頁面測試、功能測試（選項卡正常切換、發(fā)布按鈕、返回頂部按鈕等功能）。2.知識講解。教師介紹測試的概念，并對照企業(yè)測試流程講解，測試要按照需求分析、計劃、用例、執(zhí)行、總結(jié)，五步流程進行測試。3.情景故事。教師播放測試相關(guān)情景動畫，指明測試工作的重要性，提高學(xué)生對測試工作的責(zé)任心。4.需求分析講解。教師講解需求分析的方法，并以部分需求說明書為例，演示如何正確進行需求分析，提取測試功能點。5.分配小組。小組成員不變繼續(xù)完成本次測試任務(wù)6.制定計劃講解。教師引導(dǎo)學(xué)生小組內(nèi)，要交叉進行測試，如A同學(xué)測試B同學(xué)的項目，測試之前先制定自己的測試計劃并形成文字。7.編寫用例講解。教師講解編寫測試用例的技巧，并以部分功能為例進行演示。8.執(zhí)行用例講解。教師講解執(zhí)行用例注意要點。9.總結(jié)報