第4章：微信小程序API精讲（上）

微信小程序入门与实战第4章：小程序API精讲（上）本章目录01小程序API概述与分类了解API的概念、作用和主要分类02核心API详解深入学习网络请求、本地存储、界面交互和页面路由API03异步处理技巧学习如何通过Promise化封装简化异步代码04实战：登录与数据缓存模拟综合运用所学API，实现用户登录和状态保持05常见问题与总结解答API使用中的常见问题，巩固学习成果小程序API概述与分类小程序API分类思维导图什么是小程序API？API是小程序提供的接口，用于调用微信功能。通过API可实现网络请求、设备访问、数据存储、界面交互等复杂功能。API核心分类网络：wx.request,wx.uploadFile存储：wx.setStorage,wx.getStorage界面：wx.showToast,wx.showModal设备：wx.getSystemInfo,wx.scanCode媒体：wx.chooseImage,wx.createAudioContext位置：wx.getLocation,wx.chooseLocation网络请求API(wx.request)核心用途发起HTTPS网络请求，实现小程序与后端服务器的数据交互。常用参数配置url:开发者服务器接口地址（必填）method:请求方法，默认为GETdata:请求参数（GET/POST传参）success:接口调用成功的回调函数fail:接口调用失败的回调函数complete:调用结束的回调（无论成败）GET请求示例wx.request({url:'/user',method:'GET',data:{id:123},success:(res)=>{console.log(res.data);}});POST请求示例wx.request({url:'/login',method:'POST',data:{username:'user',pwd:'pass'},success:(res)=>{console.log(res.data);}});本地存储API(同步vs异步)操作类型同步方法(Sync)异步方法(Async)特点与适用场景存储数据wx.setStorageSync(key,data)wx.setStorage({key,data,success})同步：代码简洁，阻塞线程，适合简单操作。异步：非阻塞，性能优，适合复杂/大量数据。获取数据wx.getStorageSync(key)wx.getStorage({key,success})同步：直接返回结果，代码直观。异步：回调获取结果，不阻塞后续执行。删除数据wx.removeStorageSync(key)wx.removeStorage({key,success})注意：小程序本地存储大小限制为10MB，需合理管理。清空数据wx.clearStorageSync()wx.clearStorage()建议：优先使用异步方法，避免因同步操作导致界面卡顿。核心建议：虽然同步方法代码更简洁，但在主线程中频繁使用可能导致界面无响应，因此生产环境中推荐优先使用异步API。界面交互API(wx.showToast,wx.showModal)wx.showToast(消息提示框)用途：显示轻量级消息反馈，常用于操作成功/失败提示。参数：title(提示内容),icon(图标),duration(时长)wx.showToast({title:'操作成功',icon:'success',duration:2000});wx.showModal(模态对话框)用途：显示需用户确认的对话框，如删除、退出等操作。参数：title,content,showCancel,successwx.showModal({title:'提示',content:'确定要删除吗？',success:(res)=>{if(res.confirm){...}}});提示：合理使用交互反馈能显著提升用户体验，Toast用于轻量反馈，Modal用于关键操作确认。页面路由API对比表API功能保留当前页是否可返回典型应用场景wx.navigateTo跳转到新页面是是(左上角返回)从列表页进入详情页wx.redirectTo关闭当前页，跳转新页否否登录成功后跳转到主页wx.switchTab跳转到TabBar页否否(仅Tab间切换)切换底部导航栏页面wx.navigateBack返回上一/多级页面-是从详情页返回列表页wx.reLaunch关闭所有页，打开新页否否重启小程序，回到首页提示：合理选择路由方式是提升用户体验的关键，避免滥用redirectTo导致用户无法返回上一页。页面路由示意图wx.navigateTo：入栈操作将新页面压入栈顶，页面栈长度加1，保留当前页面。wx.redirectTo：替换操作关闭当前页面，用新页面替换，页面栈长度保持不变。wx.navigateBack：出栈操作关闭当前页面返回上一级，页面栈长度减1。wx.switchTab：清空操作跳转到指定Tab页面，并清空页面栈中所有非Tab页面。核心总结：理解页面栈的“入栈、替换、出栈、清空”逻辑，是实现小程序流畅导航的关键。异步处理技巧-Promise化封装问题：回调地狱(CallbackHell)多层嵌套导致代码臃肿、难以维护，形成“金字塔”结构。wx.request({url:'api1',success:(res1)=>{wx.request({url:'api2',data:{id:res1.id}});}});解决方案：Promise化封装封装原生API为Promise，利用async/await实现线性逻辑。asyncfunctionfetchData(){try{constres1=awaitrequest({url:'api1'});constres2=awaitrequest({url:'api2'});}catch(e){console.error(e);}}核心价值：将异步代码“同步化”书写，极大提升代码的可读性与可维护性，统一错误处理逻辑。实战案例：登录与数据缓存模拟最终效果预览1.构建登录界面(WXML/WXSS)使用<form>、<input>、<button>组件搭建表单结构，实现基础交互布局。2.处理登录请求(wx.request)获取表单数据，调用wx.request发送POST请求。示例：wx.request({url,method:'POST',data})3.缓存用户信息(wx.setStorageSync)登录成功后，将用户信息持久化存储到本地。示例：wx.setStorageSync('userInfo',data)4.页面跳转(wx.switchTab)缓存成功后，跳转到主页面。示例：wx.switchTab({url:'/pages/index/index'})实战案例：登录状态保持核心需求小程序启动时，自动检查用户是否已登录，避免重复登录操作。实现逻辑(onLaunch)1.检查缓存：调用wx.getStorageSync检查用户信息2.状态判断：存在则跳转首页，不存在则跳转登录页app.jsApp({onLaunch(){//检查本地缓存中是否有用户信息constuserInfo=wx.getStorageSync('userInfo');if(userInfo){//已登录，跳转到主页面wx.switchTab({url:'/pages/index/index'});}else{//未登录，跳转到登录页面wx.redirectTo({url:'/pages/login/login'});}}});关键点：利用小程序启动生命周期onLaunch进行状态检查，确保用户体验的流畅性。常见问题排查Q1:wx.request请求失败，提示“request:fail”？检查URL是否正确、是否为HTTPS协议及服务器状态。需在微信公众平台配置request合法域名。Q2:本地存储的数据在小程序重启后丢失？检查是否调用了清理缓存方法。小程序本地存储是持久化的，除非用户主动删除或清理缓存。Q3:使用wx.navigateTo跳转到tabBar页面失败？wx.navigateTo不能跳转到tabBar页面，应使用wx.switchTab方法进行跳转。Q4:async/await语法报错？确保在使用await的函数前加上async关键字，并检查项目是否已开启ES6转ES5的编译选项。本章总结API概念与分类认知掌握了网络、存储、界面、设备等主要API类别，建立完整的小程序能力认知体系。核心API实战掌握熟练运用wx.request网络请求、wx.setStorage本地存储及页面路由等核心接口。异步编程进阶技巧通过Promise化封装和async/await语法简化异步代码，有效避免回调地狱问题。登录与缓存实战模拟综合运用所学API，完成完整的登录功能开发与用户状态的本地缓存保持。掌握核心API，构建高效小程序开发能力课后实操任务：完善登录功能任务步骤添加登录失败处理在回调中判断结果，失败时使用wx.showToast提示用户。实现退出登录功能清除Storage信息，调用redirectTo跳转回登录