微信小程序節(jié)點查詢方法:wx.createSelectorQuery()的使用場景與注意事項
0叫胖、小程序框架結(jié)構(gòu)就不多贅述有興趣的童鞋可以移步我的博客查看這篇文章短条，現(xiàn)在要講的是開發(fā)中經(jīng)常需要用到的，節(jié)點查詢的API - wx.createSelectorQuery()。
1、使用方法：(從文檔上粘來的栗子，只不過我在上邊添加上了注釋??)
Page({
queryMultipleNodes: function(){//聲明節(jié)點查詢的方法
var query = wx.createSelectorQuery()//創(chuàng)建節(jié)點查詢器 query
query.select('#the-id').boundingClientRect()//這段代碼的意思是選擇Id=the-id的節(jié)點马澈，獲取節(jié)點位置信息的查詢請求
query.selectViewport().scrollOffset()//這段代碼的意思是獲取頁面滑動位置的查詢請求
query.exec(function(res){
res[0].top // #the-id節(jié)點的上邊界坐標
res[1].scrollTop // 顯示區(qū)域的豎直滾動位置
})
}
})
2、在使用中我遇到了一些問題 - > 總所周知弄息，在我們移動開發(fā)過程中痊班，頁面從創(chuàng)建到加載，系統(tǒng)給了我們一系列的API去監(jiān)聽這些事件摹量，小程序也提供了類似的API
0.onLoad - 生命周期函數(shù)--監(jiān)聽頁面加載
1.onReady - 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
2.onShow - 生命周期函數(shù)--監(jiān)聽頁面顯示
由于app開發(fā)的流程思維涤伐，我想當然的以為
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節(jié)點的上邊界坐
})
},
onReady: function () {
var query = wx.createSelectorQuery()
query.select('#myImage').boundingClientRect()
query.exec(function (res) {
console.log("2" +res[0]) // #the-id節(jié)點的上邊界坐
})
}
})
打印信息如下：
打印信息
分析：
1.由于小程序框架的設計為數(shù)據(jù)驅(qū)動，使得事件響應方法與我們尋常App開發(fā)中使用的事件響應設計思路有所不同缨称，它無時不刻不在關(guān)注著數(shù)據(jù)的變化凝果。所以我們首先應該是去適應這種數(shù)據(jù)驅(qū)動的思維。
2.方法分析：
（1）onload 對應的是加載中具钥，也就是webkit加載頁面的方法執(zhí)行豆村。
（2）onShow 對應的頁面顯示，并不算是數(shù)據(jù)填充后的顯示骂删，而是“頁面框架的加載”
（3）onReady 指的是“頁面框架的顯示”掌动，而并非頁面數(shù)據(jù)與節(jié)點加載渲染完成四啰。
（4）微信小程序之所以這么設計應該是照顧到webkit內(nèi)核壓力的緣故，使得頁面整個加載分為多個步驟粗恢，異步進行柑晒。
結(jié)論：
- 證明他們的執(zhí)行順序是：
onLoad >> onShow >> onReady- 查詢方法: wx.createSelectorQuery(),在頁面響應事件中并不能查詢到節(jié)點信息。
- 如有查詢節(jié)點需求可以用延時方法或者操作事件來獲取眷射。
