小程序由于內(nèi)置于微信跺株，這使得它有了得天獨(dú)厚的宣傳和使用優(yōu)勢(shì),本著學(xué)習(xí)的心態(tài)空繁，我在官網(wǎng)上看了一遍開發(fā)文檔把敞，大致得出小程序框架的設(shè)計(jì)模式與使用注意事項(xiàng)（重點(diǎn)來了落塑，其實(shí)開發(fā)文檔某些方面敘述的并不仔細(xì)纽疟，甚至存在歧義）。在此與諸君分享憾赁，還望不吝賜教污朽。
0、小程序框架結(jié)構(gòu)就不多贅述有興趣的童鞋可以移步我的博客查看這篇文章龙考，現(xiàn)在要講的是開發(fā)中經(jīng)常需要用到的蟆肆，節(jié)點(diǎn)查詢的API - wx.createSelectorQuery()。
1晦款、使用方法：(從文檔上粘來的栗子炎功，只不過我在上邊添加上了注釋??)
Page({
queryMultipleNodes: function(){//聲明節(jié)點(diǎn)查詢的方法
var query = wx.createSelectorQuery()//創(chuàng)建節(jié)點(diǎn)查詢器 query
query.select('#the-id').boundingClientRect()//這段代碼的意思是選擇Id=the-id的節(jié)點(diǎn)，獲取節(jié)點(diǎn)位置信息的查詢請(qǐng)求
query.selectViewport().scrollOffset()//這段代碼的意思是獲取頁面滑動(dòng)位置的查詢請(qǐng)求
query.exec(function(res){
res[0].top // #the-id節(jié)點(diǎn)的上邊界坐標(biāo)
res[1].scrollTop // 顯示區(qū)域的豎直滾動(dòng)位置
})
}
})
2缓溅、在使用中我遇到了一些問題 - > 總所周知蛇损，在我們移動(dòng)開發(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ā)的流程思維，我想當(dāng)然的以為
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é)點(diǎn)的上邊界坐
})
},
onReady: function () {
var query = wx.createSelectorQuery()
query.select('#myImage').boundingClientRect()
query.exec(function (res) {
console.log("2" +res[0]) // #the-id節(jié)點(diǎn)的上邊界坐
})
}
})
打印信息如下：
打印信息
分析：
1.由于小程序框架的設(shè)計(jì)為數(shù)據(jù)驅(qū)動(dòng)袜匿，使得事件響應(yīng)方法與我們尋常App開發(fā)中使用的事件響應(yīng)設(shè)計(jì)思路有所不同更啄，它無時(shí)不刻不在關(guān)注著數(shù)據(jù)的變化。所以我們首先應(yīng)該是去適應(yīng)這種數(shù)據(jù)驅(qū)動(dòng)的思維沉帮。
2.方法分析：
（1）onload 對(duì)應(yīng)的是加載中锈死，也就是webkit加載頁面的方法執(zhí)行。
（2）onShow 對(duì)應(yīng)的頁面顯示穆壕，并不算是數(shù)據(jù)填充后的顯示待牵，而是“頁面框架的加載”
（3）onReady 指的是“頁面框架的顯示”，而并非頁面數(shù)據(jù)與節(jié)點(diǎn)加載渲染完成喇勋。
（4）微信小程序之所以這么設(shè)計(jì)應(yīng)該是照顧到webkit內(nèi)核壓力的緣故缨该，使得頁面整個(gè)加載分為多個(gè)步驟，異步進(jìn)行川背。
結(jié)論：
- 證明他們的執(zhí)行順序是：
onLoad >> onShow >> onReady- 查詢方法: wx.createSelectorQuery(),在頁面響應(yīng)事件中并不能查詢到節(jié)點(diǎn)信息贰拿。
- 如有查詢節(jié)點(diǎn)需求可以用延時(shí)方法或者操作事件來獲取蛤袒。
友情鏈接:
技術(shù)博客 ???????簡(jiǎn)書主頁
