WeChatアプレットはどうやってグローバル再読み込みを実現しますか?


背景:
業務の増加に伴って、私達のサーバーは大量のユーザーデータを計算しなければならなくて、ユーザーと顧客サービスの反応のページが正常に展示することができないことを招きます。開発にフィードバックしたら、サーバーの異常なエラーです。So、製品を見たいですが、どれぐらいのユーザーページが正常に展示されていませんか?
シナリオ:
  • バックエンドの人員は直接アリ雲のバックグランドでどれらのインターフェースの異常を調べに行きますか?
  • フロントエンドはサーバーのエラーページを作っています。この製品はウィジェットのバックグラウンドでこのページのPVが見られます。UV
  • 技術案
    業務が膨大なので、各ページに再ロードのロジックを加えることはできません。したがって、グローバルで再読み込みすることを初歩的に考慮します。
    解決すべき問題は何がありますか?
  • まず、ネットワーク要求に失敗したグローバル制御権が必要です。
  • は、ネットワーク失敗後、どのようにリロードページ(R)にジャンプするかを定義する必要があります(wx.redirectTo、wx.reLaunchまたは他の)
  • はエラーページの「再読み込み」をクリックして、どうやってエラーページ(E)に戻りますか?
  • はエラーページに遷移した後、どのようにデータを再ロードしますか?(すべての要求をPage.onShow()に入れますか?)
  • 、もしエラーページの前のインターフェース(P)からエラーページ(E)optionsにパスしたら、リロードページ(R)はどうなりますか?
  • クリックして再読み込みとリターンをします。効果は同じです。どうやって操作すればいいですか?
  • 実践の方法は以下の通りです。
    第一の問題:比較的によく解決して、私達はwx.requestに基づいてすでにfetchにカプセル化しました。fetchに基づいて、サーバが間違っているかどうかをレスポンスコードで判断できます。
    第二の問題:具体的なジャンプ方法はともかく、ジャンプのurlはどのように定義されているかについては、議論してみます。なぜかというと、私たちのアーキテクチャはパケット分割に関連しているからです。パケットローディングは私たちのコードがpagesの下にあるだけでなく、packageの下に置かれていることを意味します。
    これをもとに、私達はジャンプする時、urlは直接に'./serverErr/serverError'と書くことができますか?メインパケットの下では正常にジャンプできますが、パケット分けの下では、経路は「package/serverError/serverError」です。このようにジャンプするのは無理です。urlはルートディレクトリ下の経路であるべきです。だから'/pages/serverErr/serverError'
    経路を確認したら、私達はジャンプできます。wx.redirectTo(現在のページを閉じて、アプリケーション内のあるページにジャンプします)であれば、EをオフにしてRにジャンプし、再読み込みをクリックして、RをオフにしてEにジャンプします。このようなジャンプ経路は複雑で、ユーザーが体験しにくいです。そして、optionsのパラメータは逐次転送が必要です。wx.reLaunchは似ています。私たちは使っていますので、wx.navigateToを選びます。
    第三の問題:総合問題二の解釈は、Eに跳ね返って、wx.navigateBackを使います。
    第四の問題:Rからwx.navigateBackでEに戻ると、E.onShow()方法が起動されます。しかし、私たちはPage.onShow()に書いている以外に、Page.onLoadに書いているものもありますので、E.onLoad()を何とかして調整しなければなりません。
    皆さんはget CurrenentPages()については、この方法はあまり知られていません。公式定義は現在のページスタックを取得するために使用されています。実際には、このプロセスでは、現在のページの例を取得することができます。例としては、route(ページパス)options(ページ伝達パラメータ)data(ページ初期パラメータ)や各種function()などがあります。
    previous PageClassを利用してEの実例を得ることができます。E.optionsももらえます。もちろんE.onLoadも調整できます。
    
    util.js
    
    //       
    function currentPagePath() {
     let pageData = getCurrentPages()
     if (pageData.length >= 1) {
     let len = pageData.length - 1
     let data = pageData[len]
     return data.route
     } else {
     return ''
     }
    }
    
    //          
    function previousPageClass() {
     let pageData = getCurrentPages()
     if (pageData.length >= 2) {
     let len = pageData.length - 2
     let preClass = pageData[len]
     return preClass
     } else {
     return ''
     }
    }
    
    module.exports = {
     currentPagePath,
     previousPageClass
    }
    第5の問題:問題の4つの案に基づいて、私達はE.onLoad(E.options)を調整して私達のパラメータをフィードバックします。
    第六の問題:クリックして返して、ページのアンマウントに相当して、つまりR.onnUniload()を実行して、この時私達はE.onLoad(E.options)のこの方法を実行するだけで、optionsをパスして、E.onLoad()を呼び出してもいいです。
    しかし、再読み込みをクリックしてください。私たちは調wx.navigateBackです。この方法はR.onUniloadをも通ります。ちょっと悩んでいるかもしれません。リターンボタンを隠します。公式がこの方法を提供していないことが分かりました。R.onUniloadを禁止してもだめみたいです。R.onnUniload()はクリックして再ロードした後に実行されるので、ユーザーが再ロードをクリックしたかどうかを記録することができます。その後、私達は記録の行為を通じて、ユーザーがクリックして再ロードしても、R.onnUnload()をトリガします。E.onLoad(E.options)を実行しないならOKです。
    
    // pages/serverError/serverError.js
    
    import { previousPageClass } from '../../utils/util.js'
    
    let isClickReload = false
    
    Page({
    
     onLoad: function (options) {
     isClickReload = false
     },
     onUnload: function () {
     if(!isClickReload) {
      this.callbackParams()
     } 
     },
     /**
     *     
     */
     clickReload: function (e) {
     isClickReload = true
     wx.navigateBack()
     this.callbackParams()
     },
     //     ,    
     callbackParams: function () {
     let preOptions = previousPageClass().options
     previousPageClass().onLoad(preOptions)
     }
    })
    これですべての問題はほぼ解決されました。
    Demoコードを添付します。ご参考ください。
    締め括りをつける
    以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考学習価値を持ってほしいです。ありがとうございます。