WeChat ミニプログラムを最適化するにはどうすればよいですか?あなたの知らない最適化知識の共有

WeChat ミニ プログラムを最適化するにはどうすればよいですか?この記事では、初心者が分かりにくい小さなプログラムの最適化の知識をまとめて皆さんに共有しますので、皆様のお役に立てれば幸いです。

ページ ジャンプにはナビゲーター コンポーネントが推奨されます

ミニ プログラムは 2 つのページ ルーティング メソッドを提供します:
a. ナビゲーター コンポーネント
b. navigateTo/redirectTo/switchTab/navigateBack/reLaunch などのルーティング API。

WeChat クローラーがミニ プログラムのコンテンツをクロールする場合、ナビゲーター コンポーネントを使用すると、クローラーがページ レベルのコンテンツをクロールできるようになります。ミニ プログラムが検索の最適化にさらに注意を払う場合は、検索の最適化を優先することをお勧めします。ナビゲータ コンポーネントを使用してページ間を移動する方法 [推奨関連学習: ミニ プログラム開発チュートリアル ]

詳細については、ドキュメント「ミニ プログラム検索最適化ガイド」を参照してください

https://developers.weixin.qq.com/miniprogram/dev/framework/search/seo.html

#ページ間を移動するには、これを使用します。 wx.navigateTo の代わりに .pageRouter.navigateTo を使用することをお勧めします。

// index/index.js

Page({
  wxNavigate: function () {
    wx.navigateTo({
      url: './new-page'
    })
  },
  routerNavigate: function () {
    this.pageRouter.navigateTo({
      url: './new-page'
    })
  }
})

ページ インデックス/インデックスの js コードが上に示されていると仮定します。この時点で新しいページのパック/インデックスにジャンプし、上記の wxNavigate メソッドを呼び出した場合、ジャンプする新しいページのパスは Pack/new-page になり、routerNavigate メソッドが呼び出された場合は、ジャンプする新しいページになります。 to パスはまだindex/new-pageです。

言い換えれば、this.pageRouter によって取得されたルーター オブジェクトは、ベース パスの安定性が向上します。 (一般的な例は、ユーザーがボタンをクリックして次のページにジャンプする場合です。ラグや連続クリックにより、ページが繰り返し開かれる場合があります。ページ ルーター オブジェクト呼び出しを使用すると、この状況を回避できます。)

詳細については、「ページ ルーター オブジェクト」を参照してください。

##https://developers.weixin.qq.com/miniprogram/dev/reference/api/Router.html

# ミニ プログラム ロング リスト コンポーネント

パフォーマンスの最適化について話すとき、ロング リスト コンテンツ データのレンダリングを最適化する方法について常に言及します。ソリューションの中心となるアイデアは、画面に表示されるデータのみをレンダリングすることです。基本的な実装は、スクロール イベントをリッスンし、レンダリングする必要があるデータを再計算し、レンダリングする必要のないデータ用に空の div プレースホルダー要素を残すことです。

ミニ プログラムは、長いリスト データ シナリオのレンダリングに特化した拡張コンポーネントを正式に提供します。詳細については、「recycle-view」を参照してください:

https://developers.weixin.qq .com/miniprogram/dev/extended/component-plus/recycle-view.html

スクロール駆動アニメーション

スクロール位置に基づいてアニメーションの進行を継続的に変更するのは、 a 比較的一般的なシナリオであるこのタイプのアニメーションは、以下に示すように、インターフェイスの対話が一貫していて自然であり、エクスペリエンスが向上していると人々に感じさせることができます。 # WeChat ミニ プログラムは、このタイプのアニメーション シーン用に設計されており、ScrollTimeline パラメーターが特にアニメーション API に追加されています。詳細については、「ScrollTimeline」:

https://developers.weixin.qq を参照してください。 .com/miniprogram/dev/framework/view/animation.html

スクロール イベントを手動でリッスンしないでください

さらに、

上記のドキュメント は次で終わります。カスタム コンポーネントはページ全体に影響を与えることなく部分的な更新を実現できるため、より高度なアニメーションを実装する必要がある場合は、カスタム コンポーネントの形式でアニメーションをカプセル化できると述べられています。パフォーマンス。 レンダリング キャッシュの初期化

ミニ プログラム ページの初期化は、ロジック層の初期化とビュー層の初期化の 2 つの部分に分かれています。初期レンダリング キャッシュを有効にすると、ロジック層が初期化されるのを待たずに、ビュー層がページの初期データのレンダリング結果を事前にユーザーに直接表示できるようになり、より早くユーザーにページが表示されるようになります (白表示の軽減)。画面の読み込み時間)

初期レンダリング キャッシュを使用すると、次のことができます。

ナビゲーション バーなど、変更されないページの部分をすばやく表示します。

ユーザー エクスペリエンスを向上させるために、事前にスケルトン ページを表示します。

• #カスタマイズされた読み込みプロンプトを表示します。

• 広告の事前表示 など

• 詳細については、ドキュメント「初期化キャッシュ」を参照してください。
• https://developers.weixin.qq.com/miniprogram/dev/framework /view/initial-rendering-cache.html

プログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 ！

以上がWeChat ミニプログラムを最適化するにはどうすればよいですか?あなたの知らない最適化知識の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。