微信小程序開發(fā)圖解案例第1章課件

1.2微信小程序開發(fā)準備1.3微信小程序開發(fā)工具的使用1.4沙場大練兵：HelloWorld的創(chuàng)建目錄contents1.1微信小程序介紹1.2微信小程序開發(fā)準備1.3微信小程序開發(fā)工具的使用11.1微信小程序介紹2016年1月9日，騰訊公司啟動了微信小程序產品的研發(fā)，于2017年1月9日正式發(fā)布。微信小程序也被稱為微信應用號。不同于微信訂閱號或公眾號，微信小程序被賦予了應用程序的能力，它是一種不無需安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用；也體現了“用完即走”的理念，用戶不再需要關心是否安裝太多應用的問題。應用將無處不在，隨時隨地可用，無需卸載。。1.1微信小程序介紹2016年1月9日，騰訊公司啟動了微信1.1.1初識微信小程序在微信的“發(fā)現”界面中，可以找到小程序的入口，如左圖所示。小程序的界面和使用方法與App類似，右圖所示是幾個已發(fā)布的常用小程序界面。1.1.1初識微信小程序在微信的“發(fā)現”界面中，可以找到小1.1.1

微信小程序的功能小程序提供的功能如下分享頁功能分享對話功能線下掃碼進入微信小程序功能掛起狀態(tài)功能消息通知功能01OPTION02OPTION03OPTION04OPTION05OPTION小程序不提供的功能如下01OPTION02OPTION03OPTION04OPTION小程序沒有集中入口，沒有應用商店，用戶可以通過搜索、掃描二維碼、好友分享等多種途徑進入微信小程序。小程序沒有訂閱關系，沒有粉絲，只有訪問量。小程序不能推送消息。小程序不能做游戲。1.1.1微信小程序的功能小程序提供的功能如下01OPTI1.1.3微信小程序能否取代App原生App一般要同時開發(fā)iOS和Android兩版，而小程序只需要做一版。毫無疑問，這點是小程序最大的優(yōu)勢。從這個角度來看，小程序是“跨平臺”的。在現階段，開發(fā)一套完整邏輯的應用程序，小程序的開發(fā)效率是低于App的。小程序獨立出了一個封閉的生態(tài)。小程序雖是跨平臺的，但是缺乏成熟的組件，缺少統(tǒng)計、繪圖組件，以前的echarts和hightcharts都無法使用。小程序不支持WebView，大量已被靜態(tài)化好的HTML頁面完全沒辦法在小程序上展示。小程序想取代Android和iOS還要走很長的路，是藍海還是死海需要時間來驗證。1.1.3微信小程序能否取代App原生App一般要同時開發(fā)1.1.4微信小程序的發(fā)展歷程2016年1月9日微信團隊首次提出應用號的概念。2016年9月22日微信公眾平臺對外發(fā)送小程序內測邀請，內側名額200個。2016年11月3日微信小程序對外公測，開發(fā)完成后可以提交審核，但公測期間不能發(fā)布。2016年12月28日張小龍在微信公開課中解答外界對微信小程序的幾大疑惑，包括沒有應用商店、沒有推送消息等。2016年12月30日微信公眾平臺對外公告，上線的微信小程序最多可生成10000個帶參數的二維碼。2017年1月9日微信小程序正式上線。1.1.4微信小程序的發(fā)展歷程2016年1月9日微信團隊首1.1.5微信小程序帶來的機會微信小程序給很多想做程序員的人員提供了機會，因為它的門檻很低，不需要太難的技術。學習微信小程序開發(fā)，就可以成為一名“小程序員”。例如，設計師、學生、創(chuàng)業(yè)、待業(yè)青年、網蟲、策劃人員、編輯、草根站長等都可以轉做程序員。程序員設計師學生創(chuàng)業(yè)待業(yè)青年網蟲策劃人員編輯草根站長1.1.5微信小程序帶來的機會微信小程序給很多想做程序員的1.2微信小程序開發(fā)準備1.3微信小程序開發(fā)工具的使用1.4沙場大練兵：HelloWorld的創(chuàng)建目錄contents1.1微信小程序介紹1.2微信小程序開發(fā)準備1.3微信小程序開發(fā)工具的使用11.2.1基礎技術準備微信小程序自定義了一套語言，稱為WXML微信標記語言，它的使用方法類似于HTML語言。另外，微信小程序還定義了自己的樣式語言WXSS，它兼容了CSS樣式，并做了擴展；使用JavaScript來進行業(yè)務處理，兼容了大部分JavaScript功能，但仍有一些功能無法使用，所以有一定HTML、CSS、JavaScript技術功底的人學習微信小程序開發(fā)會容易很多。微信小程序WXML使用方法類似于HTML語言WXSS兼容CSS樣式并做了擴展JavaScript兼容大部分JavaScript功能1.2.1基礎技術準備微信小程序自定義了一套語言，稱為WX1.2.2開發(fā)準備Step1注冊微信開發(fā)者賬號。Step2下載微信小程序的開發(fā)工具。Step3安裝開發(fā)工具。1.2.2開發(fā)準備Step1注冊微信開發(fā)者賬號。Step1.2微信小程序開發(fā)準備1.3微信小程序開發(fā)工具的使用1.4沙場大練兵：HelloWorld的創(chuàng)建目錄contents1.1微信小程序介紹1.2微信小程序開發(fā)準備1.3微信小程序開發(fā)工具的使用11.3.1創(chuàng)建項目在開發(fā)工具里單擊“本地小程序項目”，進入下圖所示界面。單擊“添加項目”，進入“添加項目”界面，可以添加一個新的項目，在這個界面里需要填寫AppID、項目名稱、項目目錄。1.3.1創(chuàng)建項目在開發(fā)工具里單擊“本地小程序項目”，進入1.3.2編輯進入到開發(fā)工具里，在左側有7個導航模塊：編輯、調試、項目、編譯、后臺、緩存和關閉。編輯模塊用來進行微信小程序的開發(fā)，右側是微信小程序的界面、項目的目錄和打開的頁面1.3.2編輯進入到開發(fā)工具里，在左側有7個導航模塊：編輯1.3.2編輯在硬盤中打開文件的目錄，可以新建4種文件：js、json、wxml、wxss，還可對文件進行重命名、刪除和查找。1.3.2編輯在硬盤中打開文件的目錄，可以新建4種文件：j1.3.2編輯可以通過編輯區(qū)左邊的模擬器，實時預覽編輯的情況。修改wxss、wxml文件，會刷新當前page，修改js文件或者json文件，會重新編譯小程序。1.3.2編輯可以通過編輯區(qū)左邊的模擬器，實時預覽編輯的情1.3.2編輯在代碼編寫過程中，開發(fā)工具提供自動補全功能。js文件編輯時，會幫助開發(fā)者補全所有的API，并給出相關的注釋解釋；wxml文件編輯時，會幫助開發(fā)者直接寫出相關的標簽；json文件編輯時，會幫助開發(fā)者補全相關的配置，并給出實時的提示。1.3.2編輯在代碼編寫過程中，開發(fā)工具提供自動補全功能。1.3.3常用快捷鍵Ctrl+S：保存文件Ctrl+[，Ctrl+]：代碼行縮進Ctrl+Shift+[，Ctrl+Shift+]：折疊打開代碼塊Ctrl+CCtrl+V：復制粘貼，如果沒有選中任何文字則復制粘貼一行Shift+Alt+F：代碼格式化Alt+Up，Alt+Down：上下移動一行Shift+Alt+Up，Shift+Alt+Down：向上向下復制一行Ctrl+Shift+Enter：在當前行上方插入一行Ctrl+Shift+F：全局搜索1.格式調整快捷鍵Ctrl+End：移動到文件結尾Ctrl+Home：移動到文件開頭Ctrl+i：選中當前行Shift+End：選擇從光標到行尾Shift+Home：選擇從行首到光標處Ctrl+Shift+L：選中所有匹配Ctrl+D：選中匹配Ctrl+U：光標回退2.光標相關快捷鍵Ctrl+\：隱藏側邊欄Ctrl+m：打開或者隱藏模擬器3.界面相關快捷鍵1.3.3常用快捷鍵Ctrl+S：保存文件1.格式調整快捷1.3.4調試Console窗口用來顯示小程序的錯誤輸出信息和調試代碼。1.3.4調試Console窗口用來顯示小程序的錯誤輸出信1.3.4調試Sources窗口用于顯示當前項目的腳本文件，在Sources中開發(fā)者看到的文件是經過處理之后的腳本文件。1.3.4調試Sources窗口用于顯示當前項目的腳本文件1.3.4調試Network窗口用來觀察發(fā)送的請求和調用文件的信息。1.3.4調試Network窗口用來觀察發(fā)送的請求和調用文1.3.4調試Storage窗口用于顯示當前項目使用wx.setStorage或者wx.setStorageSync后的數據存儲情況。1.3.4調試Storage窗口用于顯示當前項目使用wx1.3.4調試AppData窗口用于顯示當前項目當前時刻的具體數據，實時地反饋項目的數據情況，可以在此處編輯數據，并將其及時地反饋到界面上。1.3.4調試AppData窗口用于顯示當前項目當前時刻的1.3.4調試Wxml窗口用于幫助開發(fā)者開發(fā)Wxml轉化后的界面。在這里可以看到真實的頁面結構以及結構對應的wxss屬性，同時可以修改對應的wxss屬性。1.3.4調試Wxml窗口用于幫助開發(fā)者開發(fā)Wxml轉1.3.5項目在項目模塊里，可以看到微信小程序項目的相關信息，包括項目名稱、AppID、項目文件的路徑。有AppID的項目，可以在手機上預覽微信小程序。1.3.5項目在項目模塊里，可以看到微信小程序項目的相關信1.3.6編譯編譯模塊可以對整個項目進行重新編譯。1.3.6編譯編譯模塊可以對整個項目進行重新編譯。1.3.7前臺/后臺后臺是指微信小程序從前臺進入到后臺。例如，在操作微信小程序的過程中，突然來電話，如果接電話，小程序就會從前臺進入到后臺，重新訪問小程序時，又會從后臺進入到前臺。1.3.7前臺/后臺后臺是指微信小程序從前臺進入到后臺。例1.3.8緩存緩存模塊用來清除數據存儲、文件存儲、用戶授權數據。1.3.8緩存緩存模塊用來清除數據存儲、文件存儲、用戶授權1.2微信小程序開發(fā)準備1.3微信小程序開發(fā)工具的使用1.4沙場大練兵：HelloWorld的創(chuàng)建目錄contents1.1微信小程序介紹1.2微信小程序開發(fā)準備1.3微信小程序開發(fā)工具的使用1沙場大練兵/在創(chuàng)建項目之后，開發(fā)工具會添加默認的目錄和頁面，在默認的頁面上，可以看到有“HelloWorld”文字。HelloWorld的創(chuàng)建沙場大練兵/在創(chuàng)建項目之后，開發(fā)工具會添加默認的目錄和頁面，2.9.1底部標簽導航設計（1）在pages/index/index.js文件里，Page的data里提供數據源motto，data的數據可以動態(tài)地綁定到WXML頁面里。1.4沙場大練兵：HelloWorld的創(chuàng)建2.9.1底部標簽導航設計（1）在pages/index/2.9.1底部標簽導航設計（2）在pages/index/index.wxml文件里，通過雙大括號的（{{}}）方式，將