Skip to content

微应用开发

Sun-Panel V2 已全面支持微应用生态,构建开放、高效的插件化系统。

TIP

文档还在不断完善,如果您参与开发,请添加作者微信(95302870),作者拉你进开发者群,方便有问题随时沟通。

什么是微应用

微应用是 Sun-Panel V2 推出的插件化功能,开发者可以像开发普通 Web 应用一样开发微应用,然后发布到 Sun-Panel 供所有用户使用。

微应用支持两种展示形态:

形态描述使用场景
小部件卡片形式,嵌入导航页天气、时间、快捷工具等小组件
页面窗口形式,独立页面完整功能的可视化工具或管理界面
  • 页面组件:窗口形式,独立页面,可通过页面类型配置为小部件配置页面或首页面
  • 小部件组件:通过分组工具栏中的「添加小部件」添加,显示在导航页内

技术架构

微应用基于 Web ComponentsLit 框架构建:

  • Web Components - 浏览器原生标准,真正的框架无关
  • Lit - Google 维护的轻量级 Web Components 框架,高效易用

为什么选择这套技术?

  • 框架无关:可与 Vue、React 或无框架环境无缝协同
  • 高性能:接近原生的渲染性能
  • 样式隔离:Shadow DOM 天然隔离,样式互不干扰

核心特性

  • 组件化架构,开发简单高效
  • 多尺寸支持:1×1、1×2、2×1、2×2、2×4、1×full 等
  • 配置化开发,配置文件管理应用信息
  • 深色模式自动适配
  • 平台 API 支持:网络请求、数据节点、本地缓存
  • 多用户数据隔离

开发规范

通用规则

  • 必须使用官方提供 API 进行网络请求,禁止私自使用 fetchajaxaxios 等原生方法
  • 禁止访问其他微应用的数据(localStorage、IndexedDB 等)
  • 禁止以任何形式收集用户数据
  • 禁止使用 eval 等危险方法
  • API 中提供了一些基础方法,尽量使用 API 的方式来实现这些功能,如果 API 中没有提供你所需的功能,可以联系作者说明应用场景,看后期是否添加相关 API 。
  • 一个微应用建议最多包含 3 个组件,功能过多建议拆分多个微应用

小部件额外规则

  • 禁止浮动层超出卡片范围
  • 禁止监听右键菜单触发

快速开始

Released under the MIT License.