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配置格式

配置实例

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接口

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