小程式讀書筆記(1)常見問題

blacksheepQAQ發表於2019-01-06

原生層級高的問題

原生元件會浮於其他元件之上,使得其他元件不能覆蓋在其他元件之上

想要解決這個問題,可以用cover-image,或者cover-view元件在原生元件上,是可以這樣玩的。

但是其實是一樣的,這樣的話就要把資料放到原生元件上去,而且原生元件之間的層級就可以按照一定的規則來控制。

頁面退出,小程式不退出

頁面退出之後page之外的物件並不會被銷燬掉,舉個例子


console.log('載入 page.js')

var count = 0

Page({

onLoad: function() {

count += 1

console.log('第 ' + count + ' 次啟動這個頁面')

}

})

這個count雖然不能在不同的頁面之間共享,但是當頁面站的順序是a->b ->a的時候,這個時候count不會被銷燬掉,兩個A的例項就會直接共享兩個變數

小程式頁面通訊

頁面初始化的事件大致上由頁面初始化資料通訊事件和初始化渲染事件兩部分構成,其中,資料通訊的事件資料從邏輯層開始組織資料到是塗層完全接受完畢的事件,資料量小於64KB,事件可以控制在30ms之內,但是傳輸資料過大會使得這一事件顯著增加,因而減少資料傳輸量是降低資料傳輸事件的有效方式。

資料傳輸的事件會由於兩方面構成:

1 一方面是在不同的生命週期的時候

2 另一方面是在setData的時候

兩種渲染方式渲染方式都是由於初始化路徑之後,會把資料和路徑傳送給是檢視層,然後檢視層接受完成資料之後開始初始渲染,然後渲染完成之後會觸發回撥 回撥的訊息會傳送給邏輯層所在的執行緒。

就是因為傳輸過程當中的,資料傳輸的事件和資料傳輸的事件是以近乎線性的方式同時增加的,所以不建議一次性set很多的資料,相對於渲染耗時,傳輸對與頁面渲染的耗時要更高。

總之:

1 頻繁的setData會觸發頻繁的資料渲染。

2 資料通訊的效能和資料量正相關,所以資料欄位不在潔面當中戰術資料結構比較複雜的或包含長字串都不應該使用setData去設定這些資料,應該向小程式官方建議的分批次的去set資料。

當然過多的set也會導致頁面渲染速度減慢,所以到底什麼時候該set,set多少,要看情況去確定。

3 和頁面渲染無關的資料不要設定在data物件當中,當然也可以考慮在page物件的其他欄位下

4 狀態/資料共享

    小程式沒有redux這種東西,所以狀態共享變得焦灼起來,個人建議不妨可以用storage頂一頂,而且相當的小程式根本用不到redux程度的狀態共享
     嘗試把storage掛進入口的main.js當中,嘗試去通過storage去共享一部分資料是一個相當不錯的嘗試(個人試了下還可以其實)

    當然不要所有的東西都往裡面塞,要有點腦子。

重渲染

在觸發再次渲染之後,會使得資料不同的程式碼節點,然後新的程式碼節點和一部分老的程式碼節點(data當中的,非使用者行為節點),會構成新的節點樹,然後去渲染整個新的節點數。

原生元件的東西是不會導致二次渲染的,因為是邏輯層直接傳遞到native層然後傳遞到元件裡面所以根本不會觸發整個頁面的重新整理


相關文章