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

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

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

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

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

5、和Android兩版，而小程序只需要做一版。毫無疑問，這點 是小程序最大的優(yōu)勢。從這個角度來看，小程序是“跨平臺”的。小程序經(jīng)過幾年的發(fā)展，逐 漸成為與iOS、Android、公眾號、網(wǎng)站并行的流量入口。各個企業(yè)在發(fā)布自己的產(chǎn)品的時候， 往往會發(fā)布iOS版、Android版、H5版、網(wǎng)站PC版、公眾號版、微信小程序版，都是作為產(chǎn) 品流量的入口，并沒有出現(xiàn)誰取代誰的現(xiàn)象。但是小程序可以快速構(gòu)建出一個產(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ā)會容易很多。開發(fā)準(zhǔn)備(1)在“微信公眾平臺”注冊微信開發(fā)者賬號。單擊“立即注冊”，在“注冊”界面選 擇“小程序”，在“小程序注冊”界面根據(jù)提示填寫相關(guān)信息完成注冊。在微信公眾平臺中，選擇“小程序” 一 “小程序開發(fā)文檔”，可以打開幫助文檔界面，如 哥所示。T C 安全 hitps/mpLW&kJni.qiq.corn-力

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

8、公眾平臺”中登錄 1.2.2節(jié)中注冊的賬戶，在 “設(shè) 置” 一 “開發(fā)設(shè)置”中，查看微信小程序的AppID ,如圖所示。獲取AppID輸入AppID后，建立一個 demd文件夾，并選擇為項目目錄，項目名稱輸入“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項目者工具界面創(chuàng)建項目后，進(jìn)入到微信開發(fā)者工具界面，

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

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

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

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

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自動補(bǔ)全功能(4)開發(fā)工具提供自動保存功能。書寫代碼后，工具會自動幫助用戶保存當(dāng)前的代碼編 置狀態(tài)，直接關(guān)閉工具或者切換到別的項目，并不會丟失已經(jīng)編輯的文件內(nèi)容。但需要注意的 是，只有保存文件，修改內(nèi)容才會真實地寫到硬盤上，并觸發(fā)實時預(yù)覽。1.3.6調(diào)試器區(qū)域小程序的常用調(diào)試工具有 Console、Sources Netw

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

15、窗口用于顯示當(dāng)前項目，使用 wx.setStorage 或者wx.setStorageSync 后 的數(shù)據(jù)存儲情況，如圖所示。(5) AppData窗口用于顯示當(dāng)前項目當(dāng)前時刻的具體數(shù)據(jù)，實時地反饋項目數(shù)據(jù)情況。用 戶可以在此處編輯數(shù)據(jù)，并及時地反饋到界面上，如圖所示。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)化后的界面。在這里可以看到真實的頁面結(jié) 構(gòu)以及結(jié)構(gòu)對應(yīng)的 wxss屬性，同時可以修改對應(yīng)的 wxss屬性，如圖所示。Wxml功能1.3.7工具欄區(qū)域.編譯操作開發(fā)者可以通過“編譯”按鈕或者使用快捷鍵Ctrl+B編譯當(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ī)界面也可以查看頁面布局及請求情況，如圖所示。13ISE 1MT一, iMIBA Utt號*B*：NLB.flf查看頁面布局及請求.前后臺切換工具欄中的前后臺切換按鈕可以幫助開發(fā)者模擬一些客戶端的操作環(huán)境。例如，在操作微 管小程序過程中，突然進(jìn)來電話，如果接電話，小程序就會從前臺進(jìn)入到后臺，重新訪問小程 字時

18、，又會從后臺進(jìn)入到前臺，如圖所示。前后臺切換.清緩存清緩存包括清除數(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 :上下移動一行。Shift+Alt+Up , Shift+Alt+Down :向上向下復(fù)制一行。Ctrl+Shift+Enter :在當(dāng)前行上方插入一行。Ctrl+Shift+F :全局搜索。Ctrl+B :可以編譯當(dāng)前代碼，并自動刷新模擬器。.光標(biāo)相關(guān)快捷鍵Ctrl+End :移動到文件結(jié)尾。Ctrl+Home :移動到文件開頭。Ctrl+I :選中當(dāng)前行。Shift+End :選擇從光標(biāo)到行尾。Shift+Home :選擇從行首到光標(biāo)處。Ctrl+Shift+L :選中所有匹配。Ctrl+D :選中匹配