微信小程序開發(fā)項目實戰(zhàn)（微課版）教案全套 黃龍泉 項目1-10 初識微信小程序 - 用戶信息模塊開發(fā)

《微信小程序開發(fā)》教學(xué)設(shè)計課程名稱：微信小程序開發(fā)授課年級：授課學(xué)期：教師姓名：20年月日課題名稱初識微信小程序計劃學(xué)時4學(xué)時內(nèi)容分析微信小程序簡稱小程序。張小龍于2017年1月9日在微信公開課上宣布其正式上線。小程序英文名是MiniProgram，是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。微信小程序誕生初期，備受各界人士關(guān)注和期待，但是短期之內(nèi)并沒有對行業(yè)造成絕對式的改變，因此曾一度被一些人認(rèn)為小程序只是曇花一現(xiàn)。然而事實證明，小程序并沒有就此消沉，而是在扎扎實實、腳踏實地的改變著整個互聯(lián)網(wǎng)?！疤惶毙∮螒虻某霈F(xiàn)，讓更多的人認(rèn)識到了微信小程序。教學(xué)目標(biāo)及基本要求了解微信小程序的概念及其發(fā)展前景；掌握微信小程序開發(fā)工具的使用；掌握微信小程序的功能；掌握微信小程序的目結(jié)構(gòu)。教學(xué)重點認(rèn)識微信小程序；微信開發(fā)帳號準(zhǔn)備工作；小程序的注意問題。教學(xué)難點小程序的帳號申請；小程序項目創(chuàng)建。教學(xué)方式以職業(yè)需求為導(dǎo)向，以實踐能力培養(yǎng)為重點，以培養(yǎng)“基礎(chǔ)實、知識新、能力強、素質(zhì)高”的復(fù)合型技術(shù)技能人才為目標(biāo)，本模塊結(jié)合目前流行小程序案例，采用任務(wù)驅(qū)動教學(xué)法，靈活運用超星云平臺、教師自主開發(fā)的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據(jù)專業(yè)教學(xué)標(biāo)準(zhǔn)、人才培養(yǎng)方案、課程標(biāo)準(zhǔn)及崗位工作任務(wù)設(shè)計了“導(dǎo)學(xué)-督學(xué)-自學(xué)-輔學(xué)-互學(xué)”五環(huán)節(jié)的教學(xué)活動，充分體現(xiàn)“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念。圖教學(xué)方法任務(wù)驅(qū)動教學(xué)法任務(wù)驅(qū)動教學(xué)法重點培養(yǎng)學(xué)生獲取知識和自主學(xué)習(xí)的能力，是完成項目設(shè)計必須具有的能力。學(xué)生借助教學(xué)課件、專業(yè)書籍、設(shè)計規(guī)范、網(wǎng)絡(luò)學(xué)習(xí)平臺等學(xué)習(xí)材料，通過制定計劃、組織實施、檢查反饋等學(xué)習(xí)環(huán)節(jié)，完成學(xué)生職業(yè)素質(zhì)、職業(yè)技能、職業(yè)道德培養(yǎng)。項目教學(xué)法在課程的宏觀設(shè)計中，以微信開發(fā)項目為導(dǎo)向，微觀設(shè)計中以任務(wù)為驅(qū)動。項目實施與校企合作企業(yè)數(shù)據(jù)庫系統(tǒng)開發(fā)過程一致，使學(xué)生的學(xué)習(xí)更加具有針對性和實用性。項目設(shè)計貫穿于教學(xué)整個過程中，讓學(xué)生自主學(xué)習(xí)，從而有效的促進學(xué)生創(chuàng)新能力的發(fā)展。小組協(xié)作教學(xué)法教學(xué)活動以學(xué)生為主體，以學(xué)生活動為主線。小組接受項目任務(wù)后，在教師的引導(dǎo)下，集體學(xué)習(xí)與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產(chǎn)品推廣應(yīng)用等方式檢測工作成果，并針對檢查結(jié)果進行修正，最后總結(jié)和評價。案例式教學(xué)法案例教學(xué)把理論知識和解決問題的能力有機地聯(lián)系起來，幫助學(xué)生運用所學(xué)的理論知識去分析現(xiàn)實生活中的實例，學(xué)以致用。讓學(xué)生從中學(xué)到現(xiàn)實而有用的東西，避免純理論教學(xué)而導(dǎo)致的空談，從而增強教學(xué)效果。教學(xué)過程認(rèn)識微信小程序：微信小程序簡稱小程序。張小龍于2017年1月9日在微信公開課上宣布其正式上線。小程序英文名是MiniProgram，是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。微信小程序誕生初期，備受各界人士關(guān)注和期待，但是短期之內(nèi)并沒有對行業(yè)造成絕對式的改變，因此曾一度被一些人認(rèn)為小程序只是曇花一現(xiàn)。然而事實證明，小程序并沒有就此消沉，而是在扎扎實實、腳踏實地的改變著整個互聯(lián)網(wǎng)。“跳一跳”小游戲的出現(xiàn)，讓更多的人認(rèn)識到了小程序。官方網(wǎng)址/微信小程序入口：1、掃描微信二維碼。比如掃描微信官方小程序碼：

2、進入：微信->發(fā)現(xiàn)->小程序，有附近的小程序、搜索小程序。比如可以搜索京東的小程序。3、在微信聊天界面，下拉也可以看到最近使用的微信小程序。準(zhǔn)備工作1、硬件準(zhǔn)備裝有微信的手機一臺。2、賬號注冊進入/cgi-bin/registermidpage?action=index&lang=zh_CN&token=注冊一個微信小程序賬號。

然后輸入郵箱注冊賬號。一個郵箱只能注冊一個微信公眾平臺賬號（比如小程序、公眾號等）

注冊的時候，先選擇個人用戶即可。如果你有工商營業(yè)執(zhí)照，也可以創(chuàng)建企業(yè)賬號。企業(yè)賬號能擁有的功能會更多，比如支付等。注冊完后，后面會出現(xiàn)一個二維碼，讓你掃描這個二維碼來綁定你的微信賬號。一個微信賬號只能綁定5個微信公眾平臺賬號。3、注冊小程序賬號（1）訪問微信公眾平臺官方首頁（/），在首頁下方選擇“小程序”進入小程序頁面，如圖所示。圖微信公眾平臺官網(wǎng)首頁（2）在接入流程的頁面，可以看到小程序的開發(fā)過程。依次是注冊小程序賬號、小程序信息完善、開發(fā)小程序及提交審核和發(fā)布。這也是即將學(xué)習(xí)小程序的操作過程。選擇“前往注冊”鏈接進入到申請賬號頁面。圖微信小程序接入流程（3）進入到小程序注冊填寫信息頁面，填寫的這個郵箱必須沒有綁定過個人微信，也沒有注冊過微信公眾平臺下的訂閱號或者服務(wù)號。在賬號信息頁面中填寫郵箱、密碼、確認(rèn)密碼、驗證碼并勾選同意協(xié)議條款，如圖所示。圖填寫注冊信息（4）小程序系統(tǒng)會發(fā)送一份確認(rèn)郵件到注冊時填寫的郵箱中，如圖所示。單擊“登錄郵箱”，去到郵箱確認(rèn)激活信息。圖郵箱激活提醒（5）登錄對應(yīng)的注冊郵箱查看激活郵件。查圖所示。圖小程序激活郵件（6）信息登記是比較關(guān)鍵的一步，需要填寫開發(fā)者的真實姓名、身份證號碼和手機號碼，并且需要用個人微信號掃描圖中的二維碼來綁定小程序管理賬戶。（7）單擊下方的“繼續(xù)”按鈕進入下一步，系統(tǒng)會彈出一個提示框讓開發(fā)者做最后的確認(rèn)，如圖所示。單擊“確定”按鈕完成小程序管理賬號的注冊過程。2.查看小程序的AppID成功注冊好小程序開發(fā)者賬號之后，直拉進行小程序后臺管理頁面或者登錄到微信公眾平臺（/）查看個人的AppID。在左側(cè)導(dǎo)航欄里選擇“開發(fā)”->“開發(fā)管理”界面，在“開發(fā)設(shè)置”選項卡里查看到個人的AppID，如圖所示。該AppID需要保存好，在后續(xù)的開發(fā)中需要讀取到個人的AppID信息。圖查看小程序AppID課堂練習(xí)1按照以上注冊小程序帳號的步驟，嘗試使用未注冊的郵箱申請小程序開發(fā)帳號。5、開發(fā)工具微信官方開發(fā)工具。下載鏈接：\t"F:/%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B/%E5%BE%AE%E4%BF%A1/(%E4%BB%B7%E5%80%BC699)%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%90%83%E9%80%8F%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-2019%E5%B9%B4/%E8%AF%BE%E4%BB%B6%E8%B5%84%E6%96%99/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%AF%BE%E4%BB%B6/miniprogram/chapter1/_blank"/miniprogram/dev/devtools/download.html開發(fā)工具的使用安裝好微信小程序開發(fā)工具之后，雙擊桌面“微信開發(fā)者工具”圖標(biāo)，運行微信開發(fā)者工具，該工具需要使用手機微信賬號掃描登錄，如圖所示。成功登錄之后，雙擊微信開發(fā)者工具，在左側(cè)導(dǎo)航欄選擇“小程序”選項，單擊右側(cè)的“+”按鈕，進入創(chuàng)建小程序界面。1、JSON的基本語法教程：/wiki.html/json/index.asp課堂練習(xí)2步驟1：新建一個項目（以后每節(jié)課都是這個項目，請保存）步驟2：在index.wxml頁面輸入以下代碼。步驟3：設(shè)置樣式小程序布局1、主體文件在小程序項目下，有三個主體文件，分別是定義全局?jǐn)?shù)據(jù)和函數(shù)文件app.js、全局配置文件app.json、全局樣式文件app.wxss。綜合實訓(xùn)題課堂練習(xí)思考題：在data下定義以下數(shù)據(jù)，如何讀取gender里的數(shù)據(jù)，如何將性別值渲染到頁面？效果如下圖所示。思考題和習(xí)題見教材第1章配套的習(xí)題教學(xué)后記《微信小程序開發(fā)》教學(xué)設(shè)計課程名稱：微信小程序開發(fā)授課年級：授課學(xué)期：教師姓名：20年月日課題名稱小程序編程基礎(chǔ)計劃學(xué)時4學(xué)時內(nèi)容分析邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋。開發(fā)者寫的所有代碼最終將會打包成一份

JavaScript

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

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

setData()

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

this.data

的值（同步）。setData()參數(shù)格式：接受一個對象，其過程大致可以分成幾個階段：圖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語句，實現(xiàn)九九乘法表。效果如下所示。步驟1：定義數(shù)據(jù)步驟2：設(shè)計頁面布局步驟3：實現(xiàn)樣式四、條件渲染1wx:if的使用2blockwx:if的使用3hidden的使用Page({

data:

{

flag:true

}})五、事件綁定事件是視圖層到邏輯層的通訊方式，可以將用戶的行為反饋到邏輯層進行處理。事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。事件對象可以攜帶額外信息，如id,dataset,touches小程序中綁定事件，通過bind關(guān)鍵字來實現(xiàn)。如bindinput，bindtap(綁定點擊事件)，bindchange等。1事件的使用方式3事件的捕獲階觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達(dá)節(jié)點的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽事件時，可以采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。課堂練習(xí)1、完成以下效果圖步驟1：定義初始數(shù)據(jù)步驟2：實現(xiàn)頁面布局，并進行數(shù)據(jù)綁定步驟3：設(shè)計頁面樣式步驟4：獲取表單數(shù)據(jù)步驟5：如何實現(xiàn)以下效果，自行完成代碼編寫課堂練習(xí)實現(xiàn)對表格動態(tài)增加或刪除一行數(shù)據(jù)。效果如下所示。步驟1：定義數(shù)據(jù)步驟2：定義布局步驟3:編寫樣式步驟4：實現(xiàn)綁定事件思考題和習(xí)題見教材第2章配套的習(xí)題教學(xué)后記《微信小程序開發(fā)》教學(xué)設(shè)計課程名稱：微信小程序開發(fā)授課年級：授課學(xué)期：教師姓名：20年月日課題名稱小程序編程基礎(chǔ)計劃學(xué)時4學(xué)時內(nèi)容分析邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋。開發(fā)者寫的所有代碼最終將會打包成一份

JavaScript

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

ServiceWorker，所以邏輯層也稱之為AppService。教學(xué)目標(biāo)及基本要求掌握小程序的基本架構(gòu)和執(zhí)行順序。掌握頁面數(shù)據(jù)的構(gòu)建的方法。掌握列表渲染和條件渲染含義與使用方法。掌握事件綁定基本方法和技巧。教學(xué)重點掌握頁面數(shù)據(jù)的構(gòu)建的方法。掌握列表渲染和條件渲染含義與使用方法。教學(xué)難點事件綁定基本方法和技巧教學(xué)方式以職業(yè)需求為導(dǎo)向，以實踐能力培養(yǎng)為重點，以培養(yǎng)“基礎(chǔ)實、知識新、能力強、素質(zhì)高”的復(fù)合型技術(shù)技能人才為目標(biāo)，本模塊結(jié)合目前流行小程序案例，采用任務(wù)驅(qū)動教學(xué)法，靈活運用超星云平臺、教師自主開發(fā)的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據(jù)專業(yè)教學(xué)標(biāo)準(zhǔn)、人才培養(yǎng)方案、課程標(biāo)準(zhǔn)及崗位工作任務(wù)設(shè)計了“導(dǎo)學(xué)-督學(xué)-自學(xué)-輔學(xué)-互學(xué)”五環(huán)節(jié)的教學(xué)活動，充分體現(xiàn)“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念。圖教學(xué)方法任務(wù)驅(qū)動教學(xué)法任務(wù)驅(qū)動教學(xué)法重點培養(yǎng)學(xué)生獲取知識和自主學(xué)習(xí)的能力，是完成項目設(shè)計必須具有的能力。學(xué)生借助教學(xué)課件、專業(yè)書籍、設(shè)計規(guī)范、網(wǎng)絡(luò)學(xué)習(xí)平臺等學(xué)習(xí)材料，通過制定計劃、組織實施、檢查反饋等學(xué)習(xí)環(huán)節(jié)，完成學(xué)生職業(yè)素質(zhì)、職業(yè)技能、職業(yè)道德培養(yǎng)。項目教學(xué)法在課程的宏觀設(shè)計中，以微信開發(fā)項目為導(dǎo)向，微觀設(shè)計中以任務(wù)為驅(qū)動。項目實施與校企合作企業(yè)數(shù)據(jù)庫系統(tǒng)開發(fā)過程一致，使學(xué)生的學(xué)習(xí)更加具有針對性和實用性。項目設(shè)計貫穿于教學(xué)整個過程中，讓學(xué)生自主學(xué)習(xí)，從而有效的促進學(xué)生創(chuàng)新能力的發(fā)展。小組協(xié)作教學(xué)法教學(xué)活動以學(xué)生為主體，以學(xué)生活動為主線。小組接受項目任務(wù)后，在教師的引導(dǎo)下，集體學(xué)習(xí)與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產(chǎn)品推廣應(yīng)用等方式檢測工作成果，并針對檢查結(jié)果進行修正，最后總結(jié)和評價。案例式教學(xué)法案例教學(xué)把理論知識和解決問題的能力有機地聯(lián)系起來，幫助學(xué)生運用所學(xué)的理論知識去分析現(xiàn)實生活中的實例，學(xué)以致用。讓學(xué)生從中學(xué)到現(xiàn)實而有用的東西，避免純理論教學(xué)而導(dǎo)致的空談，從而增強教學(xué)效果。教學(xué)過程“天天打卡”整體布局如果需要每天打卡，統(tǒng)計要卡數(shù)據(jù)，那么打卡小程序肯定是最佳選擇，本任務(wù)配套源代碼中提供了完整的天天打卡小程序案例。1.案例初始化新建一個項目，創(chuàng)建一個名為card的空白頁面，打開app.json文件，創(chuàng)建新頁面的代碼如下所示。上述代碼指定小程序頁面標(biāo)題為“天天打卡”，頁面背景顏色為藍(lán)色，運行結(jié)果如圖所示。圖設(shè)置導(dǎo)航欄打開pages/card/card.js文件，在data對象中定義初始數(shù)據(jù)，包括打卡名稱，打卡地點，打卡時間等信息。2.頁面基本結(jié)構(gòu)分析了天天打卡小程序并學(xué)習(xí)了Flex布局，接下來編寫天天打卡小程序的基礎(chǔ)頁面結(jié)構(gòu)和樣式，打開pages/card/card.wxml文件編寫頁面結(jié)構(gòu)代碼。接下來在pages/card/card.wxss文件編寫樣式，具體代碼如下?！疤焯齑蚩ā苯M件1.個人信息-微信API的使用步驟1：在視圖頁面使用條件渲染獲取個人信息步驟2：實現(xiàn)樣式2.打卡名稱-輸入框的使用步驟1：設(shè)置布局步驟2：設(shè)置樣式步驟3：獲取輸出框信息任務(wù)地點-地理位置API的使用步驟1：設(shè)置布局步驟2：步驟3：設(shè)置JS，獲取地理位置任務(wù)時間-picker組件的使用picker組件：從底部彈起的滾動選擇器/miniprogram/dev/component/picker.html步驟1：設(shè)置布局步驟2：設(shè)置樣式步驟3：設(shè)置JS重復(fù)日-條件運行符的使用步驟1：設(shè)置布局步驟2：設(shè)置樣式步驟3：設(shè)置JS，請自行完成其它六個重復(fù)日選中函數(shù)獲取數(shù)據(jù)1.新建按鈕步驟1：設(shè)置布局步驟2：設(shè)置樣式步驟3：實現(xiàn)綁定事件打卡便簽效果步驟1：設(shè)置布局步驟2：設(shè)置樣式將數(shù)據(jù)寫入到緩存讀取緩存校園新聞案例競賽新聞1、頁面初始化步驟1：新建三個頁面步驟2：定義全局樣式步驟3：定義初始數(shù)據(jù)2、頁面布局和樣式步驟1：設(shè)計頁面布局步驟2：設(shè)計頁面樣式3、編寫分頁函數(shù)步驟1：在util.js里定義一個公共的隨機函數(shù)步驟2：引入公共文件util.js，編寫fetchNewsListData處理函數(shù)步驟3：在頁面加載和上拉觸底時分別調(diào)用分頁函數(shù)。步驟4：在JSON文件里，開啟上底觸底。課后作業(yè)使用Flex彈性盒模型布局方法，實現(xiàn)支付寶的界面，效果如下圖所示。圖3-15支付寶案例思考題和習(xí)題見教材第3章配套的習(xí)題教學(xué)后記《微信小程序開發(fā)》教學(xué)設(shè)計課程名稱：微信小程序開發(fā)授課年級：授課學(xué)期：教師姓名：20年月日課題名稱商城首頁模塊開發(fā)計劃學(xué)時8學(xué)時內(nèi)容分析在學(xué)習(xí)了小程序的基礎(chǔ)知識以及頁面布局之后，讀者可以開始嘗試創(chuàng)建一個小程序前端綜合設(shè)計實例。本項目以“梅園”為主題，帶領(lǐng)讀者從頁面創(chuàng)建到數(shù)據(jù)請求，講解如何實現(xiàn)一個帶有新聞、產(chǎn)品頁面的簡易小程序。教學(xué)目標(biāo)及基本要求掌握小程序的基本架構(gòu)和執(zhí)行順序。理解tabBar、swiper和scroll-view三種組件的使用方法。掌握利用Flex彈性盒模型設(shè)置首頁模塊樣式和布局的方法。掌握利用JavaScript程序設(shè)計的基本方法和技巧。掌握小程序列表渲染的方法。教學(xué)重點tabBar、swiper和scroll-view三種組件的使用方法。利用JavaScript程序設(shè)計的基本方法和技巧。教學(xué)難點小程序列表渲染的方法教學(xué)方式以職業(yè)需求為導(dǎo)向，以實踐能力培養(yǎng)為重點，以培養(yǎng)“基礎(chǔ)實、知識新、能力強、素質(zhì)高”的復(fù)合型技術(shù)技能人才為目標(biāo)，本模塊結(jié)合目前流行小程序案例，采用任務(wù)驅(qū)動教學(xué)法，靈活運用超星云平臺、教師自主開發(fā)的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據(jù)專業(yè)教學(xué)標(biāo)準(zhǔn)、人才培養(yǎng)方案、課程標(biāo)準(zhǔn)及崗位工作任務(wù)設(shè)計了“導(dǎo)學(xué)-督學(xué)-自學(xué)-輔學(xué)-互學(xué)”五環(huán)節(jié)的教學(xué)活動，充分體現(xiàn)“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念。圖教學(xué)方法任務(wù)驅(qū)動教學(xué)法任務(wù)驅(qū)動教學(xué)法重點培養(yǎng)學(xué)生獲取知識和自主學(xué)習(xí)的能力，是完成項目設(shè)計必須具有的能力。學(xué)生借助教學(xué)課件、專業(yè)書籍、設(shè)計規(guī)范、網(wǎng)絡(luò)學(xué)習(xí)平臺等學(xué)習(xí)材料，通過制定計劃、組織實施、檢查反饋等學(xué)習(xí)環(huán)節(jié)，完成學(xué)生職業(yè)素質(zhì)、職業(yè)技能、職業(yè)道德培養(yǎng)。項目教學(xué)法在課程的宏觀設(shè)計中，以微信開發(fā)項目為導(dǎo)向，微觀設(shè)計中以任務(wù)為驅(qū)動。項目實施與校企合作企業(yè)數(shù)據(jù)庫系統(tǒng)開發(fā)過程一致，使學(xué)生的學(xué)習(xí)更加具有針對性和實用性。項目設(shè)計貫穿于教學(xué)整個過程中，讓學(xué)生自主學(xué)習(xí)，從而有效的促進學(xué)生創(chuàng)新能力的發(fā)展。小組協(xié)作教學(xué)法教學(xué)活動以學(xué)生為主體，以學(xué)生活動為主線。小組接受項目任務(wù)后，在教師的引導(dǎo)下，集體學(xué)習(xí)與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產(chǎn)品推廣應(yīng)用等方式檢測工作成果，并針對檢查結(jié)果進行修正，最后總結(jié)和評價。案例式教學(xué)法案例教學(xué)把理論知識和解決問題的能力有機地聯(lián)系起來，幫助學(xué)生運用所學(xué)的理論知識去分析現(xiàn)實生活中的實例，學(xué)以致用。讓學(xué)生從中學(xué)到現(xiàn)實而有用的東西，避免純理論教學(xué)而導(dǎo)致的空談，從而增強教學(xué)效果。教學(xué)過程項目創(chuàng)建1.新建小程序項目本項目名稱命名為“wintersweet”，創(chuàng)建空白文件夾，選好目錄后，輸入AppID，開發(fā)模式選擇“小程序”，初始模板選擇“默認(rèn)模板”，語言選擇“JavaScript”。圖創(chuàng)建新項目2.新建頁面文件本項目所有圖片素材放置在images文件夾下，并在images下面按圖片功能進分文件夾放置，例如tabs文件，放置的是導(dǎo)航欄里的icon圖標(biāo)。新建5個頁面文件夾，分別是news新聞列表頁，newsDetail新聞詳情頁、goods產(chǎn)品頁、goodsDetail產(chǎn)品詳情頁、profile個人信息頁。頁面目錄結(jié)構(gòu)如下圖所示：視圖設(shè)計1.導(dǎo)航欄設(shè)計小程序默認(rèn)導(dǎo)航欄是黑底白字的效果，可以通過app.json中對window屬性進行重新配置來定義導(dǎo)航欄效果。表頁面配置選項屬性類型默認(rèn)值描述backgroundTextStylestringdark下拉loading的樣式，僅支持

dark

/

lightnavigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，如

#000000navigationBarTitleTextstring導(dǎo)航欄標(biāo)題文字內(nèi)容navigationBarTextStylestringwhite導(dǎo)航欄標(biāo)題顏色，僅支持

black

/

white修改“梅園”小程序項目配置app.json方件，效果所下圖所示。圖3-5自定義導(dǎo)航欄效果tabBar組件的設(shè)計圖tabBar效果圖在app.json文件中實現(xiàn)tabBar屬性的設(shè)置，代碼如下：課堂練習(xí)11、結(jié)合“新建頁面文件”和“tabBar設(shè)計”增加一個新的“購物車”切換頁面，圖片素材使用images文件夾下面的cart.png和cart-active.png兩張圖片。2、查閱開發(fā)者文檔，實現(xiàn)tabBar在頁面頂部顯示，如圖所示。圖3-7加上購物車頁面的效果圖3-8tabBar設(shè)置為頂部效果swiper輪播圖組件的設(shè)計實現(xiàn)“梅園”小程序首頁的輪播圖功能，效果如下圖所示。圖輪播圖效果圖步驟1：在index.js頁面，定義sliderList數(shù)組內(nèi)容。步驟2：在index.wxml頁面，實現(xiàn)swiper組件，代碼如下所示：步驟3：在index.wxss頁面，定義輪播圖樣式，代碼如下所示。課堂練習(xí)2將以上示例的輪播圖修改如下效果，將輪播圖設(shè)為圓角，特別注意輪播圖在滑動過程中如果先顯示直角，等滑動一整張之后才會變成圓角的現(xiàn)象，想一想，如何進行設(shè)置？彈性布局設(shè)計頁面利用Flex彈性盒模型實現(xiàn)“梅園”小程序圖片導(dǎo)航功能。完成效果如下圖所示。步驟1：在index.js頁面，定義navList數(shù)組內(nèi)容。步驟2：在index.wxml頁面，進行圖片導(dǎo)航功能的布局設(shè)計，代碼如下所示：步驟3：在index.wxss頁面，定義圖片導(dǎo)航功能樣式，代碼如下所示。課堂練習(xí)3查看小程序開發(fā)文檔，查找navigator組件的屬性，對示例3.1的圖片導(dǎo)航加上跳轉(zhuǎn)鏈接，實現(xiàn)跳轉(zhuǎn)到news頁面。scroll-view組件的設(shè)計利用scroll-view組件實現(xiàn)“梅園”小程序“推薦美景”功能。完成效果如下圖所示。圖3-13“推薦美景”功能步驟1：在index.js頁面，定義recomList數(shù)組內(nèi)容。步驟2：在index.wxml頁面，進行“推薦美景”功能的布局設(shè)計，代碼如下所示：步驟3：在index.wxss頁面，定義“推薦美景”功能樣式，代碼如下所示。課堂練習(xí)4實現(xiàn)頂部導(dǎo)航，使用scroll-view組件實現(xiàn)內(nèi)容頁的滑動功能，效果如下圖所示。6.公共樣式的設(shè)計步驟1：打開app.wxss頁面，定義一個公共的樣式，實現(xiàn)頁面功能之間的間隔。步驟2：打開index.wxml頁面，在圖片導(dǎo)航和推薦美圖之間，實現(xiàn)app.wxss里定義的樣式。7.彈性布局實現(xiàn)最新產(chǎn)品圖最新產(chǎn)品效果圖步驟1：在index.js頁面，定義goodsList數(shù)組內(nèi)容。步驟2：在index.wxml頁面，定義最新產(chǎn)品的布局。具體代碼如下所示。步驟3：在index.wxss頁面，定義最新產(chǎn)品的樣式。具體代碼如下所示。思考題和習(xí)題見教材第4章配套的習(xí)題教學(xué)后記《微信小程序開發(fā)》教學(xué)設(shè)計課程名稱：微信小程序開發(fā)授課年級：授課學(xué)期：教師姓名：20年月日課題名稱新聞頁面模塊開發(fā)計劃學(xué)時8學(xué)時內(nèi)容分析在學(xué)習(xí)了小程序的基礎(chǔ)知識以及頁面布局之后，讀者可以開始嘗試創(chuàng)建一個小程序前端綜合設(shè)計實例。本項目以“梅園”為主題，帶領(lǐng)讀者從頁面創(chuàng)建到數(shù)據(jù)請求，講解如何實現(xiàn)一個帶有新聞、產(chǎn)品頁面的簡易小程序。教學(xué)目標(biāo)及基本要求掌握靜態(tài)數(shù)據(jù)的定義與接口的使用。理解新聞列表頁與新聞詳情頁數(shù)據(jù)的讀取。掌握利用本地緩存的寫入與讀取實現(xiàn)收藏功能。掌握按鈕和菜單轉(zhuǎn)發(fā)分享的基本方法和技巧。掌握背景音樂的調(diào)用以及監(jiān)聽方法。教學(xué)重點新聞列表頁與新聞詳情頁數(shù)據(jù)的讀取。利用本地緩存的寫入與讀取實現(xiàn)收藏功能。教學(xué)難點利用本地緩存的寫入與讀取實現(xiàn)收藏功能教學(xué)方式以職業(yè)需求為導(dǎo)向，以實踐能力培養(yǎng)為重點，以培養(yǎng)“基礎(chǔ)實、知識新、能力強、素質(zhì)高”的復(fù)合型技術(shù)技能人才為目標(biāo)，本模塊結(jié)合目前流行小程序案例，采用任務(wù)驅(qū)動教學(xué)法，靈活運用超星云平臺、教師自主開發(fā)的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據(jù)專業(yè)教學(xué)標(biāo)準(zhǔn)、人才培養(yǎng)方案、課程標(biāo)準(zhǔn)及崗位工作任務(wù)設(shè)計了“導(dǎo)學(xué)-督學(xué)-自學(xué)-輔學(xué)-互學(xué)”五環(huán)節(jié)的教學(xué)活動，充分體現(xiàn)“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念。圖教學(xué)方法任務(wù)驅(qū)動教學(xué)法任務(wù)驅(qū)動教學(xué)法重點培養(yǎng)學(xué)生獲取知識和自主學(xué)習(xí)的能力，是完成項目設(shè)計必須具有的能力。學(xué)生借助教學(xué)課件、專業(yè)書籍、設(shè)計規(guī)范、網(wǎng)絡(luò)學(xué)習(xí)平臺等學(xué)習(xí)材料，通過制定計劃、組織實施、檢查反饋等學(xué)習(xí)環(huán)節(jié)，完成學(xué)生職業(yè)素質(zhì)、職業(yè)技能、職業(yè)道德培養(yǎng)。項目教學(xué)法在課程的宏觀設(shè)計中，以微信開發(fā)項目為導(dǎo)向，微觀設(shè)計中以任務(wù)為驅(qū)動。項目實施與校企合作企業(yè)數(shù)據(jù)庫系統(tǒng)開發(fā)過程一致，使學(xué)生的學(xué)習(xí)更加具有針對性和實用性。項目設(shè)計貫穿于教學(xué)整個過程中，讓學(xué)生自主學(xué)習(xí)，從而有效的促進學(xué)生創(chuàng)新能力的發(fā)展。小組協(xié)作教學(xué)法教學(xué)活動以學(xué)生為主體，以學(xué)生活動為主線。小組接受項目任務(wù)后，在教師的引導(dǎo)下，集體學(xué)習(xí)與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產(chǎn)品推廣應(yīng)用等方式檢測工作成果，并針對檢查結(jié)果進行修正，最后總結(jié)和評價。案例式教學(xué)法案例教學(xué)把理論知識和解決問題的能力有機地聯(lián)系起來，幫助學(xué)生運用所學(xué)的理論知識去分析現(xiàn)實生活中的實例，學(xué)以致用。讓學(xué)生從中學(xué)到現(xiàn)實而有用的東西，避免純理論教學(xué)而導(dǎo)致的空談，從而增強教學(xué)效果。教學(xué)過程梅園-首頁模塊開發(fā)項目創(chuàng)建1.新建小程序項目圖創(chuàng)建新項目2.新建頁面文件視圖設(shè)計1.導(dǎo)航欄設(shè)計圖3-5自定義導(dǎo)航欄效果tabBar組件的設(shè)計使用tabBar組件，完成“梅園”小程序底部導(dǎo)航，實現(xiàn)頁面切換效果。效果所下圖所示。圖tabBar效果圖在app.json文件中實現(xiàn)tabBar屬性的設(shè)置，代碼如下：課堂練習(xí)11、結(jié)合“新建頁面文件”和“tabBar設(shè)計”增加一個新的“購物車”切換頁面，圖片素材使用images文件夾下面的cart.png和cart-active.png兩張圖片。2、查閱開發(fā)者文檔，實現(xiàn)tabBar在頁面頂部顯示，如圖所示。圖3-7加上購物車頁面的效果圖3-8tabBar設(shè)置為頂部效果swiper輪播圖組件的設(shè)計嵌套在swiper內(nèi)部的swiper-item組件的屬性只有一個item-id屬性，用來標(biāo)識每個swiper-item的id，其值類型為string。代碼如下所示。實現(xiàn)“梅園”小程序首頁的輪播圖功能，效果如下圖所示。圖輪播圖效果圖步驟1：在index.js頁面，定義sliderList數(shù)組內(nèi)容。步驟2：在index.wxml頁面，實現(xiàn)swiper組件，代碼如下所示：步驟3：在index.wxss頁面，定義輪播圖樣式，代碼如下所示。課堂練習(xí)2將以上示例的輪播圖修改如下效果，將輪播圖設(shè)為圓角，特別注意輪播圖在滑動過程中如果先顯示直角，等滑動一整張之后才會變成圓角的現(xiàn)象，想一想，如何進行設(shè)置？彈性布局設(shè)計頁面利用Flex彈性盒模型實現(xiàn)“梅園”小程序圖片導(dǎo)航功能。完成效果如下圖所示。步驟1：在index.js頁面，定義navList數(shù)組內(nèi)容。步驟2：在index.wxml頁面，進行圖片導(dǎo)航功能的布局設(shè)計，代碼如下所示：步驟3：在index.wxss頁面，定義圖片導(dǎo)航功能樣式，代碼如下所示。課堂練習(xí)3查看小程序開發(fā)文檔，查找navigator組件的屬性，對示例3.1的圖片導(dǎo)航加上跳轉(zhuǎn)鏈接，實現(xiàn)跳轉(zhuǎn)到news頁面。scroll-view組件的設(shè)計利用scroll-view組件實現(xiàn)“梅園”小程序“推薦美景”功能。完成效果如下圖所示。圖3-13“推薦美景”功能步驟1：在index.js頁面，定義recomList數(shù)組內(nèi)容。步驟2：在index.wxml頁面，進行“推薦美景”功能的布局設(shè)計，代碼如下所示：步驟3：在index.wxss頁面，定義“推薦美景”功能樣式，代碼如下所示。課堂練習(xí)4實現(xiàn)頂部導(dǎo)航，使用scroll-view組件實現(xiàn)內(nèi)容頁的滑動功能，效果如下圖所示。6.公共樣式的設(shè)計步驟1：打開app.wxss頁面，定義一個公共的樣式，實現(xiàn)頁面功能之間的間隔。步驟2：打開index.wxml頁面，在圖片導(dǎo)航和推薦美圖之間，實現(xiàn)app.wxss里定義的樣式。7.彈性布局實現(xiàn)最新產(chǎn)品圖最新產(chǎn)品效果圖步驟1：在index.js頁面，定義goodsList數(shù)組內(nèi)容。步驟2：在index.wxml頁面，定義最新產(chǎn)品的布局。具體代碼如下所示。步驟3：在index.wxss頁面，定義最新產(chǎn)品的樣式。具體代碼如下所示。思考題和習(xí)題見教材第5章配套的習(xí)題教學(xué)后記《微信小程序開發(fā)》教學(xué)設(shè)計課程名稱：微信小程序開發(fā)授課年級：授課學(xué)期：教師姓名：20年月日課題名稱商品頁面模塊開發(fā)計劃學(xué)時8學(xué)時內(nèi)容分析在小程序開發(fā)中，商品模塊一般包括商品分類列表、商品列表、商品詳情、商品評價等，小程序提供了各類API和組件為實現(xiàn)商品模塊提供了便利。掌握了這些API和組件的使用，即可完成商品模塊功能的開發(fā)。本項目將通過“梅園-商品頁面”，講解商品分類的布局、組件的創(chuàng)建與使用、picker組件等各類商品頁面所需要的功能。教學(xué)目標(biāo)及基本要求小程序滑動事件的定義與使用。自定義組件的創(chuàng)建與使用。利用picker組件設(shè)置商品選項功能。iconfont圖標(biāo)庫的使用方法和技巧。教學(xué)重點自定義組件的創(chuàng)建與使用。利用picker組件設(shè)置商品選項功能。教學(xué)難點自定義組件的創(chuàng)建與使用教學(xué)方式以職業(yè)需求為導(dǎo)向，以實踐能力培養(yǎng)為重點，以培養(yǎng)“基礎(chǔ)實、知識新、能力強、素質(zhì)高”的復(fù)合型技術(shù)技能人才為目標(biāo)，本模塊結(jié)合目前流行小程序案例，采用任務(wù)驅(qū)動教學(xué)法，靈活運用超星云平臺、教師自主開發(fā)的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據(jù)專業(yè)教學(xué)標(biāo)準(zhǔn)、人才培養(yǎng)方案、課程標(biāo)準(zhǔn)及崗位工作任務(wù)設(shè)計了“導(dǎo)學(xué)-督學(xué)-自學(xué)-輔學(xué)-互學(xué)”五環(huán)節(jié)的教學(xué)活動，充分體現(xiàn)“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念。圖教學(xué)方法任務(wù)驅(qū)動教學(xué)法任務(wù)驅(qū)動教學(xué)法重點培養(yǎng)學(xué)生獲取知識和自主學(xué)習(xí)的能力，是完成項目設(shè)計必須具有的能力。學(xué)生借助教學(xué)課件、專業(yè)書籍、設(shè)計規(guī)范、網(wǎng)絡(luò)學(xué)習(xí)平臺等學(xué)習(xí)材料，通過制定計劃、組織實施、檢查反饋等學(xué)習(xí)環(huán)節(jié)，完成學(xué)生職業(yè)素質(zhì)、職業(yè)技能、職業(yè)道德培養(yǎng)。項目教學(xué)法在課程的宏觀設(shè)計中，以微信開發(fā)項目為導(dǎo)向，微觀設(shè)計中以任務(wù)為驅(qū)動。項目實施與校企合作企業(yè)數(shù)據(jù)庫系統(tǒng)開發(fā)過程一致，使學(xué)生的學(xué)習(xí)更加具有針對性和實用性。項目設(shè)計貫穿于教學(xué)整個過程中，讓學(xué)生自主學(xué)習(xí)，從而有效的促進學(xué)生創(chuàng)新能力的發(fā)展。小組協(xié)作教學(xué)法教學(xué)活動以學(xué)生為主體，以學(xué)生活動為主線。小組接受項目任務(wù)后，在教師的引導(dǎo)下，集體學(xué)習(xí)與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產(chǎn)品推廣應(yīng)用等方式檢測工作成果，并針對檢查結(jié)果進行修正，最后總結(jié)和評價。案例式教學(xué)法案例教學(xué)把理論知識和解決問題的能力有機地聯(lián)系起來，幫助學(xué)生運用所學(xué)的理論知識去分析現(xiàn)實生活中的實例，學(xué)以致用。讓學(xué)生從中學(xué)到現(xiàn)實而有用的東西，避免純理論教學(xué)而導(dǎo)致的空談，從而增強教學(xué)效果。教學(xué)過程修改頁面產(chǎn)品分類左邊頁面下面的截圖頁面都是goodsCate步驟1：定義基礎(chǔ)數(shù)據(jù)步驟2：將產(chǎn)品分類頁，分成左右在布局步驟3：左邊的布局，左邊的布局代碼如下：步驟4：左邊樣式獲取小程序頁面的高度小程序為我們提供了這樣的wx.getSystemInfo(Objectobject)和同步Objectwx.getSystemInfoSync()接口可以獲取系統(tǒng)信息。windowHeight屬性可以獲取可使用窗口高度，單位px。步驟1：獲取小程序頁面的高度步驟2：設(shè)置左邊區(qū)域的高度左邊分類點擊事件步驟1:定義三個基礎(chǔ)數(shù)據(jù)步驟2，綁定事件步驟3：handleCategory商品分類右邊頁面步驟1：右邊布局步驟2：樣式步驟3：獲取每一個節(jié)點的高度值。步驟3：實現(xiàn)rightView事件商品列表頁面步驟1：頁面布局步驟2：星星組件的定義步驟1：新建組件頁面步驟2：定義星星組件的屬性列表步驟3：星星組件的布局步驟4：星星組件的樣式星星組件的生命周期方法星星組件的使用步驟1：引入星星星組件步驟2：使用星星組件練習(xí)組件的使用思考題和習(xí)題見教材第6章配套的習(xí)題教學(xué)后記《微信小程序開發(fā)》教學(xué)設(shè)計課程名稱：微信小程序開發(fā)授課年級：授課學(xué)期：教師姓名：20年月日課題名稱購物車模塊開發(fā)計劃學(xué)時8學(xué)時內(nèi)容分析在小程序開發(fā)中，購物車模塊一般包括商品列表、商品金額計算、商品數(shù)量增減、商品所選規(guī)格等，小程序提供了各類API和組件為實現(xiàn)商品購物車提供了便利。購物車商品數(shù)量在后續(xù)的數(shù)據(jù)接口中將進一步講解。本項目將通過“梅園-購物車頁面”，講解商品購物車的布局、條件渲染、forEach、every函數(shù)在金額計算中的使用等購物車頁面所需要的功能。教學(xué)目標(biāo)及基本要求掌握小程序購物車頁面的基本布局與樣式。掌握購物車商品列表循環(huán)讀取方法。掌握獲取購物車單選和全選商品金額計算方式。了解購物車為空狀態(tài)的布局與樣式。教學(xué)重點購物車商品列表循環(huán)讀取方法。獲取購物車單選和全選商品金額計算方式。教學(xué)難點獲取購物車單選和全選商品金額計算方式教學(xué)方式以職業(yè)需求為導(dǎo)向，以實踐能力培養(yǎng)為重點，以培養(yǎng)“基礎(chǔ)實、知識新、能力強、素質(zhì)高”的復(fù)合型技術(shù)技能人才為目標(biāo)，本模塊結(jié)合目前流行小程序案例，采用任務(wù)驅(qū)動教學(xué)法，靈活運用超星云平臺、教師自主開發(fā)的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據(jù)專業(yè)教學(xué)標(biāo)準(zhǔn)、人才培養(yǎng)方案、課程標(biāo)準(zhǔn)及崗位工作任務(wù)設(shè)計了“導(dǎo)學(xué)-督學(xué)-自學(xué)-輔學(xué)-互學(xué)”五環(huán)節(jié)的教學(xué)活動，充分體現(xiàn)“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念。圖教學(xué)方法任務(wù)驅(qū)動教學(xué)法任務(wù)驅(qū)動教學(xué)法重點培養(yǎng)學(xué)生獲取知識和自主學(xué)習(xí)的能力，是完成項目設(shè)計必須具有的能力。學(xué)生借助教學(xué)課件、專業(yè)書籍、設(shè)計規(guī)范、網(wǎng)絡(luò)學(xué)習(xí)平臺等學(xué)習(xí)材料，通過制定計劃、組織實施、檢查反饋等學(xué)習(xí)環(huán)節(jié)，完成學(xué)生職業(yè)素質(zhì)、職業(yè)技能、職業(yè)道德培養(yǎng)。項目教學(xué)法在課程的宏觀設(shè)計中，以微信開發(fā)項目為導(dǎo)向，微觀設(shè)計中以任務(wù)為驅(qū)動。項目實施與校企合作企業(yè)數(shù)據(jù)庫系統(tǒng)開發(fā)過程一致，使學(xué)生的學(xué)習(xí)更加具有針對性和實用性。項目設(shè)計貫穿于教學(xué)整個過程中，讓學(xué)生自主學(xué)習(xí)，從而有效的促進學(xué)生創(chuàng)新能力的發(fā)展。小組協(xié)作教學(xué)法教學(xué)活動以學(xué)生為主體，以學(xué)生活動為主線。小組接受項目任務(wù)后，在教師的引導(dǎo)下，集體學(xué)習(xí)與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產(chǎn)品推廣應(yīng)用等方式檢測工作成果，并針對檢查結(jié)果進行修正，最后總結(jié)和評價。案例式教學(xué)法案例教學(xué)把理論知識和解決問題的能力有機地聯(lián)系起來，幫助學(xué)生運用所學(xué)的理論知識去分析現(xiàn)實生活中的實例，學(xué)以致用。讓學(xué)生從中學(xué)到現(xiàn)實而有用的東西，避免純理論教學(xué)而導(dǎo)致的空談，從而增強教學(xué)效果。教學(xué)過程頂部信息步驟1：設(shè)置布局步驟2：設(shè)置樣式購買商品列表步驟1：設(shè)置布局步驟2：設(shè)置樣式購物車底部信息步驟1：設(shè)置布局步驟2：設(shè)置樣式購物車刪除商品步驟一：綁定事件步驟二：實現(xiàn)事件清空購物車界面步驟一：設(shè)置布局步驟二：設(shè)置樣式清空購物車的實現(xiàn)步驟一：定義變量，判斷購物車是否有數(shù)據(jù)步驟二：視圖頁面的邏輯判斷前往添加商品按鈕步驟一：綁定事件步驟二：實現(xiàn)事件思考題和習(xí)題見教材第7章配套的習(xí)題教學(xué)后記《微信小程序開發(fā)》教學(xué)設(shè)計課程名稱：微信小程序開發(fā)授課年級：授課學(xué)期：教師姓名：20年月日課題名稱用戶信息模塊開發(fā)計劃學(xué)時8學(xué)時內(nèi)容分析在小程序開發(fā)中，用戶信息模塊一般包括用戶登錄、退出登錄、購物信息統(tǒng)計、購物金額統(tǒng)計等，小程序提供了各類API和組件為實現(xiàn)用戶信息模塊提供了便利。通過本項目的講解，讓讀者了解小程序用戶登錄的API接口、小程序與Echart.js中的柱狀圖、餅圖和折線圖相結(jié)合的使用方式等。教學(xué)目標(biāo)及基本要求掌握小程序用戶登錄流程。了解小程序退出登錄操作。掌握小程序模板的基本語法。掌握Echart在小程序中的運用。教學(xué)重點購物車商品列表循環(huán)讀取方法。獲取購物車單選和全選商品金額計算方式。教學(xué)難點獲取購物車單選和全選商品金額計算方式教學(xué)方式以職業(yè)需求為導(dǎo)向，以實踐能力培養(yǎng)為重點，以培養(yǎng)“基礎(chǔ)實、知識新、能力強、素質(zhì)高”的復(fù)合型技術(shù)技能人才為目標(biāo)，本模塊結(jié)合目前流行小程序案例，采用任務(wù)驅(qū)動教學(xué)法，靈活運用超星云平臺、教師自主開發(fā)的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據(jù)專業(yè)教學(xué)標(biāo)準(zhǔn)、人才培養(yǎng)方案、課程標(biāo)準(zhǔn)及崗位工作任務(wù)設(shè)計了“導(dǎo)學(xué)-督學(xué)-自學(xué)-輔學(xué)-互學(xué)”五環(huán)節(jié)的教學(xué)活動，充分體現(xiàn)“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念。圖教學(xué)方法任務(wù)驅(qū)動教學(xué)法任務(wù)驅(qū)動教學(xué)法重點培養(yǎng)學(xué)生獲取知識和自主學(xué)習(xí)的能力，是完成項目設(shè)計必須具有的能力。學(xué)生借助教學(xué)課件、專業(yè)書籍、設(shè)計規(guī)范、網(wǎng)絡(luò)學(xué)習(xí)平臺等學(xué)習(xí)材料，通過制定計劃、組織實施、檢查反饋等學(xué)習(xí)環(huán)節(jié)，完成學(xué)生職業(yè)素質(zhì)、職業(yè)技能、職業(yè)道德培養(yǎng)。項目教學(xué)法在課程的宏觀設(shè)計中，以微信開發(fā)項目為導(dǎo)向，微觀設(shè)計中以任務(wù)為驅(qū)動。項目實施與校企合作企業(yè)數(shù)據(jù)庫系統(tǒng)開發(fā)過程一致，使學(xué)生的學(xué)習(xí)更加具有針對性和實用性。項目設(shè)計貫穿于教學(xué)整個過程中，讓學(xué)生自主學(xué)習(xí)，從而有效的促進學(xué)生創(chuàng)新能力的發(fā)展。小組協(xié)作教學(xué)法教學(xué)活動以學(xué)生為主體，以學(xué)生活動為主線。小組接受項目任務(wù)后，在教師的引導(dǎo)下，集體學(xué)習(xí)與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產(chǎn)品推廣應(yīng)用等方式檢測工作成果，并針對檢查結(jié)果進行修正，最后總結(jié)和評價。案例式教學(xué)法案例教學(xué)把理論知識和解決問題的能力有機地聯(lián)系起來，幫助學(xué)生運用所學(xué)的理論知識去分析現(xiàn)實生活中的實例，學(xué)以致用。讓學(xué)生從中學(xué)到現(xiàn)實而有用的東西，避免純理論教學(xué)而導(dǎo)致的空談，從而增強教學(xué)效果。教學(xué)過程wx.getUserInfo(Objectobject)在小程序插件中使用時，需要在用戶信息功能頁中獲得用戶授權(quán)之后調(diào)用。否則將返回fail。小程序登錄步驟一：綁定登錄按鈕步驟二：按鈕樣式步驟三：登錄事件步驟四：渲染結(jié)果登錄信息存儲到緩存中小程序?qū)觘charts.js步驟一：將ec-canvas文件夾復(fù)制到對應(yīng)的目錄下。步驟二：新建一個頁面步驟三：在頁面的JSON文件中引入組件步驟四：設(shè)置布局步驟五：設(shè)置樣式思考題和習(xí)題1．使用模板功能，完成以下效果。教學(xué)后記《微信小程序開發(fā)》教學(xué)設(shè)計課程名稱：微信小程序開發(fā)授課年級：授課學(xué)期：教師姓名：20年月日課題名稱接口的設(shè)計與開發(fā)計劃學(xué)時4學(xué)時內(nèi)容分析Node.js就是運行在服務(wù)端的JavaScript，是一個真正高效的Web開發(fā)平臺，在Node.js誕生之前，在服務(wù)端運行JavaScript是一件不可思議的事情。在Node.js之前，JavaScript只能運行在瀏覽器中，作為網(wǎng)頁腳本使用，為網(wǎng)頁添加一些特效，或者和服務(wù)器進行通信。有了Node.js以后，JavaScript就可以脫離瀏覽器，像其他編程語言一樣直接在計算機上使用，再也不受瀏覽器的限制。教學(xué)目標(biāo)及基本要求掌握node.js安裝配置過程。掌握node.js獲取靜態(tài)資源方法。掌握node.js路由配置的兩種方法。學(xué)會小程序訪問node.js數(shù)據(jù)接口。教學(xué)重點node.js獲取靜態(tài)資源方法。node.js路由配置的兩種方法。教學(xué)難點node.js路由配置的兩種方法教學(xué)方式以職業(yè)需求為導(dǎo)向，以實踐能力培養(yǎng)為重點，以培養(yǎng)“基礎(chǔ)實、知識新、能力強、素質(zhì)高”的復(fù)合型技術(shù)技能人才為目標(biāo)，本模塊結(jié)合目前流行小程序案例，采用任務(wù)驅(qū)動教學(xué)法，靈活運用超星云平臺、教師自主開發(fā)的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據(jù)專業(yè)教學(xué)標(biāo)準(zhǔn)、人才培養(yǎng)方案、課程標(biāo)準(zhǔn)及崗位工作任務(wù)設(shè)計了“導(dǎo)學(xué)-督學(xué)-自學(xué)-輔學(xué)-互學(xué)”五環(huán)節(jié)的教學(xué)活動，充分體現(xiàn)“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念。圖教學(xué)方法任務(wù)驅(qū)動教學(xué)法任務(wù)驅(qū)動教學(xué)法重點培養(yǎng)學(xué)生獲取知識和自主學(xué)習(xí)的能力，是完成項目設(shè)計必須具有的能力。學(xué)生借助教學(xué)課件、專業(yè)書籍、設(shè)計規(guī)范、網(wǎng)絡(luò)學(xué)習(xí)平臺等學(xué)習(xí)材料，通過制定計劃、組織實施、檢查反饋等學(xué)習(xí)環(huán)節(jié)，完成學(xué)生職業(yè)素質(zhì)、職業(yè)技能、職業(yè)道德培養(yǎng)。項目教學(xué)法在課程的宏觀設(shè)計中，以微信開發(fā)項目為導(dǎo)向，微觀設(shè)計中以任務(wù)為驅(qū)動。項目實施與校企合作企業(yè)數(shù)據(jù)庫系統(tǒng)開發(fā)過程一致，使學(xué)生的學(xué)習(xí)更加具有針對性和實用性。項目設(shè)計貫穿于教學(xué)整個過程中，讓學(xué)生自主學(xué)習(xí)，從而有效的促進學(xué)生創(chuàng)新能力的發(fā)展。小組協(xié)作教學(xué)法教學(xué)活動以學(xué)生為主體，以學(xué)生活動為主線。小組接受項目任務(wù)后，在教師的引導(dǎo)下，集體學(xué)習(xí)與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產(chǎn)品推廣應(yīng)用等方式檢測工作成果，并針對檢查結(jié)果進行修正，最后總結(jié)和評價。案例式教學(xué)法案例教學(xué)把理論知識和解決問題的能力有機地聯(lián)系起來，幫助學(xué)生運用所學(xué)的理論知識去分析現(xiàn)實生活中的實例，學(xué)以致用。讓學(xué)生從中學(xué)到現(xiàn)實而有用的東西，避免純理論教學(xué)而導(dǎo)致的空談，從而增強教學(xué)效果。教學(xué)過程node.js服務(wù)器的搭建利用Node.js搭建搭建一個HTTP服務(wù)器。在后面章節(jié)中，也會講解Node.js實現(xiàn)小程序后臺接口的創(chuàng)建。Node.js的安裝。進入Node.js的官網(wǎng)/zh-cn/下載Node.js最新版（實訓(xùn)室已安裝，不需要做）。在命令提示符工具里測試安裝結(jié)果。新建

api_server

文件夾作為項目根目錄，將

api_server

文件夾拖到VScode編輯器中，并在項目根目錄中運行如下的命令，初始化包管理配置文件。Web應(yīng)用程序Express是一個保持最小規(guī)模的靈活的Node.jsWeb應(yīng)用程序開發(fā)框架。運行如下的命令，安裝express框架。在

api_server

項目根目錄中新建app.js作為整個項目的入口文件。并初始化如下的代碼：使用node啟動app.js。如果使用node啟動app.js，那么每次修改代碼后，都可以需要重新啟動服務(wù)器。Ctrl+C停止，再啟動nodeapp.js安裝nodemon工具。nodemon可以自動檢測到運行文件更改，通過自動重新啟動應(yīng)用程序來調(diào)試基于node.js的應(yīng)用程序。set-ExecutionPolicyRemoteSigned用于設(shè)置管理員權(quán)限，可以訪問powershell.set-ExecutionPolicyRemoteSignednpminstallnodemon-g使用nodemon啟動app.jsnodemonapp.js獲取后臺靜態(tài)資源測試結(jié)果如下圖所示：可以通過帶有

/static

前綴地址來訪問

public

目錄中的文件了。app.use('/static',express.static('public'))測試結(jié)果如下圖所示。使用接口訪問靜態(tài)資源測試數(shù)據(jù)接口步驟一：打開api_server

項目，在app.js頁面實現(xiàn)get請求接口。步驟二：打開瀏覽器在地址欄中輸入:3000/api/data，如出現(xiàn)以下數(shù)據(jù)，則表示數(shù)據(jù)訪問成功。什么是路由指的是后端的地址和方法路由是指確定應(yīng)用程序如何響應(yīng)客戶端對特定端點的請求，該端點是URI（或路徑）和特定的HTTP請求方法（GET、POST等）。每個路由可以有一個或多個處理函數(shù)，當(dāng)路由匹配時執(zhí)行。路由定義采用用以下結(jié)構(gòu)：app.METHOD(PATH,HANDLER)app是一個實例express。METHOD是一個HTTP請求方法，小寫。PATH是服務(wù)器上的路徑。HANDLER是路由匹配時執(zhí)行的回調(diào)函數(shù)。獲取get請求參數(shù)代碼如下：執(zhí)行流程圖測試結(jié)果小程序訪問數(shù)據(jù)接口思考題和習(xí)題1．使用模板功能，完成以下效果。綜合實踐題1．使用小程序訪問以下GET數(shù)據(jù)接口。app.get('/get',function(req,res){res.setHeader('Content-Type','text/plain;charset=utf8');res.end(JSON.stringify({code:0,data:{brandName:'品牌名稱',couponAvailableTime:'2020-45-34',},msg:'success',success:true}))})2．使用小程序訪問以下POST數(shù)據(jù)接口。app.post('/post',function(req,res){res.setHeader('Content-Type','text/plain;charset=utf8');res.end(JSON.stringify({code:0,data:{list:[{couponTemplateId:1,couponName:'小布丁代金券',}],pageIndex:1,pageSize:10,total:3},msg:'success',success:true}))})教學(xué)后記《微信小程序開發(fā)》教學(xué)設(shè)計課程名稱：微信小程序開發(fā)授課年級：授課學(xué)期：教師姓名：20年月日課題名稱用戶信息模塊開發(fā)計劃學(xué)時4學(xué)時內(nèi)容分析在小程序開發(fā)中，數(shù)據(jù)存儲和管理是不可或缺的一部分。MySQL是一個流行的開源關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，而Node.js是一個基于事件驅(qū)動、非阻塞I/O的JavaScript運行時環(huán)境。通過將Node.js和MySQL結(jié)合使用，讀者可以輕松地連接到數(shù)據(jù)庫，并進行數(shù)據(jù)操作和查詢。本章節(jié)將詳細(xì)介紹如何在Node.js中連接MySQL數(shù)據(jù)庫，包括安裝依賴、創(chuàng)建數(shù)據(jù)庫連接、執(zhí)行查詢和更新操作等。教學(xué)目標(biāo)及基本要求掌握node.js與本地數(shù)據(jù)建立連接。理解node.js跨域的含義。掌握Postman對整個后端服務(wù)進行測試。掌握node.js簡單查詢列表。教學(xué)重點node.js跨域的含義。node.js與本地數(shù)據(jù)建立連接。教學(xué)難點node.js跨域的含義教學(xué)方式以職業(yè)需求為導(dǎo)向，以實踐能力培養(yǎng)為重點，以培養(yǎng)“基礎(chǔ)實、知識新、能力強、素質(zhì)高”的復(fù)合型技術(shù)技能人才為目標(biāo)，本模塊結(jié)合目前流行小程序案例，采用任務(wù)驅(qū)動教學(xué)法，靈活運用超星云平臺、教師自主開發(fā)的微課視頻、JSON在線解析平臺以及Xmind等信息化工具和手段，依據(jù)專業(yè)教學(xué)標(biāo)準(zhǔn)、人才培養(yǎng)方案、課程標(biāo)準(zhǔn)及崗位工作任務(wù)設(shè)計了“導(dǎo)學(xué)-督學(xué)-自學(xué)-輔學(xué)-互學(xué)”五環(huán)節(jié)的教學(xué)活動，充分體現(xiàn)“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念。圖教學(xué)方法任務(wù)驅(qū)動教學(xué)法任務(wù)驅(qū)動教學(xué)法重點培養(yǎng)學(xué)生獲取知識和自主學(xué)習(xí)的能力，是完成項目設(shè)計必須具有的能力。學(xué)生借助教學(xué)課件、專業(yè)書籍、設(shè)計規(guī)范、網(wǎng)絡(luò)學(xué)習(xí)平臺等學(xué)習(xí)材料，通過制定計劃、組織實施、檢查反饋等學(xué)習(xí)環(huán)節(jié)，完成學(xué)生職業(yè)素質(zhì)、職業(yè)技能、職業(yè)道德培養(yǎng)。項目教學(xué)法在課程的宏觀設(shè)計中，以微信開發(fā)項目為導(dǎo)向，微觀設(shè)計中以任務(wù)為驅(qū)動。項目實施與校企合作企業(yè)數(shù)據(jù)庫系統(tǒng)開發(fā)過程一致，使學(xué)生的學(xué)習(xí)更加具有針對性和實用性。項目設(shè)計貫穿于教學(xué)整個過程中，讓學(xué)生自主學(xué)習(xí)，從而有效的促進學(xué)生創(chuàng)新能力的發(fā)展。小組協(xié)作教學(xué)法教學(xué)活動以學(xué)生為主體，以學(xué)生活動為主線。小組接受項目任務(wù)后，在教師的引導(dǎo)下，集體學(xué)習(xí)與討論，制定計劃，按照計劃實施，然后采用自查、互查、教師檢查、產(chǎn)品推廣應(yīng)用等方式檢測工作成果，并針對檢查結(jié)果進行修正，最后總結(jié)和評價。案例式教學(xué)法案例教學(xué)把理論知識和解決問題的能力有機地聯(lián)系起來，幫助學(xué)生運用所學(xué)的理論知識去分析現(xiàn)實生活中的實例，學(xué)以致用。讓學(xué)生從中學(xué)到現(xiàn)實而有用的東西，避免純理論教學(xué)而導(dǎo)致的空談，從而增強教學(xué)效果。教學(xué)過程數(shù)據(jù)庫的安裝步驟1：需要安裝上mysql插件。代碼如下：npminstallmysql執(zhí)行效果如下：安裝完后，可以在左邊node_modules文件夾里新增了mysql文件夾。說明mysql插件已安裝成功步驟2：測試是否安裝成功。使用node.js操作增刪改查在navicate里導(dǎo)入數(shù)據(jù)表步驟1：新建數(shù)據(jù)庫步驟2：數(shù)據(jù)庫命名為flower_shopping步驟3：導(dǎo)入sql文件執(zhí)行查詢操作constsql='select*fromnews'db.query(sql,(err,res)=>{

if(er