微信小程序開發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版）教案 項(xiàng)目2 小程序編程基礎(chǔ)

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

JavaScript

文件，并在小程序啟動的時(shí)候運(yùn)行，直到小程序銷毀。這一行為類似

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

setData()

函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時(shí)改變對應(yīng)的

this.data

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

data:

{

flag:true

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