小程序由於內置於微信，這使得它有了得天獨厚的宣傳和使用優勢,本着學習的心態，我在官網上看了一遍開發文檔，大致得出小程序框架的設計模式與使用注意事項（重點來了，其實開發文檔某些方面敘述的並不仔細，甚至存在歧義）。在此與諸君分享，還望不吝賜教。
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內核壓力的緣故，使得頁面整個加載分為多個步驟，異步進行。
結論：
- 證明他們的執行順序是：
onLoad >> onShow >> onReady- 查詢方法: wx.createSelectorQuery(),在頁面響應事件中並不能查詢到節點信息。
- 如有查詢節點需求可以用延時方法或者操作事件來獲取。
友情鏈接:
技術博客