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

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

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

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

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

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