WeChatミニプログラムのすべてのページがログインされていることを確認する方法

WeChatミニプログラムのすべてのページがログインされていることを確認する方法

現状

WeChat ミニプログラムには、ホームページ、個人ページ、いくつかのリストページ、詳細ページなどがあり、これらのページのほとんどは共有できます。共有ページが別のユーザーによって開かれた場合、そのページはどのようにしてそのユーザーがログインしていることを確認できますか?

インターネット上には、リクエストのカプセル化にインターセプションを追加するソリューションが多数あります。トークンがない場合は、続行する前にログイン リクエストを呼び出してトークンを取得します。

このソリューションに問題はありません。ただ、1 点だけ注意してください。ページが複数のリクエストによって同時にトリガーされると、すべてのリクエストがインターセプトされた後、それらは配列に配置されます。トークンを正常に取得した後、配列を反復処理して 1 つずつリクエストします。

しかし、コンビニチェーンのアプリのように要件がもう少し複雑な場合は、ほとんどのページにストアが必要です(ストアに基づいて現在の店舗の商品の在庫や価格などを取得する必要があるため)。このストアは、現在の場所に基づいてバックエンドインターフェースを呼び出すことで取得されます。このとき、リクエストにカプセル化するのは面倒すぎます。

解決

まず、ログイン、位置情報の取得、ページ リクエストが非同期であることに気付きました。ページ リクエストがログインと位置情報の取得の後に行われるようにする必要がありますが、ページごとに記述すると保守性が悪くなります。したがって、これを行うためのメソッドを抽出できます。

コードは次のようになります:

const アプリ = getApp()
ページ({
  データ: {
    ログ: []
  },
  オンロード() {
    app.commonLogin(()=>{
        // ページリクエストを処理する })
  }
})

ここで問題は解決したように思えますが、もう一度考えてみましょう。各ページの onShareAppMessage の処理を​​統一するなど、さらにやりたいことがありますが、ページごとに再度記述したくないので、各ページのウォッチを自分で実装したい場合は、どうすればよいでしょうか。

さらなる解決策

WeChat アプレットでは、各ページが Page() であることがわかります。そのため、このページの外側にシェルを追加し、このページを置き換える MyPage を作成できます。さっそく、コードを示します。

tool.js 関連コード

/**
   * プロセスマージパラメータ */
  handlePageParamMerge(引数) {
    let numargs = arg.length; // 渡されたパラメータの値を取得します。
    データを {} とします
    ページを{}にします
    (引数にixを入れる) {
      アイテム = arg[ix]とする
      if (item.data && typeof (item.data) === 'object') {
        データ = Object.assign(データ、アイテム.データ)
      }
      if (item.methods && typeof (item.methods) === 'object') {
        ページ = Object.assign(ページ、アイテム.メソッド)
      } それ以外 {
        ページ = Object.assign(ページ、アイテム)
      }
    }
    page.data = データ
    戻るページ
  }

  /***
   * ページメソッドとデータをマージします。{data:{}、methods:{}} または {data:{}、a:{}、b:{}} と互換性があります。
   */
  マージページ() {
    this.handlePageParamMerge(引数) を返します。
  }

  /**
   * コンポーネントパラメータのマージ処理 */
  ハンドルCompParamMerge(引数) {
    let numargs = arg.length; // 渡されたパラメータの値を取得します。
    データを {} とします
    オプションを {} にします
    プロパティを {} にします
    メソッドを {} にします
    comp = {} とします。
    (引数にixを入れる) {
      アイテム = arg[ix]とする
      // コンポーネントの初期データをマージします if (item.data && typeof (item.data) === 'object') {
        データ = Object.assign(データ、アイテム.データ)
      }
      // コンポーネントのプロパティリストをマージします if (item.properties && typeof (item.properties) === 'object') {
        プロパティ = Object.assign(プロパティ、item.properties)
      }
      // 結合されたコンポーネントのメソッドのリスト if (item.methods && typeof (item.methods) === 'object') {
        メソッド = Object.assign(メソッド、item.methods)
      }
      if (item.options && typeof (item.options) === 'object') {
        オプション = Object.assign(オプション、item.オプション)
      }
      comp = Object.assign(comp, アイテム)
    }
    comp.data = データ
    comp.options = オプション
    comp.properties = プロパティ
    comp.methods = メソッド
    返品コンプ
  }

  /**
   * コンポーネント ミックスイン {プロパティ: {}、オプション: {}、データ:{}、メソッド: {}}
   */
  マージコンポーネント() {
    this.handleCompParamMerge(引数) を返します。
  }

  /***
   * ウォッチでページを合成 */
  新しいページ() {
    オプション = this.handlePageParamMerge(引数)
    それを = これとする
    アプリを getApp() にします

    //グローバルクリックログイン判定を追加 if (!options.publicCheckLogin){
      options.publicCheckLogin = 関数 (e) {
        ページを getCurrentPages() にします
        ページ = pages[pages.length - 1]とします。
        データセット = e.currentTarget.dataset とします
        コールバックを null にする

        //コールバックメソッドを取得する if (dataset.callback && typeof (page[dataset.callback]) === "function"){
          コールバック = ページ[データセット.コールバック]
        }
        // console.log('コールバック>>', コールバック, app.isRegister())
        //ログインするかどうかを判定する if (callback && app.isRegister()){
          コールバック(e)
        }
        それ以外{
          wx.navigateTo({
            url: '/pages/login/login'
          })
        }
      }
    }

    const { onLoad } = オプション
    options.onLoad = 関数 (引数) {
      options.watch && that.setWatcher(this)
      onLoad && onLoad.call(this, arg)
    }

    const { onShow } = オプション
    options.onShow = 関数 (引数) {
      if (options.data.noAutoLogin || app.isRegister()) {
        onShow && onShow.call(this, arg)
        //ページ埋め込み app.ga({})
      }
      それ以外 {
        wx.navigateTo({
          url: '/pages/login/login'
        })
      }
    }

    ページに戻る(オプション)
  }

  /**
   * 時計などでコンポーネントを合成します */
  新しいコンポーネント() {
    オプション = this.handleCompParamMerge(引数)
    それを = これとする
    const { ready } = オプション
    options.ready = 関数 (引数) {
      options.watch && that.setWatcher(this)
      準備完了 && ready.call(this, arg)
    }
    コンポーネント(オプション)を返す
  }

  /**
    * リスナーを設定する */
  setWatcher(ページ) {
    data = page.data; とします。
    watch = page.watch; とします。
    Object.keys(watch).forEach(v => {
      let key = v.split('.'); // ウォッチ内の属性を '.' の配列に分割します。let nowData = data; // nowData にデータを割り当てます。
      for (let i = 0; i < key.length - 1; i++) { // 最後の要素を除く、キー配列の要素を走査します。
        nowData = nowData[key[i]]; // nowDataをそのキー属性オブジェクトにポイントします}

      lastKey = key[key.length - 1]とします。
      // key==='my.name'、nowData===data['my']===data.my、lastKey==='name' と仮定します。
      let watchFun = watch[v].handler || watch[v]; // ハンドラの有無にかかわらず互換性あり let deep = watch[v].deep; // deepが設定されていない場合は未定義です
      this.observe(nowData, lastKey, watchFun, deep, page); //nowDataオブジェクトのlastKeyを監視する
    })
  }

  /**
   * 属性を監視し、監視機能を実行する */
  観察(obj, キー, watchFun, ディープ, ページ) {
    var val = obj[キー];
    // deep が true であり、val が空でないこと、typeof val==='object' であることを確認します (配列内の値の変更にも deep 監視が必要です)
    if (deep && val != null && typeof val === 'object') {
      Object.keys(val).forEach(childKey => { // valオブジェクトの下の各キーを走査します
        this.observe(val, childKey, watchFun, deep, page); // 監視関数を再帰的に呼び出す})
    }
    var that = this;
    Object.defineProperty(obj, キー, {
      設定可能: true、
      列挙可能: true、
      設定: 関数 (値) {
        if (val === 値) {
          戻る
        }
        // ページ オブジェクトを呼び出し、関数内の this ポインターを変更して、this.data がデータ内のプロパティ値にアクセスできるようにします。watchFun.call(page, value, val); // value は新しい値、val は古い値です。val = value;
        if (deep) { // ディープモニタリングの場合は、オブジェクトのプロパティを監視するためにオブジェクトを再度リッスンします。
          that.observe(obj、key、watchFun、deep、page);
        }
      },
      取得: 関数 () {
        戻り値:
      }
    })
  }

ページコード:

app.tool.newPage({
  データ: {
    // 自動ログインなし: false
  },
  onShow: 関数() {
    //ここにページリクエストロジックを記述します}
}

やっと

このコードは長い間オンラインで実行されています。ツール内の newPage パッケージは、必要に応じて追加できます。つまり、ここでは考え方を 1 つ紹介しているだけです。もっと良い考え方があれば、ぜひ共有してください。

これで、WeChat ミニプログラムがどのようにしてすべてのページのログインを確実にするかについてのこの記事は終了です。WeChat ミニプログラムがどのようにしてページのログインを確実にするかについての関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatミニプログラム - WeChatログイン、WeChat支払い、テンプレートメッセージの詳細な説明
  • WeChatミニプログラムのログインプロセスの詳細な紹介
  • WeChatアプレットログイン登録機能実装コード
  • WeChatアプレットが顔認識ログインのサンプルコードを実装
  • WeChat アプレットは WeChat ログインを呼び出して、OpenID と Java をサーバー例として取得します
  • WeChat アプレット自動ログイン PHP ソースコード例 (ソースコードのダウンロード)
  • WeChatアプレット認証ログインと各認証インスタンスコードの確認
  • WeChatアプレットコードをスキャンしてウェブサイトにログインし、分析を実行します
  • WeChatアプレット開発ユーザー認証ログインの詳細な説明

<<:  折りたたまれたテーブル行要素のバグ

>>:  Mysql関数呼び出しの最適化の詳細な説明

推薦する

MySQL デッドロック ルーチン: 一意のインデックスの下でのバッチ挿入順序の不一致

序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...

例によるMySql CURRENT_TIMESTAMP関数の分析

時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...

Windows Server 2008 のサーバー パフォーマンス監視に関するチュートリアル

次に、ログ管理、ログのアーカイブ、ログのトラブルシューティング、イベントの転送と収集のためのコンピュ...

innerHTML アプリケーション

ブランクのブログ: http://www.planabc.net/ innerHTML プロパティは...

Linuxプロセス監視と自動再起動の簡単な実装方法

目的: Linux では、さまざまな理由でサーバー プログラムがダンプされ、ユーザーの使用に影響する...

Vue+Elementでページング効果を実現

この記事の例では、ページング効果を実現するためのvue+Elementの具体的なコードを参考までに共...

Linux に nodejs 環境とパス構成をインストールするための詳細な手順

Linux に Node.js をインストールする方法は 2 つあります。1 つは簡単で、解凍して使...

Nginx コンパイル済み nginx - 新しいモジュールを追加

1. 既存のモジュールを表示する nginx の sbin ディレクトリに nginx の sbin...

MySQL で特定の親行のすべての子行を見つけるソリューション

序文注: テストデータベースのバージョンはMySQL 8.0ですテーブルを作成し、ユーザー scot...

Linux SecureCRT の文字化けの解決方法

SecureCRT が文字化けした文字を表示する状況を見てみましょう。例えば: ではリセットしてみま...

JSは5つ星の賞賛効果を達成

JS を使用してオブジェクト指向メソッドを実装し、JD.com の 5 つ星レビュー効果を実現します...

Webpack3+React16コード分割の実装

プロジェクトの背景最近、webpackのバージョンが古いプロジェクトがあります。 リーダー層では今の...

VMware仮想マシンでのLinuxのコピー&ペーストの詳細な説明

1. VMware Workstation 上の Linux: 1. ソースの更新(オプション) v...

Linux で MySQL データベースのインポートおよびエクスポート コマンドを実装する方法

1. mysqldump コマンドを使用してデータベースをエクスポートします (このコマンドのパスで...

MySQL 5.7.20 の解凍バージョンをインストールするための詳細な手順 (2 つの方法)

Windows 64ビットでのMySQLのインストールについて説明します。5.7以降、MySQLの...