如果解決小程序1024kb渲染之坑

問題：

• 在小程序開發中如果有那么個場景和操作步驟，獲取商品下拉列表商品列表data為goodsList

1. 當從后台獲取數據response.data.list,通常我們會setData({goodsList:response.data.list})
2. 下拉獲取到第二頁數據，添加goodsList里來，再次setData一次goodsList（是的小程序直接添加進當前數組，再次setData就能渲染出來，不用生成新數組，這里不用vue3.0之前把呢不能和react那樣），

 

const goodObject = {
  goodName:'小蘋果'
}
this.data.goodsList.push(goodObject);
const goodsList = this.data.goodsList
this.setData({
  goodsList
})

 

或者數組合拼新數組

 

cosnt goodsList = this.data.goodsList
cosnt newGoodsList = response.data.list
this.setData({
  goodsList:[...goodsList,...newGoodsList]
})

　　看似沒問題 ，實則再不同機型會有兼容問題，但是這個不是我要講的，我要講的是更深的坑，好吧，我們開始吧

小程序有講

setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

Object 以 key: value 的形式表示，將 this.data 中的 key 對應的值改變成 value。

其中 key 可以以數據路徑的形式給出，支持改變數組中的某一項或對象的某個屬性，如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。

注意：

1. 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。
2. 僅支持設置可 JSON 化的數據。
3. 單次設置的數據不能超過1024kB，請盡量避免一次設置過多的數據。
4. 請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設置並可能遺留一些潛在問題。

當我們每次下拉分頁，其實是將所有累計的每頁數據一次setData的，那么理論上來說，遲早會超過1024Kb，如果數據里img字段而且還是二維碼base64字符串，那沒幾頁就會超過1024，此時就會報錯

試了很多方法，最終還是沒解決。。。。

‘

 

’‘

’

‘’

當我要放棄的時候，突然靈光一下，才明白小程序團隊的用心良苦，如果數據越大，渲染越吃力，那開發者們開發出的小程序變慢，那人們第一時間吐槽的就是小程序底層引擎有多垃圾，而不是罵當前小程序應用有多垃圾於是小程序開發團隊才會設置這樣一個閾值1024kb。那么既然它有設置這樣的閾值，就有相應的處理方案吧，可惜官網給出的方案太直白，直白的讓人無法理解

官方文檔說：請盡量避免一次設置過多的數據

　　好，然后讓我們避免一次設置過多的數據，那我們怎么把過的數據渲染呢，少部分少部分的來設置？怎么設置呢？

　　

我就不一一羅列我試過的方法了，直接給大家說一個很靈驗得方法把

　　如果我們有個數組100個長度就到達1024kb，那就把數組拆分設置setData，拆多大呢？只要小於1024就行。

而且次數不影響相率，那我們就挨個渲染。為了代碼的可拓展。最終給大家一個萬能的方案

當我們組裝好我們的goodsList的時候，挨個設置，挨個去渲染！

　　

cosnt oldList = this.data.goodsList
cosnt newGoodsList = response.data.list
const goodsList = [...newGoodsList,...oldList]
for(let i in goodsList){
  this.setData({
    ['goodsList['+i+']']: goodsList[i]
  })
}

　　Object 以 key: value 的形式表示，將 this.data 中的 key 對應的值改變成 value。

總之遇到i一個數組就這樣吧，不會有潛在bug了。

for(let i in goodsList){
  this.setData({
    ['goodsList['+i+']']: goodsList[i]
  })
}
現在是凌晨快3點了，還在等運維上線，我也是醉了，好了 就這樣吧！