更新记录

1.2.5（2022-04-12） 下载此版本

1.支持原生小程序 2.vue架构下初始化钩子改为beforeCreate 3.修复原生小程序入口app.js内钩子不执行问题 4.修复业务代码报错会导致钩子执行多次问题

1.0.5（2021-03-18） 下载此版本

1.改变命中原生钩子的标识逻辑 2.添加demo二维码 3.文档添加hit属性、内置钩子的说明 4.添加小程序组件钩子Attached

1.0.3（2021-03-17） 下载此版本

1.补充npm信息 2.绕过mpvue的created钩子bug

平台兼容性

uni-app

其他

spa-custom-hooks

**简体中文 | [English](./README.EN.md)**

• spa-custom-hooks 是什么？
• 它有什么用？
• 常见应用场景
• 使用示例
• 注册参数说明
  • 注册CustomHook
  • diyHooks对象说明
• 钩子使用规则
• 已经内置的原生钩子
• Demo二维码
• 进群交流

spa-custom-hooks 是什么？

• 一个可以定制页面钩子的东西，你可以注册全局的异步任务，自己定义钩子的触发条件，满足条件时即可自动执行页面里相关的钩子。
• 支持和vue的原生钩子created，mounted等随意搭配使用。
• 支持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

//第二步，入口文件里注册插件：
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();
}

注册参数说明

注册CustomHook

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

diyHooks对象说明

{
    //1.注册属性监听钩子
    //UserInfo，钩子单名，首字母大写
    'UserInfo':{
        //name，钩子全称，监听属性的话可以和上面的key一致，必填
        name:'UserInfo',
        //watchKey要监听的store里的属性名（相当于$store.state.userinfo），属性监听钩子模式必填
        watchKey: 'userinfo',
        //是否默认命中,非必填
        hit: false,
        //deep是否深度监听，非必填
        deep: true,
        //onUpdate属性改变时执行的callback，用来决定是否要命中此钩子，非必填，缺省值相当于返回了!!val
        onUpdate(val){
            //这里表示userinfo里含有nickName则命中此钩子。注意不可以异步return
            return !!val.nickName;
        }
    },

    //2.注册事件监听钩子
    //BeforeMount，钩子单名，首字母大写
    'BeforeMount':{
        //name，原生钩子名，用来命中此钩子，必填
        name:'beforeMount',
        //destroy，相反的钩子名，用来取消命中，事件监听钩子必填
        destroy:'destroyed',
        //是否默认命中,非必填
        hit: false
    }
}

钩子使用规则

`on{UserInfo}{BeforeMount}{Login}{Position}...` //所有注册好的钩子都可以随意搭配，排列顺序不影响钩子执行，都是 && 的关系

已经注册好的生命周期钩子

Launch、Created、Load、Attached、Show、Mounted、Ready
//↓↓↓如需其他的钩子可自行注册↓↓↓（如果当前框架的某钩子和其对应的相反钩子跟如下配置不一致也需要手动注册，比如wepy有created但没有destroyed）

• 已注册的钩子详细配置
• diyHooks对象说明

Demo二维码

进群交流

如果有什么好的建议欢迎提issues或者提pr

喜欢的话点个star