微信小程序開發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版）教案 項(xiàng)目3 小程序常用組件

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

JavaScript

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

ServiceWorker，所以邏輯層也稱之為AppService。教學(xué)目標(biāo)及基本要求掌握小程序的基本架構(gòu)和執(zhí)行順序。掌握頁(yè)面數(shù)據(jù)的構(gòu)建的方法。掌握列表渲染和條件渲染含義與使用方法。掌握事件綁定基本方法和技巧。教學(xué)重點(diǎn)掌握頁(yè)面數(shù)據(jù)的構(gòu)建的方法。掌握列表渲染和條件渲染含義與使用方法。教學(xué)難點(diǎn)事件綁定基本方法和技巧教學(xué)方式以職業(yè)需求為導(dǎo)向，以實(shí)踐能力培養(yǎng)為重點(diǎn)，以培養(yǎng)“基礎(chǔ)實(shí)、知識(shí)新、能力強(qiáng)、素質(zhì)高”的復(fù)合型技術(shù)技能人才為目標(biāo)，本模塊結(jié)合目前流行小程序案例，采用任務(wù)驅(qū)動(dòng)教學(xué)法，靈活運(yùn)用超星云平臺(tái)、教師自主開發(fā)的微課視頻、JSON在線解析平臺(tái)以及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é)活動(dòng)，充分體現(xiàn)“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念。圖教學(xué)方法任務(wù)驅(qū)動(dòng)教學(xué)法任務(wù)驅(qū)動(dòng)教學(xué)法重點(diǎn)培養(yǎng)學(xué)生獲取知識(shí)和自主學(xué)習(xí)的能力，是完成項(xiàng)目設(shè)計(jì)必須具有的能力。學(xué)生借助教學(xué)課件、專業(yè)書籍、設(shè)計(jì)規(guī)范、網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)等學(xué)習(xí)材料，通過(guò)制定計(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ū)動(dòng)。項(xiàng)目實(shí)施與校企合作企業(yè)數(shù)據(jù)庫(kù)系統(tǒng)開發(fā)過(guò)程一致，使學(xué)生的學(xué)習(xí)更加具有針對(duì)性和實(shí)用性。項(xiàng)目設(shè)計(jì)貫穿于教學(xué)整個(gè)過(guò)程中，讓學(xué)生自主學(xué)習(xí)，從而有效的促進(jìn)學(xué)生創(chuàng)新能力的發(fā)展。小組協(xié)作教學(xué)法教學(xué)活動(dòng)以學(xué)生為主體，以學(xué)生活動(dòng)為主線。小組接受項(xiàng)目任務(wù)后，在教師的引導(dǎo)下，集體學(xué)習(xí)與討論，制定計(jì)劃，按照計(jì)劃實(shí)施，然后采用自查、互查、教師檢查、產(chǎn)品推廣應(yīng)用等方式檢測(cè)工作成果，并針對(duì)檢查結(jié)果進(jìn)行修正，最后總結(jié)和評(píng)價(jià)。案例式教學(xué)法案例教學(xué)把理論知識(shí)和解決問(wèn)題的能力有機(jī)地聯(lián)系起來(lái)，幫助學(xué)生運(yùn)用所學(xué)的理論知識(shí)去分析現(xiàn)實(shí)生活中的實(shí)例，學(xué)以致用。讓學(xué)生從中學(xué)到現(xiàn)實(shí)而有用的東西，避免純理論教學(xué)而導(dǎo)致的空談，從而增強(qiáng)教學(xué)效果。教學(xué)過(guò)程“天天打卡”整體布局如果需要每天打卡，統(tǒng)計(jì)要卡數(shù)據(jù)，那么打卡小程序肯定是最佳選擇，本任務(wù)配套源代碼中提供了完整的天天打卡小程序案例。1.案例初始化新建一個(gè)項(xiàng)目，創(chuàng)建一個(gè)名為card的空白頁(yè)面，打開app.json文件，創(chuàng)建新頁(yè)面的代碼如下所示。上述代碼指定小程序頁(yè)面標(biāo)題為“天天打卡”，頁(yè)面背景顏色為藍(lán)色，運(yùn)行結(jié)果如圖所示。圖設(shè)置導(dǎo)航欄打開pages/card/card.js文件，在data對(duì)象中定義初始數(shù)據(jù)，包括打卡名稱，打卡地點(diǎn)，打卡時(shí)間等信息。2.頁(yè)面基本結(jié)構(gòu)分析了天天打卡小程序并學(xué)習(xí)了Flex布局，接下來(lái)編寫天天打卡小程序的基礎(chǔ)頁(yè)面結(jié)構(gòu)和樣式，打開pages/card/card.wxml文件編寫頁(yè)面結(jié)構(gòu)代碼。接下來(lái)在pages/card/card.wxss文件編寫樣式，具體代碼如下?！疤焯齑蚩ā苯M件1.個(gè)人信息-微信API的使用步驟1：在視圖頁(yè)面使用條件渲染獲取個(gè)人信息步驟2：實(shí)現(xiàn)樣式2.打卡名稱-輸入框的使用步驟1：設(shè)置布局步驟2：設(shè)置樣式步驟3：獲取輸出框信息任務(wù)地點(diǎn)-地理位置API的使用步驟1：設(shè)置布局步驟2：步驟3：設(shè)置JS，獲取地理位置任務(wù)時(shí)間-picker組件的使用picker組件：從底部彈起的滾動(dòng)選擇器/miniprogram/dev/component/picker.html步驟1：設(shè)置布局步驟2：設(shè)置樣式步驟3：設(shè)置JS重復(fù)日-條件運(yùn)行符的使用步驟1：設(shè)置布局步驟2：設(shè)置樣式步驟3：設(shè)置JS，請(qǐng)自行完成其它六個(gè)重復(fù)日選中函數(shù)獲取數(shù)據(jù)1.新建按鈕步驟1：設(shè)置布局步驟2：設(shè)置樣式步驟3：實(shí)現(xiàn)綁定事件打卡便簽效果步驟1：設(shè)置布局步驟2：設(shè)置樣式將數(shù)據(jù)寫入到緩存讀取緩存校園新聞案例競(jìng)賽新聞1、頁(yè)面初始化步驟1：新建三個(gè)頁(yè)面步驟2：定義全局樣式步驟3：定義初始數(shù)據(jù)2、頁(yè)面布局和樣式步驟1：設(shè)計(jì)頁(yè)面布局步驟2：設(shè)計(jì)頁(yè)面樣式3、編寫分頁(yè)函數(shù)步驟1：在util.js里定義一個(gè)公共的隨機(jī)函數(shù)步驟2：引入公共文件util.js，編寫fetchNewsListData處理函數(shù)步驟3：在頁(yè)面加載和上拉觸