从入门到精通，全面掌握微信小程序核心 API 与生命周期实战技巧！无论是界面交互、网络请求、数据存储，还是云开发与设备能力，这里都有最详细的解析与示例代码。通过清晰的树状结构展示，快速定位所需功能，助你高效开发千万级用户应用！适合初学者快速上手，也适合进阶开发者深入优化，让你的小程序开发事半功倍！
微信小程序 API 及生命周期命令树
微信小程序 API 及生命周期命令大全
├── 基础 API
│ ├── wx.getSystemInfo
│ │ └── 获取系统信息
│ ├── wx.getSystemInfoSync
│ │ └── 同步获取系统信息
│ ├── wx.canIUse
│ │ └── 判断是否支持指定功能
│ └── wx.env
│ └── 获取小程序环境变量
│
├── 界面 API
│ ├── 交互反馈
│ │ ├── wx.showToast
│ │ │ └── 显示消息提示框
│ │ ├── wx.showLoading
│ │ │ └── 显示加载提示框
│ │ ├── wx.showModal
│ │ │ └── 显示模态对话框
│ │ └── wx.showActionSheet
│ │ └── 显示操作菜单
│ ├── 导航栏
│ │ ├── wx.setNavigationBarTitle
│ │ │ └── 设置导航栏标题
│ │ ├── wx.setNavigationBarColor
│ │ │ └── 设置导航栏颜色
│ │ └── wx.hideNavigationBarLoading
│ │ └── 隐藏导航栏加载动画
│ ├── 下拉刷新
│ │ ├── wx.startPullDownRefresh
│ │ │ └── 开始下拉刷新
│ │ └── wx.stopPullDownRefresh
│ │ └── 停止下拉刷新
│ └── 动画
│ ├── wx.createAnimation
│ │ └── 创建动画实例
│ └── wx.pageScrollTo
│ └── 滚动到页面指定位置
│
├── 网络 API
│ ├── wx.request
│ │ └── 发起 HTTPS 请求
│ ├── wx.uploadFile
│ │ └── 上传文件
│ ├── wx.downloadFile
│ │ └── 下载文件
│ └── wx.connectSocket
│ └── 创建 WebSocket 连接
│
├── 数据缓存 API
│ ├── wx.setStorage
│ │ └── 异步存储数据
│ ├── wx.setStorageSync
│ │ └── 同步存储数据
│ ├── wx.getStorage
│ │ └── 异步获取数据
│ ├── wx.getStorageSync
│ │ └── 同步获取数据
│ ├── wx.removeStorage
│ │ └── 异步移除数据
│ ├── wx.removeStorageSync
│ │ └── 同步移除数据
│ └── wx.clearStorage
│ └── 清空所有缓存数据
│
├── 媒体 API
│ ├── 图片
│ │ ├── wx.chooseImage
│ │ │ └── 选择图片
│ │ ├── wx.previewImage
│ │ │ └── 预览图片
│ │ └── wx.saveImageToPhotosAlbum
│ │ └── 保存图片到相册
│ ├── 视频
│ │ ├── wx.chooseVideo
│ │ │ └── 选择视频
│ │ └── wx.saveVideoToPhotosAlbum
│ │ └── 保存视频到相册
│ └── 音频
│ ├── wx.playVoice
│ │ └── 播放音频
│ ├── wx.pauseVoice
│ │ └── 暂停音频
│ └── wx.stopVoice
│ └── 停止音频
│
├── 设备 API
│ ├── 位置
│ │ ├── wx.getLocation
│ │ │ └── 获取当前位置
│ │ └── wx.chooseLocation
│ │ └── 选择位置
│ ├── 扫码
│ │ └── wx.scanCode
│ │ └── 扫码
│ ├── 设备信息
│ │ ├── wx.getNetworkType
│ │ │ └── 获取网络类型
│ │ └── wx.getBatteryInfo
│ │ └── 获取电池信息
│ └── 振动
│ └── wx.vibrateShort
│ └── 短振动
│
├── 开放接口 API
│ ├── 登录
│ │ ├── wx.login
│ │ │ └── 获取登录凭证
│ │ └── wx.checkSession
│ │ └── 检查登录状态
│ ├── 用户信息
│ │ ├── wx.getUserInfo
│ │ │ └── 获取用户信息
│ │ └── wx.getUserProfile
│ │ └── 获取用户信息（需用户授权）
│ ├── 支付
│ │ └── wx.requestPayment
│ │ └── 发起微信支付
│ └── 分享
│ ├── wx.showShareMenu
│ │ └── 显示分享菜单
│ └── wx.updateShareMenu
│ └── 更新分享菜单
│
├── 云开发 API
│ ├── 初始化
│ │ └── wx.cloud.init
│ │ └── 初始化云开发环境
│ ├── 云函数
│ │ ├── wx.cloud.callFunction
│ │ │ └── 调用云函数
│ │ └── wx.cloud.uploadFile
│ │ └── 上传文件到云存储
│ ├── 云数据库
│ │ ├── wx.cloud.database
│ │ │ └── 获取数据库引用
│ │ └── wx.cloud.collection
│ │ └── 获取集合引用
│ └── 云存储
│ ├── wx.cloud.uploadFile
│ │ └── 上传文件
│ └── wx.cloud.downloadFile
│ └── 下载文件
│
├── 页面生命周期
│ ├── onLoad
│ │ └── 页面加载时触发
│ ├── onShow
│ │ └── 页面显示时触发
│ ├── onReady
│ │ └── 页面初次渲染完成时触发
│ ├── onHide
│ │ └── 页面隐藏时触发
│ ├── onUnload
│ │ └── 页面卸载时触发
│ ├── onPullDownRefresh
│ │ └── 下拉刷新时触发
│ ├── onReachBottom
│ │ └── 页面滚动到底部时触发
│ ├── onShareAppMessage
│ │ └── 用户点击分享按钮时触发
│ └── onPageScroll
│ └── 页面滚动时触发
│
└── 组件生命周期
├── created
│ └── 组件实例刚被创建时触发
├── attached
│ └── 组件进入页面节点树时触发
├── ready
│ └── 组件布局完成后触发
├── moved
│ └── 组件被移动到节点树其他位置时触发
├── detached
│ └── 组件从页面节点树移除时触发
└── error
└── 组件方法抛出错误时触发
页面生命周期
Page({
onLoad(options) {
console.log('页面加载', options);
},
onShow() {
console.log('页面显示');
},
onReady() {
console.log('页面初次渲染完成');
},
onHide() {
console.log('页面隐藏');
},
onUnload() {
console.log('页面卸载');
},
onPullDownRefresh() {
console.log('下拉刷新');
wx.stopPullDownRefresh();
},
onReachBottom() {
console.log('页面滚动到底部');
},
onShareAppMessage() {
return {
title: '分享标题',
path: '/pages/index/index',
};
},
onPageScroll(scrollTop) {
console.log('页面滚动', scrollTop);
},
});
组件生命周期
Component({
lifetimes: {
created() {
console.log('组件实例刚被创建');
},
attached() {
console.log('组件进入页面节点树');
},
ready() {
console.log('组件布局完成');
},
moved() {
console.log('组件被移动到节点树其他位置');
},
detached() {
console.log('组件从页面节点树移除');
},
},
methods: {
onError() {
throw new Error('组件方法抛出错误');
},
},
});
通过以上命令树和示例代码，你可以全面掌握微信小程序 API 和生命周期的使用方法。如果有其他问题，欢迎随时提问！ 😊
