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

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