💯 业务层自定义钩子(异步任务通知解决方案),支持各种小程序和Vue架构(uni-app、wepy、mpvue等)
export default {
name: 'Home',
onCreatedLogin() {
//登录成功(拿到token) && 页面初始化完成
//Tips:适用于某页面发送的请求依赖token的场景
},
onCreatedUserInfo() {
//页面初始化完成 && 获取用户信息完成
//Tips:适用于页面初始化时需要用到用户信息去做判断再走页面逻辑的场景
},
onMountedUserInfo() {
//dom渲染完成 && 获取用户信息完成
//Tips:适用于首次进入页面需要在canvas上渲染头像的类似场景
},
onReadyShow() {
//小程序内页面渲染完成 && 页面显示
//Tips:适用于需要获取小程序组件或者dom,并且每次页面显示都会执行的场景
},
};
//第一步,安装插件:
npm install spa-custom-hooks --save
//第二步,入口文件里注册插件:
import CustomHook from 'spa-custom-hooks';
const diyHooks = {
'UserInfo':{
name:'UserInfo',
watchKey: ['userinfo'],
deep: true,
onUpdate(val){
//userinfo里的nickName非空则表示命中此钩子
return !!val.nickName;
}
}
}
//1.vue架构的注册方式
import store from './store'
Vue.use(CustomHook ,diyHooks,store)
//2.原生小程序的注册方式
//提前定义globalData
const globalData = {
userinfo: {
nickName: ''
}
}
CustomHook.install(diyHooks,globalData)
//第三步,业务页面里使用插件(任何页面都可以使用,耦合度低,重复性代码少):
onLoadUserInfo(){
//可以渲染canvas了
renderCanvas();
}
//vue架构-main.js
import store from './store';
import CustomHook from 'spa-custom-hooks';
Vue.use(CustomHook, diyHooks, store);
//原生小程序架构-app.js
import CustomHook from 'spa-custom-hooks';
CustomHook.install(diyHooks, globalData);
{
//1.注册属性监听钩子
//注册的钩子单名,首字母大写
'UserInfo':{
//name,钩子全称,监听属性的话可以和上面的key一致,必填
name:'UserInfo',
//watchKey要监听的store里的属性名(相当于state.userinfo),属性监听钩子模式必填 string | Array<string>
watchKey: ['userinfo'],
//是否默认命中,非必填
hit: false,
//deep是否深度监听,非必填
deep: true,
//onUpdate属性改变时执行的callback,用来决定是否要命中此钩子,非必填,缺省值相当于返回了!!val
onUpdate(val){
//这里表示userinfo里含有nickName则命中此钩子。注意不可以异步return
return !!val.nickName;
}
},
//2.注册生命周期监听钩子
//注册的钩子单名,首字母大写
'BeforeMount':{
//name,要监听的原生钩子名,用来命中此钩子,必填
name:'beforeMount',
//destroy,相反的钩子名,用来取消命中,事件监听钩子必填
destroy:'destroyed',
//是否默认命中,非必填
hit: false,
//用来规定当和其他生命周期钩子同时满足条件时的执行顺序,数值小的先执行,可以参考hooks.js
weightValue: 4,
}
}
`on{UserInfo}{BeforeMount}{Login}{Position}...`; //所有注册好的钩子都可以随意搭配,排列顺序不影响钩子执行,都是 && 的关系
如果有什么好的建议欢迎提 issues 或者提 pr
喜欢的话点个 star