开发微信小程序虽然不需要像 JQuery 一样必须操作节点来更新页面,但是获取页面节点信息,有时候还是有必要的。
节点信息查询 API 可以用于获取节点属性、样式、在界面上的位置等信息。
最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置。
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
res.top // #the-id 节点的上边界坐标(相对于显示区域)
})
query.selectViewport().scrollOffset(function(res){
res.scrollTop // 显示区域的竖直滚动位置
})
query.exec()
另外,微信小程序还提供了节点布局相交状态 API ,可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
这一组API涉及的主要概念如下。
参照节点:监听的参照节点,取它的布局区域作为参照区域。如果有多个参照节点,则会取它们布局区域的 交集 作为参照区域。页面显示区域也可作为参照区域之一。
目标节点:监听的目标,默认只能是一个节点(使用 selectAll 选项时,可以同时监听多个节点)。
相交区域:目标节点的布局区域与参照区域的相交区域。
相交比例:相交区域占参照区域的比例。
阈值:相交比例如果达到阈值,则会触发监听器的回调函数。阈值可以有多个。
-
微信小程序打开任意公众号文章 wx.openOfficialAccountArticlewx.openOfficialAccountArticle是微信小程序通过小程序打开任意公众号文章api,不包括临时链接等异常状态下的公众号文章,必须有点击行为才能调用成功。
-
wx.onBatteryInfoChange 监听电池信息变化事件 APIwx.onBatteryInfoChange 为微信小程序监听电池信息变化事件 API,,目前只支持监听省电模式的切换,目前仅 iOS 端支持。
-
live-pusher 实时音视频录制媒体组件live-pusher 微信小程序实时音视频录制媒体组件,v2.9.1 起支持同层渲染。需要用户授权 scope.camera、scope.record。
-
open-container容器转场动画组件open-container为微信小程序容器转场动画组件。
-
wx.setStorage 将数据存储在本地缓存中指定的 key 中微信小程序wx.setStorage 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
-
微信小程序wx.getExtConfig 的同步版本 APIwx.getExtConfig 为微信小程序的同步版本 API。
暂无评论,抢个沙发...