微信小程序内置对象及API详解

360影视 国产动漫 2025-04-08 20:20 2

摘要:微信小程序提供了一系列内置对象和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。

通过合理利用这些内置对象,开发者可以高效实现小程序功能,建议结合微信官方文档查阅详细参数和示例。

来源:老客数据一点号

相关推荐