(2024年)微信小程序入門課件

微信小程序入門課件12024/3/26CONTENTS微信小程序概述開發(fā)環(huán)境搭建基礎(chǔ)語法與組件數(shù)據(jù)綁定與事件處理頁面導(dǎo)航與跳轉(zhuǎn)網(wǎng)絡(luò)請求與數(shù)據(jù)緩存項目實戰(zhàn)：天氣預(yù)報小程序總結(jié)與展望22024/3/26微信小程序概述0132024/3/26微信小程序是一種基于微信平臺開發(fā)的應(yīng)用程序，用戶無需下載安裝，即可在微信內(nèi)直接打開使用。定義自2017年1月微信小程序正式上線以來，其用戶數(shù)量和活躍度持續(xù)增長，已成為移動應(yīng)用領(lǐng)域的重要組成部分。發(fā)展定義與發(fā)展42024/3/26跨平臺支持便捷性用戶群體龐大與微信生態(tài)緊密結(jié)合優(yōu)勢與特點微信小程序可在不同操作系統(tǒng)和設(shè)備上運行，實現(xiàn)跨平臺支持。微信擁有龐大的用戶群體，為小程序提供了廣闊的潛在市場。用戶無需下載安裝，節(jié)省手機(jī)空間，同時可快速打開使用。小程序可與微信公眾號、微信支付等微信生態(tài)內(nèi)功能緊密結(jié)合，提供更豐富的用戶體驗。52024/3/26利用小程序?qū)崿F(xiàn)商品展示、購買、支付等功能，為用戶提供便捷的購物體驗。如餐飲、旅游、交通等，通過小程序提供線上預(yù)約、點餐、購票等服務(wù)。如計算器、日歷、天氣等，為用戶提供實用的工具功能。利用小程序開發(fā)輕量級游戲和娛樂應(yīng)用，滿足用戶的休閑娛樂需求。電商類應(yīng)用生活服務(wù)類應(yīng)用工具類應(yīng)用游戲娛樂類應(yīng)用應(yīng)用場景62024/3/26開發(fā)環(huán)境搭建0272024/3/26訪問微信公眾平臺官網(wǎng)，點擊“立即注冊”；選擇注冊類型為“小程序”，填寫相關(guān)信息，如郵箱、密碼、驗證碼等；激活郵箱，完成注冊流程。注冊開發(fā)者賬號82024/3/260102安裝開發(fā)工具安裝完成后，打開微信開發(fā)者工具，使用微信掃碼登錄。下載并安裝微信開發(fā)者工具，支持Windows和Mac系統(tǒng)；92024/3/26010302選擇項目模板，如“小程序模板”或“云開發(fā)模板”；在開發(fā)者工具中，點擊“+”創(chuàng)建新項目，填寫項目名稱、目錄和AppID；04使用模擬器進(jìn)行預(yù)覽和測試，確保小程序在不同設(shè)備上表現(xiàn)一致。在開發(fā)者工具中進(jìn)行代碼編寫、預(yù)覽和調(diào)試，包括頁面設(shè)計、邏輯處理、數(shù)據(jù)請求等；創(chuàng)建和調(diào)試項目102024/3/26基礎(chǔ)語法與組件03112024/3/26WXML（WeiXinMark…WXSS（WeiXinStyl…選擇器樣式屬性事件處理數(shù)據(jù)綁定類似于HTML，用于描述頁面結(jié)構(gòu)。通過`{{}}`語法實現(xiàn)數(shù)據(jù)綁定，展示動態(tài)內(nèi)容。通過`bind`或`catch`關(guān)鍵字綁定事件處理函數(shù)，實現(xiàn)用戶交互。類似于CSS，用于描述頁面樣式。支持類選擇器、ID選擇器、元素選擇器等，用于定位頁面元素。包括顏色、尺寸、布局等屬性，用于設(shè)置元素外觀。WXML與WXSS122024/3/26JavaScript基礎(chǔ)變量與數(shù)據(jù)類型了解JavaScript中的變量聲明（如`var`、`let`、`const`）及數(shù)據(jù)類型（如字符串、數(shù)字、布爾值、對象、數(shù)組等）。函數(shù)與方法掌握函數(shù)的定義與調(diào)用，理解函數(shù)參數(shù)與返回值的概念。事件處理學(xué)習(xí)如何處理用戶交互事件，如點擊、滑動等。異步編程了解Promise、async/await等異步編程技術(shù)，處理網(wǎng)絡(luò)請求等耗時操作。132024/3/2601視圖容器類組件如`<view>`、`<scroll-view>`、`<swiper>`等，用于布局和展示內(nèi)容。02基礎(chǔ)內(nèi)容組件如`<text>`、`<icon>`、`<progress>`等，用于顯示文本、圖標(biāo)和進(jìn)度條等。03表單組件如`<input>`、`<button>`、`<checkbox>`等，用于收集用戶輸入。04導(dǎo)航組件如`<navigator>`，用于頁面跳轉(zhuǎn)。05地圖組件如`<map>`，用于展示地理位置信息。06畫布組件如`<canvas>`，用于繪制圖形和圖像處理。常用組件介紹142024/3/26數(shù)據(jù)綁定與事件處理04152024/3/26微信小程序的數(shù)據(jù)綁定基于JavaScript的數(shù)據(jù)響應(yīng)式系統(tǒng)，當(dāng)數(shù)據(jù)發(fā)生變化時，視圖層會自動更新。通過`{{}}`語法將數(shù)據(jù)綁定到WXML模板中，同時在對應(yīng)的JS文件中定義數(shù)據(jù)。當(dāng)JS文件中的數(shù)據(jù)發(fā)生變化時，視圖層中綁定的數(shù)據(jù)會自動更新。數(shù)據(jù)綁定原理實現(xiàn)方式數(shù)據(jù)更新數(shù)據(jù)綁定原理及實現(xiàn)162024/3/26微信小程序支持多種事件類型，如點擊事件（`tap`）、輸入事件（`input`）、滑動事件（`swipe`）等。事件類型在WXML模板中為組件綁定事件處理函數(shù)，當(dāng)事件觸發(fā)時，會執(zhí)行對應(yīng)的JS函數(shù)。處理函數(shù)事件處理函數(shù)會接收一個事件對象作為參數(shù)，該對象包含了與事件相關(guān)的各種信息，如事件類型、觸發(fā)事件的元素等。事件對象事件類型及處理函數(shù)172024/3/26雙向數(shù)據(jù)綁定原理雙向數(shù)據(jù)綁定指的是數(shù)據(jù)和視圖之間的雙向同步，即數(shù)據(jù)變化時視圖更新，視圖變化時數(shù)據(jù)也更新。實現(xiàn)方式在微信小程序中，可以通過在input、textarea等表單組件上使用`value="{{data}}"`和`bindinput="handleInput"`來實現(xiàn)雙向數(shù)據(jù)綁定。其中，`value`屬性用于綁定數(shù)據(jù)，`bindinput`屬性用于監(jiān)聽輸入事件并更新數(shù)據(jù)。注意事項在使用雙向數(shù)據(jù)綁定時，需要確保數(shù)據(jù)的初始化和更新邏輯正確，避免出現(xiàn)數(shù)據(jù)不一致的情況。同時，對于復(fù)雜的數(shù)據(jù)結(jié)構(gòu)或大量數(shù)據(jù)的處理，需要注意性能問題。雙向數(shù)據(jù)綁定182024/3/26頁面導(dǎo)航與跳轉(zhuǎn)05192024/3/26頁面棧：頁面棧指的是小程序中頁面之間的層次關(guān)系，通過頁面?？梢詫崿F(xiàn)頁面之間的跳轉(zhuǎn)和返回。操作getCurrentPages():獲取當(dāng)前頁面棧的實例，以數(shù)組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當(dāng)前頁面。navigateTo():保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到tabbar頁面。使用wx.navigateBack可以返回到原頁面。redirectTo():關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到tabbar頁面。0102030405頁面棧概念及操作202024/3/26導(dǎo)航API使用wx.switchTab()跳轉(zhuǎn)到tabBar頁面，并關(guān)閉其他所有非tabBar頁面。wx.redirectTo()關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。wx.navigateTo()保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。wx.reLaunch()關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面。wx.navigateBack()關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面。212024/3/26

跳轉(zhuǎn)傳值方法通過URL傳遞參數(shù)在跳轉(zhuǎn)頁面的URL后面附加參數(shù)，目標(biāo)頁面通過`this.options`獲取傳遞的參數(shù)值。使用全局變量在`app.js`中定義全局變量，在各個頁面中都可以通過`getApp().globalData`來訪問和修改全局變量的值。使用本地存儲使用`wx.setStorageSync()`和`wx.getStorageSync()`方法進(jìn)行本地數(shù)據(jù)的存儲和讀取，實現(xiàn)頁面間數(shù)據(jù)的傳遞。222024/3/26網(wǎng)絡(luò)請求與數(shù)據(jù)緩存06232024/3/26使用wx.request()方法微信小程序提供了wx.request()方法用于發(fā)起網(wǎng)絡(luò)請求，可以指定請求的URL、請求方法（GET/POST等）、請求頭、請求體等信息。處理請求結(jié)果網(wǎng)絡(luò)請求返回后，可以通過回調(diào)函數(shù)處理請求結(jié)果，包括解析返回的數(shù)據(jù)、處理錯誤等。示例代碼下面是一個使用wx.request()方法發(fā)起GET請求的示例代碼發(fā)起網(wǎng)絡(luò)請求242024/3/26```javascriptwx.request({url:'/data',//請求的URL發(fā)起網(wǎng)絡(luò)請求252024/3/26method:'GET',//請求方法發(fā)起網(wǎng)絡(luò)請求262024/3/26header{'content-type''application/json'//請求頭發(fā)起網(wǎng)絡(luò)請求272024/3/26},success(res){console.log(res.data);//打印返回的數(shù)據(jù)發(fā)起網(wǎng)絡(luò)請求282024/3/26},fail(error){console.error(error);//處理請求失敗的情況發(fā)起網(wǎng)絡(luò)請求292024/3/26}});```發(fā)起網(wǎng)絡(luò)請求302024/3/26設(shè)置緩存有效期為了避免數(shù)據(jù)過期，可以在存儲數(shù)據(jù)時設(shè)置一個有效期，超過有效期后數(shù)據(jù)將自動失效。使用本地存儲微信小程序提供了wx.setStorageSync()和wx.getStorageSync()方法用于在本地存儲和讀取數(shù)據(jù)，可以實現(xiàn)數(shù)據(jù)的持久化緩存。清除過期緩存定期檢查并清除過期的緩存數(shù)據(jù)，以釋放存儲空間并保證數(shù)據(jù)的時效性。數(shù)據(jù)緩存策略312024/3/2603提示用戶網(wǎng)絡(luò)異常當(dāng)檢測到網(wǎng)絡(luò)異常時，可以通過彈窗或提示信息告知用戶當(dāng)前網(wǎng)絡(luò)狀態(tài)，并提供相應(yīng)的操作建議。01監(jiān)聽網(wǎng)絡(luò)狀態(tài)變化使用wx.onNetworkStatusChange()方法可以監(jiān)聽網(wǎng)絡(luò)狀態(tài)的變化，當(dāng)網(wǎng)絡(luò)斷開時觸發(fā)相應(yīng)的處理邏輯。02緩存數(shù)據(jù)的使用在網(wǎng)絡(luò)斷開的情況下，可以使用之前緩存的數(shù)據(jù)來保證小程序的基本功能運行。斷網(wǎng)處理機(jī)制322024/3/26項目實戰(zhàn)：天氣預(yù)報小程序07332024/3/26需求分析用戶能夠查看當(dāng)前城市的實時天氣情況。用戶可以搜索并查看其他城市的天氣。需求分析與設(shè)計思路342024/3/26顯示未來幾天的天氣預(yù)報。設(shè)計思路使用微信小程序的原生組件和API實現(xiàn)界面和交互。需求分析與設(shè)計思路352024/3/26需求分析與設(shè)計思路利用第三方天氣API獲取實時天氣數(shù)據(jù)。設(shè)計簡潔、直觀的界面，提供良好的用戶體驗。362024/3/26頂部搜索框，用于輸入城市名稱。中部展示當(dāng)前選中城市的實時天氣情況，包括溫度、濕度、風(fēng)力等。界面布局及樣式設(shè)計372024/3/26123底部：未來幾天的天氣預(yù)報列表。樣式設(shè)計使用微信小程序的原生樣式和組件，保持一致的UI風(fēng)格。界面布局及樣式設(shè)計382024/3/26利用色彩和圖標(biāo)增加界面的直觀性和美觀度。確保布局在不同設(shè)備上都有良好的適應(yīng)性。界面布局及樣式設(shè)計392024/3/2603對獲取的數(shù)據(jù)進(jìn)行解析和處理，提取出需要展示的信息。01數(shù)據(jù)獲取02使用微信小程序的網(wǎng)絡(luò)請求API，調(diào)用第三方天氣API獲取天氣數(shù)據(jù)。數(shù)據(jù)獲取與展示邏輯實現(xiàn)402024/3/26展示邏輯當(dāng)用戶打開小程序時，默認(rèn)展示當(dāng)前城市的天氣。用戶在搜索框輸入城市名稱后，展示對應(yīng)城市的天氣情況。數(shù)據(jù)獲取與展示邏輯實現(xiàn)412024/3/26數(shù)據(jù)獲取與展示邏輯實現(xiàn)用戶可以切換查看不同城市的天氣。底部列表展示未來幾天的天氣預(yù)報，用戶可以滑動查看。422024/3/26總結(jié)與展望08432024/3/26學(xué)員應(yīng)已掌握微信小程序的基本概念、開發(fā)環(huán)境和工具使用。包括頁面設(shè)計、數(shù)據(jù)綁定、事件處理、網(wǎng)絡(luò)請求等關(guān)鍵技能。通過完成課程中的實戰(zhàn)項目，積累了一定的開發(fā)經(jīng)驗。基礎(chǔ)知識掌握核心技能習(xí)得實戰(zhàn)項目經(jīng)驗課程回顧與總結(jié)442024/3/26微信小程序的官方文檔是深入學(xué)習(xí)的最佳資源，包含了詳細(xì)的API說明和最佳實踐。官方文檔社區(qū)論壇在線課程如微信開發(fā)者社區(qū)等，可以交流開發(fā)經(jīng)驗、解決問題和獲取最新動態(tài)。各大