做微信小程序和网站那个简单,公司网站建设进度,上海网站推广费用,网站制作全包价格1. 动机
最近在开发小程序#xff0c;小程序既需兼顾针对新用户的内容预览#xff0c;又要为注册用户提供服务#xff0c;简单梳理下#xff0c;基本需求如下#xff1a;
小程序共三个tab页#xff0c;所有用户都可以浏览首页内容#xff0c;了解我们可以提供的优质服…1. 动机
最近在开发小程序小程序既需兼顾针对新用户的内容预览又要为注册用户提供服务简单梳理下基本需求如下
小程序共三个tab页所有用户都可以浏览首页内容了解我们可以提供的优质服务进入其他两个页面之后如果用户没有登录那就显示登录按钮如果登录了则显示服务内容用户在一个页面登陆之后全局生效。
就这么个看起来很简单的需求也经过了如下迭代
将登录状态和凭据存储在 App.globalData.authorize 中每个需要授权的页面 onload 生命周期检查 App.globalData.authorize.authorized 为 true 时渲染服务内容为 false 则显示登录按钮但如果打开了需要授权的页面 A 但是没有登录再打开页面 B 登录这时候回到 A 页面登录按钮赫然在眼这是因为 A 页面的 onload 回调函数只执行了一次为了能在 A 页面及时共享 B 页面登录后的状态在 A 页面的 onshow 生命周期里再获取了一次登录状态但这样一来打开 A 页面的时候会出现短暂的白屏用户甚至有可能看到按钮变成服务内容的整个过程。
翻遍小程序 API 文档 也没有发现用于监听登录的生命周期就算有也用不了因为我们有着自己的账号体系服务端认证完毕才算真正的登录成功。 所以我决定自己包装原有的 Page 函数添加一个 onauth 生命周期——
2. 事件总线
首先是自定义登录事件的触发与监听官方的 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]) returneventSet[type][id - 1] EMPTY_HANDLER// 如果某类事件已经全被取消的话将其置为空数组const noListener !eventSet[type].reduce((pre, cur) (cur cur EMPTY_HANDLER) || pre, false);if (noListener){eventSet[type] []};
}
有关订阅-回调的知识请自行百度简而言之就是一个杂志亭订阅者订阅了某款杂志当发布者发布该款杂志的时候杂志亭就将杂志送到订阅者手里双方需要约定的就是杂志名称一致也就是 on方法和 emit 方法的第一个参数。
3. 定义AuthPage
然后是对 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(...arg) {const { authorize, userInfo } getApp().globalData;// 执行开发者期望的 onload 事件onLoad instanceof Function onLoad.bind(this)(...arg);// 页面初始化时若已经授权直接执行授权回调// 否则将授权回调注册为授权事件回调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));}}}}));
}
4. 触发登录事件
自定义的 onAuth 生命周期里订阅了一个 authorize 事件登录之后需要发布相应的事件来触发其回调触发的函数需要写在登录组件里
import { emit } from ../../utils/event.js;wx.login({success: res {// ...这里省略了一些复杂的登录流程getApp().globalData.authorize {authorized: true};emit(authorize, res);}
})
然后在两个需要登录的 tab 页引入 AuthPage 替换原有的 Page 函数并在配置项里写 onAuth 回调就可以监听登录事件了。 补充
5.适用范围与最佳实践
5.1 适用范围
部分页面有权限控制未登录用户与登录用户可以查看的内容不一样或者不同级别的用户看到的内容不一样除了触发登录事件的页面其他页面的权限修改过程不能直接呈现给用户如果没有这个限制的话判断登录这事可以在 onShow 函数里完成登录机制仅作为一个组件嵌入需要登录入口的所有页面而不是单独做一个登录页因为跳转页面这个操作肯定是直接呈现给用户的了AuthPage 不会过多且切换权限的时候不会有非常耗时的操作。
5.2 最佳实践 // 页面 AAuthPage({onLoad: function(){const { authorized } getApp().globalData.authorize;let showText 你还没有登录;if(authorized){showText 你已经登陆了;}this.setState({ showText});},onAuth: function(){this.setState({showText: 你已经登陆了})}});// 页面 B AuthPage({onLoad: function(){const { authorized } getApp().globalData.authorize;if(authorized){this.setState({showLogin: false, // 隐藏登录组件showContent: true // 展示内容组件})} else {this.setState({showLogin: true, // 展示登录组件showContent: false // 隐藏内容组件})}},onAuth: function(option){this.setState({showLogin: false, // 隐藏登录组件showContent: true // 展示内容组件})}});
这样写的好处就是用户未登陆的时候也可以看到 A 页面的一些内容使得用户可以初步了解应用内容用户在 B 页面则会看到登录入口登录之后 B 页面的登陆组件就被隐藏取代的是应用内容而此时 A 页面其实已经在后台悄悄更新了用户对此是毫无感知的(除非后台更新的页面内容过多导致页面卡顿)。
6 总结
由于先前没有给定用例需要理解整个流程才能上手编码导致“懂的人不屑用不懂的人不会用”的尴尬所以亡羊补牢增补了使用范围和用例。 仅供参考
