ホームページ > 記事 > WeChat アプレット > WeChat ミニ プログラムがバックグラウンドで大量の冗長データを返す問題をどのように解決するか
この記事の内容は、WeChat アプレットがバックグラウンドで大量の冗長データを返す問題をどのように解決するかについてです。必要な友人が参考になれば幸いです。
プラットフォーム インターフェイスは配列を返します。配列には N 個のオブジェクトがあり、各オブジェクトには数十または数百のデータが含まれています。最も興味深いのは、各オブジェクトに必要なデータは 2 つだけであることです。種類:
datas:[ { id:1000, name: "帅哥", title: '...', b: '...', d: 0, f:0, .... }, { id:1001, name: "美女", title: '...', b: '...', d: 0, f:0, .... }, ... ]
実際、必要なのはIDと名前だけで、それを解決するためのバックエンドを見つけることができます...忘れてください、でも私は儒学者になるために生まれました、穏やかでエレガント、私には勝てません戦い、私が勝てるなら、ただ戦えば終わりだ彼らに変えてもらいましょう!
過剰なデータ量、ネットワークリクエストに大きな影響を与えますか?正直なところ、数メガバイトの写真ではありませんが、データが返される速度の遅延は感じられません。
しかし、データが多すぎると、
ミニ プログラムのレンダリング インターフェイスに影響が出るのでしょうか?
一般的には、wxmlでデータをループして、item.idとitem.nameを取り出します。他のデータは関係ないように見えますが、公式ドキュメントのsetData関連情報を見ると、次のような文章がありますsetData小規模なプログラム開発 最も頻繁に使用されるインターフェイスは、パフォーマンス上の問題を引き起こす可能性が最も高いインターフェイスでもあります。よくある間違った使用法を紹介する前に、setData の背後にある動作原理を簡単に紹介しましょう。
動作原理
現在、アプレットのビュー層はレンダリングキャリアとして WebView を使用し、ロジック層は実行環境として独立した JavascriptCore を使用します。アーキテクチャ的には、WebView と JavaScriptCore は独立したモジュールであり、直接データを共有するチャネルはありません。現在、ビュー層とロジック層の間のデータ伝送は、実際には両者が提供するevaluateJavascriptを通じて実装されています。つまり、ユーザーが送信したデータを文字列に変換して渡す必要があり、同時に変換されたデータ内容を JS スクリプトにつなぎ合わせて実行することで、両側の独立した環境に渡す必要があります。 JSスクリプト。
実際、setData 内のすべてのデータは文字列に変換され、文字列の郵便料金が JS スクリプトに変換され、ページは JS スクリプトに従ってページをレンダリングします。
それでは、できる限り少ないデータを送信することができるのですが、この時にこの大量のデータ列をバックグラウンドで返すのはこれに反するので、新しくtempDataを作成して必要なデータを取り出して、 WeChat アプレットのページ レンダリング速度により、WeChat アプレットの操作効率が向上し、WeChat アプレットのユーザー エクスペリエンスが最適化されます。 次のように書くことができます:
[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]
let tempDatas = datas.map(function(data){ return { id: data.id, name: data.name } }) console.log(tempDatas)
このとき、setData({})を使用してレンダリング効率を向上させることができます
同時に、 2 つの setData テクニック
1. 次のようなオブジェクトがあります
obj:{a:"a",b:"b",c:"c"},
この時点でページにレンダリングされており、次にオブジェクトを変更します:
1) 通常のアプローチ
。let obj = this.data.objobj.b = "我是后来修改的"this.setData({ obj: obj})
2) しかし、より最適化されたアプローチは
this.setData({ 'obj.b': "我是后来修改的"})
です。2 行のコードを節約するだけでなく、ページのレンダリング効率も向上します。2. 実際、これは 1 と似ています。つまり、オブジェクトは必要なときに配列 Array になります。配列内のデータの1つを変更するには、上記のメソッドを参照できます
this.setData({ 'array[1]': "我是后来修改的"})
配列を変更したい場合 複数のデータを変更する場合は、ループを書いてから配列を変更します。このとき、それは認識できません。次の形式で記述する必要があります
for(var i = 0;i < 5;i++) { this.setData({ [`array[${i}]`]:"我是后来修改的" }) }
関連する推奨事項:
WeChat アプレットでの書式設定時間のコード実装以上がWeChat ミニ プログラムがバックグラウンドで大量の冗長データを返す問題をどのように解決するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。