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

員工經(jīng)過長(zhǎng)期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡(jiǎn)單”。公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、電商網(wǎng)站開發(fā)，小程序開發(fā)，軟件按需制作等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

需求如下：

• 小程序共三個(gè)tab頁，所有用戶都可以瀏覽首頁內(nèi)容，了解我們可以提供的優(yōu)質(zhì)服務(wù)；

• 進(jìn)入其他兩個(gè)頁面之后，如果用戶沒有登錄，那就顯示登錄按鈕，如果登錄了，則顯示服務(wù)內(nèi)容；

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

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

• 將登錄狀態(tài)和憑據(jù)存儲(chǔ)在 App.globalData.authorize 中，每個(gè)需要授權(quán)的頁面 onload 生命周期檢查 App.globalData.authorize.authorized ，為 true 時(shí)渲染服務(wù)內(nèi)容，為 false 則顯示登錄按鈕；

• 但如果打開了需要授權(quán)的頁面 A 但是沒有登錄，再打開頁面 B 登錄，這時(shí)候回到 A 頁面，登錄按鈕赫然在眼，這是因?yàn)?A 頁面的 onload 回調(diào)函數(shù)只執(zhí)行了一次；

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

翻遍小程序 API 文檔 ，也沒有發(fā)現(xiàn)用于監(jiān)聽登錄的生命周期，就算有也用不了，因?yàn)槲覀冇兄约旱馁~號(hào)體系，服務(wù)端認(rèn)證完畢才算真正的登錄成功。

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

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

/**
 * @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 - 事件對(duì)象
 */
export const emit = (type, event) => (eventSet[type] || []).forEach(item => item(Object.freeze(event)));

/**
 * @function on - 注冊(cè)全局事件
 * @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 - 取消對(duì)某事件的監(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] = []
 };
}

然后是對(duì) 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: '', // 賬號(hào)
  avatar: { // 頭像
   small: '',
   middle: '',
   large: ''
  },
  title: 'student', // 頭銜
  phoneNumber: 0, // 電話號(hào)碼
  gender: 'secret', // 性別
  'class': '' // 班級(jí)
 }

 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);

    // 頁面初始化時(shí)，若已經(jīng)授權(quán)，直接執(zhí)行授權(quán)回調(diào)
    // 否則將授權(quán)回調(diào)注冊(cè)為授權(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);
  }
})

以上就是怎么在微信小程序中監(jiān)聽用戶登錄事件，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文標(biāo)題：怎么在微信小程序中監(jiān)聽用戶登錄事件
文章URL：http://m.2m8n56k.cn/article19/jjdsgh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化、自適應(yīng)網(wǎng)站、電子商務(wù)、品牌網(wǎng)站設(shè)計(jì)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)