認(rèn)識(shí)微信小程序課件

1、微信小程序開發(fā)圖解案例教程（附精講視頻）（第2版）劉剛著微信小程序介紹 微信小程序開發(fā)準(zhǔn)備 微信小程序開發(fā)工具的使用 沙場大練兵：Hello World的創(chuàng)建 小結(jié) 第1章 認(rèn)識(shí)微信小程序1.1.1初識(shí)微信小程序 微信小程序（簡稱小程序）是一個(gè)基于去中心化而存在的平臺(tái)，它沒有聚合的入口，有多種進(jìn)入方式。（1）在微信中的“發(fā)現(xiàn)”界面，可以找到小程序的入口，如圖1.1所示。1.1微信小程序介紹圖1.1微信小程序入口（2）在微信主界面下拉，會(huì)看到用過的微信小程序。（3）給好友或者在群里分享小程序。 小程序的界面和使用方法和App類似，圖1.2所示是幾個(gè)已發(fā)布的常用小程序界面。圖1.2常用微信小程序界

2、面 用戶需要下載、安裝才可以使用App，安裝時(shí)還會(huì)考慮App占用多大存儲(chǔ)空間，哪些程序應(yīng)該卸載掉以釋放空間。 微信小程序則無需安裝，直接使用，不占用存儲(chǔ)空間。用戶在使用微信小程序后，可以用完即走。 微信小程序看起來是程序，但它以完全不同于App的狀態(tài)出現(xiàn)，具有更靈活的應(yīng)用組織形態(tài)。 小程序提供的功能如下。（1）分享頁功能。（2）分享對(duì)話功能。（3）線下掃碼進(jìn)入微信小程序功能。（4）掛起狀態(tài)功能。（5）消息通知功能。（6）實(shí)時(shí)音視頻錄制播放功能。1.1.2微信小程序的功能（7）硬件連接功能。 （8）小游戲功能。（9）公眾號(hào)關(guān)聯(lián)功能。（10）搜索查找功能。 （11）識(shí)別二維碼功能。 小程序不提供的

3、功能如下。（1）小程序沒有集中入口，沒有應(yīng)用商店。（2）小程序沒有訂閱關(guān)系，沒有粉絲，只有訪問量。（3）小程序不能推送消息。 從上線開始，各種小程序就如雨后春筍般出現(xiàn)，小程序有哪些適合的使用場景呢？在發(fā)布小程序的時(shí)候，要選擇服務(wù)類目。 通過這些服務(wù)類目，我們能知道小程序的使用場景。服務(wù)類目分為個(gè)人服務(wù)類目和企業(yè)服務(wù)類目。 個(gè)人服務(wù)類目針對(duì)以個(gè)人為開發(fā)主體的小程序，服務(wù)范圍??；企業(yè)服務(wù)類目針對(duì)以企業(yè)為開發(fā)主體的小程序，服務(wù)范圍大，如表1.1、表1.2所示。1.1.3微信小程序的使用場景表1.1個(gè)人服務(wù)類目續(xù)表表1.2企業(yè)服務(wù)類目續(xù)表 原生App一般要同時(shí)開發(fā)iOS和Android兩版，而小程序只

4、需要做一版。毫無疑問，這點(diǎn)是小程序最大的優(yōu)勢。從這個(gè)角度來看，小程序是“跨平臺(tái)”的。 在現(xiàn)階段，開發(fā)一套邏輯完整的應(yīng)用程序，小程序的開發(fā)效率是低于App的。小程序獨(dú)立出了一個(gè)封閉的生態(tài)。 小程序雖是跨平臺(tái)的，但是缺乏成熟的組件，缺少統(tǒng)計(jì)、繪圖組件，以前的echarts和hightcharts都無法使用。1.1.4微信小程序能取代App嗎 小程序不支持WebView，大量已被靜態(tài)化好的HTML頁面完全沒辦法在小程序上展示。 小程序想取代Android和iOS還要走很長的路，是藍(lán)海還是死海需要時(shí)間來驗(yàn)證。 小程序經(jīng)過騰訊公司的扶持和發(fā)展，已經(jīng)吸引了很多企業(yè)使用，作為與iOS、Android、公眾號(hào)

5、、網(wǎng)站并行的流量入口。 微信小程序從開始研發(fā)、正式發(fā)布到推廣使用，經(jīng)歷了以下發(fā)展時(shí)期。（1）2016年1月9日，微信團(tuán)隊(duì)首次提出應(yīng)用號(hào)的概念。（2）2016年9月22日，微信公眾平臺(tái)對(duì)外發(fā)送小程序內(nèi)測邀請，內(nèi)測名額200個(gè)。（3）2016年11月3日，微信小程序?qū)ν夤珳y，開發(fā)完成后可以提交審核，但公測期間不能發(fā)布。1.1.5微信小程序的發(fā)展歷程（4）2016年12月28日，張小龍?jiān)谖⑿殴_課中解答外界對(duì)微信小程序的幾大疑惑，包括沒有應(yīng)用商店、沒有推送消息等。（5）2016年12月30日，微信公眾平臺(tái)對(duì)外發(fā)布公告，上線的微信小程序最多可生成10?000個(gè)帶參數(shù)的二維碼。（6）2017年1月9日，

6、微信小程序正式上線。（7）2017年3月27日，個(gè)人開發(fā)者可以申請小程序開發(fā)和發(fā)布。（8）2017年4月17日，小程序代碼包大小限制擴(kuò)大到2MB。（9）2017年4月20日，騰訊公司發(fā)布公眾號(hào)關(guān)注小程序新規(guī)則。（10）2017年5月12日，騰訊公司發(fā)布“小程序數(shù)據(jù)助手”。（11）2017年12月28日，微信更新的6.6.1版本開放了小游戲。（12）2018年1月18日，微信提供了電子化的侵權(quán)投訴渠道，用戶或者企業(yè)可以在微信公眾平臺(tái)以及微信客戶端入口進(jìn)行投訴。（13）2018年1月25日，微信團(tuán)隊(duì)在“微信公眾平臺(tái)”發(fā)布公告稱“從移動(dòng)應(yīng)用分享至微信的小程序頁面，用戶訪問時(shí)支持打開來源應(yīng)用”。（14

7、）2018年3月，微信正式宣布小程序廣告組件啟動(dòng)內(nèi)測，內(nèi)容還包括第三方可以快速創(chuàng)建并認(rèn)證小程序、新增小程序插件管理接口和更新基礎(chǔ)能力，開發(fā)者可以通過小程序來賺取廣告收入。 微信小程序給很多想做程序員的人提供了機(jī)會(huì)，因?yàn)樗拈_發(fā)門檻很低，不需要太難的技術(shù)。學(xué)習(xí)微信小程序開發(fā)，就可以成為一名“小程序員”。例如，設(shè)計(jì)師、學(xué)生、創(chuàng)業(yè)者、待業(yè)青年、“網(wǎng)蟲”、策劃人員、編輯、草根站長等都可以轉(zhuǎn)做程序員。 微信小程序給企業(yè)提供了流量入口，企業(yè)可以通過小程序推廣自己的產(chǎn)品。經(jīng)過騰訊公司的大力扶持，小程序已經(jīng)成為各個(gè)企業(yè)非?？粗氐牧髁咳肟?。1.1.6微信小程序帶來的機(jī)會(huì)1.2.1基礎(chǔ)技術(shù)準(zhǔn)備 微信小程序自定義了

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

9、面，如圖1.3（b）所示。1.2.2開發(fā)準(zhǔn)備圖1.3（a）開發(fā)文檔圖1.3（b）幫助文檔 在幫助文檔里有介紹、設(shè)計(jì)、小程序開發(fā)、運(yùn)營、數(shù)據(jù)、社區(qū)6個(gè)菜單，針對(duì)不同角色的用戶提供了不同內(nèi)容的幫助文檔。 開發(fā)人員經(jīng)常會(huì)用到這里的簡易教程、框架的使用、組件的介紹、API、工具以及騰訊云支持等內(nèi)容。Step2：在文檔工具里，根據(jù)自己的操作系統(tǒng)，下載微信小程序的開發(fā)工具，如圖1.4所示。圖1.4下載開發(fā)工具Step3：按照提示完成開發(fā)工具的安裝，安裝完成后用微信掃描二維碼登錄。開發(fā)工具提供了小程序項(xiàng)目和公眾號(hào)網(wǎng)頁項(xiàng)目兩個(gè)調(diào)試類型，如圖1.5所示。圖1.5開發(fā)工具1.3.1創(chuàng)建項(xiàng)目 在開發(fā)工具里單擊“小程

10、序項(xiàng)目”，進(jìn)入到“小程序項(xiàng)目”界面，可以添加一個(gè)新的項(xiàng)目。在這個(gè)界面里需要填寫項(xiàng)目目錄、AppID和項(xiàng)目名稱，如圖1.6所示。1.3微信小程序開發(fā)工具的使用圖1.6添加項(xiàng)目 獲取微信小程序AppID，需要在“微信公眾平臺(tái)”中登錄1.2.2節(jié)中注冊的賬戶，在“設(shè)置”“開發(fā)設(shè)置”中，查看微信小程序的AppID，如圖1.7所示。圖1.7獲取AppID 輸入AppID后，在桌面上建立一個(gè)“demo”文件夾，并將其選擇為項(xiàng)目目錄，在項(xiàng)目名稱中輸入“demo”，勾選“建立普通快速啟動(dòng)模板”選項(xiàng)（還可以選擇“建立插件快速啟動(dòng)模板”創(chuàng)建插件項(xiàng)目），單擊“確定”按鈕即可，如圖1.8所示。圖1.8創(chuàng)建demo項(xiàng)目

11、 創(chuàng)建項(xiàng)目后，進(jìn)入到微信開發(fā)者工具界面，界面大致可以分為6個(gè)區(qū)域：菜單欄區(qū)域，模擬器、編輯器、調(diào)試器顯示與隱藏區(qū)域，模擬器區(qū)域，編輯器區(qū)域，調(diào)試器區(qū)域，工具欄區(qū)域，如圖1.9所示。1.3.2開發(fā)者工具界面圖1.9開發(fā)者工具界面 菜單欄區(qū)域：包含項(xiàng)目、文件、編輯、工具、界面、設(shè)置、微信開發(fā)者工具菜單。 模擬器、編輯器、調(diào)試器顯示與隱藏區(qū)域：是用來控制模擬器區(qū)域、編輯器區(qū)域、調(diào)試器區(qū)域的顯示與隱藏的便捷操作按鈕。模擬器區(qū)域：用來顯示小程序項(xiàng)目的界面。編輯器區(qū)域：用來進(jìn)行代碼編寫的區(qū)域。調(diào)試器區(qū)域：用來進(jìn)行調(diào)試的區(qū)域。工具欄區(qū)域：包含編譯、預(yù)覽、遠(yuǎn)程調(diào)試、切后臺(tái)、清緩存、上傳、測試、騰訊云、詳情工具

12、欄按鈕。 模擬器區(qū)域用來顯示小程序界面。在小程序開發(fā)過程中，小程序界面隨著代碼編寫可以實(shí)時(shí)變化，方便小程序的開發(fā)和調(diào)試。同時(shí)模擬器可以模擬小程序在各個(gè)終端設(shè)備上的操作效果；可以設(shè)置小程序運(yùn)行的終端設(shè)備，如iPhone5、iPhone6等；設(shè)置模擬器區(qū)域的百分比大??；模擬設(shè)置Wi-Fi、2G、3G等網(wǎng)絡(luò)連接情況，如圖1.10所示。1.3.3模擬器區(qū)域圖1.10模擬器區(qū)域 編輯器區(qū)域分為兩部分：一部分用來展示項(xiàng)目文件目錄和文件結(jié)構(gòu)；另一部分用來進(jìn)行代碼編輯，如圖1.11所示。1.3.4編輯器區(qū)域圖1.11編輯器區(qū)域（1）在項(xiàng)目目錄上單擊鼠標(biāo)右鍵可以在硬盤打開文件目錄，對(duì)文件目錄重新命名，刪除目錄，

13、在該目錄下查找指定內(nèi)容、新建文件等，如圖1.12所示。圖1.12文件操作（2）在代碼編輯區(qū)域里編寫代碼，可以通過模擬器區(qū)域，實(shí)時(shí)預(yù)覽編輯的情況。修改wxss、wxml文件，會(huì)刷新當(dāng)前頁面（page），修改js文件或者json文件，會(huì)重新編譯小程序，如圖1.13所示。圖1.13代碼編寫（3）在代碼編寫過程中，開發(fā)工具提供自動(dòng)補(bǔ)全功能。在編輯js文件時(shí)，開發(fā)工具會(huì)幫助開發(fā)者補(bǔ)全所有的API，并給出相關(guān)的注釋解釋；編輯wxml文件時(shí)，會(huì)幫助開發(fā)者直接寫出相關(guān)的標(biāo)簽；編輯json文件時(shí)，會(huì)幫助開發(fā)者補(bǔ)全相關(guān)的配置，并給出實(shí)時(shí)的提示，如圖1.14所示。圖1.14自動(dòng)補(bǔ)全功能（4）開發(fā)工具提供自動(dòng)保存功能

14、，書寫代碼后，工具會(huì)自動(dòng)幫助用戶保存當(dāng)前的代碼編輯狀態(tài)，直接關(guān)閉工具或者切換到別的項(xiàng)目，并不會(huì)丟失已經(jīng)編輯的文件內(nèi)容，但需要注意的是，只有保存文件，修改內(nèi)容才會(huì)真實(shí)地寫到硬盤上，并觸發(fā)實(shí)時(shí)預(yù)覽。 小程序的常用調(diào)試工具有：Console、Sources、Network、Storage、AppData、Wxml。 除了這6個(gè)調(diào)試選項(xiàng)外，還有一些不常用的工具：Application為記錄加載的資源信息，Security為安全和認(rèn)證，Audits為性能診斷和優(yōu)化建議，Sensor用來選擇模擬地理位置，Trace為性能監(jiān)測數(shù)據(jù)，在這里不做詳細(xì)介紹。1.3.5調(diào)試器區(qū)域（1）Console窗口用來顯示小程

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

16、x.setStorageSync后的數(shù)據(jù)存儲(chǔ)情況，如圖1.18所示。圖1.18Storage功能（5）AppData窗口用于顯示當(dāng)前項(xiàng)目當(dāng)前時(shí)刻的具體數(shù)據(jù)，實(shí)時(shí)地反饋項(xiàng)目數(shù)據(jù)情況。用戶可以在此處編輯數(shù)據(jù)，并及時(shí)地反饋到界面上，如圖1.19所示。圖1.19AppData功能（6）Wxml窗口用于幫助開發(fā)者開發(fā)Wxml轉(zhuǎn)化后的界面。在這里可以看到真實(shí)的頁面結(jié)構(gòu)以及結(jié)構(gòu)對(duì)應(yīng)的wxss屬性，同時(shí)可以修改對(duì)應(yīng)的wxss屬性，如圖1.20所示。圖1.20Wxml功能1編譯操作 我們可以通過編譯按鈕或者使用快捷鍵Ctrl+B編譯當(dāng)前小程序的代碼，并自動(dòng)刷新模擬器。 為了方便調(diào)試，開發(fā)者還可以添加或選擇已有的

17、自定義編譯條件進(jìn)行編譯和代碼預(yù)覽，如圖1.21所示。1.3.6工具欄區(qū)域圖1.21編譯2預(yù)覽 單擊預(yù)覽按鈕，可以將小程序上傳，生成二維碼，通過掃描二維碼可以在手機(jī)上預(yù)覽小程序，如圖1.22所示。圖1.22預(yù)覽（本圖中二維碼只是示意，請掃描自己操作生成的二維碼）3前后臺(tái)切換 工具欄中的前后臺(tái)切換按鈕可以幫助開發(fā)者模擬一些客戶端的操作環(huán)境。例如，在操作微信小程序過程中，突然進(jìn)來電話，如果接電話，小程序就會(huì)從前臺(tái)進(jìn)入到后臺(tái)，重新訪問小程序時(shí)，又會(huì)從后臺(tái)進(jìn)入到前臺(tái)，如圖1.23所示。圖1.23前后臺(tái)切換4清緩存 清緩存包括清除數(shù)據(jù)緩存、清除文件緩存、清除授權(quán)數(shù)據(jù)、清除網(wǎng)絡(luò)緩存、清除登錄狀態(tài)、全部清除功

18、能，如圖1.24所示。圖1.24清緩存5上傳、測試 小程序開發(fā)完成后，需要上傳到騰訊服務(wù)器進(jìn)行測試，然后可以獲取測試報(bào)告，根據(jù)測試報(bào)告進(jìn)行相應(yīng)的修改，如圖1.25、圖1.26所示。圖1.25上傳圖1.26測試報(bào)告申請1格式調(diào)整快捷鍵Ctrl+S：保存文件。Ctrl+，Ctrl+：代碼行縮進(jìn)。Ctrl+Shift+，Ctrl+Shift+：折疊打開代碼塊。Ctrl+C，Ctrl+V：復(fù)制粘貼，如果沒有選中任何文字則復(fù)制粘貼一行。Shift+Alt+F：代碼格式化。1.3.7常用快捷鍵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)刷新模擬器。2光標(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：選中