WeChatアプリケーションは、ユーザー登録イベントの実現方法を監督する。

最近、小さいプログラムを開発していますが、新しいユーザーのコンテンツのプレビューを兼ねて、ユーザー登録のためにサービスを提供します。簡単に整理して、基本的な需要は以下の通りです。

ウィジェットは全部で3つのtabページで、すべてのユーザーはトップページの内容を閲覧できます。私たちが提供できる良質なサービスを理解します。

は他の2つのページに入った後、ユーザーがログインしていない場合はログインボタンを表示し、ログインしたらサービス内容を表示する。

ユーザは一つのページにログインした後、グローバルに有効になります。

このような単純な需要についても、次のような反復が行われている。

は登録状態と証明書をApp.global Data.authorizeに記憶し、各許可が必要なページonloadライフサイクルチェックApp.global Data.authorize.authorizedに登録し、trueの時にサービス内容をレンダリングし、falseの場合は登録ボタンを表示する。

ですが、もし許可が必要なページAを開けたら、ログインしていません。またページBを開いてログインします。この時、Aページに戻り、登録ボタンが目に見えます。これはAページのワンロードコールバック関数が一回だけ実行されたからです。

AページでBページ登録後の状態をタイムリーに共有するために、Aページのオンショーライフサイクルでもう一度ログイン状態を取得しましたが、これによってAページを開くと、短いホワイトスクリーンが現れ、ユーザーはボタンがサービスの中身になる過程を見ることができます。

小さいプログラムのAPIのドキュメントをひっくり返しても、登録を傍受するためのライフサイクルが見つかりませんでした。あっても使えません。自分のアカウントシステムを持っていますので、サービス端末の認証が終わったら、本当の登録が成功します。
だから私は自分でオリジナルのPage関数を包装することを決定して、1つのonauth生命の周期を添加します――
まず、カスタム登録イベントのトリガと傍受です。公式のEventChanelは後方互換性があります。とにかく購読フィードバックです。自分で絞るよりはいいです。

/**
 * @file utils/event.js
 */

/**
 * @const EMPTY_HANDLER
 * @desc      ，            
 */
const EMPTY_HANDLER = () => {};

/**
 * @const eventSet -        
 */
const eventSet = {
 authorize: []
};

/**
 * @function emit -       
 * @param {String} type -     
 * @param {Object} event -     
 */
export const emit = (type, event) => (eventSet[type] || []).forEach(item => item(Object.freeze(event)));

/**
 * @function on -       
 * @param {String} type -     
 * @param {Function} callback -       
 */
export const on = (type, callback) => {
 if (!eventSet[type]) {
  eventSet[type] = [];
 }

 if (!callback instanceof Function) {
  throw new Error('callback must be a Function!');
 }

 return eventSet[type].push(callback)
};

/**
 * @function off -          
 * @param {String} type -      
 * @param {Number} id -        ID，  registEvent      
 */
export const off = (type, id) => {
 if (!eventSet[type]) return

 eventSet[type][id - 1] = EMPTY_HANDLER

 //               ，       
 const noListener = !eventSet[type].reduce((pre, cur) => (cur && cur === EMPTY_HANDLER) || pre, false);
 if (noListener){
  eventSet[type] = []
 };
}

そして、Page関数に対する魔改です。

/**
 * @file utils/auth-page.js
 */

import { on } from '/event.js';

export const AuthPage = function(options){
 const { onAuth, data, onLoad } = options;
 const userInfo = {
  nickName: '', //   
  account: '', //   
  avatar: { //   
   small: '',
   middle: '',
   large: ''
  },
  title: 'student', //   
  phoneNumber: 0, //     
  gender: 'secret', //   
  'class': '' //   
 }

 if (options.data){
  options.data.authorized = false;
  options.data.userInfo = userInfo
 } else {
  options.data = {
   authorized: false,
   userInfo: userInfo
  }
 }

 /**
  *         Page   
  */
 Page(Object.assign(
  options,
  {
   onLoad: function () {
    const { authorize, userInfo } = getApp().globalData;

    //          onload   
    onLoad instanceof Function && onLoad.bind(this)(arguments);

    //       ，     ，        
    //                 
    if (onAuth instanceof Function){
     if (authorize.authorized){
      onAuth.bind(this)({
       type: 'authorize',
       authorized: true,
       token: authorize.token,
       userInfo: userInfo
      });
     } else {
      on('authorize', onAuth.bind(this));
     }
    }
   }
  }
 ));
}

最後に、コンポーネント登録の中で：

import { emit } from '../../utils/event.js';

wx.login({
  success: res => {
    // ...              
    getApp().globalData.authorize = {
      authorized: true
    };
    emit('authorize', res);
  }
})

そして、2つの登録が必要なtabページでAuthPageを元のPage関数に置き換え、設定項目にオンAuthフィードバックを書くと、登録イベントを傍受することができます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。