您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序怎么解決后臺返回大量多余數據的問題,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
臺接口返回一個數組,數組里面N多對象,每個對象里面幾十上百條數據,最好玩的是,我只需要每個對象里面的某兩個數據、、、、
類似這種:
datas:[ { id:1000, name: "帥哥", title: '...', b: '...', d: 0, f:0, .... }, { id:1001, name: "美女", title: '...', b: '...', d: 0, f:0, .... }, ... ]
其實我只要id和name,找后臺解決、、、算了吧,奈何天生就是個儒生,溫文爾雅,打架是打不贏的,要是能打贏的就直接打吧,打完讓他們改!
數據量過多,對網絡請求影響大嗎?說實話,不大,又不是幾兆的圖片,返回數據的速度反正我感受不到延遲。
但是數據量過多對小程序渲染界面有影響嗎?
答案是:有!一般情況下我們是在wxml中循環data,然后取出item.id和item.name,其他數據看起來和我們無關,但是查看官方文檔setData相關信息的時候有下面這一段話
setData 是小程序開發中使用最頻繁的接口,也是最容易引發性能問題的接口。在介紹常見的錯誤用法前,先簡單介紹一下 setData 背后的工作原理。
工作原理
小程序的視圖層目前使用 WebView 作為渲染載體,而邏輯層是由獨立的 JavascriptCore 作為運行環境。在架構上,WebView 和 JavascriptCore 都是獨立的模塊,并不具備數據直接共享的通道。當前,視圖層和邏輯層的數據傳輸,實際上通過兩邊提供的 evaluateJavascript 所實現。即用戶傳輸的數據,需要將其轉換為字符串形式傳遞,同時把轉換后的數據內容拼接成一份 JS 腳本,再通過執行 JS 腳本的形式傳遞到兩邊獨立環境。
而 evaluateJavascript 的執行會受很多方面的影響,數據到達視圖層并不是實時的。
其實就是我們setData里面的所有數據都被轉成了字符串,然后字符串郵費轉換成JS腳本,然后頁面根據JS腳本去渲染頁面。那么我們能做的就是盡量少傳數據,而此時后臺返回這一大串數據就與此相悖了,所以最好是新建一個tempData,將要的數據取出來之后再setDta這個tempData,以此來提高微信小程序的頁面渲染速度,提升微信小程序運行效率,優化微信小程序的用戶體驗。
我們可以這樣寫:
[mw_shl_code=applescript,true] var tempData = [] for(var i = 0; i < datas.length; i++) { var tempObj = {} tempObj.id = datas[i].id tempObj.name = datas[i].name tempData.push(tempObj) } console.log(tempData) [/mw_shl_code]
或者使用高階函數map():
let tempDatas = datas.map(function(data){ return { id: data.id, name: data.name } }) console.log(tempDatas)
此時我們再使用setData({})就能提高渲染效率了
同時再分享兩個setData技巧
1、有一個Object如下
obj:{a:"a",b:"b",c:"c"},
此時已經渲染到頁面了,然后我們修改了obj,此時可以選擇:
1)平時的做法
let obj = this.data.objobj.b = "我是后來修改的"this.setData({ obj: obj})
2)但是更優化的做法是
this.setData({ 'obj.b': "我是后來修改的"})
不僅省了兩行代碼,同時還提高頁面渲染效率2、其實和1差不多,就是Object變成數組Array當我們要給數組的其中一個數據進行修改時,我們可以參照上面的方法
this.setData({ 'array[1]': "我是后來修改的"})
當我們要給數組的多個數據進行修改時,我們會寫一個循環,然后修改array,此時是無法識別的,要寫成如下形式
for(var i = 0;i < 5;i++) { this.setData({ [`array[${i}]`]:"我是后來修改的" }) }
以上是“微信小程序怎么解決后臺返回大量多余數據的問題”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。