微信小程序監(jiān)聽用戶登錄事件的實現(xiàn)方法

更新時間：2019年11月11日 11:46:56 作者：madRain

這篇文章主要介紹了微信小程序監(jiān)聽用戶登錄事件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近在開發(fā)小程序，小程序既需兼顧針對新用戶的內(nèi)容預(yù)覽，又要為注冊用戶提供服務(wù)，簡單梳理下，基本需求如下：

小程序共三個tab頁，所有用戶都可以瀏覽首頁內(nèi)容，了解我們可以提供的優(yōu)質(zhì)服務(wù)；
進入其他兩個頁面之后，如果用戶沒有登錄，那就顯示登錄按鈕，如果登錄了，則顯示服務(wù)內(nèi)容；
用戶在一個頁面登陸之后，全局生效。

就這么個看起來很簡單的需求，也經(jīng)過了如下迭代：

將登錄狀態(tài)和憑據(jù)存儲在 App.globalData.authorize 中，每個需要授權(quán)的頁面 onload 生命周期檢查 App.globalData.authorize.authorized ，為 true 時渲染服務(wù)內(nèi)容，為 false 則顯示登錄按鈕；
但如果打開了需要授權(quán)的頁面 A 但是沒有登錄，再打開頁面 B 登錄，這時候回到 A 頁面，登錄按鈕赫然在眼，這是因為 A 頁面的 onload 回調(diào)函數(shù)只執(zhí)行了一次；
為了能在 A 頁面及時共享 B 頁面登錄后的狀態(tài)，在 A 頁面的 onshow 生命周期里再獲取了一次登錄狀態(tài)，但這樣一來，打開 A 頁面的時候，會出現(xiàn)短暫的白屏，用戶甚至有可能看到按鈕變成服務(wù)內(nèi)容的整個過程。

翻遍小程序 API 文檔，也沒有發(fā)現(xiàn)用于監(jiān)聽登錄的生命周期，就算有也用不了，因為我們有著自己的賬號體系，服務(wù)端認(rèn)證完畢才算真正的登錄成功。

所以我決定自己包裝原有的 Page 函數(shù)，添加一個 onauth 生命周期——

首先是自定義登錄事件的觸發(fā)與監(jiān)聽，官方的EventChannel 需要向后兼容，橫豎是個訂閱回調(diào)，那我還不如自己擼一個得了：

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

/**
 * @const EMPTY_HANDLER
 * @desc 空事件回調(diào)，被取消事件將被指向此函數(shù)
 */
const EMPTY_HANDLER = () => {};

/**
 * @const eventSet - 事件監(jiān)聽函數(shù)集
 */
const eventSet = {
 authorize: []
};

/**
 * @function emit - 發(fā)送全局事件
 * @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 - 事件回調(diào)函數(shù)
 */
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 - 取消對某事件的監(jiān)聽
 * @param {String} type - 事件類型 
 * @param {Number} id - 需要取消的事件ID，即 registEvent 所返回的值
 */
export const off = (type, id) => {
 if (!eventSet[type]) return

 eventSet[type][id - 1] = EMPTY_HANDLER

 // 如果某類事件已經(jīng)全被取消的話，將其置為空數(shù)組
 const noListener = !eventSet[type].reduce((pre, cur) => (cur && cur === EMPTY_HANDLER) || pre, false);
 if (noListener){
  eventSet[type] = []
 };
}

然后是對 Page 函數(shù)的魔改：

/**
 * @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
  }
 }

 /**
  * 仍舊調(diào)用原始的 Page 方法
  */
 Page(Object.assign(
  options,
  {
   onLoad: function () {
    const { authorize, userInfo } = getApp().globalData;

    // 執(zhí)行開發(fā)者期望的 onload 事件
    onLoad instanceof Function && onLoad.bind(this)(arguments);

    // 頁面初始化時，若已經(jīng)授權(quán)，直接執(zhí)行授權(quán)回調(diào)
    // 否則將授權(quán)回調(diào)注冊為授權(quán)事件回調(diào)
    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 => {
    // ...這里省略了一些復(fù)雜的登錄流程
    getApp().globalData.authorize = {
      authorized: true
    };
    emit('authorize', res);
  }
})

然后，在兩個需要登錄的 tab 頁引入 AuthPage 替換原有的 Page 函數(shù)，并在配置項里寫 onAuth 回調(diào)，就可以監(jiān)聽登錄事件了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: