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関数呼び出しの最適化の詳細な説明

推薦する

React を使って小さなプログラムを書くための Remax フレームワークのコンパイル プロセス分析 (推奨)

Remax は、実行時に構文制限のないソリューションを採用した React を使用して小規模なプロ...

TypeScript におけるインターフェースと型メソッドの正しい使用例

目次序文インタフェースタイプ付録: インターフェースとタイプの違い要約する序文インターフェースとタイ...

CSSでフォントアイコンを使用する方法をお教えします

まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...

シェル スクリプトを使用してワンクリックで MySQL 5.7.29 をインストールする方法

この記事は51CTOブログの著者wjw555の作品を参照しています。スクリプトの内容: vim イン...

CSS 要素の非表示の原則と display:none および visibility:hidden

1. CSS 要素の非表示<br />CSS では、要素を非表示にする (つまり、画面の...

React Hooks の一般的な使用シナリオ (概要)

目次1. ステートフック1. 基本的な使い方2. 更新3. 合併を実現する4. 遅延初期化状態5. ...

MySQL 5.7.18 winx64 のインストールと設定方法のグラフィックチュートリアル

圧縮パッケージのインストールは、mysql-5.7 以降、大幅に変更されました。この記事では、mys...

Node.js のフロントエンドとバックエンドのインタラクションによるユーザーログインの実装の実践

目次1. プロジェクト要件次にコーディングを始める1. フロントエンドページを作成する(CSSスタイ...

MySQL 最適化 query_cache_limit パラメータの説明

クエリキャッシュ制限query_cache_limit は、単一のクエリで使用できるバッファ サイズ...

Baidu サイト検索が https をサポートしていない問題の解決策 (テスト済み)

最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...

MySQL マスタースレーブレプリケーションと読み取り書き込み分離の詳細な説明

記事マインドマップマスター/スレーブ レプリケーションと読み取り/書き込み分離を使用する理由は何です...

JavaScript データのフラット化の詳細な説明

目次フラット化とは何か再帰トストリング減らすアンダーコア_.平坦化_。連合_。違い要約するフラット化...

nuxt.js 複数の環境変数の設定

目次1. はじめに2. シナリオ3. 環境を整える3.1 環境変数の挿入4. 最後に1. はじめに一...