XYNotes本地笔记本插件接口文档

插件接口文档V2.0.0

新版本插件开发,与旧版本1.0.0的原理一样,主要在1.0.0的版本上修改创建插件形式,类似于vue模板的export部分,以对象的函数形式插入自定义函数,同时把options和pages配置传入,避免每个hook都需要插入插件id。

有什么问题可以点击链接加入群聊【XY可解方程】

源代码:https://github.com/xygengcn/XYNotes

插件内置原理

插件的生命周期

-> 用户新建插件

-> 插入本地保存数据

-> 安装插件

-> 刷新程序

-> 程序初始化

-> 插件数据插入DOM

-> 运行到特定生命周期激活自定义函数 ,原理是执行函数的prototype对象

-> 卸载插件

-> 刷新

-> 删除移除本地数据

程序使用插件步骤

步骤一,在main函数加上plugins

此步骤是全局化插件对象,将window.vue指向内置vue全局对象
import plugins from "@/plugins/index.js";
Vue.prototype.$plugins = plugins;
new Vue({
    render: h => h(App),
    created() {
        window.vue = this;
        window.$plugins = plugins;
    }
}, ).$mount('#app')

步骤二、在程序created加上

//此步骤是读取本地插件数据,判断状态是否插入插件链接
this.$plugins.init(this.plugins);

步骤三、 自定义hook生命周期

//例如在路由切换时执行

plugins.hook("beforeEach", [to, from]);

//就会执行新建插件的beforeEach()函数

创建插件教程

使用教程

为了自定义拓展笔记本功能,例如实现网络同步化,开发本地插件,开发更多功能,支持XYNotes-1.2.0以上版本。

接口
插件id需与程序新建插件id保持一致
$plugins.extend(`plugin配置`)
plugin配置格式
属性类型名称说明
idstring插件id必填
optionsstring/object插件自定义配置选填,配置页面可修改,具体看实例
pagesobject插件自定义页面选填,点击设置即可看到,具体看实例
Hook接口function自定义详细看Hook接口文档
配置实例
var plugin = {
     id: "test",//必备属性,对应插件的id一致,不一致无法获取配置
     options:{
        //下面配置自定义,可以定义两种方式,对象类型和字符串类型
        api: {
            label: "接口地址",//配置界面显示名称
            value: "localhost"//默认值
        },
        type: "post"//默认值,名称与label相同
     },
    pages:{
        test:{//页面id
            name:"测试",
            html:"<h1>测试自定义页面</h1>"
        }
    },
    start(options) {
        console.log(options);//获取最新的options
        console.log(this);//vue对象
    },
    ...//更多接口看下列Hook列表
}
代码实例
$plugins.extend({
    id: "test",
    options: {
        name: {
            label: "名称",
            value: "XY笔记"
        },
        title: "hah",
        id: {
            label: "ID",
            value: "1234"
        }
    },
    pages: {
        test: {
            name: "测试",
            html: "<h2>1234</h2>"
        },
        test2: {
            name: "测试2",
            html: "滚啊"
        }
    },
    start(e) {
        console.log(e);
        console.log(this);
    },
    enterPage(op, page) {
        page("test", "真的吗")
    },
})

函数this

自定义函数this指向全局vue,可以调用vue相关数据,包括vuex,vue-router等

Hook接口

Hook参数参数说明名称备注
start(option)默认插件属性,来回路由信息初始化时可用于初始化数据
beforeEach(option,to, from)object类型,来回路由信息路由切换时可用于记录路由记录
afterEach(option,to, from)object类型,来回路由信息路由切换后可用于获取切换记录
saved(option,note)object类型,正在修改的笔记信息自动保存时可用于笔记上传网络
enterPage(option,page)function类型,(页面id,html字符串)进入自定义页面可用于修改自定义页面

ui支持调用(element UI)

Notification 通知

用法:https://element.faas.ele.me/#/zh-CN/component/notification

MessageBox 弹框

用法:https://element.faas.ele.me/#/zh-CN/component/message-box

Message 消息提示

用法:https://element.faas.ele.me/#/zh-CN/component/message