微信小程序第三篇:获取页面节点信息

Posted YinJie…

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序第三篇:获取页面节点信息相关的知识,希望对你有一定的参考价值。

文章目录

获取节点信息

createSelectorQuery

wx.createSelectorQuery()可以用于获取节点属性、样式、在界面上的位置等信息。
最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置。

示例代码:

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res)
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
)

在自定义组件或包含自定义组件的页面中,使用 this.createSelectorQuery 来代替 wx.createSelectorQuery ,这样可以确保在正确的范围内选择节点。

selectViewport

selectViewport() 可以用来获取 scroll-view 的尺寸、滚动位置等信息

*注意:selectViewport()没有参数的

选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息
  onLoad: function (options) 
      const query=wx.createSelectorQuery();		//创建一个SelectorQuery 对象实例
      query.selectViewport().					//选择显示区域
      scrollOffset(function(res)				//查询节点(必须是scroll-view / viewport)的滚动位置
          res.id      // 节点的ID
	      res.dataset // 节点的dataset
	      res.scrollLeft // 节点的水平滚动位置
	      res.scrollTop  // 节点的竖直滚动位置
       ).exec()
    
   

boundingClientRect

添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。
在执行 SelectorQuery.exec 方法后,节点信息会在 callback 中返回。

示例代码:

Page(
  getRect () 
    wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect)
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
    ).exec()
  ,
  getAllRects () 
    wx.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects)
      rects.forEach(function(rect)
        rect.id      // 节点的ID
        rect.dataset // 节点的dataset
        rect.left    // 节点的左边界坐标
        rect.right   // 节点的右边界坐标
        rect.top     // 节点的上边界坐标
        rect.bottom  // 节点的下边界坐标
        rect.width   // 节点的宽度
        rect.height  // 节点的高度
      )
    ).exec()
  
)

fields

获取节点的相关信息。需要获取的字段在 fields 中指定。

示例代码:

Page(
  getFields () 
    wx.createSelectorQuery().select('#the-id').fields(
      dataset: true,
      size: true,
      scrollOffset: true,
      properties: ['scrollX', 'scrollY'],
      computedStyle: ['margin', 'backgroundColor'],
      context: true,
    , function (res) 
      res.dataset    // 节点的dataset
      res.width      // 节点的宽度
      res.height     // 节点的高度
      res.scrollLeft // 节点的水平滚动位置
      res.scrollTop  // 节点的竖直滚动位置
      res.scrollX    // 节点 scroll-x 属性的当前值
      res.scrollY    // 节点 scroll-y 属性的当前值
      // 此处返回指定要返回的样式名
      res.margin
      res.backgroundColor
      res.context    // 节点对应的 Context 对象
    ).exec()
  
)

微信小程序:“我的”页面布局(一):微信用户信息获取及UI

参考技术A 先做小程序“我的”页面,需要注意的有两个点:

先上图,有图才有真相:

这一块我增加了一个隐藏的button, 未获取到用户信息时,显示为默认头像和“微信授权”的文字提示,登陆后,头像变为微信头像,文字变为微信昵称。

具体ui为判断没有授权则显示默认头像及提示,并在其上层覆盖一个透明的button,用户触发授权事件。

在js中需要注意的是,open-type="getUserInfo"需要做老版本兼容,老版本通过wx.getUserInfo即可唤起授权页面,不需要添加button去触发

详情见下一篇: 微信小程序:“我的”页面布局(二):可配置功能菜单列表

微信小程序:“我的”页面布局(一):微信用户信息获取及UI
微信小程序:“我的”页面布局(二):可配置功能菜单列表

以上是关于微信小程序第三篇:获取页面节点信息的主要内容,如果未能解决你的问题,请参考以下文章

使用 Abp.Zero 搭建第三方登录模块:微信小程序开发

微信小程序用户信息获取接口的调整

获取微信小程序URL参数

[小程序]微信小程序登陆并获取用户信息

微信小程序的组件间三种传值方式

微信小程序开发过程中获取位置信息