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

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