摘要:微信小程序提供了一系列内置对象和API,帮助开发者实现应用逻辑、界面交互、数据管理等功能。以下是主要内置对象的分类及说明:
微信小程序提供了一系列内置对象和API,帮助开发者实现应用逻辑、界面交互、数据管理等功能。以下是主要内置对象的分类及说明:
一、框架核心对象
1. App 对象
作用:注册小程序实例,管理全局生命周期和全局数据。用法:javascript
App({
onLaunch {}, // 初始化
onShow {}, // 启动或切前台
onHide {}, // 切后台
globalData: {} // 全局共享数据
});
获取实例:通过 getApp 获取全局唯一的 App 实例。2. Page 对象
作用:定义页面逻辑,管理页面生命周期、数据、事件。用法:javascript
Page({
data: { /* 初始数据 */ }, // 页面数据
onLoad {}, // 页面加载
onShow {}, // 页面显示
onReady {}, // 页面渲染完成
onUnload {}, // 页面卸载
// 自定义方法
customMethod {}
});
3. Component 对象
作用:创建自定义组件,支持复用和封装。用法:javascript
Component({
properties: { /* 组件属性 */ },
data: { /* 内部数据 */ },
methods: {
// 组件方法
},
lifetimes: {
// 生命周期(替代旧版 attached/detached)
attached {}
}
});
4. Behavior 对象
作用:组件间代码复用,类似混入(Mixins)。用法:javascript
const myBehavior = Behavior({
data: { sharedData: 'value' },
methods: { sharedMethod {} }
});
二、全局 API 对象
1. wx 对象
作用:微信原生 API 的入口,提供数百种功能接口。常见分类:网络请求:wx.request, wx.uploadFile数据缓存:wx.setStorageSync, wx.getStorage设备信息:wx.getSystemInfoSync界面交互:wx.showToast, wx.showModal路由跳转:wx.navigateTo, wx.switchTab支付与登录:wx.login, wx.requestPayment异步处理:多数 API 支持 Promise 调用(需在参数中指定 { success, fail } 或使用 async/await)。2. 特殊全局方法
getCurrentPages获取页面栈数组,可用于获取当前页面实例或修改上一页数据。
javascript
const pages = getCurrentPages;
const prevPage = pages[pages.length - 2];
requirePlugin引入第三方插件(如支付、地图等)。
三、页面/组件内部对象
1. this 上下文
在 Page 中:指向当前页面实例,可通过 this.data 访问数据,this.setData 更新数据。在 Component 中:指向组件实例,需通过 this.properties 访问属性。2. 事件对象
事件回调参数:如 e.target.dataset 获取自定义数据属性。xml
点击
javascript
Page({
handleTap(e) {
const id = e.currentTarget.dataset.id; // 123
}
});
3. SelectorQuery
作用:查询节点信息(尺寸、位置等)。用法:javascript
const query = wx.createSelectorQuery;
query.select('#myElement').boundingClientRect(res => {
console.log(res.width);
}).exec;
4. CanvasContext / WebGLContext
作用:操作画布绘制图形、动画。示例:javascript
const ctx = wx.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 100, 100);
ctx.draw;
四、其他工具对象
1. EventChannel
作用:页面间通信(如 navigateTo 跳转时传递数据)。用法:javascript
// 页面 A
url: 'pageB',
events: {
sendData(data) { /* 接收来自 B 的数据 */ }
}
});
// 页面 B
const eventChannel = this.getOpenerEventChannel;
eventChannel.emit('sendData', { value: 'data' });
2. Worker
作用:创建多线程 Worker,处理耗时任务。配置:需在 app.json 中声明 Worker 文件路径。五、注意事项
生命周期顺序:如 App.onLaunch 在 Page.onLoad 之前执行。数据更新:必须使用 this.setData 更新视图,直接修改 this.data 无效。API 兼容性:部分 API 需基础库版本支持,可通过 wx.canIUse 判断。异步问题:网络请求、文件操作等异步 API 需正确处理回调或使用 async/await。通过合理利用这些内置对象,开发者可以高效实现小程序功能,建议结合微信官方文档查阅详细参数和示例。
来源:老客数据一点号