認(rèn)識(shí)微信小程序教案

1、認(rèn)識(shí)微信小程序課程名稱微信小程序開發(fā)圖解案例 教程項(xiàng)目名稱認(rèn)識(shí)微信小程序任務(wù)名稱認(rèn)識(shí)微信小程序課時(shí)2項(xiàng)目性質(zhì)口演示性口驗(yàn)證性口設(shè)計(jì)性，綜合性授課班級(jí)授課日期授課地點(diǎn)教學(xué)目標(biāo)(1)做好微/小程序開發(fā)的準(zhǔn)備工作，包括基礎(chǔ)技術(shù)準(zhǔn)備和開發(fā)賬號(hào)、文檔、開發(fā)工具的準(zhǔn) 備。(2)學(xué)會(huì)微信小程序開發(fā)工具的使用，會(huì)添加項(xiàng)目、編輯代碼、調(diào)試代碼等。(3)記住微信小程序常用的一些快捷鍵，以提高開發(fā)效率。(4)理解微信小程序的開發(fā)流程。教學(xué)內(nèi)容(1)微信小程序介紹(2)微信小程序開發(fā)準(zhǔn)備(3)微信小程序開發(fā)工具的使用(4)練習(xí)：Hello World 的創(chuàng)建教學(xué)重點(diǎn)微信小程序開發(fā)工具的使用教學(xué)難點(diǎn)微信小程序開發(fā)工具的

2、使用教學(xué)準(zhǔn)備裝有微信小程序的開發(fā)工具的電腦教學(xué)課件PPT教材：微信小程序開發(fā)圖解案例教程(附精講視頻)(第3版)作業(yè)設(shè)計(jì)教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容與過程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）課前組織做好上課前的各項(xiàng)準(zhǔn)備工作（打開電腦、打開課件、打開軟件、打開授課計(jì)劃、教案等），吸 ,學(xué)生注意力。課程說明【課前說明】分別從微信小程序的功能、使用場景、開發(fā)準(zhǔn)備、開發(fā)工具的使用、開發(fā)流程、常用快捷鍵等 ,識(shí)點(diǎn)進(jìn)行初步的了解。【目的】使學(xué)生從了解本章的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點(diǎn)、考評(píng)方式等方面明確學(xué)習(xí)本章知識(shí)的要求和目標(biāo)。微信小程序介紹初識(shí)微信小程序微信小程序是一個(gè)基于去中心化而存在的平臺(tái)，它沒有聚合的入口

3、，有多種進(jìn)入方式，包括微信群聊入口、微信聊天主界面下拉入口、App分享消息卡片、發(fā)現(xiàn)欄小程序主入口、發(fā)現(xiàn)欄小程序主入口搜索框的搜索結(jié)果頁、單人聊天會(huì)話中的小程序消息卡片、小程序打開小程 序、掃描二維碼、小程序模板消息、公眾號(hào)自定義菜單、公眾號(hào)文章、公眾號(hào)模板消息、微信 錢包、從另一個(gè)小程序返回、長按圖片識(shí)別小程序碼、頂部搜索框搜索使用過的小程序列表、 掃描小程序碼、小程序 profile 頁、頂部搜索框的搜索結(jié)果頁、我的卡包等。在微信中的“發(fā)現(xiàn)”界面，可以找到小程序的入口，如圖所示。課程內(nèi)容描述微信小程序入口小程序的界面和使用方法和 App類似，下圖所示是幾個(gè)已發(fā)布的常用小程序界面常用微信小程

4、序界面微信小程序的功能(1)分享頁功能。(2)分享對(duì)話功能。(3)線下掃碼進(jìn)入微信小程序功能。(4)掛起狀態(tài)功能。(5)消息通知功能。(6)實(shí)時(shí)音視頻錄制播放功能。(7)硬件連接功能。(8)小游戲功能。(9)公眾號(hào)關(guān)聯(lián)功能。(10)搜索查找功能。(11)識(shí)別二維碼功能。1.1.3微信小程序的使用場景在發(fā)布小程序的時(shí)候，要選擇服務(wù)類目。通過這些服務(wù)類目，我們能知道小程序的使用場 景。服務(wù)類目分為個(gè)人服務(wù)類目和企業(yè)服務(wù)類目。個(gè)人服務(wù)類目針對(duì)以個(gè)人為開發(fā)主體的小程 手，服務(wù)范圍小；企業(yè)服務(wù)類目針對(duì)以企業(yè)為開發(fā)主體的小程序，服務(wù)范圍大。1.1.4微信小程序能取代App嗎原生App 一般要同時(shí)開發(fā)iOS

5、和Android兩版，而小程序只需要做一版。毫無疑問，這點(diǎn) 是小程序最大的優(yōu)勢。從這個(gè)角度來看，小程序是“跨平臺(tái)”的。小程序經(jīng)過幾年的發(fā)展，逐 漸成為與iOS、Android、公眾號(hào)、網(wǎng)站并行的流量入口。各個(gè)企業(yè)在發(fā)布自己的產(chǎn)品的時(shí)候， 往往會(huì)發(fā)布iOS版、Android版、H5版、網(wǎng)站PC版、公眾號(hào)版、微信小程序版，都是作為產(chǎn) 品流量的入口，并沒有出現(xiàn)誰取代誰的現(xiàn)象。但是小程序可以快速構(gòu)建出一個(gè)產(chǎn)品應(yīng)用，門檻 (氐、成本低、發(fā)布快是各大企業(yè)制作小程序的原因。除了微信小程序，企業(yè)巨頭也紛紛推出小 隹序。1.2微信小程序開發(fā)準(zhǔn)備基礎(chǔ)技術(shù)準(zhǔn)備微信小程序自定義了一套語言，稱為WXML微信標(biāo)記語言)，

6、它的使用方法類似于HTML另外，微信小程序還定義了自己的樣式語言WXSS兼容了 CSS并做了擴(kuò)展；使用JavaScript來進(jìn)行業(yè)務(wù)處理，兼容了大部分JavaScript功能，但仍有一些功能無法使用，所以有一定HTML CSS JavaScript技術(shù)功底的人學(xué)習(xí)微信小程序開發(fā)會(huì)容易很多。開發(fā)準(zhǔn)備(1)在“微信公眾平臺(tái)”注冊微信開發(fā)者賬號(hào)。單擊“立即注冊”，在“注冊”界面選 擇“小程序”，在“小程序注冊”界面根據(jù)提示填寫相關(guān)信息完成注冊。在微信公眾平臺(tái)中，選擇“小程序” 一 “小程序開發(fā)文檔”，可以打開幫助文檔界面，如 哥所示。T C 安全 hitps/mpLW&kJni.qiq.corn-力

7、 I微信公眾平臺(tái)叢立即I喜曲恒F開發(fā)文檔幫助文檔在幫助文檔里有介紹、設(shè)計(jì)、小程序開發(fā)、運(yùn)營、數(shù)據(jù)、社區(qū) 6個(gè)菜單，針對(duì)不同角色的 用戶提供了不同內(nèi)容的幫助文檔。開發(fā)人員經(jīng)常會(huì)用到這里的簡易教程、框架的使用、組件的 介紹、API、工具以及騰訊云支持等內(nèi)容。(2)在文檔工具里，根據(jù)自己的操作系統(tǒng)，下載微信小程序的開發(fā)工具，如圖所示。BS7匚卬而無如和川砒無三弓毒亡號(hào)?開SffiK 麗金M叁O ”運(yùn)申云并愛16率 E意為嚴(yán)/臺(tái)值.得第上由9*4|空師 Hjfcflft.惻間干,用蹴*ri3H*心*男聲里.U可瀛A機(jī)事網(wǎng)LLq崛 1,丁錚制不即用藥卷電對(duì)添加項(xiàng)目獲取微信小程序 AppID,需要在“微信

8、公眾平臺(tái)”中登錄 1.2.2節(jié)中注冊的賬戶，在 “設(shè) 置” 一 “開發(fā)設(shè)置”中，查看微信小程序的AppID ,如圖所示。獲取AppID輸入AppID后，建立一個(gè) demd文件夾，并選擇為項(xiàng)目目錄，項(xiàng)目名稱輸入“demS ,開發(fā)模式選擇“小程序”，后端服務(wù)可以選擇“小程序云開發(fā)”或者“不使用云服務(wù)”，單 擊“創(chuàng)建”按鈕即可，如圖所示。日司 H;總導(dǎo)二科SfltS 但W5tR!y序云開支ZHjeFa AKBfl4 且河 薪與 19fm 叼 *-btt i*44fSh , 同友” M 了峨a立G K 用Ei牙ifi JaMac*1tfe創(chuàng)建demo項(xiàng)目者工具界面創(chuàng)建項(xiàng)目后，進(jìn)入到微信開發(fā)者工具界面，

9、界面大致可以分為6個(gè)區(qū)域：菜單欄區(qū)域,模擬器、編輯器、調(diào)試器顯示與隱藏區(qū)域，模擬器區(qū)域，編輯器區(qū)域，工具欄區(qū)域， 調(diào)試器區(qū)域，如圖所示。開發(fā)者工具界面菜單欄區(qū)域：包含項(xiàng)目、文件、編輯、工具、界面、設(shè)置、幫助、微信開發(fā)者工具8個(gè)菜單。模擬器、編輯器、調(diào)試器顯示與隱藏區(qū)域：是用來控制模擬器區(qū)域、編輯器區(qū)域、調(diào)試 k區(qū)域的顯示與隱藏的便捷操作按鈕。模擬器區(qū)域：用來顯示小程序項(xiàng)目的界面。編輯器區(qū)域：用來進(jìn)行代碼編寫的區(qū)域。包含編譯、預(yù)覽、真機(jī)調(diào)試、切后臺(tái)、?t緩存、上傳、版本管理、詳情 8個(gè)工具欄按ho調(diào)試器區(qū)域：用來進(jìn)行調(diào)試的區(qū)域。欄菜單欄中的菜單項(xiàng)集成了軟件的一些常規(guī)操作和功能使用?！绊?xiàng)目”菜單：

10、包括新建項(xiàng)目、導(dǎo)入項(xiàng)目、打開最近項(xiàng)目、新建代碼片段、導(dǎo)入代碼片 沒、查看所有項(xiàng)目、關(guān)閉當(dāng)前項(xiàng)目。這些命令都是對(duì)小程序項(xiàng)目或者代碼片段進(jìn)行管理使用 的?！拔募辈藛危喊ㄐ陆ㄎ募?、保存、保存所有、關(guān)閉文件。這些命令可以新建文件、關(guān) 羽文件、保存文件?！熬庉嫛辈藛危菏菍?duì)代碼進(jìn)行管理的一個(gè)菜單，具有格式化代碼等功能?！肮ぞ摺辈藛危喊ň幾g、刷新、預(yù)覽、清除緩存等功能?！敖缑妗辈藛危河糜陲@示或者隱藏工具欄、模擬器、編輯器、目錄樹、調(diào)試器區(qū)域?！霸O(shè)置”菜單：包括通用設(shè)置、外觀設(shè)置、快捷鍵設(shè)置、編輯設(shè)置、代理設(shè)置、安全設(shè) 置、項(xiàng)目設(shè)置?！皫椭辈藛危喊ㄎ臋n搜索、開發(fā)者社區(qū)、開發(fā)者文檔。“微信開發(fā)者工具”

11、菜單：包括對(duì)開發(fā)者工具進(jìn)行升級(jí)、回退、退出等功能。器區(qū)域模擬器區(qū)域用來顯示小程序界面。在小程序開發(fā)過程中，小程序界面隨著代碼編寫可以實(shí) 時(shí)變化，方便小程序的開發(fā)和調(diào)試。同時(shí)模擬器可以模擬小程序在各個(gè)終端設(shè)備上的操作效 果；可以設(shè)置小程序運(yùn)行的終端設(shè)備，如 iPhone 5、iPhone 6等；可以設(shè)置模擬器區(qū)域的百 分比大小；可以模擬設(shè)置 Wi-Fi、2G 3G 4G等網(wǎng)絡(luò)情況，如圖所示。模擬器區(qū)域器區(qū)域編輯器區(qū)域分為兩部分：一部分用來展示項(xiàng)目文件目錄和文件結(jié)構(gòu)；另一部分用來進(jìn)行代 畫編輯，如圖所示。編輯器區(qū)域(1)在項(xiàng)目目錄上單擊鼠標(biāo)右鍵可以新建目錄、Pages Component JS、T

12、S、JSOINWXML WXSSWX故件，對(duì)文件目錄及文件進(jìn)行重命名、刪除、查找、硬盤打開、在終端中打 開等操作，如圖所示。匕目量* is嗝醍J9 MubL./3 4nfjd h WJH* ip(3.*M ；Me=I 1 ifrE； BmsITS,如圖所示。文件操作(2)在代碼編輯區(qū)域里編寫代碼，可以通過模擬器區(qū)域?qū)崟r(shí)預(yù)覽編輯的情況代碼編寫(3)在代碼編寫過程中，開發(fā)工具提供自動(dòng)補(bǔ)全功能。在編輯 JS文件時(shí)，會(huì)幫助開發(fā)者 補(bǔ)全所有的API,并給出相關(guān)的注釋解釋；編輯 WXML：件時(shí)，會(huì)幫助開發(fā)者直接寫出相關(guān)的標(biāo) 簽；編輯JSONt件時(shí)，會(huì)幫助開發(fā)者補(bǔ)全相關(guān)的配置，并給出實(shí)時(shí)的提示，如圖所示。.

13、Ltn,嶗EMM eMdLHW升R 矽/ Ty-a加比產(chǎn)H短 y-g1nl電/加口,茜#9=30卜v L Tim14H H7口“加丫上61 匕由j.fBIn- HtUt cllH B jrlh“ pWl;teins i-dsef - vttij F Liutt，:卜:itit自動(dòng)補(bǔ)全功能(4)開發(fā)工具提供自動(dòng)保存功能。書寫代碼后，工具會(huì)自動(dòng)幫助用戶保存當(dāng)前的代碼編 置狀態(tài)，直接關(guān)閉工具或者切換到別的項(xiàng)目，并不會(huì)丟失已經(jīng)編輯的文件內(nèi)容。但需要注意的 是，只有保存文件，修改內(nèi)容才會(huì)真實(shí)地寫到硬盤上，并觸發(fā)實(shí)時(shí)預(yù)覽。1.3.6調(diào)試器區(qū)域小程序的常用調(diào)試工具有 Console、Sources Netw

14、ork Storage AppData、WxmLConsole窗口用來顯示小程序的錯(cuò)誤輸出信息和調(diào)試代碼，除了可以輸出錯(cuò)誤信息， 還可以進(jìn)行代碼編寫和調(diào)試，如圖所示。Console 功能Sources窗口用于顯示當(dāng)前項(xiàng)目的腳本文件，在 Sources中開發(fā)者看到的文件是經(jīng) 過處理之后的腳本文件，開發(fā)者的代碼都會(huì)被包裹在define 函數(shù)中，并且對(duì)于 Page代碼,有require 的主動(dòng)調(diào)用，如圖所示。10Sources 功能Network用來觀察發(fā)送的請(qǐng)求和調(diào)用文件的信息，包括文件名稱、路徑、大小、調(diào)用 的狀態(tài)、時(shí)間等，如圖所示。Network 功能Storage 功能(4) Storage

15、窗口用于顯示當(dāng)前項(xiàng)目，使用 wx.setStorage 或者wx.setStorageSync 后 的數(shù)據(jù)存儲(chǔ)情況，如圖所示。(5) AppData窗口用于顯示當(dāng)前項(xiàng)目當(dāng)前時(shí)刻的具體數(shù)據(jù)，實(shí)時(shí)地反饋項(xiàng)目數(shù)據(jù)情況。用 戶可以在此處編輯數(shù)據(jù)，并及時(shí)地反饋到界面上，如圖所示。11K wwifSws#*4ww Tw. FitfesjiMe-v :Me , pettw *U 口 Narldll wserlRfc 7) riuWu -。*如 皆Ed.丁 l 1 XvnguAjga sh EM c i.t:y T-anf =hbw prsjiHov B jln rim.ry I hEw xatUrLJ；.c

16、 Lap. HtE*n, ，1_ ：i紀(jì) 51*工二rLt 二二匕小；力；!,二.“L-yz-一戶” 一出口 .r-U EJHEttl J.，*常B-M：3：r 二1i我的迫用石譴| ITT waUiMrlBrFo d EnILBB j rtruB wJrvigjZd _ I 13AppData 功能(6) Wxml窗口用于幫助開發(fā)者開發(fā) Wxml轉(zhuǎn)化后的界面。在這里可以看到真實(shí)的頁面結(jié) 構(gòu)以及結(jié)構(gòu)對(duì)應(yīng)的 wxss屬性，同時(shí)可以修改對(duì)應(yīng)的 wxss屬性，如圖所示。Wxml功能1.3.7工具欄區(qū)域.編譯操作開發(fā)者可以通過“編譯”按鈕或者使用快捷鍵Ctrl+B編譯當(dāng)前小程序的代碼，并自動(dòng)刷新模擬器

17、。為了方便調(diào)試，開發(fā)者還可以添加或選擇已有的自定義編譯條件進(jìn)行編譯和代碼預(yù) 覽，如圖所示。12.預(yù)覽單擊“預(yù)覽”按鈕，可以將小程序上傳，生成二維碼，通過掃描二維碼可以在手機(jī)上預(yù)覽 小程序，如圖所示。預(yù)覽.真機(jī)調(diào)試單擊“真機(jī)調(diào)試”按鈕，生成二維碼，可以在手機(jī)上進(jìn)行代碼調(diào)試，手機(jī)界面如圖所示手機(jī)界面也可以查看頁面布局及請(qǐng)求情況，如圖所示。13ISE 1MT一, iMIBA Utt號(hào)*B*：NLB.flf查看頁面布局及請(qǐng)求.前后臺(tái)切換工具欄中的前后臺(tái)切換按鈕可以幫助開發(fā)者模擬一些客戶端的操作環(huán)境。例如，在操作微 管小程序過程中，突然進(jìn)來電話，如果接電話，小程序就會(huì)從前臺(tái)進(jìn)入到后臺(tái)，重新訪問小程 字時(shí)

18、，又會(huì)從后臺(tái)進(jìn)入到前臺(tái)，如圖所示。前后臺(tái)切換.清緩存清緩存包括清除數(shù)據(jù)緩存、清除文件緩存、清除授權(quán)數(shù)據(jù)、清除網(wǎng)絡(luò)緩存、清除登錄狀 態(tài)、全部清除功能，如圖所示。.-總占勤單堆與他府立碑辭口除由庫垢寧冷舸sat：理除網(wǎng)詔等耳5除母蕓壯擊至言羽14清緩存6.上傳小程序開發(fā)完成后，需要上傳到騰訊服務(wù)器進(jìn)行版本發(fā)布，如圖所示上傳1.3.8常用快捷鍵.格式調(diào)整快捷鍵Ctrl+S :保存文件。Ctrl+ , Ctrl+:代碼行縮進(jìn)。Ctrl+Shift+ , Ctrl+Shift+ :折疊、打開代碼塊。Ctrl+C , Ctrl+V :復(fù)制、粘貼，如果沒有選中任何文字，則復(fù)制、粘貼一行Shift+Alt+F :代碼格式化。Alt+Up , Alt+Down :上下移動(dòng)一行。Shift+Alt+Up , Shift+Alt+Down :向上向下復(fù)制一行。Ctrl+Shift+Enter :在當(dāng)前行上方插入一行。Ctrl+Shift+F :全局搜索。Ctrl+B :可以編譯當(dāng)前代碼，并自動(dòng)刷新模擬器。.光標(biāo)相關(guān)快捷鍵Ctrl+End :移動(dòng)到文件結(jié)尾。Ctrl+Home :移動(dòng)到文件開頭。Ctrl+I :選中當(dāng)前行。Shift+End :選擇從光標(biāo)到行尾。Shift+Home :選擇從行首到光標(biāo)處。Ctrl+Shift+L :選中所有匹配。Ctrl+D :選中匹配