Element API
20
Element 模块提供了控制小程序页面元素的方法。
属性
element.tagName
标签名,小写。
element.tagName: string
方法
element.$
在元素范围内获取元素。
element.$(selector: string): Promise<Element>
参数说明
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
selector | string | 是 | - | 选择器 |
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() let element = await page.$('.index-hd') element = await element.$('.index-desc') console.log(await element.text())})
element.$$
在元素范围内获取元素数组。
element.$$(selector: string): Promise<Element[]>
参数说明
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
selector | string | 是 | - | 选择器 |
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() const element = await page.$('.index-bd') const elements = await element.$$('.kind-list-text') console.log(await elements[0].text())})
element.size
获取元素大小。
element.size(): Promise<Object>
返回值说明
字段 | 类型 | 说明 |
---|---|---|
width | number | 元素宽度 |
height | number | 元素高度 |
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() const element = await page.$('.index-bd') const { width, height } = await element.size() console.log(width, height)})
element.offset
获取元素绝对位置。
element.offset(): Promise<Object>
返回值说明
字段 | 类型 | 说明 |
---|---|---|
left | number | 左上角 x 坐标,单位:px |
top | number | 左上角 y 坐标,单位:px |
坐标信息以页面左上角为原点。
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() const element = await page.$('.index-bd') const { left top } = await element.offset() console.log(left, top)})
element.text
获取元素文本。
element.text(): Promise<string>
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() const element = await page.$('.index-desc') console.log(await element.text())})
element.attribute
获取元素特性。
element.attribute(name: string): Promise<string>
参数说明
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
name | string | 是 | - | 特性名 |
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() const element = await page.$('.index-logo') console.log(await element.attribute('src')) // -> 'resources/kind/logo.png'})
element.property
automator 0.9.0,基础库 2.9.5 开始支持。
获取元素属性。
element.property(name: string): Promise<any>
参数说明
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
name | string | 是 | - | 属性名 |
element.property 与 element.attribute 主要区别如下:
element.attribute 获取的是标签上的值,因此它的返回类型一定是字符串,element.property 则不一定。
element.attribute 可以获取到 class 和 id 之类的值,element.property 不行。
element.property 可以获取到文档里对应组件列举的大部分属性值,比如表单 input 等组件的 value 值。
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() const element = await page.$('input') console.log(await element.property('value'))})
element.wxml
获取元素 WXML。
element.wxml(): Promise<string>
element.outerWxml
同 wxml,只是会获取到元素本身。
element.outerWxml(): Promise<string>
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() const element = await page.$('.index-desc') console.log(await element.wxml()) console.log(await element.outerWxml())})
element.value
获取元素值。
element.value(): Promise<string>
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() const element = await page.$('.weui-input') console.log(await element.value())})
element.
获取元素样式值。
element.(name: string): Promise<string>
参数说明
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
name | string | 是 | - | 样式名 |
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() const element = await page.$('.index-desc') console.log(await element.('color')) // -> 'rgb(136, 136, 136)'})
element.tap
点击元素。
element.tap(): Promise<void>
示例代码:
automator.launch().then(async miniProgram => { const page = await miniProgram.currentPage() const element = await page.$('.kind-list-item-hd') await element.tap()})
更多信息可访问小程序开发文档:
https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/element.html
原文链接: https://www.yukx.com/miniprogram/article/details/2507.html 优科学习网Element API
推荐文章
-
ReactNative开发工具涵盖了从代码编辑器、集成开发环境(IDE)、调试工具到特定功能库和辅助服务的广泛范围。以下是部分关键工具,旨在提升ReactNative开发效率、调试体验和应用性能:代码编辑器与IDEVisualStudioCode (VSCode):流行的开源代码编辑器,具有强大的插
-
ReactNative是一个开源的跨平台移动应用开发框架,由Facebook在2015年4月首次推出。其核心理念是使用一套统一的JavaScript代码库,结合React(一个用于构建用户界面的声明式、高效且灵活的JavaScript库)的编程模型,来构建原生移动应用程序,同时支持iOS和Andro
-
微信小程序的开发工具主要包括以下几类:微信开发者工具:官方工具:这是微信官方提供的核心开发工具,是开发微信小程序的首选和必备工具。它集成了代码编辑、调试、预览、发布等功能,支持实时预览效果、模拟器测试、性能分析、远程调试等,帮助开发者高效地完成小程序的编写、测试与发布流程。官方开发者工具通常会保持与
-
小程序简介微信小程序(英文名:WeChatMiniProgram)是由腾讯公司推出的基于微信平台的应用形态。它是一种无需用户下载安装即可使用的轻型应用程序,用户可以通过扫描二维码、搜索关键词或者在微信内通过特定入口(如发现页的小程序列表、公众号关联小程序等)直接访问。小程序以其“触手可及,用完即走”
-
Android碎片(Fragment)是Android应用程序架构中的一个重要组件,旨在支持构建适应不同屏幕尺寸和形态的应用界面。以下是关于Fragment的详细说明:概念与作用定义与性质:Fragment 是一个可以嵌入在 Activity 内部的、具有独立用户界面和生命周期的模块化组件,继承自
-
Android服务(Service)Android服务(Service)是Android应用程序架构中的四大组件之一,它专为在后台执行长时运行任务而设计,无需与用户直接交互或显示界面。以下是关于Android服务的详细说明:概念与作用定义与性质:Service 是一个应用程序组件,继承自 andro