《微信小程序開發》教學設計課程名稱：微信小程序開發授課年級：授課學期：教師姓名：20年月日課題名稱新聞頁面模塊開發計劃學時8學時內容分析在學習了小程序的基礎知識以及頁面布局之后，讀者可以開始嘗試創建一個小程序前端綜合設計實例。本項目以“梅園”為主題，帶領讀者從頁面創建到數據請求，講解如何實現一個帶有新聞、產品頁面的簡易小程序。教學目標及基本要求掌握靜態數據的定義與接口的使用。理解新聞列表頁與新聞詳情頁數據的讀取。掌握利用本地緩存的寫入與讀取實現收藏功能。掌握按鈕和菜單轉發分享的基本方法和技巧。掌握背景音樂的調用以及監聽方法。教學重點新聞列表頁與新聞詳情頁數據的讀取。利用本地緩存的寫入與讀取實現收藏功能。教學難點利用本地緩存的寫入與讀取實現收藏功能教學方式以職業需求為導向，以實踐能力培養為重點，以培養“基礎實、知識新、能力強、素質高”的復合型技術技能人才為目標，本模塊結合目前流行小程序案例，采用任務驅動教學法，靈活運用超星云平臺、教師自主開發的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據專業教學標準、人才培養方案、課程標準及崗位工作任務設計了“導學-督學-自學-輔學-互學”五環節的教學活動，充分體現“學生主體，教師主導”的教學理念。圖教學方法任務驅動教學法任務驅動教學法重點培養學生獲取知識和自主學習的能力，是完成項目設計必須具有的能力。學生借助教學課件、專業書籍、設計規范、網絡學習平臺等學習材料，通過制定計劃、組織實施、檢查反饋等學習環節，完成學生職業素質、職業技能、職業道德培養。項目教學法在課程的宏觀設計中，以微信開發項目為導向，微觀設計中以任務為驅動。項目實施與校企合作企業數據庫系統開發過程一致，使學生的學習更加具有針對性和實用性。項目設計貫穿于教學整個過程中，讓學生自主學習，從而有效的促進學生創新能力的發展。小組協作教學法教學活動以學生為主體，以學生活動為主線。小組接受項目任務后，在教師的引導下，集體學習與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產品推廣應用等方式檢測工作成果，并針對檢查結果進行修正，最后總結和評價。案例式教學法案例教學把理論知識和解決問題的能力有機地聯系起來，幫助學生運用所學的理論知識去分析現實生活中的實例，學以致用。讓學生從中學到現實而有用的東西，避免純理論教學而導致的空談，從而增強教學效果。教學過程梅園-首頁模塊開發項目創建1.新建小程序項目圖創建新項目2.新建頁面文件視圖設計1.導航欄設計圖3-5自定義導航欄效果tabBar組件的設計使用tabBar組件，完成“梅園”小程序底部導航，實現頁面切換效果。效果所下圖所示。圖tabBar效果圖在app.json文件中實現tabBar屬性的設置，代碼如下：課堂練習11、結合“新建頁面文件”和“tabBar設計”增加一個新的“購物車”切換頁面，圖片素材使用images文件夾下面的cart.png和cart-active.png兩張圖片。2、查閱開發者文檔，實現tabBar在頁面頂部顯示，如圖所示。圖3-7加上購物車頁面的效果圖3-8tabBar設置為頂部效果swiper輪播圖組件的設計嵌套在swiper內部的swiper-item組件的屬性只有一個item-id屬性，用來標識每個swiper-item的id，其值類型為string。代碼如下所示。實現“梅園”小程序首頁的輪播圖功能，效果如下圖所示。圖輪播圖效果圖步驟1：在index.js頁面，定義sliderList數組內容。步驟2：在index.wxml頁面，實現swiper組件，代碼如下所示：步驟3：在index.wxss頁面，定義輪播圖樣式，代碼如下所示。課堂練習2將以上示例的輪播圖修改如下效果，將輪播圖設為圓角，特別注意輪播圖在滑動過程中如果先顯示直角，等滑動一整張之后才會變成圓角的現象，想一想，如何進行設置？彈性布局設計頁面利用Flex彈性盒模型實現“梅園”小程序圖片導航功能。完成效果如下圖所示。步驟1：在index.js頁面，定義navList數組內容。步驟2：在index.wxml頁面，進行圖片導航功能的布局設計，代碼如下所示：步驟3：在index.wxss頁面，定義圖片導航功能樣式，代碼如下所示。課堂練習3查看小程序開發文檔，查找navigator組件的屬性，對示例3.1的圖片導航加上跳轉鏈接，實現跳轉到news頁面。scroll-view組件的設計利用scroll-view組件實現“梅園”小程序“推薦美景”功能。完成效果如下圖所示。圖3-13“推薦美景”功能步驟1：在index.js頁面，定義recomList數組內容。步驟2：在index.wxml頁面，進行“推薦美景”功能的布局設計，代碼如下所示：步驟3：在index.wxss頁面，定義“推薦美景”功能樣式，代碼如下所示。課堂練習4實現頂部導航，使用scroll-view組件實現內容頁的滑動功能，效果如下圖所示。6.公共樣式的設計步驟1：打開app.wxss頁面，定義一個公共的樣式，實現頁面功能之間的間隔。步驟2：打開index.wxml頁面，在圖片導航和推薦美圖之間，實現app.wxss里定義的樣式。7.彈性布局實現最新產品圖最新產品效果圖步驟1：在in