Web前端應(yīng)用開發(fā)項目式教程（基于uni-app框架） 教案全套-教學設(shè)計 高秀艷 任務(wù)1-11 制作個人中心頁-項目部署與發(fā)布

教學整體設(shè)計任務(wù)名稱任務(wù)1制作個人中心頁開課學期第3學期課程類型專業(yè)核心課授課班級授課學時4學時授課地點研討型智慧實訓室授課形式理實一體教學內(nèi)容本任務(wù)將實現(xiàn)“啟嘉校園”項目的項目開發(fā)準備工作，包括產(chǎn)品需求文檔分析、頁面設(shè)計圖分析、搭建前端開發(fā)環(huán)境、后端開發(fā)環(huán)境、創(chuàng)建項目開發(fā)目錄。教學目標素質(zhì)目標1.通過搭建項目開發(fā)環(huán)境，增強學習者的系統(tǒng)思維能力，養(yǎng)成統(tǒng)籌全局的習慣。2.通過學習MasterGo的使用，增強學習者合理使用工具和技術(shù)的能力，養(yǎng)成優(yōu)化方法，提高工作效率的習慣。知識目標1.了解產(chǎn)品需求文檔的作用。2.了解頁面設(shè)計圖的作用。3.了解字體圖標的作用。4.了解接口文檔的作用。5.掌握搭建前端開發(fā)環(huán)境的方法。6.掌握搭建后端開發(fā)環(huán)境的方法。能力目標1.能夠使用MasterGo查看項目設(shè)計圖。2.能夠在Windows操作系統(tǒng)中安裝HBuilderX。3.能夠在Windows操作系統(tǒng)中安裝微信開發(fā)者工具。4.能夠使用HBuilderX創(chuàng)建uni-app項目。5.能夠使用HBuilderX運行項目預(yù)覽效果。學情分析知識基礎(chǔ)1.已掌握微信小程序相關(guān)知識。2.已掌握軟件測試相關(guān)知識。技能基礎(chǔ)1.已具備微信小程序開發(fā)能力。2.已具備手機端小程序軟件測試能力。學習特點與訴求1.學生對于真實項目開發(fā)具有濃厚興趣，喜歡具有挑戰(zhàn)性的項目內(nèi)容。2.學生比較喜歡實踐類教學方法，理論教學超過35分鐘，就會注意力不集中。教學重點1.前端、后端環(huán)境搭建方法2.需求文檔分析方法。教學難點1.靈活高效搭建前端、后端環(huán)境。2.準確對需求文檔進行分析。教學策略教學方式方法1.任務(wù)驅(qū)動教學。2.組隊討論教學。3.啟發(fā)式教學。4.理實一體化教學。教學團隊1.企業(yè)工程師與校內(nèi)專任教師共同開發(fā)課程項目、構(gòu)造任務(wù)場景、設(shè)計教學實施過程、設(shè)計融入思政的課程評價體系并開展多元評價。2.校內(nèi)教師重點負責課堂過程中的項目講解與項目實施。3.企業(yè)工程師在個別環(huán)節(jié)（如項目驗收等）參與雙師授課。4.企業(yè)工程師負責對項目完成情況給予工程化評價。5.學生助教負責協(xié)助教師開展課前及課后的拓展任務(wù)等。教學資源使用本書配套文檔、素材等資源教學評價

二、教學實施過程教學過程（一）課前1.以預(yù)習培養(yǎng)學生自主學習能力通過布置課前預(yù)習產(chǎn)品需求文檔分析、查看頁面設(shè)計圖、查看接口文檔的任務(wù)，鍛煉學生的自主學習能力，促進學生養(yǎng)成預(yù)習的學習習慣。2.以測驗促進課堂提質(zhì)增效通過布置預(yù)期內(nèi)容中需求分析分析、頁面設(shè)計圖分析、接口文檔分析知識測驗，教師可以更好地了解學生對本次任務(wù)基礎(chǔ)知識的學習需求和問題，總結(jié)提煉重難點知識，從而在課堂上進行更有針對性的講解和討論，提高教學質(zhì)量和效果。知識圖譜智能推薦拓展知識通過知識圖譜向?qū)W生推送更多關(guān)于本節(jié)所學知識的應(yīng)用場景，及應(yīng)用技巧，學習相關(guān)論文及實戰(zhàn)項目中列舉的拓展使用方法，以點帶面，使學生知識儲備更全面，理解更透徹，從而為本任務(wù)準確實施奠定雄厚的知識基礎(chǔ)。教師活動學生活動1.發(fā)布任務(wù)。通過職教云發(fā)布預(yù)習任務(wù)。2.發(fā)布測驗。通過職教云發(fā)布知識測驗。3.發(fā)布資料。通過職教云發(fā)布微課視頻、PPT課件、虛擬仿真、知識圖譜拓展閱讀等學習資源。4.批閱任務(wù)。分析知識測驗結(jié)果，梳理重難點知識。1.課前預(yù)習。通過微課和課件自主學習基礎(chǔ)知識。2.基礎(chǔ)測驗。通過職教云完成知識測驗。3.資料學習。學習教師推動的視頻、PPT、虛擬仿真、知識圖譜拓展閱讀等，有問題同學可通過平臺在留言板留言進行提問。（二）課中1.課程教學設(shè)計遵循學生的技能成長規(guī)律和學習規(guī)律，緊密結(jié)合制作個人資料頁的實際工作過程，進行系統(tǒng)性的教學設(shè)計，構(gòu)造“情景項目導入、漸進任務(wù)分解、組隊任務(wù)執(zhí)行、多元技能測評、凝練項目總結(jié)、激發(fā)構(gòu)想延展”六步教學實施過程，確保學生能夠體驗真實的工作場景，通過循序漸進的任務(wù)開發(fā)，鍛煉學生制作個人資料頁的實操技能和工程素養(yǎng)。采用雙師教學、頭腦風暴、組隊開發(fā)、學生助教輔導等特色環(huán)節(jié)組織教學，充分發(fā)揮企業(yè)工程師、教師和學生的優(yōu)勢，結(jié)合利用現(xiàn)代信息技術(shù)平臺“職教云”輔助教學，激發(fā)教師授課激情、點燃學生學習熱情、提高課堂授課效果。2.思政教學設(shè)計本課程的思政教學設(shè)計滲透于每個任務(wù)的描述、素養(yǎng)目標、關(guān)鍵代碼的名師解惑、課上教學設(shè)計、課下任務(wù)拓展等多個環(huán)節(jié)，從而循序漸進、滲透式、全方位地落實思政教育“進教材、進課堂、進頭腦”。借助本章的任務(wù)描述向?qū)W生傳遞“多學習新技術(shù)，讓軟件生命力更持久”的思想，讓學生養(yǎng)成“持續(xù)發(fā)展、終身學習”的習慣；通過課堂中組織組隊任務(wù)實施，培養(yǎng)學生“團隊協(xié)作、互幫互助”的精神；通過對刪除功能關(guān)鍵代碼的實現(xiàn)，培養(yǎng)學生“滿足用戶需求，提升軟件價值”的職業(yè)素養(yǎng)；通過任務(wù)擴展，讓學生了解圖片存儲的新技術(shù)、最優(yōu)解決方案的選擇，培養(yǎng)學生踐行“技術(shù)為民，服務(wù)社會”的理念。第1學時教學環(huán)節(jié)教師活動學生活動情景導入與任務(wù)描述1(10分鐘)1.情景導入。通過播放動畫說明需求文檔的重要性。2.發(fā)布討論。你認為需求文檔有必要進行詳細分析嗎？3.介紹任務(wù)。本任務(wù)將完成“啟嘉校園”項目開始前的開發(fā)準備工作，主要包括了解開發(fā)中使用的項目資源和項目資源使用方法，部署前、后端開發(fā)環(huán)境，以及創(chuàng)建項目開發(fā)目錄。本任務(wù)將盡可能詳細地為讀者講解如何使用HBuilderX創(chuàng)建uni-app項目和項目文件，引導讀者以全局視野了解uni-app項目，形成以系統(tǒng)思維方式解決問題的習慣。1.操作體驗。認真觀看教師播放動畫。2.回答問題。認真回答教師的問題。3.了解任務(wù)。認真聽取教師介紹項目1的任務(wù)介紹，同時思考，如何高效搭建開發(fā)環(huán)境。知識儲備講解1(35分鐘)1.產(chǎn)品需求分檔概念講解。（1）實現(xiàn)原理講解。（2）通過流程圖或者思維導圖介紹實現(xiàn)邏輯，解決重難點問題。2.查看“啟嘉校園”需求分檔。講解什么是頁面設(shè)計圖，如何查看設(shè)計標注，如何下載圖片素材、字體圖標。3.需求文檔分析升華點撥。教師對需求文檔分析的重要性及分析中常見問題進行講解，以及注意事項進行說明。1.聆聽知識講解產(chǎn)品需求文檔。認真聽取教師講解產(chǎn)品需求文檔的概念，并思考如何準確分析需求分檔。2.聆聽“啟嘉校園”需求文檔分析。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導期間進行提問。3.聆聽需求文檔分析升華點撥筆記撰寫。認真聽取教師對需求文檔分析的升華點撥講解，并將核心知識及重要知識記錄到課堂筆記當中。第2學時教學環(huán)節(jié)教師活動學生活動情景導入與任務(wù)描述2(10分鐘)1.發(fā)布討論。什么是接口文檔？2.創(chuàng)設(shè)情境。通過動畫演示什么是接口文檔3.介紹任務(wù)。1.回答討論。認真思考并回答教師發(fā)布的討論。2.觀看動畫。認真觀看教師播放的動畫，初步了解什么是頁面生命周期。3.了解任務(wù)。認真聽取教師介紹本節(jié)課的任務(wù)介紹，同時思考，如何快速準確查看接口文檔。知識儲備講解2(35分鐘)1.接口文檔知識講解。接口主要用來向開發(fā)者服務(wù)器傳遞數(shù)據(jù)，接口文檔即應(yīng)用程序接口的說明文檔，又稱為API文檔，用來描述系統(tǒng)所提供接口信息的文檔。2.“啟嘉校園”項目源碼?！皢⒓涡@”項目功能完整，代碼量大，告訴同學們源碼的下載地址及方法。1.聆聽知識講解頁面生命周期。認真聽取教師講解頁面生命周期的語法格式，屬性說明及使用方法，并思考如何應(yīng)用到實際項目當中。2.查看“啟嘉校園”項目源碼。登錄網(wǎng)址，查看源碼，有必要的同學可進行下載。第3學時教學環(huán)節(jié)教師活動學生活動任務(wù)實施邏輯分析1(10分鐘)1.發(fā)布討論。你認為不同的開發(fā)工具對于軟件開發(fā)有影響嗎？創(chuàng)設(shè)情境。播放動畫，引導同學在環(huán)境安裝過程中細致耐心。3.介紹任務(wù)。1.回答討論。認真思考并回答討論。2.觀看動畫。觀看動畫，調(diào)整心態(tài)，接下來的環(huán)境安裝會遇到很多問題，細致耐心，不斷嘗試，攻堅克難。3.了解任務(wù)。認真聽取教師介紹本節(jié)課的任務(wù)介紹。任務(wù)實施編碼實現(xiàn)1(35分鐘)1.搭建前端開發(fā)環(huán)境。介紹前端開發(fā)環(huán)境需要的工具，并發(fā)送給學生。2.前端開發(fā)環(huán)境安裝演示。帶領(lǐng)學生安裝環(huán)境。3.搭建后端開發(fā)環(huán)境。介紹后端開發(fā)環(huán)境需要的工具，并發(fā)送給學生。4.后端開發(fā)環(huán)境安裝演示。帶領(lǐng)學生安裝環(huán)境。聆聽講解認真聽取教師講解后端開發(fā)環(huán)境所需工具，并進行下載。2.同步安裝環(huán)境。認真觀看教師演示，同步安裝，遇到問題及時向教師提問。第4學時教學環(huán)節(jié)教師活動學生活動任務(wù)實施邏輯分析2(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：創(chuàng)建項目開發(fā)目錄、運行項目、任務(wù)測試。2.任務(wù)講解。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)。2.明確步驟。跟隨教師講解的思路，建立項目開發(fā)目錄，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時可到線上資源進行學習。任務(wù)實施編碼實現(xiàn)2(20分鐘)1.分配小組。教師依據(jù)知識儲備階段的測驗結(jié)果，及學生組隊意愿，3人組成一隊，盡量讓強弱互補，形成互相幫扶小組。2.巡回指導。教師在組間巡回指導，出現(xiàn)的共性問題，可在班級內(nèi)向同學進行簡短講解點撥。1.組建小組。在教師的引導下，結(jié)合自己意愿，組成3人一組的團隊。2.任務(wù)實施。認真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺向其他組進行求助提問，也可到在線資源中觀看視頻進行學習。任務(wù)測試與評價（15分鐘）1.環(huán)境及項目測試。2.組間巡回指導。教師在組間進行巡回指導，遇到共性問題，在班級內(nèi)統(tǒng)一點撥。3.任務(wù)評分。企業(yè)教師和授課教師對學生整體任務(wù)實施情況，測試情況進行評分。同時引導學生進行組內(nèi)評分，組間互評。4.教師點評。企業(yè)教師和授課教師分別對班級內(nèi)評分最高的2組，及評分較低的2組進行點評，指出本次任務(wù)中，同學們的優(yōu)秀做法，及共性問題。1.完成測試。2.完成評價。3.聆聽點評。認真聽取企業(yè)教師及專業(yè)教師對本次任務(wù)的評價，學習優(yōu)秀經(jīng)驗，同時比對自己任務(wù)完成情況，查漏補缺，利用課下時間進行提升。（三）課后1.以測驗鞏固基礎(chǔ)知識通過布置知識技能測驗，組織學生助教線上答疑為學生提供學習輔導，幫助學生查漏補缺、理解和消化基礎(chǔ)知識。2.以預(yù)習培養(yǎng)學生自主學習能力通過布置課前預(yù)習制作個人中心頁基礎(chǔ)知識的任務(wù)，鍛煉學生的自主學習能力，促進學生養(yǎng)成預(yù)習的學習習慣。課后活動1.組織學生完成任務(wù)拓展模塊2.進行有效評價并記錄過程成績?nèi)?、教學反思學習效果特色創(chuàng)新診改措施教學整體設(shè)計任務(wù)名稱任務(wù)2制作個人中心頁開課學期第3學期課程類型專業(yè)核心課授課班級授課學時8學時授課地點研討型智慧實訓室授課形式理實一體教學內(nèi)容本任務(wù)將實現(xiàn)“啟嘉校園”項目的個人中心頁面，包括頭部區(qū)域、導航欄、功能列表區(qū)域、“聯(lián)系我們”模態(tài)框。通過該任務(wù)的實現(xiàn)讓學生掌握uni-app中的視圖容器組件、觸摸事件touch、頁面生命周期。教學目標素質(zhì)目標1.通過給新建變量、類選擇器等命名培養(yǎng)學習者在編程中規(guī)范命名的意識。2.通過項目使用的國產(chǎn)跨平臺移動應(yīng)用開發(fā)框架uni-app，培養(yǎng)學習者的愛國情懷，增強科技創(chuàng)新的自信心。3.通過以學生社交生態(tài)為主題的項目開發(fā)，提高學習者科技賦能數(shù)字生活的意識。4.通過任務(wù)拓展“二手”功能的實現(xiàn)，培養(yǎng)學習者樹立堅持節(jié)約優(yōu)先，持續(xù)發(fā)展的理念。知識目標1.了解移動端尺寸單位。2.掌握頁面路由和自定義導航欄的配置。3.掌握uni-appview視圖容器組件的使用。4.掌握uni-apppopup彈出層組件的使用。5.掌握uni-apptext基礎(chǔ)內(nèi)容組件的使用。6.掌握uni-app擴展組件的使用。7.掌握Sass基礎(chǔ)語法。能力目標1.能夠使用MasterGo查看設(shè)計圖標注信息。2.能夠使用uni-app視圖容器組件搭建靜態(tài)頁面結(jié)構(gòu)。3.能夠使用Sass預(yù)處理器修飾頁面樣式。學情分析知識基礎(chǔ)1.已掌握需求文檔分析方法。2.已掌握接口文檔分析方法。3.已掌握前端、后端、項目環(huán)境搭建方法。技能基礎(chǔ)1.已具備分析需求文檔能力。2.已具備分析接口文檔能力。3.已具備搭建前端、后端、項目開發(fā)環(huán)境能力。學習特點與訴求1.完成項目1后，學生對啟嘉校園開發(fā)項目產(chǎn)生了極大興趣，具有很好的學習積極性。2.學生比較喜歡實踐類教學方法，理論教學超過35分鐘，就會注意力不集中。教學重點1.頁面路由和自定義導航欄的配置方法2.view、popup、text組件的使用方法。教學難點1.根據(jù)項目需求，使用MasterGo查看設(shè)計圖標信息。2.準確應(yīng)用Sass預(yù)處理器修飾頁面樣式。教學策略教學方式方法1.任務(wù)驅(qū)動教學。2.組隊討論教學。3.啟發(fā)式教學。4.理實一體化教學。教學團隊1.企業(yè)工程師與校內(nèi)專任教師共同開發(fā)課程項目、構(gòu)造任務(wù)場景、設(shè)計教學實施過程、設(shè)計融入思政的課程評價體系并開展多元評價。2.校內(nèi)教師重點負責課堂過程中的項目講解與項目實施。3.企業(yè)工程師在個別環(huán)節(jié)（如項目驗收等）參與雙師授課。4.企業(yè)工程師負責對項目完成情況給予工程化評價。5.學生助教負責協(xié)助教師開展課前及課后的拓展任務(wù)等。教學資源使用本書配套文檔、素材等資源教學評價

二、教學實施過程教學過程（一）課前1.以預(yù)習培養(yǎng)學生自主學習能力通過布置課前預(yù)習uni-appview視圖容器組件、popup彈出層組件、text基礎(chǔ)內(nèi)容組件基礎(chǔ)知識的任務(wù)，鍛煉學生的自主學習能力，促進學生養(yǎng)成預(yù)習的學習習慣。2.以測驗促進課堂提質(zhì)增效通過布置預(yù)期內(nèi)容中view視圖容器組件、popup彈出層組件、text基礎(chǔ)內(nèi)容組件知識測驗，教師可以更好地了解學生對本次任務(wù)基礎(chǔ)知識的學習需求和問題，總結(jié)提煉重難點知識，從而在課堂上進行更有針對性的講解和討論，提高教學質(zhì)量和效果。知識圖譜智能推薦拓展知識通過知識圖譜向?qū)W生推送更多關(guān)于view視圖容器組件、popup彈出層組件、text基礎(chǔ)內(nèi)容組件的應(yīng)用場景，及應(yīng)用技巧，學習相關(guān)論文及實戰(zhàn)項目中列舉的拓展使用方法，以點帶面，使學生知識儲備更全面，理解更透徹，從而為本任務(wù)準確實施奠定雄厚的知識基礎(chǔ)。教師活動學生活動1.發(fā)布任務(wù)。通過職教云發(fā)布view視圖容器組件、popup彈出層組件、text基礎(chǔ)內(nèi)容組件基礎(chǔ)知識預(yù)習任務(wù)。2.發(fā)布測驗。通過職教云發(fā)布view視圖容器組件、popup彈出層組件、text基礎(chǔ)內(nèi)容組件知識測驗。3.發(fā)布資料。通過職教云發(fā)布微課視頻、PPT課件、虛擬仿真、知識圖譜拓展閱讀等學習資源。4.批閱任務(wù)。分析知識測驗結(jié)果，梳理重難點知識。1.課前預(yù)習。通過微課和課件自主學習view視圖容器組件、popup彈出層組件、text基礎(chǔ)內(nèi)容組件相關(guān)基礎(chǔ)知識。2.基礎(chǔ)測驗。通過職教云完成view視圖容器組件、popup彈出層組件、text基礎(chǔ)內(nèi)容組件知識測驗。3.資料學習。學習教師推動的視頻、PPT、虛擬仿真、知識圖譜拓展閱讀等，有問題同學可通過平臺在留言板留言進行提問。（二）課中1.課程教學設(shè)計遵循學生的技能成長規(guī)律和學習規(guī)律，緊密結(jié)合制作個人資料頁的實際工作過程，進行系統(tǒng)性的教學設(shè)計，構(gòu)造“情景項目導入、漸進任務(wù)分解、組隊任務(wù)執(zhí)行、多元技能測評、凝練項目總結(jié)、激發(fā)構(gòu)想延展”六步教學實施過程，確保學生能夠體驗真實的工作場景，通過循序漸進的任務(wù)開發(fā)，鍛煉學生制作個人資料頁的實操技能和工程素養(yǎng)。采用雙師教學、頭腦風暴、組隊開發(fā)、學生助教輔導等特色環(huán)節(jié)組織教學，充分發(fā)揮企業(yè)工程師、教師和學生的優(yōu)勢，結(jié)合利用現(xiàn)代信息技術(shù)平臺“職教云”輔助教學，激發(fā)教師授課激情、點燃學生學習熱情、提高課堂授課效果。2.思政教學設(shè)計本課程的思政教學設(shè)計滲透于每個任務(wù)的描述、素養(yǎng)目標、關(guān)鍵代碼的名師解惑、課上教學設(shè)計、課下任務(wù)拓展等多個環(huán)節(jié)，從而循序漸進、滲透式、全方位地落實思政教育“進教材、進課堂、進頭腦”。借助本章的任務(wù)描述向?qū)W生傳遞“多學習新技術(shù)，讓軟件生命力更持久”的思想，讓學生養(yǎng)成“持續(xù)發(fā)展、終身學習”的習慣；通過課堂中組織組隊任務(wù)實施，培養(yǎng)學生“團隊協(xié)作、互幫互助”的精神；通過對刪除功能關(guān)鍵代碼的實現(xiàn)，培養(yǎng)學生“滿足用戶需求，提升軟件價值”的職業(yè)素養(yǎng)；通過任務(wù)擴展，讓學生了解圖片存儲的新技術(shù)、最優(yōu)解決方案的選擇，培養(yǎng)學生踐行“技術(shù)為民，服務(wù)社會”的理念。第1學時教學環(huán)節(jié)教師活動學生活動情景導入與任務(wù)描述1(10分鐘)1.情景導入。通過演示教師編寫的scroll-view使用的小案例，引出今天的學習內(nèi)容。2.發(fā)布問題。Scroll-view有什么作用？常用于哪些場景？3.介紹任務(wù)。本任務(wù)將制作“啟嘉校園”項目的個人中心頁，主要內(nèi)容包括用戶頭像、昵稱、ID、商品管理和賬號認證等。1.操作體驗。認真觀看教師的演示，并在教師指導下，查看scroll-view的用法。2.回答問題。認真回答教師的問題。3.了解任務(wù)。認真聽取教師介紹項目2的任務(wù)介紹，同時思考，如何實現(xiàn)個人中心頁面。知識儲備講解1(35分鐘)1.scroll-view知識講解。（1）實現(xiàn)原理講解。（2）通過流程圖或者思維導圖介紹實現(xiàn)邏輯，解決重難點問題。2.scroll-view組件代碼演示。scroll-view是uni-app框架中的一個組件，用于創(chuàng)建可滾動的視圖區(qū)域，常用于長列表、滾動圖像等場景。該組件用法比較簡單，只需要將要滾動的內(nèi)容放在scroll-view內(nèi)即可.3.scroll-view組件升華點撥。教師對scroll-view組件使用中常見問題進行講解，以及注意事項進行說明。4.觸摸事件touch組件知識講解。（1）實現(xiàn)原理講解。（2）通過流程圖或者思維導圖介紹實現(xiàn)邏輯，解決重難點問題。5.touch組件代碼演示。6.touch組件升華點撥。教師對touch組件使用中常見問題進行講解，以及注意事項進行說明。1.聆聽知識講解scroll-view組件。認真聽取教師講解scroll-view組件的語法格式，屬性說明及使用方法，并思考如何應(yīng)用到實際項目當中。2.觀看演示scroll-view組件使用方法同步仿做。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導期間進行提問。3.聆聽scroll-view組件升華點撥筆記撰寫。認真聽取教師對scroll-view組件部分的升華點撥講解，并將核心知識及重要知識記錄到課堂筆記當中。4.聆聽知識講解touch組件。認真聽取教師講解touch組件的語法格式，屬性說明及使用方法，并思考如何應(yīng)用到實際項目當中。5.觀看touch組件演示同步仿做。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導期間進行提問。6.聆聽touch組件升華點撥筆記撰寫。認真聽取教師對touch組件部分的升華點撥講解，并將核心知識及重要知識記錄到課堂筆記當中。第2學時教學環(huán)節(jié)教師活動學生活動情景導入與任務(wù)描述2(10分鐘)1.發(fā)布討論。什么是頁面生命周期？2.創(chuàng)設(shè)情境。通過動畫演示什么是頁面生命周期。3.介紹任務(wù)。1.回答討論。認真思考并回答教師發(fā)布的討論。2.觀看動畫。認真觀看教師播放的動畫，初步了解什么是頁面生命周期。3.了解任務(wù)。認真聽取教師介紹本節(jié)課的任務(wù)介紹，同時思考，如何實現(xiàn)頁面從創(chuàng)建到銷毀的整個過程。知識儲備講解2(35分鐘)1.頁面生命周期知識講解。在uni-app中，頁面生命周期指的是頁面從創(chuàng)建到銷毀的整個過程所經(jīng)歷的一系列事件。并介紹生命周期中的監(jiān)聽頁面加載、監(jiān)聽頁面顯示、監(jiān)聽頁面初次渲染、監(jiān)聽頁面隱藏、監(jiān)聽頁面卸載、監(jiān)聽頁面下拉刷新、監(jiān)聽頁面上拉觸底。2.頁面生命周期代碼演示。現(xiàn)場演示頁面生命周期的每個屬性使用方法。3.頁面生命周期知識升華點撥。在實際開發(fā)中，開發(fā)者可以根據(jù)自己的需求合理利用這些生命周期函數(shù)，從而提高頁面的交互性和用戶體驗。1.聆聽知識講解頁面生命周期。認真聽取教師講解頁面生命周期的語法格式，屬性說明及使用方法，并思考如何應(yīng)用到實際項目當中。2.觀看演示頁面生命周期使用方法同步仿做。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導期間進行提問。3.聆聽頁面生命周期知識升華點撥筆記撰寫。認真聽取教師對頁面生命周期部分的升華點撥講解，并將核心知識及重要知識記錄到課堂筆記當中。第3學時教學環(huán)節(jié)教師活動學生活動情景導入與任務(wù)描述3(10分鐘)1.發(fā)布討論。你知道原生導航欄和自定義導航欄有什么區(qū)別嗎？創(chuàng)設(shè)情境。以某購物平臺的導航欄為例，引出今天要學的內(nèi)容。3.介紹任務(wù)。1.回答討論。認真思考并回答討論。2.體驗情境。進入購物平臺，查看該平臺的導航欄布局。3.了解任務(wù)。認真聽取教師介紹本節(jié)課的任務(wù)介紹，同時思考，導航欄一般包括哪些信息？知識儲備講解3(35分鐘)1.原生導航欄和默認導航欄知識講解。導航欄包括標題、返回按鈕、右側(cè)按鈕等元素。開發(fā)者可以通過uni-app提供的API來實現(xiàn)原生導航欄的設(shè)置和控制2.導航欄代碼演示?，F(xiàn)場演示導航欄的每個屬性使用方法。3.導航欄升華點撥。原生導航欄可以使應(yīng)用界面更加美觀和統(tǒng)一，但它的功能相對簡單，如果需要實現(xiàn)更多的自定義功能和樣式，建議使用自定義導航欄。聆聽知識講解原生導航欄和默認導航欄認真聽取教師講解原生導航欄和默認導航欄的語法格式，屬性說明及使用方法，并思考如何應(yīng)用到實際項目當中。2.觀看演示導航欄使用方法同步仿做。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導期間進行提問。3.聆聽導航欄升華點撥筆記撰寫。認真聽取教師對導航欄相關(guān)知識部分的升華點撥講解，并將核心知識及重要知識記錄到課堂筆記當中。第4學時教學環(huán)節(jié)教師活動學生活動情景導入與任務(wù)描述4(10分鐘)1.發(fā)布討論。你知道底部tabbar的主要作用是什么嗎？創(chuàng)設(shè)情境。以編寫的簡短小案例演示頁面跳轉(zhuǎn)的過程。3.介紹任務(wù)。1.回答討論。認真思考并回答討論。2.體驗情境。觀看底部tabbar情景案例演示。3.了解任務(wù)。認真聽取教師介紹本節(jié)課的任務(wù)介紹，同時思考，tabBar有哪些配置項呢？知識儲備講解4(35分鐘)1.底部tabbar知識講解。tabBar是移動端應(yīng)用常見的底部標簽欄，用于實現(xiàn)頁面之間的快速切換，小程序中通常將其分為底部tabBar和頂部tabBar。uni-app中的tabBar可以配置的標簽數(shù)量最少為2個，最多為5個.2.底部tabbar代碼演示。現(xiàn)場演示頁面跳轉(zhuǎn)不同方法的使用方法。3.底部tabbar升華點撥。1.聆聽知識講解tabbar知識。認真聽取教師講解底部tabbar使用方法，并思考如何應(yīng)用到實際項目當中。2.觀看演示底部tabbar使用方法同步仿做。認真觀看教師演示，并進行同步仿做，遇到問題可在教師巡回指導期間進行提問。3.聆聽底部tabbar升華點撥筆記撰寫。認真聽取教師對底部tabbar部分的升華點撥講解，并將核心知識及重要知識記錄到課堂筆記當中。第5學時教學環(huán)節(jié)教師活動學生活動任務(wù)實施邏輯分析1(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：頁面結(jié)構(gòu)分析與搭建、制作頭部區(qū)域。2.任務(wù)講解。教師講解任務(wù)完成的步驟，必要的步驟進行代碼演示。主要對照頁面結(jié)構(gòu)及頭部區(qū)域的預(yù)期效果圖進行頁面的結(jié)構(gòu)分析。首先新建頁面文件，然后明確設(shè)計圖中的內(nèi)容，下一步實現(xiàn)頭部區(qū)域制作。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認真查看頭部區(qū)域設(shè)計圖2.明確步驟。跟隨教師講解的思路，對照設(shè)計圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時可到線上資源進行學習。任務(wù)實施編碼實現(xiàn)1(35分鐘)1.分配小組。教師依據(jù)知識儲備階段的測驗結(jié)果，及學生組隊意愿，3人組成一隊，盡量讓強弱互補，形成互相幫扶小組。2.巡回指導。教師在組間巡回指導，出現(xiàn)的共性問題，可在班級內(nèi)向同學進行簡短講解點撥。1.組建小組。在教師的引導下，結(jié)合自己意愿，組成3人一組的團隊。2.任務(wù)實施。認真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺向其他組進行求助提問，也可到在線資源中觀看視頻進行學習。第6學時教學環(huán)節(jié)教師活動學生活動任務(wù)實施邏輯分析2(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：制作自定義導航欄、制作圓弧功能列表區(qū)域。2.任務(wù)講解。教師講解任務(wù)完成的步驟，必要的步驟進行代碼演示。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認真查看導航欄區(qū)域設(shè)計圖。2.明確步驟。跟隨教師講解的思路，對照設(shè)計圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時可到線上資源進行學習。任務(wù)實施編碼實現(xiàn)2(35分鐘)1.分配小組。教師依據(jù)知識儲備階段的測驗結(jié)果，及學生組隊意愿，3人組成一隊，盡量讓強弱互補，形成互相幫扶小組。2.巡回指導。教師在組間巡回指導，出現(xiàn)的共性問題，可在班級內(nèi)向同學進行簡短講解點撥。1.組建小組。在教師的引導下，結(jié)合自己意愿，組成3人一組的團隊。2.任務(wù)實施。認真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺向其他組進行求助提問，也可到在線資源中觀看視頻進行學習。第7學時教學環(huán)節(jié)教師活動學生活動任務(wù)實施邏輯分析3(10分鐘)1.任務(wù)介紹。教師介紹本節(jié)課需要完成的任務(wù)：制作底部標簽欄區(qū)域，“聯(lián)系我們”模態(tài)框。2.任務(wù)講解。教師講解任務(wù)完成的步驟，必要的步驟進行代碼演示。1.知曉任務(wù)。聽取教師講解本次課要完成的任務(wù)，并認真查看底部標簽欄設(shè)計圖。2.明確步驟。跟隨教師講解的思路，對照設(shè)計圖，明確完成本節(jié)課任務(wù)需要的基礎(chǔ)步驟，必要時可到線上資源進行學習。任務(wù)實施編碼實現(xiàn)3(35分鐘)1.分配小組。根據(jù)知識儲備階段的測驗結(jié)果，及學生組隊意愿，3人組成一隊，盡量讓強弱互補，形成互相幫扶小組。2.巡回指導。教師在組間巡回指導，出現(xiàn)的共性問題，可在班級內(nèi)向同學進行簡短講解點撥。1.組建小組。在教師的引導下，結(jié)合自己意愿，組成3人一組的團隊。2.任務(wù)實施。認真完成本次課程的任務(wù)，遇到問題先組內(nèi)解決，組內(nèi)無法解決，可向教師提問，或者通過職教云平臺向其他組進行求助提問，也可到在線資源中觀看視頻進行學習。第8學時教學環(huán)節(jié)教師活動學生活動任務(wù)測試(35分鐘)1.任務(wù)介紹。教師介紹本次課要進行測試的測試任務(wù)，UI頁面測試、功能測試。2.知識講解。教師介紹測試的概念，并對照企業(yè)測試流程講解，測試要按照需求分析、計劃、用例、執(zhí)行、總結(jié)，五步流程進行測試。3.情景故事。教師播放測試相關(guān)情景動畫，指明測試工作的重要性，提高學生對測試工作的責任心。4.需求分析講解。教師講解需求分析的方法，并以部分需求說明書為例，演示如何正確進行需求分析，提取測試功能點。5.分配小組。根據(jù)任務(wù)實施同學完成情況及學生組隊意愿，3人組成一隊，盡量讓強弱互補，形成互相幫扶小組。6.制定計劃講解。教師引導學生小組內(nèi)，要交叉進行測試，如A同學測試B同學的項目，測試之前先制定自己的測試計劃并形成文字。7.編寫用例講解。教師講解編寫測試用例的技巧，并以部分功能為例進行演示。8.執(zhí)行用例講解。教師講解執(zhí)行用例注意要點。9.總結(jié)報告講解。教師講解編寫總結(jié)報告要點。10.組間巡回指導。教師在組間進行巡回指導，遇到共性問題，在班級內(nèi)統(tǒng)一點撥。1.知曉任務(wù)。認真聽取教師講解本次課的測試任務(wù)。2.學習測試概念及流程。認真聽取教師講解軟件測試的概念及軟件測試的基本流程。3.觀看動畫。認真觀看教師播放的動畫故事，并思考如何高效準確的進行測試。4.需求分析。認真聽取教師講解需求分析的方法，并跟隨教師演示，同步提取測試功能點。5.組建小組。在教師的引導下，結(jié)合自己意愿，組成3人一組的團隊。6.制定計劃。各小組內(nèi)同學明確自己測試的內(nèi)容，如，A同學測試B同學項目，B同學測試C同學項目，C同學測試A同學項目，并制定自己的測試計劃。7.編寫用例。學生認真聽取教師講解測試用例的編寫要點，并同步進行仿做。完成整個測試模塊的測試用例編寫。8.執(zhí)行用例。學生執(zhí)行在上節(jié)課中編寫的測試用例，并將缺陷記錄下來，執(zhí)行完測試用例編寫測試報告。有問題的同學，可進行組內(nèi)討論，組間求助，也可以隨時向教師提出問題，還可以通過在線平臺觀看視頻講解。任務(wù)評價(10分鐘)1.任務(wù)評分。企業(yè)教師和授課教師對學生整體任務(wù)實施情況，測試情況進行評分。同時引導學生進行組內(nèi)評分，組間互評。2.教師點評。企業(yè)教師和授課教師分別對班級內(nèi)評分最高的2組，及評分較低的2組進行點評，指出本次任務(wù)中，同學們的優(yōu)秀做法，及共性問題。1.學生展示。學生展示自己的任務(wù)完成情況，并對自己在任務(wù)完成及任務(wù)測試過程中遇到的問題及解決對策進行展示。在教師的引導下進行評分。2.聆聽點評。認真聽取企業(yè)教師及專業(yè)教師對本次任務(wù)的評價，學習優(yōu)秀經(jīng)驗，同時比對自己任務(wù)完成情況，查漏補缺，利用課下時間進行提升。（三）課后1.以測驗鞏固基礎(chǔ)知識通過布置知識技能測驗，組織學生助教線上答疑為學生提供學習輔導，幫助學生查漏補缺、理解和消化基礎(chǔ)知識。2.以預(yù)習培養(yǎng)學生自主學習能力通過布置課前預(yù)習制作個人資料頁基礎(chǔ)知識的任務(wù)，鍛煉學生的自主學習能力，促進學生養(yǎng)成預(yù)習的學習習慣。課后活動1.組織學生完成任務(wù)拓展模塊2.進行有效評價并記錄過程成績?nèi)?、教學反思學習效果特色創(chuàng)新診改措施教學整體設(shè)計任務(wù)名稱任務(wù)3制作個人資料頁開課學期第3學期課程類型專業(yè)核心課授課班級授課學時8學時授課地點研討型智慧實訓室授課形式理實一體教學內(nèi)容本任務(wù)將實現(xiàn)“啟嘉校園”項目的個人資料頁面和個人資料擴展頁面。通過該任務(wù)的實現(xiàn)讓學生掌握uni-app中的view視圖容器組件、picker組件、input組件、正則表達式、消息提示方法、頁面跳轉(zhuǎn)方法。教學目標素質(zhì)目標1.通過學習使用正則表達式完成手機號、微信號等信息的驗證方法，培養(yǎng)學習者發(fā)現(xiàn)問題、分析問題、解決問題的能力。2.通過實現(xiàn)“用戶擴展資料區(qū)域”中用戶信息顯示的功能，強化學習者個人信息保護意識。3.通過鞏固拓展練習，培養(yǎng)學習者腳踏實地、躬身力行的實踐精神。知識目標1.掌握uni-apppicker滾動選擇器組件的使用。2.掌握uni-appinput單行輸入框組件的使用。3.掌握uni-appimage圖片組件的使用。4.掌握uni.showToast消息提示方法的使用。5.掌握uni-app頁面跳轉(zhuǎn)方法的使用。6.掌握正則表達式的使用。能力目標1.能夠使用picker組件完成滾動選擇性別。2.能夠使用input組件完成內(nèi)容的輸入。3.能夠使用image組件完成圖像的展示及縮放、裁剪等操作。4.能夠使用uni.showToast方法完成消息提示。5.能夠使用uni-app頁面跳轉(zhuǎn)方法實現(xiàn)頁面間跳轉(zhuǎn)。6.能夠使用正則表達式完成手機號、微信號等信息的驗證。學情分析知識基礎(chǔ)1.已掌握頁面路由和自定義導航欄的配置。2.已掌握uni-appview視圖容器組件及彈出層組件使用方法。3.已掌握uni-apptext基礎(chǔ)內(nèi)容組件和擴展組件的使用方法。技能基礎(chǔ)1.已具備使用MasterGo查看設(shè)計圖標注信息。2.已具備使用uni-app視圖容器組件搭建靜態(tài)頁面結(jié)構(gòu)。3.已具備使用Sass預(yù)處理器修飾頁面樣式。學習特點與訴求1.完成項目1和項目2后，學生對啟嘉校園開發(fā)項目產(chǎn)生了極大興趣，具有很好的學習積極性。2.學生的自主學習能力有所欠缺，下發(fā)的在線學習資源點擊率偏低。教學重點1.uni-apppicker滾動選擇器組件、input單行輸入框組件使用方法。2.消息提示方法及頁面跳轉(zhuǎn)方法的使用。教學難點1.根據(jù)項目需求，靈活準確設(shè)置滾動選擇器組件樣式。2.準確應(yīng)用正則表達式的不同方法進行輸入內(nèi)容正確性驗證。教學策略教學方式方法1.任務(wù)驅(qū)動教學。2.組隊討論教學。3.啟發(fā)式教學。4.理實一體化教學。教學團隊1.企業(yè)工程師與校內(nèi)專任教師共同開發(fā)課程項目、構(gòu)造任務(wù)場景、設(shè)計教學實施過程、設(shè)計融入思政的課程評價體系并開展多元評價。2.校內(nèi)教師重點負責課堂過程中的項目講解與項目實施。3.企業(yè)工程師在個別環(huán)節(jié)（如項目驗收等）參與雙師授課。4.企業(yè)工程師負責對項目完成情況給予工程化評價。5.學生助教負責協(xié)助教師開展課前及課后的拓展任務(wù)等。教學資源使用本書配套文檔、素材等資源教學評價

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

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