怎么在微信小程序中监听用户登录事件

　　介绍

本篇文章给大家分享的是有关怎么在微信小程序中监听用户登录事件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

需求如下:

<李>

小程序共三个标签页,所有用户都可以浏览首页内容,了解我们可以提供的优质服务,

<李>

进入其他两个页面之后,如果用户没有登录,那就显示登录按钮,如果登录了,则显示服务内容;

<李>

用户在一个页面登陆之后,全局生效。

就这么个看起来很简单的需求,也经过了如下迭代:

<李>

将登录状态和凭据存储在App.globalData。授权中,每个需要授权的页面>/* * 　　,* @file 跑龙套/event.js 　　,*//* * 　　,* @const  EMPTY_HANDLER 　　,* @desc 空事件回调,被取消事件将被指向此函数 　　,*/const  EMPTY_HANDLER =,(),=祝辞,{};/* * 　　,* @const  eventSet 作用;事件监听函数集 　　,*/const  eventSet =, { 　　,授权:[] 　　};/* * 　　,* @function  emit 作用;发送全局事件 　　,* @param {字符串},type 作用;事件类型 　　,* @param {对象},event 作用;事件对象 　　,*/export  const  emit =,(类型,事件),=祝辞,(eventSet[型],| |,[]).forEach (item =祝辞,项(Object.freeze(事件)));/* * 　　,* @function 提醒作用;注册全局事件 　　,* @param {字符串},type 作用;事件类型 　　,* @param {函数},callback 作用;事件回调函数 　　,*/export  const 提醒=,(类型,,回调),=祝辞,{ 　　(!,if  eventSet[型]),{ 　　eventSet才能[型],=,[]; 　　,} 　　 　　,if  (! callback  instanceof 函数),{ 　　throw 才能;new 错误(& # 39;callback  must  be  a 函数! & # 39;); 　　,} 　　 　　(类型),return  eventSet .push(回调) 　　};/* * 　　,* @function  off 作用;取消对某事件的监听 　　,* @param {字符串},type 作用;事件类型, 　　,* @param {号码},id 作用;需要取消的事件ID,即,registEvent 所返回的值 　　,*/export  const  off =,(类型,id),=祝辞,{ 　　(!,if  eventSet[型]),返回 　　 　　,eventSet[型][id 安康;1],=EMPTY_HANDLER 　　 　　,//如果某类事件已经全被取消的话,将其置为空数组 　　,const  noListener =, ! eventSet[型].reduce ((pre,, cur),=祝辞,(cur ,,, cur ===, EMPTY_HANDLER), | |,以前,,假); 　　,if  (noListener) { 　　eventSet才能[型],=,[] 　　,}; 　　}

然后是对页面函数的魔改:

/* * 　　,* @file 跑龙套/auth-page.js 　　,*/import {,,},得到& # 39;/event.js& # 39;; 　　 　　时间=export  const  AuthPage 功能(选项){ 　　,const  {onAuth,大敌;数据,onLoad },=,选项; 　　,const  userInfo =, { 　　,,绰号:& # 39;& # 39;,,//,昵称 　　账户才能:& # 39;& # 39;,,//,账号 　　,,《阿凡达》:{,//头像 　　,,,小:& # 39;& # 39; 　　,,,中间:& # 39;& # 39; 　　,,,大:& # 39;& # 39; 　　,,}, 　　标题:才能,& # 39;学生# 39;,,//,头衔 　　phoneNumber才能:0,,//,电话号码 　　性别:,才能& # 39;秘密# 39;,,//,性别 　　& # 39;才能类# 39;:,& # 39;& # 39;,//,班级 　　,} 　　 　　,if  (options.data) { 　　时间=options.data.authorized 才能;假; 　　options.data.userInfo 才能=用户信息 　　,}else  { 　　options.data 才能=,{ 　　授权:,,,假的, 　　,,用户信息:用户信息 　　,,} 　　,}/* * 　　*才能,仍旧调用原始的,Page 方法 　　,*/,页面(Object.assign ( 　　选择,才能 　　{才能 　　,,,onLoad: function  (), { 　　,,,const {授权的不同之处是,userInfo },=, getApp () .globalData; 　　 　　,,,//,执行开发者期望的,onload 事件 　　,,,onLoad  instanceof  Function ,,, onLoad.bind(这)(参数); 　　 　　,,,//,页面初始化时,若已经授权,直接执行授权回调 　　,,,//,否则将授权回调注册为授权事件回调 　　,,,if  (onAuth  instanceof 函数){ 　　,,,,if  (authorize.authorized) { 　　,,,,,onAuth.bind () { 　　,,,,,,类型:,& # 39;授权# 39; 　　,,,,,,授权:,真的, 　　,,,,,,令牌:,authorize.token, 　　,,,,,,用户信息:用户信息 　　,,,,,}); 　　,,,,},{else  　　,,,,,,(& # 39;授权# 39;,,onAuth.bind(这)); 　　,,,,} 　　,,,} 　　,,} 　　,,} 　　,)); 　　}

最后,在登录组件的里:

怎么在微信小程序中监听用户登录事件