欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年11月11日 11:46:56   作者:madRain  
這篇文章主要介紹了微信小程序監(jiān)聽(tīng)用戶登錄事件的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

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

就這么個(gè)看起來(lái)很簡(jiǎn)單的需求,也經(jīng)過(guò)了如下迭代:

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

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

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

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

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

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

/**
 * @const eventSet - 事件監(jiān)聽(tīng)函數(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)聽(tīng)
 * @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í)行開(kāi)發(fā)者期望的 onload 事件
    onLoad instanceof Function && onLoad.bind(this)(arguments);

    // 頁(yè)面初始化時(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);
  }
})

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

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

相關(guān)文章

  • layui內(nèi)置模塊layim發(fā)送圖片添加加載動(dòng)畫的方法

    layui內(nèi)置模塊layim發(fā)送圖片添加加載動(dòng)畫的方法

    今天小編就為大家分享一篇layui內(nèi)置模塊layim發(fā)送圖片添加加載動(dòng)畫的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-09-09
  • js 公式編輯器 - 自定義匹配規(guī)則 - 帶提示下拉框 - 動(dòng)態(tài)獲取光標(biāo)像素坐標(biāo)

    js 公式編輯器 - 自定義匹配規(guī)則 - 帶提示下拉框 - 動(dòng)態(tài)獲取光標(biāo)像素坐標(biāo)

    這篇文章主要介紹了js公式編輯器 - 自定義匹配規(guī)則 - 帶提示下拉框 - 動(dòng)態(tài)獲取光標(biāo)像素坐標(biāo)的方法,,需要的朋友可以參考下
    2018-01-01
  • Servlet實(shí)現(xiàn)文件上傳,可多文件上傳示例

    Servlet實(shí)現(xiàn)文件上傳,可多文件上傳示例

    本篇文章主要介紹了Servlet實(shí)現(xiàn)文件上傳,可多文件上傳示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-12-12
  • JavaScript?對(duì)象的四種方式比較詳解

    JavaScript?對(duì)象的四種方式比較詳解

    本文主要介紹了JavaScript?對(duì)象的四種方式比較詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • 談?wù)刬mpress.js初步理解

    談?wù)刬mpress.js初步理解

    impress.js 是國(guó)外一位開(kāi)發(fā)者受 Prezi 啟發(fā),采用 CSS3 與 JavaScript 語(yǔ)言完成的一個(gè)可供開(kāi)發(fā)者使用的表現(xiàn)層框架(演示工具)。感興趣的朋友跟著小編一起學(xué)習(xí)吧
    2015-09-09
  • 基于Three.js實(shí)現(xiàn)3D玉兔效果的示例代碼

    基于Three.js實(shí)現(xiàn)3D玉兔效果的示例代碼

    2022年中秋佳節(jié)即將來(lái)臨,中秋節(jié)是我們國(guó)家的傳統(tǒng)節(jié)日。而中秋與玉兔又往往會(huì)聯(lián)系在一起,本文將用Threejs做一只會(huì)動(dòng)的3D玉兔,感興趣的可以了解一下
    2022-08-08
  • event對(duì)象獲取方法總結(jié)在google瀏覽器下測(cè)試

    event對(duì)象獲取方法總結(jié)在google瀏覽器下測(cè)試

    Event 對(duì)象代表事件的狀態(tài),比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài),Event對(duì)象的獲取方法如下,感興趣的朋友可以參考下
    2013-11-11
  • Echarts自定義地圖和添加圖標(biāo)代碼示例

    Echarts自定義地圖和添加圖標(biāo)代碼示例

    這篇文章主要給大家介紹了關(guān)于Echarts自定義地圖和添加圖標(biāo)的相關(guān)資料,項(xiàng)目中經(jīng)常會(huì)遇到需要渲染echarts地圖的情況,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-09-09
  • BOM之navigator對(duì)象和用戶代理檢測(cè)

    BOM之navigator對(duì)象和用戶代理檢測(cè)

    navigator對(duì)象現(xiàn)在已經(jīng)成為識(shí)別客戶端瀏覽器的事實(shí)標(biāo)準(zhǔn),navigator對(duì)象是所有支持javascript的瀏覽器所共有的。本文將詳細(xì)介紹navigator對(duì)象和用戶代理檢測(cè)。下面跟著小編一起來(lái)看下吧
    2017-02-02
  • 小程序server請(qǐng)求微信服務(wù)器超時(shí)的解決方法

    小程序server請(qǐng)求微信服務(wù)器超時(shí)的解決方法

    這篇文章主要介紹了小程序server請(qǐng)求微信服務(wù)器超時(shí)的解決方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-05-05

最新評(píng)論