小程序节点查询方法:wx.createSelectorQuery

小程序由于内置于微信，这使得它有了得天独厚的宣传和使用优势,本着学习的心态，我在官网上看了一遍开发文档，大致得出小程序框架的设计模式与使用注意事项（重点来了，其实开发文档某些方面叙述的并不仔细，甚至存在歧义）。在此与诸君分享，还望不吝赐教。

0、小程序框架结构就不多赘述有兴趣的童鞋可以移步我的博客查看这篇文章，现在要讲的是开发中经常需要用到的，节点查询的API - wx.createSelectorQuery()。

1、使用方法：(从文档上粘来的栗子，只不过我在上边添加上了注释😆)

Page({
  queryMultipleNodes: function(){//声明节点查询的方法
    var query = wx.createSelectorQuery()//创建节点查询器 query
    query.select('#the-id').boundingClientRect()//这段代码的意思是选择Id=the-id的节点，获取节点位置信息的查询请求
    query.selectViewport().scrollOffset()//这段代码的意思是获取页面滑动位置的查询请求
    query.exec(function(res){
      res[0].top       // #the-id节点的上边界坐标
      res[1].scrollTop // 显示区域的竖直滚动位置
    })
  }
})

2、在使用中我遇到了一些问题 - > 总所周知，在我们移动开发过程中，页面从创建到加载，系统给了我们一系列的API去监听这些事件，小程序也提供了类似的API

0.onLoad - 生命周期函数--监听页面加载
1.onReady - 生命周期函数--监听页面初次渲染完成
2.onShow - 生命周期函数--监听页面显示

由于app开发的流程思维，我想当然的以为
onload = loadView
onReady = viewDIdLoad
onShow = viewWillAppear

于是在index.js 中我写下了如下代码

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function () {
    console.log("0")  
  },
  onShow:function(){
    var query = wx.createSelectorQuery()
    query.select('#myImage').boundingClientRect()
    query.exec(function (res) {
      console.log("1" +res)       // #the-id节点的上边界坐
    })
  },
  onReady: function () {
    var query = wx.createSelectorQuery()
    query.select('#myImage').boundingClientRect()
    query.exec(function (res) {
      console.log("2" +res[0])       // #the-id节点的上边界坐
    })
  }
})

打印信息如下：

打印信息

分析：

1.由于小程序框架的设计为数据驱动，使得事件响应方法与我们寻常App开发中使用的事件响应设计思路有所不同，它无时不刻不在关注着数据的变化。所以我们首先应该是去适应这种数据驱动的思维。
2.方法分析：

       
（1）onload 对应的是加载中，也就是webkit加载页面的方法执行。
（2）onShow 对应的页面显示，并不算是数据填充后的显示，而是“页面框架的加载”
（3）onReady 指的是“页面框架的显示”，而并非页面数据与节点加载渲染完成。
（4）微信小程序之所以这么设计应该是照顾到webkit内核压力的缘故，使得页面整个加载分为多个步骤，异步进行。

结论：

1. 证明他们的执行顺序是：
   onLoad >> onShow >> onReady
2. 查询方法: wx.createSelectorQuery(),在页面响应事件中并不能查询到节点信息。
3. 如有查询节点需求可以用延时方法或者操作事件来获取。

友情链接:

技术博客        简书主页