第五章 JS 生命周期、事件与 API 全览
📚 系列教程：微信小程序投票系统完整开发
🔗 上一章：第四章 - WXSS 样式系统与布局
🔗 下一章：第六章 - 投票系统项目设计与架构规划
5.1 App 全局生命周期
App({onLaunch(options){// 冷启动触发一次// options.scene=场景值 options.query=启动参数},onShow(options){/* 切换到前台，每次都触发 */},onHide(){/* 切换到后台 */},onError(msg){/* 全局JS错误 */},onPageNotFound(res){wx.redirectTo({url:'/pages/index/index'})}})5.2 Page 页面完整生命周期
Page({data:{title:'',list:[]},// ── 生命周期（按调用顺序）──onLoad(options){// 页面加载，只触发一次// options = URL传参 ?id=1 → { id: '1' }this.loadData()},onShow(){/* 每次进入页面都触发，含从下一页返回 */},onReady(){/* 首次渲染完成，只触发一次 */},onHide(){/* 页面隐藏（navigateTo 到其他页时）*/},onUnload(){/* 页面销毁（redirectTo/navigateBack）*/},// ── 页面事件 ──onPullDownRefresh(){// 下拉刷新（需 json 配置 enablePullDownRefresh: true）this.loadData()wx.stopPullDownRefresh()},onReachBottom(){// 上拉到距底部 onReachBottomDistance(默认50px)时触发this.loadMore()},onShareAppMessage(){// 点击右上角"转发"return{title:'来参与投票！',path:'/pages/vote/vote?id='+this.data.voteId,imageUrl:'/images/share.png'}},onShareTimeline(){// 分享到朋友圈return{title:'投票活动',query:'id='+this.data.voteId}},onPageScroll(e){// 页面滚动，e.scrollTop = 距顶部距离},// ── 自定义方法 ──loadData(){/* ... */},loadMore(){/* ... */}})setData 更新数据
// 普通更新this.setData({title:'新标题',count:10})// 更新数组中某一项this.setData({[`list[${index}].checked`]:true})// 更新对象嵌套字段this.setData({'form.title':'张三','form.type':2})// 带回调（渲染完成后执行）this.setData({loading:false},()=>{console.log('数据已渲染到页面')})⚠️常见错误：直接修改
this.data.xxx = value不会触发页面更新，必须用setData！
5.3 网络请求 wx.request
constapp=getApp()wx.request({url:`${app.globalData.baseUrl}/wx/vote/list`,method:'GET',// GET | POST | PUT | DELETEdata:{page:1,pageSize:10},header:{'content-type':'application/json',// 'Authorization': 'Bearer xxx' // 如果需要 token},timeout:10000,// 超时时间（ms），默认60000success(res){// res.statusCode = HTTP状态码// res.data = 响应体（自动JSON.parse）// res.header = 响应头if(res.statusCode===200&&res.data.code===200){console.log(res.data.data)}},fail(err){// err.errMsg = 错误信息console.error('请求失败',err)},complete(){// 无论成功失败都执行，适合关闭loadingwx.hideLoading()}})封装通用请求函数
// utils/request.jsconstapp=getApp()functionrequest(options){returnnewPromise((resolve,reject)=>{wx.showLoading({title:'加载中...',mask:true})wx.request({url:app.globalData.baseUrl+options.url,method:options.method||'GET',data:options.data||{},header:{'content-type':'application/json',...options.header},success(res){if(res.data&&res.data.code===200){resolve(res.data.data)}else{wx.showToast({title:res.data?.msg||'请求失败',icon:'none'})reject(res.data)}},fail(err){wx.showToast({title:'网络错误，请稍后再试',icon:'none'})reject(err)},complete(){wx.hideLoading()}})})}module.exports={request}5.4 路由导航
// 保留当前页，跳转新页（可返回，栈最多10层）wx.navigateTo({url:'/pages/vote/vote?id=1'})// 关闭当前页，打开新页（不能返回）wx.redirectTo({url:'/pages/result/result?id=1'})// 返回上一页（或多级）wx.navigateBack({delta:1})// delta=1 返回上一页// 跳转到 tabBar 页面（必须用这个，不能用 navigateTo）wx.switchTab({url:'/pages/index/index'})// 关闭所有页面，重新打开（常用于重新登录）wx.reLaunch({url:'/pages/index/index'})页面间传参
// 方式1：URL 传参（适合简单数据）wx.navigateTo({url:`/pages/vote/vote?id=${voteId}&title=${title}`})// 接收方（onLoad 中）onLoad(options){constid=options.id// 字符串 '123'consttitle=options.title}// 方式2：全局变量（适合复杂对象）// 发送方app.globalData.tempVoteData=voteObject wx.navigateTo({url:'/pages/vote/vote'})// 接收方constdata=app.globalData.tempVoteData// 方式3：本地存储（适合需要持久化的数据）wx.setStorageSync('currentVote',voteObject)constvote=wx.getStorageSync('currentVote')5.5 提示与交互 API
// Loading 遮罩wx.showLoading({title:'提交中...',mask:true})wx.hideLoading()// Toast 轻提示wx.showToast({title:'提交成功',icon:'success',duration:2000})wx.showToast({title:'操作失败',icon:'error'})wx.showToast({title:'网络异常',icon:'none',duration:3000})// 模态对话框wx.showModal({title:'确认删除',content:'删除后不可恢复，确定吗？',confirmText:'确定删除',confirmColor:'#f44336',success(res){if(res.confirm){/* 点了确定 */}if(res.cancel){/* 点了取消 */}}})// 底部操作菜单wx.showActionSheet({itemList:['编辑','分享','删除'],success(res){// res.tapIndex = 0(编辑) / 1(分享) / 2(删除)constactions=['edit','share','delete']console.log(actions[res.tapIndex])}})// 修改导航栏标题wx.setNavigationBarTitle({title:'投票详情'})5.6 本地存储 API
// ── 同步（推荐用于小数据，如 openid、用户信息）──wx.setStorageSync('openid','xxxxx')constopenid=wx.getStorageSync('openid')// 不存在返回 ''wx.removeStorageSync('openid')wx.clearStorageSync()// 清空所有// ── 异步（推荐用于大数据）──wx.setStorage({key:'voteHistory',data:[1,2,3],success(){console.log('存储成功')}})wx.getStorage({key:'voteHistory',success(res){console.log(res.data)},fail(){/* key不存在时触发 */}})// 存储信息wx.getStorageInfo({success(res){console.log(res.keys)// 所有keyconsole.log(res.currentSize)// 已用容量(KB)console.log(res.limitSize)// 上限容量(KB) 默认10MB}})5.7 其他常用 API
// 剪贴板wx.setClipboardData({data:'https://...',success(){wx.showToast({title:'链接已复制'})}})// 分享（触发右上角分享菜单）wx.showShareMenu({withShareTicket:true,menus:['shareAppMessage','shareTimeline']})// 获取系统信息constinfo=wx.getSystemInfoSync()// info.screenWidth 屏幕宽度(px)// info.screenHeight 屏幕高度(px)// info.statusBarHeight 状态栏高度// info.platform 'ios' | 'android' | 'devtools'// 获取网络状态wx.getNetworkType({success(res){// res.networkType = 'wifi' | '4g' | '3g' | '2g' | 'none'if(res.networkType==='none'){wx.showToast({title:'当前无网络',icon:'none'})}}})// 震动反馈（增强操作体验）wx.vibrateShort({type:'light'})// 轻震动wx.vibrateLong()// 长震动// 扫码wx.scanCode({onlyFromCamera:false,success(res){console.log(res.result)}})// 页面滚动到顶部wx.pageScrollTo({scrollTop:0,duration:300})5.8 微信登录 API（获取 openid 核心流程）
// 完整登录流程wx.login({success(res){if(res.code){// code 有效期 5分钟，只能用一次wx.request({url:'https://your-server.com/wx/user/login',method:'POST',data:{code:res.code},success(r){if(r.data.code===200){constopenid=r.data.data wx.setStorageSync('openid',openid)}}})}}})// 获取用户信息（需用户主动点击按钮触发）wx.getUserProfile({desc:'用于完善个人资料',success(res){const{nickName,avatarUrl,gender,city}=res.userInfo}})本章小结
✅ 掌握了 App 和 Page 的完整生命周期
✅ 学会了setData的正确使用方式和注意事项
✅ 掌握了wx.request网络请求和封装方法
✅ 学会了路由导航和页面间传参的多种方式
✅ 熟悉了提示、存储、剪贴板等常用 wx API
下一章：投票系统整体架构设计，包括功能模块、数据库表设计、接口规划。
