微信小程序開發(fā)實戰(zhàn)教程課件

1、第1章 微信小程序入門初識微信小程序小程序的開發(fā)體驗開發(fā)環(huán)境搭建團隊開發(fā)與項目上線學習目標掌握了解掌握掌握了解微信小程序的概念及發(fā)展前景12掌握微信小程序開發(fā)工具的使用3掌握微信小程序的基本功能4掌握微信小程序的目錄結構目錄點擊查看本節(jié)相關知識點點擊查看本節(jié)相關知識點開發(fā)環(huán)境搭建1.21.1初識微信小程序點擊查看本節(jié)相關知識點1.3小程序開發(fā)體驗點擊查看本節(jié)相關知識點團隊開發(fā)與項目上線1.4微信小程序：是一種不需要安裝即可使用的應用，用戶只需掃一掃或搜一下即可打開應用，無需安裝或卸載。1.1 初識微信小程序1 什么是微信小程序 特點應用體積小無需安裝觸手可及無需卸載微信小程序與原生App的關系

2、圖。關系特點：跨平臺（支持iOS/Android）與微信緊密結合掃一掃或搜一搜可以獲取小程序一鍵登錄1.1 初識微信小程序1 什么是微信小程序 1.1 初識微信小程序媒體交通電商微信小程序覆蓋的領域：1 什么是微信小程序 1.1 初識微信小程序1 什么是微信小程序 微信小程序存在的必要性：小程序可以完成訂票、打車、訂餐等服務。服務號的功能薄弱，而小程序功能強大。小程序可以被附近用戶搜索到。小程序可以結合公眾平臺來推廣。1.1 初識微信小程序1 什么是微信小程序 微信小程序發(fā)展數據：1.1 初識微信小程序1 什么是微信小程序 微信小程序熱門應用案例。美團外賣摩拜單車鏈家租房1.1 初識微信小程序

3、1 什么是微信小程序 單擊微信中的搜索按鈕，輸入關鍵詞“美團外賣”。1.1 初識微信小程序微信小程序的功能界定。支持的功能不支持的功能線下掃碼小程序沒有集中入口，沒有應用商店掛起狀態(tài)小程序沒有訂閱關系消息通知小程序不能主動推動消息（可用模板消息）小程序和公眾號的關聯-小程序的搜索和歷史列表-1 什么是微信小程序 1.1 初識微信小程序2 微信小程序賬號 微信公眾平臺賬號分類：小程序與訂閱號、服務號的區(qū)別：對比項小程序訂閱號和服務號加載及組件加載慢，專門提供組件加載快，使用風格統(tǒng)一且近乎原生的頁面組件運營后臺實時數據非實時數據接口數量豐富的接口，如文件操作、設備相關、動畫等接口數量比較少，只提供

4、有限的功能，受限于瀏覽器1.1 初識微信小程序2 微信小程序賬號 1.1 初識微信小程序3 微信小程序的特點 微信小程序與原生App、Web App的區(qū)別：對比項小程序訂閱號和服務號Web App下載無需下載，通過掃碼等方式獲取從iOS和Android應用商店中下載無需下載通過瀏覽器進入安裝無需安裝安裝在手機中占用存儲空間無需安裝升級無需升級需要升級操作無需升級開發(fā)成本開發(fā)周期短開發(fā)周期長開發(fā)周期適中開發(fā)周期開發(fā)成本低開發(fā)成本高開發(fā)成本適中1.1 初識微信小程序4 微信小程序的發(fā)展前景 微信小程序迅速發(fā)展表現：生態(tài)體系。微信小程序通過對開發(fā)者的支持加大，能夠實現更多的功能。企業(yè)中也會大量引入微

5、信小程序業(yè)務開展，如滴滴打車、美團外賣、貨拉拉等等。開放能力。方便開發(fā)者進行深度挖掘。微信小程序的配套服務將會不斷完善，對發(fā)展起到推動作用。用戶黏性。隨著微信小程序用戶量的發(fā)展，用戶對產品的訴求的不斷提高，用戶對產品的改進意見越來越多，會幫助微信小程序的發(fā)展。未來小程序和微信之間將實現更佳的鏈接，用戶獲取小程序更加方便。1.2 開發(fā)環(huán)境搭建1 注冊微信公眾號 注冊微信公眾號的步驟：瀏覽器打開“”選擇注冊的賬號類型單擊“小程序”完成注冊1.2 開發(fā)環(huán)境搭建1 注冊微信公眾號 微信公眾號展示圖：1.2 開發(fā)環(huán)境搭建1 注冊微信公眾號 微信小程序公眾號注冊完成后，進入微信小程序管理后臺：1.2 開發(fā)

6、環(huán)境搭建1 注冊微信公眾號 在“設置”-“開發(fā)設置”中查看AppID，為小程序開發(fā)做準備：1.2 開發(fā)環(huán)境搭建2 安裝微信開發(fā)者工具 在微信公眾平臺網站中找到微信開發(fā)工具的下載地址：1.2 開發(fā)環(huán)境搭建2 安裝微信開發(fā)者工具 Windows 7操作系統(tǒng)為例，演示開發(fā)者工具的安裝和使用，具體步驟如下：雙擊下載后的安裝包，安裝程序打開后單擊“下一步”單擊“我接受”單擊“安裝”1.2 開發(fā)環(huán)境搭建2 安裝微信開發(fā)者工具 安裝向導：1.3 小程序開發(fā)體驗1 創(chuàng)建項目 首次微信掃碼登錄，登錄成功后選擇開發(fā)模式：1.3 小程序開發(fā)體驗1 創(chuàng)建項目 單擊“小程序”項目，就可以創(chuàng)建一個新的小程序項目：1.3

7、小程序開發(fā)體驗2 開發(fā)者工具的使用 小程序項目創(chuàng)建成功后，就會進入到開發(fā)調試環(huán)境中。1.3 小程序開發(fā)體驗2 開發(fā)者工具的使用 1.3 小程序開發(fā)體驗2 開發(fā)者工具的使用 通過菜單欄可以訪問微信開發(fā)者工具的大部分功能：項目：用于新建項目或打開一個現有的項目。文件：用于新建文件、保存文件或關閉文件。編輯：用于編輯代碼，對代碼進行格式化。工具：用于訪問一些輔助工具。界面：用于控制界面中各部分的顯示和隱藏。設置：用于對外觀、快捷鍵、編輯器等進行設置。微信開發(fā)者工具：可以進行切換賬號、更換開發(fā)模式、調試等操作。1.3 小程序開發(fā)體驗2 開發(fā)者工具的使用 工具欄提供了一些常用功能的快捷按鈕，具體解釋如下

8、：個人中心：位于工具欄最左側第1個按鈕，顯示當前登錄用戶頭像。模擬器、編輯器和調試器：用于控制相應工具的顯示和隱藏。云開發(fā)：開發(fā)者可以使用云開發(fā)來開發(fā)小程序、小游戲。云開發(fā)能力從基礎庫2.2.3開始支持。1.3 小程序開發(fā)體驗2 開發(fā)者工具的使用 工具欄提供了一些常用功能的快捷按鈕，具體解釋如下：模式切換下拉菜單：用于在小程序模式搜索動態(tài)頁和插件模式之間切換。編譯下拉菜單：用于切換編譯模式，默認為普通編譯。編譯：編寫小程序的代碼后，需要編譯才能運行。1.3 小程序開發(fā)體驗2 開發(fā)者工具的使用 工具欄提供了一些常用功能的快捷按鈕，具體解釋如下：預覽：單擊預覽按鈕會生成一個二維碼，使用手機中的微信

9、掃描二維碼。真機調試：通過網絡連接對手機上運行的小程序進行調試。切后臺：用于模擬小程序在手機中切后臺的效果。清緩存：用于清除數據緩存、文件緩存等。1.3 小程序開發(fā)體驗2 開發(fā)者工具的使用工具欄提供了一些常用功能的快捷按鈕，具體解釋如下：上傳：用于將代碼上傳到小程序管理后臺。版本管理：用于通過Git對小程序進行版本管理。1.3 小程序開發(fā)體驗2 開發(fā)者工具的使用 模擬器用于模擬手機環(huán)境，查看不同型號手機的運行效果：1.3 小程序開發(fā)體驗2 開發(fā)者工具的使用 編輯器：分為左右兩欄：左欄用于瀏覽項目目錄結構，右欄用于編寫代碼。在左欄中單擊某個文件：就可以在右欄中對該文件進行編輯。1.3 小程序開發(fā)

10、體驗2 開發(fā)者工具的使用 調試器類似于Google Chrome瀏覽器中的開發(fā)者工具：Console：控制臺面板，用于輸出調試信息，也可以直接編寫代碼執(zhí)行。Sources：源代碼面板，可以查看或編輯源代碼，并支持代碼調試。Network：網絡面板，記錄網絡請求信息，根據它可進行網絡性能優(yōu)化。Security：安全面板，用于調試頁面的安全和認證等信息，如HTTpS。1.3 小程序開發(fā)體驗調試器類似于Google Chrome瀏覽器中的開發(fā)者工具：AppData：App數據面板，可以查看或編輯當前小程序運行時的數據。Audits：審計面板，用于對小程序進行體驗評分。Sensor：傳感器面板，用于模

11、擬地理位置、重力感應。 Storage：存儲面板，用于查看和管理本地數據緩存。Trace：跟蹤面板，用于真機調試時跟蹤調試信息。Wxml：Wxml面板，用于查看和調試WXML和WXSS。2 開發(fā)者工具的使用 1.3 小程序開發(fā)體驗3 目錄結構 “Hello World”小程序的目錄結構：路徑說明project.config.json項目配置文件app.js應用程序的邏輯文件app.json應用程序的配置文件app.wxss應用程序公共樣式文件pages/存放頁面文件目錄1.3 小程序開發(fā)體驗3 目錄結構 “Hello World”小程序的目錄結構：路徑說明pages/index/存放index

12、頁面的目錄pages/index/index.jsIndex頁面的邏輯文件pages/index/index.wxmlIndex頁面的結構文件pages/index/index.wxssIndex頁面的樣式文件pages/logs/存放logs頁面的目錄1.3 小程序開發(fā)體驗3 目錄結構 “Hello World”小程序的目錄結構：路徑說明pages/logs/logs.jslogs頁面的邏輯文件pages/logs/logs.jsonlogs頁面的配置文件pages/logs/logs.wxmllogs頁面的結構文件pages/logs/logs.wxsslogs頁面的樣式文件utils/存

13、放公共腳本文件的目錄utils/utils.js公共腳本文件，保存一些工具代碼1.3 小程序開發(fā)體驗3 目錄結構 單擊頭像即可進入到登錄日志頁，查看用戶登錄的歷史記錄：1.3 小程序開發(fā)體驗3 目錄結構 每個頁面由wxml、wxss、js和json文件組成：1.3 小程序開發(fā)體驗3 目錄結構 app.json文件中的pages配置項用來生成index頁面： pages: pages/index/index, pages/logs/logs ,index頁面/事件處理函數bindViewTap: function() wx.navigateTo(url: ./logs/logs),事件處理函數1

14、.3 小程序開發(fā)體驗4 項目設置 在微信開發(fā)者工具中，執(zhí)行菜單欄中的“設置”-“項目設置”命令：1.3 小程序開發(fā)體驗4 項目設置 設置項目及含義：項目設置：對當前項目進行設置。域名信息：小程序的安全域名信息，合法域名可在管理后臺進行設置。調試基礎庫：選擇基礎庫版本，用于在對應版本的微信客戶端上運行。1.3 小程序開發(fā)體驗4 項目設置 設置項目及含義：ES6轉ES5：將JavaScript代碼的ES6語法轉換為ES5語法。上傳代碼時樣式自動補全：自動檢測并補全缺失樣式。上傳代碼時自動壓縮：壓縮代碼，縮小代碼體積。使用npm模塊：在小程序中使用npm安裝第三方包。1.3 小程序開發(fā)體驗4 項目設

15、置 設置項目及含義：啟用自定義處理命令：指定編譯前、預覽前、上傳前需要預處理的命令。不校驗合法域名、web-view（業(yè)務域名）、TlS版本以及HTTpS證書：在真實環(huán)境中會對這些信息進行校驗。1.3 小程序開發(fā)體驗5 快捷鍵 為了方便開發(fā)者的使用，微信開發(fā)者工具提供了大量的快捷鍵功能：快捷鍵功能描述Ctrl+/注釋或取消注釋Shift+Home選擇從行首到光標處Shift+End選擇從光標到行尾Ctrl+Shift+l選中所有匹配Ctrl+Home移動到文件的開頭1.3 小程序開發(fā)體驗5 快捷鍵 為了方便開發(fā)者的使用，微信開發(fā)者工具提供了大量的快捷鍵功能：快捷鍵功能描述Ctrl+End移動到

16、文件的結尾Ctrl+I選中當前行Ctrl+U光標回退Ctrl+D選中匹配Ctrl+C復制（如果沒有選中任何文字則復制一行）1.3 小程序開發(fā)體驗5 快捷鍵 為了方便開發(fā)者的使用，微信開發(fā)者工具提供了大量的快捷鍵功能：快捷鍵功能描述Ctrl+V粘貼Alt+Shift+Up向上復制一行Alt+Shift+Down向下復制一行Ctrl+Shift+折疊代碼塊Ctrl+Shift+展開代碼塊1.3 小程序開發(fā)體驗5 快捷鍵 為了方便開發(fā)者的使用，微信開發(fā)者工具提供了大量的快捷鍵功能：快捷鍵功能描述Ctrl+Shift+Enter在當前行上插入一行Alt+Up向上移動一行Alt+Down向下移動一行Ct

17、rl+Shift+F全局搜索Alt+Shift+F代碼格式化1.3 小程序開發(fā)體驗5 快捷鍵 為了方便開發(fā)者的使用，微信開發(fā)者工具提供了大量的快捷鍵功能：快捷鍵功能描述Ctrl+在當前行上插入一行Ctrl+向上移動一行Ctrl+S向下移動一行1.4 團隊開發(fā)與項目上線1 項目成員及權限小程序的開發(fā)團隊的人員組織結構組成：1.4 團隊開發(fā)與項目上線開發(fā)小程序項目的一般工作流程：1 項目成員及權限1.4 團隊開發(fā)與項目上線1 項目成員及權限小程序的管理后臺開發(fā)團隊中的不同身份的成員權限：權限說明開發(fā)者權限可使用小程序開發(fā)者工具及開發(fā)版小程序進行開發(fā)體驗者權限可使用體驗版小程序登錄可登錄小程序管理后

18、臺，無需管理員確認數據分析使用小程序數據分析功能查看小程序數據開發(fā)管理小程序提交審核、發(fā)布、回退開發(fā)設置設置小程序服務器域名、消息推送及掃描普通二維碼打開小程序暫停服務設置暫停小程序上線服務1.4 團隊開發(fā)與項目上線1 項目成員及權限開發(fā)團隊的成員權限分配：成員權限項目管理組成員擁有所有權限開發(fā)組成員開發(fā)者權限、體驗者權限、數據分析、小程序插件、騰訊云管理、接觸關聯公眾號產品組成員體驗者權限、數據分析測試組成員體驗者權限1.4 團隊開發(fā)與項目上線1 項目成員及權限小程序的管理后臺根據這個流程設計了小程序的版本管理：版本說明開發(fā)版本使用開發(fā)者工具，可將代碼上傳到開發(fā)版本中，開發(fā)版本只保留最新一份

19、上傳的版本。單擊提交審核，可將代碼提交審核。開發(fā)版本的可刪除，不影響線上版本和審核中版本的代碼審核中版本只能有一份代碼處于審核中。有審核結果后可以發(fā)布到線上，也可直接重新提交審核，覆蓋原審核版本線上版本線上所有用戶使用的代碼版本。該版本代碼在新版本代碼發(fā)布后被覆蓋更新1.4 團隊開發(fā)與項目上線1 項目成員及權限預覽小程序開發(fā)版本二維碼：1.4 團隊開發(fā)與項目上線2 提交審核及發(fā)布為了保證小程序的質量以及符合相關的規(guī)范，小程序的發(fā)布需要經過審核：本章總結本章主要講解了什么是微信小程序，微信小程序的特點和發(fā)展前景，以及如何下載安裝微信小程序開發(fā)者工具及簡單使用，最后介紹了微信小程序的團隊開發(fā)、項目

20、管理以及審核發(fā)布。通過本章的學習，讀者應對微信小程序的全貌有了一個整體的認識，能夠動手完成小程序開發(fā)環(huán)境的搭建。第2章 微信小程序開發(fā)基礎【案例1】比較數值大小【案例3】計算器【案例2】調查問卷學習目標掌握掌握掌握掌握掌握小程序項目的基本結構及配置文件的編寫12掌握Page()、App()函數和常用組件的使用3掌握小程序與服務器交互的實現4掌握WXML、WXSS和條件渲染、列表渲染的基本語法目錄點擊查看本節(jié)相關知識點點擊查看本節(jié)相關知識點【案例2】調查問卷2.22.1【案例1】比較數字大小點擊查看本節(jié)相關知識點2.3【案例3】計算器2.1 【案例1】比較數字大小1 案例分析比較數字大小實現效果

21、：實現步驟：輸入第1個數；輸入第2個數；單擊比較按鈕；2.1 【案例1】比較數字大小1 案例分析比較數值大小實現的技術知識點總結：技術事件數據綁定條件渲染表單組件2 創(chuàng)建項目 項目創(chuàng)建流程：創(chuàng)建一個空白項目創(chuàng)建app.json文件新增一個index頁面2.1 【案例1】比較數字大小2.1 【案例1】比較數字大小2 創(chuàng)建項目 開發(fā)者工具會自動創(chuàng)建pages/index目錄： pages: pages/index/index Index頁面2.1 【案例1】比較數字大小3 頁面組件 標簽功能標簽功能視圖容器圖標文件文本域復選框按鈕單選框圖片輸入框表單進度條頁面組件及功能：2.1 【案例1】比較數字

22、大小編寫基本表單結構：3 頁面組件 請輸入第1個數字：請輸入第2個數字：比較比較結果：text組件view組件input組件2.1 【案例1】比較數字大小input組件type屬性值：3 頁面組件 可選值說明默認text文本輸入鍵盤number數字輸入鍵盤-idcard身份證輸入鍵盤-digit帶小數點的數字鍵盤-值得一提和屬于雙邊標簽，由開始標簽和結束標簽兩部分構成，屬于單邊標簽，只有“開始標簽”，且結尾用“/”表示。值得一提的是，也可以寫成雙邊標簽，如“”。2.1 【案例1】比較數字大小3 頁面組件 2.1 【案例1】比較數字大小3 頁面組件 input組件type屬性值為number：2

23、.1 【案例1】比較數字大小4 頁面樣式WXSS文件中的選擇器：選擇器示例說明.class.container選擇所有class=container的組件#id#id選擇id=#id的組件elementview選擇所有view組件element, elementview, text選擇所有view組件和所有text組件:afterview:after在view組件內的后面插入內容:beforeview:before在view組件內的前面插入內容2.1 【案例1】比較數字大小選擇器使用演示：4 頁面樣式.container margin: 20px;class選擇器view margin: 20

24、px;view:after content: 測試;:after選擇器element選擇器2.1 【案例1】比較數字大小不同設備的rpx與px換算關系：4 頁面樣式rpx單位規(guī)定了任何手機屏幕的寬度都為750rpx（邏輯像素）。目標：為了方便開發(fā)人員適配各種手機屏幕設備屏幕寬度rpx換算pxpx換算rpxiPhone53201rpx=0.42px1px=2.34rpxiPhone63751rpx=0.5px1px=2rpxiPhone6 Plus4141rpx=0.552px1px=1.81rpx2.1 【案例1】比較數字大小物理像素：指屏幕上實際有多少個像素。邏輯像素：是指CSS中使用的像素

25、單位。4 頁面樣式iphone6物理分辨率為750px1334pxiphone6的邏輯分辨率為375px667px1px1px2.1 【案例1】比較數字大小對比WXSS中的rpx運行效果展示：4 頁面樣式view margin: 50rpx;input width: 600rpx; margin-top: 20rpx; border-bottom: 2rpx solid #ccc;button margin: 50rpx;2.1 【案例1】比較數字大小對比WXSS中的px運行效果展示：4 頁面樣式view margin: 50rpx;input /* 此處將原來的600rpx改為300px *

26、/ width: 300px; margin-top: 20rpx; border-bottom: 2rpx solid #ccc;button margin: 50rpx;2.1 【案例1】比較數字大小全局樣式和導入外部樣式：4 頁面樣式button color: #fff; background: #369;import test.wxss;button letter-spacing: 12rpx;導入外部樣式全局樣式2.1 【案例1】比較數字大小頁面級配置文件：5屬性說明navigationBarBackgroundColor導航欄背景顏色，默認為“#000000”navigationB

27、arTextStyle導航欄標題顏色，僅支持black、white（默認）navigationBarTitleText導航欄的標題文字內容backgroundColor窗口的背景色，默認為“#ffffff”backgroundTextStyle下拉loading的樣式，僅支持dark（默認）、light 配置文件2.1 【案例1】比較數字大小頁面級配置文件：5屬性說明enablePullDownRefresh是否全局開啟下拉刷新，默認為falseonReachBottomDistance頁面上拉觸底事件觸發(fā)時距頁面底部距離（單位為px），默認為50disableScroll默認為false。設

28、為true時，頁面整體不能上下滾動 配置文件2.1 【案例1】比較數字大小頁面級文件配置導航欄標題為“數值比較”，顏色為藍色：5 配置文件 navigationBarTitleText: 數值比較, navigationBarBackgroundColor: #3692.1 【案例1】比較數字大小應用級配置文件：5屬性說明pages頁面路徑列表window全局的默認窗口表現tabBar底部 tab 欄的表現networkTimeout網絡超時時間debug是否開啟調試模式，默認為false 配置文件2.1 【案例1】比較數字大小應用級配置文件：5屬性說明requiredBackgroundMo

29、des需要在后臺使用的能力，如“音樂播放”plugins使用到的插件 配置文件2.1 【案例1】比較數字大小networkTimeout可以設置網絡請求過程中的超時時間：5屬性類型說明requestNumberwx.request()的超時時間（毫秒），默認為60000connectSocketNumberwx.connectSocket()的超時時間（毫秒），默認為60000uploadFileNumberwx.uploadFile()的超時時間（毫秒），默認為60000downloadFileNumberwx.downloadFile()的超時時間（毫秒），默認為60000 配置文件2.1

30、 【案例1】比較數字大小開啟了調試，運行程序后，就會在控制臺中輸出調試信息：5 配置文件 pages: pages/index/index, debug: true2.1 【案例1】比較數字大小Page()函數參數對象的屬性：6 頁面邏輯屬性類型說明dataObject頁面的初始數據onLoadFunction生命周期回調函數，監(jiān)聽頁面加載onReadyFunction生命周期回調函數，監(jiān)聽頁面初次渲染完成onShowFunction生命周期回調函數，監(jiān)聽頁面顯示onHideFunction生命周期回調函數，監(jiān)聽頁面隱藏onUnloadFunction生命周期回調函數，監(jiān)聽頁面卸載2.1 【案

31、例1】比較數值大小Page()函數參數對象的屬性：6 頁面邏輯屬性類型說明onPullDownRefreshFunction頁面事件處理函數，監(jiān)聽用戶下拉動作onReachBottomFunction頁面事件處理函數，頁面上拉觸底onShareAppMessageFunction頁面事件處理函數，用戶單擊右上角的分享按鈕onPageScrollFunction頁面事件處理函數，頁面滾動會連續(xù)觸發(fā)其他Any開發(fā)者可以添加任意的函數或者數據到data中，在頁面的函數中可以通過this.*來訪問。2.1 【案例1】比較數值大小onLoad、onReady、onShow函數為例進行演示：6 頁面邏輯o

32、nLoad: function (options) console.log(頁面加載),onReady: function () console.log(頁面初次渲染完成),onShow: function () console.log(頁面顯示),2.1 【案例1】比較數字大小生命周期回調函數的區(qū)別分析如下：onLoad：頁面加載時觸發(fā)，一個頁面只會調用一次。onReady：頁面初次渲染完成的時候調用。onShow：當頁面顯示時觸發(fā)。onHide：當頁面隱藏時觸發(fā)。onUnload：頁面卸載時觸發(fā)。6 頁面邏輯值得一提單擊“”會在底部彈出一個菜單，在菜單中有一項“轉發(fā)”，單擊轉發(fā)就會觸發(fā)on

33、ShareAppMessage事件。單擊“”可以在前臺、后臺之間切換。2.1 【案例1】比較數字大小6 頁面邏輯2.1 【案例1】比較數字大小6 頁面邏輯onLoad函數中的options參數傳遞流程：onReady: function() wx.navigateTo( url: /pages/test/test?name1=value1&name2=value2 ),onLoad: function (options) console.log(options),pages/index/index.jspages/test/test.jsonPullDownRefresh: function

34、() console.log(此時用戶下拉觸頂),onReachBottom: function () console.log(此時用戶上拉觸底),onPageScroll: function (options) console.log(此時用戶正在滾動頁面) console.log(滾動距離： + options.scrollTop),2.1 【案例1】比較數字大小6 頁面邏輯pages/index/index.js中使用這3個頁面處理函數：比較compare: function (e) console.log(比較按鈕被單擊了) console.log(e),2.1 【案例1】比較數字大小

35、6 頁面邏輯組件事件處理函數用于為組件綁定事件：2.1 【案例1】比較數字大小6 頁面邏輯對比e.target和e.currentTarget： outer innerviewtap: function(e) console.log(e.target.id + - + e.currentTarget.id),子元素id父元素id2.1 【案例1】比較數字大小屬性類型touchstart手指觸摸動作開始touchmove手指觸摸后移動touchcancel手指觸摸動作被打斷，如來電提醒，彈窗touchend手指觸摸動作結束tap手指觸摸后馬上離開longpress手指觸摸后，超過350ms再離開

36、。如果指定了事件回調函數并觸發(fā)了這個事件，tap事件將不被觸發(fā)6 頁面邏輯常用的冒泡事件：2.1 【案例1】比較數字大小6 頁面邏輯值得一提冒泡事件是指當一個組件上的事件被觸發(fā)后，事件會向父節(jié)點傳遞，而非冒泡事件不會向父節(jié)點傳遞。一些組件還擁有一些專門的事件，如form組件的submit事件、input組件的input事件等2.1 【案例1】比較數字大小6 頁面邏輯事件冒泡和綁定：單擊middle觸發(fā)middle單擊inner觸發(fā)middle、inner單擊outer觸發(fā)outer2.1 【案例1】比較數字大小7 注冊程序在app.js文件中調用App()函數：onLaunch: functi

37、on(options) console.log(onLaunch執(zhí)行),onShow: function (options) console.log(onShow執(zhí)行),onHide: function() console.log(onHide執(zhí)行),onError: function(error) console.log(onError執(zhí)行),onPageNotFound: function (options) console.log(onPageNotFound執(zhí)行)2.1 【案例1】比較數值大小7 注冊程序在app.js文件中調用App()函數：2.1 【案例1】比較數字大小7 注冊程序

38、onLaunch()和onShow()函數觸發(fā)后返回的字段：path：打開小程序的路徑。query：打開小程序的query。scene：打開小程序的場景值。shareTicket：獲取到shareTicket。referrerInfo：獲取來源于小程序、公眾號的AppId等。2.1 【案例1】比較數字大小7 注冊程序App()函數中還可以保存一些在所有頁面中共享的數據：App( num: 123, test: function() console.log(test)onReady: function () var app = getApp() console.log(app.num) app.

39、test(),注冊數據打印數據2.1 【案例1】比較數字大小8 實現比較功能給兩個input組件 綁定不同事件num1Change、num2Change：num1change: function (e) this.num1 = Number(e.detail.value),num2change: function (e) this.num2 = Number(e.detail.value),事件綁定事件處理函數compare: function() var str = 兩數相等 if (this.num1 this.num2) str = 第1個數大 else if (this.num1 th

40、is.num2) str = 第2個數大 this.setData(result: str),事件處理函數比較事件綁定8 實現比較功能比較功能：2.1 【案例1】比較數字大小通過id獲取元素通過dataset獲取8 實現比較功能通過id和dataset獲取元素：2.1 【案例1】比較數字大小change3: function (e) var data = datae.target.dataset.id = Number(e.detail.value) this.setData(data),事件處理函數 比較結果：num1 num2 ? 第1個數大 : (num1 num2 ? 第2個數大 :

41、兩數相等)頁面數據比較8 實現比較功能在text組件上處理計算邏輯：2.1 【案例1】比較數字大小 num2比較結果：第1個數大 text wx:if=num1 比較結果：第2個數大 比較結果：兩數相等wx:if num2比較結果：第1個數大 text wx:elif=num1 比較結果：第2個數大 比較結果：兩數相等wx:if wx:else8 實現比較功能通過條件渲染的方式比較大?。?.1 【案例1】比較數字大小formCompare: function(e) var str = 兩數相等 var num1 = Number(e.detail.value.num1) var num2 =

42、Number(e.detail.value.num2) this.setData(result: str),事件處理函數表單組件8 實現比較功能通過表單獲取input組件的值，比較結果：2.1 【案例1】比較數字大小2.2 【案例2】調查問卷1 案例分析 調查問卷效果展示：實現步驟：填寫表單數據；提交發(fā)送到服務器；后臺數據渲染到頁面；2.2 【案例2】調查問卷2頁面代碼結構：. . .提交 編寫表單頁面 Express安裝和使用流程：初始化項目安裝Express框架安裝nodemon監(jiān)控文件修改創(chuàng)建服務；啟動服務；2.2 【案例2】調查問卷3 服務器數據交互 serverclient2.2 【

43、案例2】調查問卷3用代碼創(chuàng)建服務：創(chuàng)建服務；監(jiān)聽端口；const app = express()app.use(bodyParser.json()/ 處理POST請求app.post(/, (req, res) = console.log(req.body) res.json(req.body)/ 監(jiān)聽3000端口app.listen(3000, () = console.log(server running at :3000) 服務器數據交互 2.2 【案例2】調查問卷3利用wx.request()向本地HTTP服務器發(fā)送POST請求：submit: function(e) wx.reque

44、st( method: post, url: :3000/, data: e.detail.value, success: function (res) console.log(res) ), 服務器數據交互 2.2 【案例2】調查問卷3利用wx.request()向本地HTTP服務器發(fā)送POST請求： 服務器數據交互 2.2 【案例2】調查問卷4請求接口獲取后臺數據： 表單數據綁定 onLoad: function(options) wx.request( url: :3000/, success: res = this.setData(res.data) ),app.get(/, (req

45、, res) = res.json(data)前臺代碼后臺接口2.2 【案例2】調查問卷4 表單數據綁定 值得一提值得一提的是，由于wx.request()參數中的method屬性的默認值為GET，因此在發(fā)送GET請求時可以省略method屬性。2.3 【案例3】計算器1 案例分析 計算器功能介紹：加（+）減（-）乘（）除（）取余（%）Delete刪除C全部清空2.3 【案例3】計算器2 編輯計算器頁面 計算器頁面的整體布局：.page display: flex; height: 100% flex-direction: column;.result flex: 1;background:

46、#f3f6fe;.btns flex: 1;2.3 【案例3】計算器2 編輯計算器頁面 計算器按鈕樣式：btns flex: 1; display: flex; flex-direction: column; font-size: 17pt; border-top: 1rpx solid #ccc; border-left: 1rpx solid #ccc;.2.3 【案例3】計算器2 編輯計算器頁面 計算結果頁面：.result flex: 1; background: #f3f6fe; position: relative;計算結果展示區(qū)計算按鈕區(qū)2.3 【案例3】計算器3 實現計算邏輯功

47、能 編寫按鈕的事件處理函數：result: null,isClear: false, resetBtn: function() delBtn: function() ,numBtn: function(e) , opBtn: function(e) ,dotBtn: function() ,本章總結本章主要圍繞微信小程序的組件、樣式、配置文件、數據綁定等內容進行講解，通過案例將這些知識應用到小程序的開發(fā)中，幫助讀者掌握小程序的開發(fā)基礎，并對后面的學習做了鋪墊。第3章 音樂小程序項目開發(fā)前準備【任務2】音樂推薦【任務4】播放列表【任務1】標簽頁切換【任務3】播放器學習目標掌握swiper組件、s

48、croll-view組件的使用12掌握image組件的使用3掌握音頻API的使用4掌握slider組件的使用掌握掌握掌握掌握目錄點擊查看本節(jié)相關知識點點擊查看本節(jié)相關知識點【任務1】標簽頁切換3.23.1開發(fā)前的準備點擊查看本節(jié)相關知識點3.3【任務2】音樂推薦點擊查看本節(jié)相關知識點3.4【任務3】播放器目錄點擊查看本節(jié)相關知識點3.5【任務4】播放列表知識架構3.1 開發(fā)前的準備 1項目展示2項目分析3項目初始化知識架構3.2 【任務1】標簽頁切換1任務分析2前導知識3編寫頁面結構和樣式4實現標簽頁切換知識架構3.3 【任務2】音樂推薦1任務分析2前導知識3內容區(qū)域滾動4輪播圖5功能按鈕6熱

49、門音樂知識架構3.4 【任務3】播放器1任務分析2前導知識3定義基礎數據4實現音樂播放功能5編寫播放器頁面6控制播放進度知識架構3.5 【任務4】播放器列表1任務分析2編寫頁面結構和樣式3實現換曲功能3.1 開發(fā)前準備 1 項目展示音樂小程序項目效果展示：2 項目分析 音樂小程序項目頁面結構圖：tab導航欄content內容區(qū)player音樂播放控件3.1 開發(fā)前準備 2 項目分析 音樂小程序項目目錄結構：3.1 開發(fā)前準備 標簽功能app.js應用程序的邏輯文件app.json應用程序的配置文件pages/index/index.jsindex頁面的邏輯文件pages/index/index

50、.jsonindex頁面的配置文件pages/index/index.wxssindex頁面的樣式文件2 項目分析 音樂小程序項目目錄結構：3.1 開發(fā)前準備 標簽功能pages/index/index.wxmlindex頁面的結構文件pages/index/info.wxml“音樂推薦”標簽頁的結構文件pages/index/play.wxml“播放器”標簽頁的結構文件pages/index/playlist.wxml“播放列表”標簽頁的結構文件images圖片文件 pages: pages/index/index 3 項目初始化 3.1 開發(fā)前準備 navigationBarBackgro

51、undColor: #fff, navigationBarTitleText: 音樂, navigationBarTextStyle: black開發(fā)者工具創(chuàng)建空白項目：index1 任務分析 標簽頁和頁面（info.wxml、play.wxml、palylist.wxml）結構圖：3.2 【任務1】標簽頁切換 0 1 22 前導知識 swiper組件編寫滑動頁面結構：3.2 【任務1】標簽頁切換 swiper組件可選值說明默認indicator-dotsBoolean是否顯示面板指示點，默認為falseindicator-colorColor指示點顏色，默認為rgba(0,0,0,.3)in

52、dicator-active-colorColor當前選中的指示點顏色，默認為#000000autoplayBoolean是否自動切換，默認為falsecurrentNumber當前所在滑塊的index，默認為0current-item-idString當前所在滑塊的item-id（不能同時指定current）2 前導知識 3.2 【任務1】標簽頁切換 swiper組件常用屬性：可選值說明默認intervalNumber自動切換時間間隔（毫秒），默認為5000durationNumber滑動動畫時長（毫秒），默認為500circularBoolean是否采用銜接滑動，默認為falseverti

53、calBoolean滑動方向是否為縱向，默認為falsebindchangeEventHandlecurrent改變時會觸發(fā)change事件2 前導知識 3.2 【任務1】標簽頁切換 swiper組件常用屬性： 0 1 22 前導知識 swiper組件編寫滑動頁面結構：3.2 【任務1】標簽頁切換 item-id屬性 body 2 前導知識 include主要用途：將代碼拆分到多個文件中，可以更方便地查找代碼。將代碼公共部分抽取出來。通過外部文件引入。3.2 【任務1】標簽頁切換 include 音樂推薦 3 編寫頁面結構和樣式 音樂小程序基礎頁面和樣式：3.2 【任務1】標簽頁切換 page

54、s/index/index.wxmlpage display: flex; flex-direction: column; background: #17181a; color: #ccc; height: 100%;3 編寫頁面結構和樣式 音樂小程序基礎頁面和樣式：3.2 【任務1】標簽頁切換 pages/index/index.wxss playinfoplaylist3 編寫頁面結構和樣式 測試頁面info.wxml、page.wxml、play.wxml文件：3.2 【任務1】標簽頁切換 Info.wxmlplaylist.wxmlplay.wxml3.2 【任務1】標簽頁切換 4 實

55、現標簽頁切換 單擊導航欄選項卡實現標簽頁切換：音樂推薦changeItem: function(e) ,單擊事件.tab-item.active color: #c25b5b; border-bottom-color: #c25b5b;標簽頁切換樣式3.2 【任務1】標簽頁切換 4 實現標簽頁切換 通過滾動事件切換頁面效果：changeTab: function(e) ,滾動事件.tab-item.active color: #c25b5b; border-bottom-color: #c25b5b;標簽頁切換樣式3.3 【任務2】音樂推薦 1 任務分析 音樂推薦頁面結構圖：3.3 【任務2】

56、音樂推薦 2 前導知識 scroll-view組件的屬性及說明：可選值說明默認scroll-xBoolean允許橫向滾動，默認為falsescroll-yBoolean允許縱向滾動，默認為falsescroll-topNumber / String設置豎向滾動條的位置scroll-leftNumber / String設置橫向滾動條的位置bindscrolltoupperEventHandle滾動到頂部/左邊時觸發(fā)的事件3.3 【任務2】音樂推薦 2 前導知識 scroll-view組件的屬性及說明：可選值說明默認bindscrolltolowerEventHandle滾動到底部/右邊時觸發(fā)的

57、事件scroll-with-animationBoolean在設置滾動條位置時是否使用動畫過渡scroll-into-viewString設置哪個方向可滾動，則在哪個方向滾動到該元素。值應為某子元素id（id不能以數字開頭）bindscrollEventHandle滾動時觸發(fā)的事件3.3 【任務2】音樂推薦 2 前導知識 scroll-view組件事件對象： scroll: function(e) console.log(e.detail),3.3 【任務2】音樂推薦 2 前導知識 scroll-view組件事件對象：3.3 【任務2】音樂推薦 2 前導知識 scroll-view組件事件對象

58、參數分析：scrollLeft：橫向滾動條左側到視圖左邊的距離。scrollTop：縱向滾動條上端到視圖頂部的距離。scrollHeight：縱向滾動條在Y軸上最大滾動距離。scrollWidth：橫向滾動條在X軸上最大的滾動距離。deltaX：橫向滾動條的滾動狀態(tài)。deltaY：縱向滾動條的滾動狀態(tài)。3.3 【任務2】音樂推薦 2 前導知識 image組件屬性及說明：可選值說明默認srcString圖片資源地址modeString圖片裁剪、縮放的模式，默認為scaleToFilllazy-loadBoolean圖片是否懶加載，默認為false。只針對page與scroll-view下的ima

59、ge有效binderrorHandleEvent圖片發(fā)生錯誤時的事件bindloadHandleEvent圖片載入完成時的事件3.3 【任務2】音樂推薦 2 前導知識 image組件縮放模式：可選值說明scaleToFill不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿image元素。適用于容器與圖片寬高比相同的情況，如果不同，圖片會變形。aspectFit保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。適用于將圖片完整顯示出來。例如，詳情頁的圖片aspectFill保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來，長邊將會發(fā)生截取。適用于容器固定，圖片自動縮放的情況，如列表頁的縮略圖wi

60、dthFix寬度不變，高度自動變化，保持原圖寬高比不變3.3 【任務2】音樂推薦 2 前導知識 image組件9種裁剪模式：可選值說明top不縮放圖片，只顯示圖片的頂部區(qū)域bottom不縮放圖片，只顯示圖片的底部區(qū)域center不縮放圖片，只顯示圖片的中間區(qū)域left不縮放圖片，只顯示圖片的左邊區(qū)域right不縮放圖片，只顯示圖片的右邊區(qū)域3.3 【任務2】音樂推薦 2 前導知識 image組件9種裁剪模式：可選值說明top left不縮放圖片，只顯示圖片的左上邊區(qū)域top right不縮放圖片，只顯示圖片的右上邊區(qū)域bottom left不縮放圖片，只顯示圖片的左下邊區(qū)域bottom rig