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

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

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

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

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

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

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

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

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

10、包括新建項目、導入項目、打開最近項目、新建代碼片段、導入代碼片 沒、查看所有項目、關閉當前項目。這些命令都是對小程序項目或者代碼片段進行管理使用 的。“文件”菜單：包括新建文件、保存、保存所有、關閉文件。這些命令可以新建文件、關 羽文件、保存文件。“編輯”菜單：是對代碼進行管理的一個菜單，具有格式化代碼等功能。“工具”菜單：包括編譯、刷新、預覽、清除緩存等功能。“界面”菜單：用于顯示或者隱藏工具欄、模擬器、編輯器、目錄樹、調試器區域。“設置”菜單：包括通用設置、外觀設置、快捷鍵設置、編輯設置、代理設置、安全設 置、項目設置。“幫助”菜單：包括文檔搜索、開發者社區、開發者文檔。“微信開發者工具”

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

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

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

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

15、窗口用于顯示當前項目，使用 wx.setStorage 或者wx.setStorageSync 后 的數據存儲情況，如圖所示。(5) AppData窗口用于顯示當前項目當前時刻的具體數據，實時地反饋項目數據情況。用 戶可以在此處編輯數據，并及時地反饋到界面上，如圖所示。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紀 51*工二rLt 二二匕小；力；!,二.“L-yz-一戶” 一出口 .r-U EJHEttl J.，*常B-M：3：r 二1i我的迫用石譴| ITT waUiMrlBrFo d EnILBB j rtruB wJrvigjZd _ I 13AppData 功能(6) Wxml窗口用于幫助開發者開發 Wxml轉化后的界面。在這里可以看到真實的頁面結 構以及結構對應的 wxss屬性，同時可以修改對應的 wxss屬性，如圖所示。Wxml功能1.3.7工具欄區域.編譯操作開發者可以通過“編譯”按鈕或者使用快捷鍵Ctrl+B編譯當前小程序的代碼，并自動刷新模擬器

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

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