本篇文章給大家分享的是有關怎么在微信小程序中監聽用戶登錄事件，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

員工經過長期磨合與沉淀，具備了協作精神，得以通過團隊的力量開發出優質的產品。創新互聯堅持“專注、創新、易用”的產品理念，因為“專注所以專業、創新互聯網站所以易用所以簡單”。公司專注于為企業提供成都網站設計、成都做網站、微信公眾號開發、電商網站開發，小程序開發，軟件按需制作等一站式互聯網企業服務。

需求如下：

• 小程序共三個tab頁，所有用戶都可以瀏覽首頁內容，了解我們可以提供的優質服務；

• 進入其他兩個頁面之后，如果用戶沒有登錄，那就顯示登錄按鈕，如果登錄了，則顯示服務內容；

• 用戶在一個頁面登陸之后，全局生效。

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

• 將登錄狀態和憑據存儲在 App.globalData.authorize 中，每個需要授權的頁面 onload 生命周期檢查 App.globalData.authorize.authorized ，為 true 時渲染服務內容，為 false 則顯示登錄按鈕；

• 但如果打開了需要授權的頁面 A 但是沒有登錄，再打開頁面 B 登錄，這時候回到 A 頁面，登錄按鈕赫然在眼，這是因為 A 頁面的 onload 回調函數只執行了一次；

• 為了能在 A 頁面及時共享 B 頁面登錄后的狀態，在 A 頁面的 onshow 生命周期里再獲取了一次登錄狀態，但這樣一來，打開 A 頁面的時候，會出現短暫的白屏，用戶甚至有可能看到按鈕變成服務內容的整個過程。

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

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

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

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

以上就是怎么在微信小程序中監聽用戶登錄事件，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創新互聯行業資訊頻道。

本文標題：怎么在微信小程序中監聽用戶登錄事件
文章URL：http://www.2m8n56k.cn/article19/jjdsgh.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、標簽優化、自適應網站、電子商務、品牌網站設計、域名注冊

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯