MorJS 插件示例 插件源代码示例

2024-01-28 09:16 更新
  • 如果插件需要有设置参数,请务必将 optionsinterface export 出去,方便可能需要集成的使用方引用
  • 插件需要声明为一个 class,同时实现 MorJSPlugin 这个 interface
  • 插件必须要有 apply 函数
  • 插件调用方不能保证 apply 函数里面的 this 指向,因此建议都 class 下面的方法都用箭头函数,避免 this 指向问题
  • hook 里面的监听函数必须用普通函数,因为在 hook 调用的时候会动态修改 this 指向,指向当前的 apppagecomponent 实例
import type { MorJSPlugin, MorJSHooks } from '@morjs/api'

// export 出去,方便使用方集成
export interface IRuntimePluginExampleOptions {}

export default class RuntimePluginExample implements MorJSPlugin {
  // 必须要有插件名字
  pluginName = 'RuntimePluginExample'

  options: IRuntimePluginExampleOptions

  /**
   * 根据插件特性决定是否需要开放选项配置
   */
  constructor(public options: IRuntimePluginExampleOptions = {}) {}

  /**
   * 必须要有 apply 函数
   * class 下面的方法用 arrow function
   */
  apply = (hooks: MorJSHooks): void => {
    // 注意,这里是 arrow function

    // hooks 里面包含上面生命周期列表中的所有hook
    // 请用 tap 来做 hook 的事件监听注册
    // 传入的插件执行函数必须是 function(){}, 因为会动态修改 this 指向
    hooks.appOnLaunch.tap(
      this.pluginName,
      function (
        this: tinyapp.IAppInstance<any>,
        options: tinyapp.IAppLaunchOptions
      ) {
        // 这里可以拿到对应生命周期里面的参数
        console.log(options)
      }
    )
  }
}


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号