WeChatアプレットの世界的な状況の詳細な説明

序文

WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用して、ページ間、ページとコンポーネント間、コンポーネント間など、ページとコンポーネント間で情報を渡すことができます。しかし、globalData の下の変更を時間内に知ることはできません。新しいアプレットを作成する公式のデフォルトのケースでは、UserInfo を取得するためのネットワーク操作が遅延し、そのために多くの不要なコードが記述されます。公式のケースでもこのような状況がありますが、開発中にも同様の状況に遭遇すると思います。この記事では、このような問題を解決する方法を紹介します。

需要分析

次のような状況は、グローバル状態管理なしで実行する一般的な操作であると考えられます。

Page および Component の OnLoad および Attached ライフサイクルフック関数では、既存のプロパティの一部が App の globalData からページまたはコンポーネントのデータに割り当てられます。
最初は、非同期ネットワークリクエストがいくつかあり、取得したデータはグローバルに使用されます。最初は、リクエストが成功し、関連する属性が globalData に追加されるまで、globalData には関連する属性がない可能性があります。この時点で、globalData から Page への割り当て操作は完了している可能性がありますが、未定義です。したがって、Page および Component に割り当てる前に、さらに判断する必要があります。 1 つまたは 2 つだけであれば非常に簡単ですが、複数のページや複数の変数を割り当てる必要がある場合は、拒否して簡単な方法を探すことになると思います。
ページやコンポーネント内の globalData から割り当てられた変数の中には、判断や表示に使用されるだけでなく、ユーザーの操作に基づいて変数の値を変更する必要があるものもあります。この場合、他のページや他のコンポーネント内の同じ変数も一律に変更する必要があります。

上記の状況では、次の要件を提示できます。

ページまたはコンポーネントが最初に読み込まれるときに、できるだけ早く globalData からページまたはコンポーネントの必要なプロパティを取得して割り当てます。
globalData の特定の属性の変更をタイムリーに取得し、その後の関連する操作を実行します。
ページまたはコンポーネントの値を変更すると、他のページやコンポーネントにも同じ変更が加えられます。

以下は必要な元のコードです

// アプリ.js
アプリ（{
 グローバルデータ: {
  ユーザー情報: null
 },
 起動(){
  wx.getSetting({
   成功: res => {
    res.authSetting['scope.userInfo']){
     wx.getUserInfo({
      成功: res => {
       this.globalData.userInfo = res.userInfo
       // 要件 2
       if (this.userInfoReadyCallback) {
        // このコールバック関数が存在するということは、ページがonLoadを実行したことを意味します
        // userInfo は取得されず、ページのデータに割り当てられます // このコールバック関数を実行し、対応するページに割り当てます this.userInfoReadyCallback(res)
       }
      }
     })
    }
   }
  })
 }
})

// ページ/インデックス/index.js
const アプリ = getApp()
ページ（{
 // ...
 onLoad(オプション){
  // 要件 1
  定数 userInfo = app.globalData.userInfo
  ユーザー情報 && this.setData({useInfo})
  // 要件 2
  // app.globalData.userInfoが取得されない場合
  // wx.getUserInfo のコールバック関数がまだ実行されていないことを意味します // アプリにコールバック関数を追加し、これをコールバック関数 userInfo にバインドします || app.userInfoReadyCallback = res => {
   this.setData({
    ユーザー情報: res.userInfo
   })
   app.userInfoReadyCallback を削除します
  }
 }
})

これは公式のミニプログラムケースのコードです。少しだけ変更しました。ここでは要件 2 のみを示しています。globalData 属性は何も変更されない状態から、ページによって設定されたコールバック関数を時々実行する状態に変わりますが、毎回コールバック関数の実行を実装しているわけではありません。要件 3 のコードはより複雑なので、ここでは示していません。

上記の要件を実装するために必要なコードについて考えてみましょう。要件 1 と 3 では、ページ、コンポーネントの初期化、globalData プロパティが変更されたときに主に this.setData メソッドの使用が必要であることがわかりますが、this が指すインスタンスは毎回異なります。要件 2 は、コールバック関数が存在し、コールバック関数の this も対応するインスタンスを指し、globalData プロパティが変更されたときにこれらのコールバック関数が実行されることが必要です。
時間点の観点から見ると、ページとコンポーネントが初期化されるときと、globalData プロパティが変更されるときの 2 つがあります。最初の時間点では、アプレットのライフサイクルのフック関数である onLoad と attached を考慮し、これら 2 つの時間点で this.setData 操作を実行できます。 globalData 属性の変更はすべて、私たち自身の主導またはユーザーイベントによって発生します。つまり、この操作は globalData の特定の属性に対するイベントと見なすことができ、このイベントが発生すると、記述されたいくつかのコールバック関数が実行されます。

操作オブジェクトの観点から見ると、これらは基本的にページとコンポーネントの this のインスタンスであり、app.globalData も同様です。

需要の理論的要約

要約すると、初期化中に this.setData を自動的に実行し (手動で実行する必要はありません)、これを保存し (イベントの実行時に対応するインスタンスを指すために使用されます)、対応するコールバック関数をイベントとして保存し (イベントは実行されていない関数です)、必要に応じてこのイベントをアクティブにトリガーすることができます。次に、プロセス全体を通して、初期化フック関数をハイジャックし、自動割り当てを実行し、対応するイベントを保存し、イベントトリガーインターフェースを公開するために、アプリ、ページ、コンポーネントにまたがる変数が必要であることがわかります。

本から学ぶことは常に浅はかであり、それをよく知るためには実践しなければならない

これを見ると、グローバル状態管理についてすでにある程度理解していると思いますが、それをどのように実装すればよいのでしょうか?ここで強調したいのは、この記事と私が述べたアイデアを読んで、ある程度理解できたのであれば、自分でコードを実装してみる必要があるということです。良いか悪いかに関わらず、実装しないよりはずっとましですし、自分で実装することでより多くのものを得ることができるかもしれません。上記のケースでは、あまりよく理解していない人のために、簡単な実装コードを示しています。次回は関連するコード実装の説明を書く予定です。

// アプリ.js
クラスストア{
 コンストラクタ(アプリ){
 this['イベント'] = {}
 this.app = アプリ
 }
 autoSet(グローバルデータ、インスタンス){
 定数インスタンスデータ = {}
 for (let prop of globalData){
  インスタンスデータ[prop] = this.app.globalData[prop]
  const コールバック = (新しい値) => {
  インスタンス.setData({[prop]: newValue})
  instance.watch[prop] && instance.watch[prop].call(インスタンス、新しい値)
  }
  this.addEvent(プロパティ、コールバック)
  インスタンス.setData(インスタンスデータ)
  コールバック(インスタンスデータ[prop])
  インスタンスの削除.watch
  インスタンス.globalDataを削除する
 }
 }
 addEvent(イベント名、コールバック){
 this.event[イベント名] = this.event[イベント名] || []
 this.event[イベント名].push(コールバック)
 }
 ディスパッチ(イベント名、新しい値){
 this.app.globalData[イベント名] = 新しい値
 this.event[イベント名] && this.event[イベント名].forEach(item => item(newValue))
 }
}

アプリ（{
 グローバルデータ: {
  ユーザー情報: null
 },
 起動(){
  // 新しいインスタンスを作成し、グローバル呼び出し用のミニプログラムアプリに保存します。this.store = new Store(this)
  wx.getSetting({
   成功: res => {
    res.authSetting['scope.userInfo']){
     wx.getUserInfo({
      成功: res => {
       // userInfo を取得したら、イベントをトリガーします this.store.dispatch('userInfo', res.userInfo)
      }
     })
    }
   }
  })
 }
})

// ページ/インデックス/index.js
const アプリ = getApp()
ページ（{
 // ...
 データ： {
  ユーザー名: null
 },
 // globalData配列はglobalData: ['userInfo']を自動的に割り当てるために使用されます。
 // 対応する globalData 属性を監視し、コールバック関数を設定します。watch: {
  ユーザー情報(ユーザー情報){
  console.log('userInfo が更新されました', this)
  this.setData({ユーザー名: ユーザー情報.ニックネーム})
  }
 },
 onLoad(オプション){
  // この globalData とインスタンスを渡し、インスタンスに必要なデータを設定してイベントを作成します app.store.autoSet(this.globalData, this)
  // 他にやりたいことがあれば...
 }
})

上記のコードはフック関数を乗っ取るのではなく、関数の先頭でバインドされた関数を追加で実行するだけであり、ページが破棄されたときにメモリを解放する操作はありません。まだ最適化できる部分はたくさんありますが、それについては次回説明します。

要約する

WeChatミニプログラムの世界的な状況に関するこの記事はこれで終わりです。ミニプログラムの世界的な状況に関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様が今後も123WORDPRESS.COMを応援してくれることを願っています。

以下もご興味があるかもしれません: