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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25、單位。4 頁面樣式iphone6物理分辨率為750px1334pxiphone6的邏輯分辨率為375px667px1px1px2.1 【案例1】比較數(shù)字大小對比WXSS中的rpx運行效果展示：4 頁面樣式view margin: 50rpx;input width: 600rpx; margin-top: 20rpx; border-bottom: 2rpx solid #ccc;button margin: 50rpx;2.1 【案例1】比較數(shù)字大小對比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】比較數(shù)字大小全局樣式和導(dǎo)入外部樣式：4 頁面樣式button color: #fff; background: #369;import test.wxss;button letter-spacing: 12rpx;導(dǎo)入外部樣式全局樣式2.1 【案例1】比較數(shù)字大小頁面級配置文件：5屬性說明navigationBarBackgroundColor導(dǎo)航欄背景顏色，默認(rèn)為“#000000”navigationB

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

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

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

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

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

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

33、ShareAppMessage事件。單擊“”可以在前臺、后臺之間切換。2.1 【案例1】比較數(shù)字大小6 頁面邏輯2.1 【案例1】比較數(shù)字大小6 頁面邏輯onLoad函數(shù)中的options參數(shù)傳遞流程：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】比較數(shù)字大小6 頁面邏輯pages/index/index.js中使用這3個頁面處理函數(shù)：比較compare: function (e) console.log(比較按鈕被單擊了) console.log(e),2.1 【案例1】比較數(shù)字大小

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

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

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

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

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

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

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

43、案例2】調(diào)查問卷3用代碼創(chuàng)建服務(wù)：創(chuàng)建服務(wù)；監(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) 服務(wù)器數(shù)據(jù)交互 2.2 【案例2】調(diào)查問卷3利用wx.request()向本地HTTP服務(wù)器發(fā)送POST請求：submit: function(e) wx.reque

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

45、, res) = res.json(data)前臺代碼后臺接口2.2 【案例2】調(diào)查問卷4 表單數(shù)據(jù)綁定 值得一提值得一提的是，由于wx.request()參數(shù)中的method屬性的默認(rèn)值為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 編輯計算器頁面 計算結(jié)果頁面：.result flex: 1; background: #f3f6fe; position: relative;計算結(jié)果展示區(qū)計算按鈕區(qū)2.3 【案例3】計算器3 實現(xiàn)計算邏輯功

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

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

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

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

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

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

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

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

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

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

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

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

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

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