《微信小程序開發》教學設計課程名稱：微信小程序開發授課年級：授課學期：教師姓名：20年月日課題名稱小程序編程基礎計劃學時4學時內容分析邏輯層將數據進行處理后發送給視圖層，同時接受視圖層的事件反饋。開發者寫的所有代碼最終將會打包成一份

JavaScript

文件，并在小程序啟動的時候運行，直到小程序銷毀。這一行為類似

ServiceWorker，所以邏輯層也稱之為AppService。教學目標及基本要求掌握小程序的基本架構和執行順序。掌握頁面數據的構建的方法。掌握列表渲染和條件渲染含義與使用方法。掌握事件綁定基本方法和技巧。教學重點掌握頁面數據的構建的方法。掌握列表渲染和條件渲染含義與使用方法。教學難點事件綁定基本方法和技巧教學方式以職業需求為導向，以實踐能力培養為重點，以培養“基礎實、知識新、能力強、素質高”的復合型技術技能人才為目標，本模塊結合目前流行小程序案例，采用任務驅動教學法，靈活運用超星云平臺、教師自主開發的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據專業教學標準、人才培養方案、課程標準及崗位工作任務設計了“導學-督學-自學-輔學-互學”五環節的教學活動，充分體現“學生主體，教師主導”的教學理念。圖教學方法任務驅動教學法任務驅動教學法重點培養學生獲取知識和自主學習的能力，是完成項目設計必須具有的能力。學生借助教學課件、專業書籍、設計規范、網絡學習平臺等學習材料，通過制定計劃、組織實施、檢查反饋等學習環節，完成學生職業素質、職業技能、職業道德培養。項目教學法在課程的宏觀設計中，以微信開發項目為導向，微觀設計中以任務為驅動。項目實施與校企合作企業數據庫系統開發過程一致，使學生的學習更加具有針對性和實用性。項目設計貫穿于教學整個過程中，讓學生自主學習，從而有效的促進學生創新能力的發展。小組協作教學法教學活動以學生為主體，以學生活動為主線。小組接受項目任務后，在教師的引導下，集體學習與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產品推廣應用等方式檢測工作成果，并針對檢查結果進行修正，最后總結和評價。案例式教學法案例教學把理論知識和解決問題的能力有機地聯系起來，幫助學生運用所學的理論知識去分析現實生活中的實例，學以致用。讓學生從中學到現實而有用的東西，避免純理論教學而導致的空談，從而增強教學效果。教學過程小程序注冊函數App()在app.js頁面，定義一個App()函數，還可用來注冊一個微信小程序。App()必須在app.js中調用，必須調用且只能調用一次。不然會出現無法預期的后果。App()函數里有一些生命周期函數頁面數據定義data數據在頁面JS文件page函數中第一項為data屬性，在data中定義本頁面邏輯處理需要用到的數據，其中很大一部分數據將用WXML文件的數據渲染。因為小程序JS文件是基于JavaScript編寫的，所以在JS文件中可以定義字符串、數字、布爾值、對象和數組等類型的數據。獲取data數據獲取data中的text和genre_index值需要使用this。設置data數據

setData()

函數用于將數據從邏輯層發送到視圖層（異步），同時改變對應的

this.data

的值（同步）。setData()參數格式：接受一個對象，其過程大致可以分成幾個階段：圖setData()示例代碼數據綁定1.內容綁定WXML中的動態數據均來自對應Page的data。數據綁定使用Mustache語法即{{}}語法將變量包起來，例如：圖內容綁定2.組件屬性圖組件屬性綁定3.控制屬性圖控制屬性綁定4.關鍵字true：boolean類型的true，代表真值。false：boolean類型的false，代表假值。課堂練習思考題：在data下定義以下數據，如何讀取gender里的數據，如何將性別值渲染到頁面？效果如下圖所示。三、列表渲染1wx:for和wx:key的使用2blockwx:for的使用圖wx:for的使用課堂練習1、使用嵌套wx:for語句，實現九九乘法表。效果如下所示。步驟1：定義數據步驟2：設計頁面布局步驟3：實現樣式四、條件渲染1wx:if的使用2blockwx:if的使用3hidden的使用Page({

data:

{

flag:true

}})五、事件綁定事件是視圖層到邏輯層的通訊方式，可以將用戶的行為反饋到邏輯層進行處理。事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。事件對象可以攜帶額外信息，如id,dataset,touches小程序中綁定事件，通過bind關鍵字來實現。如bindinput，bindtap(綁定點擊事件)，bindchange等。1事件的使用方式3事件的捕獲階觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達節點的順序與冒泡階段恰好相反。需要在捕獲階段監聽事件時，可以采用capture-bind、capture-catch關鍵字，后者將中斷捕獲階段和取消冒泡階段。課堂練習1、完成以下效果圖步驟1：定義初始數據步驟2：實現頁面布局，并進行數據綁定步驟3：設計