Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架） 教案-教學(xué)設(shè)計(jì) 任務(wù)3 制作個(gè)人資料頁

教學(xué)整體設(shè)計(jì)任務(wù)名稱任務(wù)3制作個(gè)人資料頁開課學(xué)期第3學(xué)期課程類型專業(yè)核心課授課班級授課學(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)方法。教學(xué)目標(biāo)素質(zhì)目標(biāo)1.通過學(xué)習(xí)使用正則表達(dá)式完成手機(jī)號、微信號等信息的驗(yàn)證方法，培養(yǎng)學(xué)習(xí)者發(fā)現(xiàn)問題、分析問題、解決問題的能力。2.通過實(shí)現(xiàn)“用戶擴(kuò)展資料區(qū)域”中用戶信息顯示的功能，強(qiáng)化學(xué)習(xí)者個(gè)人信息保護(hù)意識。3.通過鞏固拓展練習(xí)，培養(yǎng)學(xué)習(xí)者腳踏實(shí)地、躬身力行的實(shí)踐精神。知識目標(biāo)1.掌握uni-apppicker滾動選擇器組件的使用。2.掌握uni-appinput單行輸入框組件的使用。3.掌握uni-appimage圖片組件的使用。4.掌握uni.showToast消息提示方法的使用。5.掌握uni-app頁面跳轉(zhuǎn)方法的使用。6.掌握正則表達(dá)式的使用。能力目標(biāo)1.能夠使用picker組件完成滾動選擇性別。2.能夠使用input組件完成內(nèi)容的輸入。3.能夠使用image組件完成圖像的展示及縮放、裁剪等操作。4.能夠使用uni.showToast方法完成消息提示。5.能夠使用uni-app頁面跳轉(zhuǎn)方法實(shí)現(xiàn)頁面間跳轉(zhuǎn)。6.能夠使用正則表達(dá)式完成手機(jī)號、微信號等信息的驗(yàn)證。學(xué)情分析知識基礎(chǔ)1.已掌握頁面路由和自定義導(dǎo)航欄的配置。2.已掌握uni-appview視圖容器組件及彈出層組件使用方法。3.已掌握uni-apptext基礎(chǔ)內(nèi)容組件和擴(kuò)展組件的使用方法。技能基礎(chǔ)1.已具備使用MasterGo查看設(shè)計(jì)圖標(biāo)注信息。2.已具備使用uni-app視圖容器組件搭建靜態(tài)頁面結(jié)構(gòu)。3.已具備使用Sass預(yù)處理器修飾頁面樣式。學(xué)習(xí)特點(diǎn)與訴求1.完成項(xiàng)目1和項(xiàng)目2后，學(xué)生對啟嘉校園開發(fā)項(xiàng)目產(chǎn)生了極大興趣，具有很好的學(xué)習(xí)積極性。2.學(xué)生的自主學(xué)習(xí)能力有所欠缺，下發(fā)的在線學(xué)習(xí)資源點(diǎn)擊率偏低。教學(xué)重點(diǎn)1.uni-apppicker滾動選擇器組件、input單行輸入框組件使用方法。2.消息提示方法及頁面跳轉(zhuǎn)方法的使用。教學(xué)難點(diǎn)1.根據(jù)項(xiàng)目需求，靈活準(zhǔn)確設(shè)置滾動選擇器組件樣式。2.準(zhǔn)確應(yīng)用正則表達(dá)式的不同方法進(jìn)行輸入內(nèi)容正確性驗(yàn)證。教學(xué)策略教學(xué)方式方法1.任務(wù)驅(qū)動教學(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ì)融入思政的課程評價(jià)體系并開展多元評價(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é)對項(xiàng)目完成情況給予工程化評價(jià)。5.學(xué)生助教負(fù)責(zé)協(xié)助教師開展課前及課后的拓展任務(wù)等。教學(xué)資源使用本書配套文檔、素材等資源教學(xué)評價(jià)

二、教學(xué)實(shí)施過程教學(xué)過程（一）課前1.以預(yù)習(xí)培養(yǎng)學(xué)生自主學(xué)習(xí)能力通過布置課前預(yù)習(xí)uni-apppicker滾動選擇器組件、input單行輸入框組件、image圖片組件基礎(chǔ)知識的任務(wù)，鍛煉學(xué)生的自主學(xué)習(xí)能力，促進(jìn)學(xué)生養(yǎng)成預(yù)習(xí)的學(xué)習(xí)習(xí)慣。2.以測驗(yàn)促進(jìn)課堂提質(zhì)增效通過布置預(yù)期內(nèi)容中滾動選擇器組件、單行輸入框組件、圖片組件知識測驗(yàn)，教師可以更好地了解學(xué)生對本次任務(wù)基礎(chǔ)知識的學(xué)習(xí)需求和問題，總結(jié)提煉重難點(diǎn)知識，從而在課堂上進(jìn)行更有針對性的講解和討論，提高教學(xué)質(zhì)量和效果。知識圖譜智能推薦拓展知識通過知識圖譜向?qū)W生推送更多關(guān)于滾動選擇器組件、input單行輸入框組件、image圖片組件的應(yīng)用場景，及應(yīng)用技巧，學(xué)習(xí)相關(guān)論文及實(shí)戰(zhàn)項(xiàng)目中列舉的拓展使用方法，以點(diǎn)帶面，使學(xué)生知識儲備更全面，理解更透徹，從而為本任務(wù)準(zhǔn)確實(shí)施奠定雄厚的知識基礎(chǔ)。教師活動學(xué)生活動1.發(fā)布任務(wù)。通過職教云發(fā)布滾動選擇器組件、單行輸入框組件、圖片組件基礎(chǔ)知識預(yù)習(xí)任務(wù)。2.發(fā)布測驗(yàn)。通過職教云發(fā)布滾動選擇器組件、單行輸入框組件、圖片組件知識測驗(yàn)。3.發(fā)布資料。通過職教云發(fā)布微課視頻、PPT課件、虛擬仿真、知識圖譜拓展閱讀等學(xué)習(xí)資源。4.批閱任務(wù)。分析知識測驗(yàn)結(jié)果，梳理重難點(diǎn)知識。1.課前預(yù)習(xí)。通過微課和課件自主學(xué)習(xí)滾動選擇器組件、單行輸入框組件、圖片組件相關(guān)基礎(chǔ)知識。2.基礎(chǔ)測驗(yàn)。通過職教云完成滾動選擇器組件、單行輸入框組件、圖片組件知識測驗(yàn)。3.資料學(xué)習(xí)。學(xué)習(xí)教師推動的視頻、PPT、虛擬仿真、知識圖譜拓展閱讀等，有問題同學(xué)可通過平臺在留言板留言進(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í)行、多元技能測評、凝練項(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)勢，結(jié)合利用現(xiàn)代信息技術(shù)平臺“職教云”輔助教學(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é)作、互幫互助”的精神；通過對刪除功能關(guān)鍵代碼的實(shí)現(xiàn)，培養(yǎng)學(xué)生“滿足用戶需求，提升軟件價(jià)值”的職業(yè)素養(yǎng)；通過任務(wù)擴(kuò)展，讓學(xué)生了解圖片存儲的新技術(shù)、最優(yōu)解決方案的選擇，培養(yǎng)學(xué)生踐行“技術(shù)為民，服務(wù)社會”的理念。第1學(xué)時(shí)教學(xué)環(huán)節(jié)教師活動學(xué)生活動情景導(dǎo)入與任務(wù)描述1(10分鐘)1.情景導(dǎo)入。通過演示小藝同學(xué)登錄QQ以后，進(jìn)入個(gè)人資料頁面，進(jìn)行修改頭像、昵稱等信息，引出今天的任務(wù)內(nèi)容。并現(xiàn)場引導(dǎo)同學(xué)，登錄自己的QQ賬號，進(jìn)入個(gè)人資料頁面，進(jìn)行信息修改。2.發(fā)布問題。個(gè)人資料頁面主要功能都包括哪些？3.介紹任務(wù)。本任務(wù)將制作“啟嘉校園”項(xiàng)目的個(gè)人資料頁面，該頁面主要用于修改用戶基本信息，包括用戶的頭像、昵稱、個(gè)性簽名、性別、手機(jī)號和微信號。個(gè)人資料往往涉及用戶多項(xiàng)個(gè)人信息，開發(fā)者在開發(fā)過程中應(yīng)充分關(guān)注用戶信息安全。1.操作體驗(yàn)。認(rèn)真聆聽教師對小藝同學(xué)個(gè)人資料頁面的修改過程，同時(shí)在教師的引導(dǎo)下，登錄自己的QQ賬號，進(jìn)行信息修改。2.回答問題。通過自主操作體驗(yàn)，回答個(gè)人資料頁面主要功能都包括哪些。3.了解任務(wù)。認(rèn)真聽取教師介紹項(xiàng)目3的任務(wù)介紹，同時(shí)思考，個(gè)人信息頁面哪些信息涉及用戶隱私，需要更加注重用戶信息安全。知識儲備講解1(35分鐘)1.picker組件知識講解。（1）實(shí)現(xiàn)原理講解。（2）通過流程圖或者思維導(dǎo)圖介紹實(shí)現(xiàn)邏輯，解決重難點(diǎn)問題。2.picker組件代碼演示。picker組件的使用比較簡單，只需在頁面的<template>中添加picker組件并設(shè)置相應(yīng)的屬性，如mode、range等。在<script>中定義相應(yīng)的數(shù)據(jù)和方法。進(jìn)行現(xiàn)場演示。3.picker組件升華點(diǎn)撥。picker和picker-view都是非常有用的組件，可以為uni-app應(yīng)用程序創(chuàng)建交互式選擇器。選擇哪個(gè)組件取決于應(yīng)用程序的需求，如果只需要選擇單個(gè)值可以使用picker；如果需要選擇多個(gè)值或創(chuàng)建復(fù)雜的交互式界面，則應(yīng)選擇picker-view。4.input組件知識講解。該組件在移動端應(yīng)用時(shí)常見的屬性及事件如下：1.confirm-type屬性與confirm-hold屬性。2.@input事件。3.@confirm事件。5.input組件代碼演示。6.input組件升華點(diǎn)撥。其實(shí)v-model雙向綁定針對input控件，內(nèi)部也是通過@input事件實(shí)現(xiàn)的。1.聆聽知識講解picker組件。認(rèn)真聽取教師講解picker組件的語法格式，屬性說明及使用方法，并思考如何應(yīng)用到實(shí)際項(xiàng)目當(dāng)中。2.觀看演示picker組件使用方法同步仿做。認(rèn)真觀看教師演示，并進(jìn)行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進(jìn)行提問。3.聆聽picker組件升華點(diǎn)撥筆記撰寫。認(rèn)真聽取教師對picker組件部分的升華點(diǎn)撥講解，并將核心知識及重要知識記錄到課堂筆記當(dāng)中。4.聆聽知識講解input組件。認(rèn)真聽取教師講解input組件的語法格式，屬性說明及使用方法，并思考如何應(yīng)用到實(shí)際項(xiàng)目當(dāng)中。5.觀看input組件演示同步仿做。認(rèn)真觀看教師演示，并進(jìn)行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進(jìn)行提問。6.聆聽input組件升華點(diǎn)撥筆記撰寫。認(rèn)真聽取教師對input組件部分的升華點(diǎn)撥講解，并將核心知識及重要知識記錄到課堂筆記當(dāng)中。第2學(xué)時(shí)教學(xué)環(huán)節(jié)教師活動學(xué)生活動情景導(dǎo)入與任務(wù)描述2(10分鐘)1.引入提問。image組件有哪些屬性？2.創(chuàng)設(shè)情境。以智慧職教icve微信小程序中圖片顯示為例，引出今天所學(xué)知識。3.介紹任務(wù)。1.回答提問。認(rèn)真思考并回答教師提問。2.體驗(yàn)情境。通過手機(jī)進(jìn)入智慧職教MOOC微信小程序，觀察圖標(biāo)圖片的清晰度。3.了解任務(wù)。認(rèn)真聽取教師介紹本節(jié)課的任務(wù)介紹，同時(shí)思考，手機(jī)頁面如何確保圖片顯示清晰度。知識儲備講解2(35分鐘)1.image組件知識講解。src屬性，mode屬性，lazy-load屬性，show-menu-by-longpress屬性，bindload和binderror事件處理。2.image組件代碼演示?，F(xiàn)場演示image組件的每個(gè)屬性使用方法。3.image組件升華點(diǎn)撥。在移動端使用image組件時(shí)，需要注意以下幾點(diǎn)：圖片大小和質(zhì)量：移動設(shè)備的屏幕尺寸和分辨率相對較小，因此需要對圖片大小和質(zhì)量進(jìn)行適當(dāng)?shù)膬?yōu)化，以提高頁面加載速度和用戶體驗(yàn)。圖片路徑：在移動端，圖片路徑建議使用相對路徑或CDN地址，避免使用本地絕對路徑，以確保圖片能夠正確加載。圖片緩存：移動設(shè)備的存儲空間有限，因此需要合理地管理圖片緩存，避免占用過多的存儲空間。圖片展示模式：在移動端，由于屏幕尺寸和分辨率的限制，需要根據(jù)具體場景選擇合適的圖片展示模式，以確保圖片能夠正確展示并滿足用戶需求。1.聆聽知識講解image組件。認(rèn)真聽取教師講解image組件的語法格式，屬性說明及使用方法，并思考如何應(yīng)用到實(shí)際項(xiàng)目當(dāng)中。2.觀看演示image組件使用方法同步仿做。認(rèn)真觀看教師演示，并進(jìn)行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進(jìn)行提問。3.聆聽image組件升華點(diǎn)撥筆記撰寫。認(rèn)真聽取教師對image組件部分的升華點(diǎn)撥講解，并將核心知識及重要知識記錄到課堂筆記當(dāng)中。第3學(xué)時(shí)教學(xué)環(huán)節(jié)教師活動學(xué)生活動情景導(dǎo)入與任務(wù)描述3(10分鐘)1.發(fā)布討論。你知道哪些uni-app中的消息提示框？創(chuàng)設(shè)情境。以微信登錄中用戶名或密碼輸入錯(cuò)誤的消息提示框?yàn)槔?，引出今天所學(xué)知識。3.介紹任務(wù)。1.回答討論。認(rèn)真思考并回答討論。2.體驗(yàn)情境。通過登錄微信頁面輸入錯(cuò)誤的用戶名或密碼觀察消息提示框。3.了解任務(wù)。認(rèn)真聽取教師介紹本節(jié)課的任務(wù)介紹，同時(shí)思考，如何解決提示框的使用過程中可能會受到原生端的限制和差異的問題。知識儲備講解3(35分鐘)1.uni-app常用提示框知識講解。showToast消息提示框、showLoading加載提示框、showModal模態(tài)框、showActionSheet列表選擇提示框。2.uni-app常用提示框代碼演示?，F(xiàn)場演示常用提示框組件的每個(gè)屬性使用方法。3.uni-app常用提示框升華點(diǎn)撥。在uni-app中，提示框的使用可能會受到原生端的限制和差異，需要根據(jù)實(shí)際情況進(jìn)行調(diào)整和處理。1.聆聽知識講解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.聆聽uni-app常用提示框升華點(diǎn)撥筆記撰寫。認(rèn)真聽取教師對uni-app常用提示框部分的升華點(diǎn)撥講解，并將核心知識及重要知識記錄到課堂筆記當(dāng)中。第4學(xué)時(shí)教學(xué)環(huán)節(jié)教師活動學(xué)生活動情景導(dǎo)入與任務(wù)描述4(10分鐘)1.發(fā)布討論。你知道哪些頁面跳轉(zhuǎn)的情況呢？創(chuàng)設(shè)情境。以編寫的簡短小案例演示頁面跳轉(zhuǎn)的過程。3.介紹任務(wù)。1.回答討論。認(rèn)真思考并回答討論。2.體驗(yàn)情境。觀看頁面跳轉(zhuǎn)過程。3.了解任務(wù)。認(rèn)真聽取教師介紹本節(jié)課的任務(wù)介紹，同時(shí)思考，如何解決頁面跳轉(zhuǎn)返回可能會被原生端屏蔽或者顯示異常的問題。知識儲備講解4(35分鐘)1.uni-app頁面跳轉(zhuǎn)知識講解。uni.navigateTo方法、uni.redirectTo方法、uni.navigateBack方法2.uni-app頁面跳轉(zhuǎn)代碼演示?，F(xiàn)場演示頁面跳轉(zhuǎn)不同方法的使用方法。3.uni-app頁面跳轉(zhuǎn)升華點(diǎn)撥。頁面跳轉(zhuǎn)返回時(shí)需要注意返回的頁面層數(shù)，如果delta屬性大于當(dāng)前頁面棧的長度，將無法返回到目標(biāo)頁面。頁面跳轉(zhuǎn)返回時(shí)可以使用uni.getStorageSync方法獲取之前存儲的數(shù)據(jù)，以便進(jìn)行頁面跳轉(zhuǎn)后的操作。在一些情況下，頁面跳轉(zhuǎn)返回可能會被原生端屏蔽或者顯示異常，需要根據(jù)實(shí)際情況進(jìn)行調(diào)整和處理。4.發(fā)布知識儲備測驗(yàn)。在職教云平臺發(fā)布測驗(yàn)，對任務(wù)3中的所有知識儲備知識進(jìn)行測驗(yàn)。5.升華點(diǎn)撥。根據(jù)同學(xué)測驗(yàn)情況，對易錯(cuò)易混淆難掌握知識進(jìn)行升華點(diǎn)撥。1.聆聽知識講解uni-app頁面跳轉(zhuǎn)組件。認(rèn)真聽取教師講解uni-app頁面跳轉(zhuǎn)的不同方法及使用方法，并思考如何應(yīng)用到實(shí)際項(xiàng)目當(dāng)中。2.觀看演示uni-app頁面跳轉(zhuǎn)方法使用方法同步仿做。認(rèn)真觀看教師演示，并進(jìn)行同步仿做，遇到問題可在教師巡回指導(dǎo)期間進(jìn)行提問。3.聆聽uni-app頁面跳轉(zhuǎn)升華點(diǎn)撥筆記撰寫。認(rèn)真聽取教師對uni-app頁面跳轉(zhuǎn)部分的升華點(diǎn)撥講解，并將核心知識及重要知識記錄到課堂筆記當(dāng)中。參加測驗(yàn)。在職教云平臺參加測驗(yàn)。5.查漏補(bǔ)缺。認(rèn)真聽取教師升華點(diǎn)撥，必要知識點(diǎn)記錄到課堂筆記中。第5學(xué)時(shí)教學(xué)環(huán)節(jié)教師活動學(xué)生活動任務(wù)實(shí)施邏輯分析1(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：新建頁面文件，搭建個(gè)人資料頁結(jié)構(gòu)，實(shí)現(xiàn)跳轉(zhuǎn)到個(gè)人資料頁。2.任務(wù)講解。教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。主要對照個(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.明確步驟。跟隨教師講解的思路，對照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)1(35分鐘)1.分配小組。教師依據(jù)知識儲備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級內(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)無法解決，可向教師提問，或者通過職教云平臺向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第6學(xué)時(shí)教學(xué)環(huán)節(jié)教師活動學(xué)生活動任務(wù)實(shí)施邏輯分析2(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：制作用戶基本資料區(qū)域，搭建用戶基本資料區(qū)域結(jié)構(gòu)，實(shí)現(xiàn)用戶基本資料區(qū)域效果。2.任務(wù)講解。教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認(rèn)真查看用戶基本資料頁設(shè)計(jì)圖。2.明確步驟。跟隨教師講解的思路，對照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)2(35分鐘)1.分配小組。教師依據(jù)知識儲備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級內(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)無法解決，可向教師提問，或者通過職教云平臺向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第7學(xué)時(shí)教學(xué)環(huán)節(jié)教師活動學(xué)生活動任務(wù)實(shí)施邏輯分析3(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：制作用戶擴(kuò)展資料區(qū)域，用戶擴(kuò)展資料區(qū)域可劃分為用戶ID、用戶性別、用戶手機(jī)號、用戶微信號及保存按鈕五個(gè)部分，每個(gè)部分獨(dú)占一行且寬度相同距左右兩邊有固定的間距。2.任務(wù)講解。教師講解任務(wù)完成的步驟，必要的步驟進(jìn)行代碼演示。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認(rèn)真查看用戶擴(kuò)展資料頁設(shè)計(jì)圖。2.明確步驟。跟隨教師講解的思路，對照設(shè)計(jì)圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時(shí)可到線上資源進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)3(35分鐘)1.分配小組。根據(jù)知識儲備階段的測驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。2.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問題，可在班級內(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)無法解決，可向教師提問，或者通過職教云平臺向其他組進(jìn)行求助提問，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第8學(xué)時(shí)教學(xué)環(huán)節(jié)教師活動學(xué)生活動第8學(xué)時(shí)任務(wù)測試(35分鐘)1.任務(wù)介紹。教師介紹本次課要進(jìn)行測試的測試任務(wù)，UI頁面測試、功能測試（頁面跳轉(zhuǎn)、修改、保存等按鈕功能）。2.知識講解。教師介紹測試的概念，并對照企業(yè)測試流程講解，測試要按照需求分析、計(jì)劃、用例、執(zhí)行、總結(jié)，五步流程進(jìn)行測試。3.情景故事。教師播放測試相關(guān)情景動畫，指明測試工作的重要性，提高學(xué)生對測試工作的責(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)告講解。教師講解編