微应用开发
Sun-Panel V2 已全面支持微应用生态,构建开放、高效的插件化系统。
TIP
文档还在不断完善,如果您参与开发,请添加作者微信(95302870),作者拉你进开发者群,方便有问题随时沟通。
什么是微应用
微应用是 Sun-Panel V2 推出的插件化功能,开发者可以像开发普通 Web 应用一样开发微应用,然后发布到 Sun-Panel 供所有用户使用。
微应用支持两种展示形态:
| 形态 | 描述 | 使用场景 |
|---|---|---|
| 小部件 | 卡片形式,嵌入导航页 | 天气、时间、快捷工具等小组件 |
| 页面 | 窗口形式,独立页面 | 完整功能的可视化工具或管理界面 |
- 页面组件:窗口形式,独立页面,可通过页面类型配置为小部件配置页面或首页面
- 小部件组件:通过分组工具栏中的「添加小部件」添加,显示在导航页内
技术架构
微应用基于 Web Components 和 Lit 框架构建:
- Web Components - 浏览器原生标准,真正的框架无关
- Lit - Google 维护的轻量级 Web Components 框架,高效易用
为什么选择这套技术?
- 框架无关:可与 Vue、React 或无框架环境无缝协同
- 高性能:接近原生的渲染性能
- 样式隔离:Shadow DOM 天然隔离,样式互不干扰
核心特性
- 组件化架构,开发简单高效
- 多尺寸支持:1×1、1×2、2×1、2×2、2×4、1×full 等
- 配置化开发,配置文件管理应用信息
- 深色模式自动适配
- 平台 API 支持:网络请求、数据节点、本地缓存
- 多用户数据隔离
开发规范
通用规则
- 必须使用官方提供 API 进行网络请求,禁止私自使用
fetch、ajax、axios等原生方法 - 禁止访问其他微应用的数据(localStorage、IndexedDB 等)
- 禁止以任何形式收集用户数据
- 禁止使用
eval等危险方法 - API 中提供了一些基础方法,尽量使用 API 的方式来实现这些功能,如果 API 中没有提供你所需的功能,可以联系作者说明应用场景,看后期是否添加相关 API 。
- 一个微应用建议最多包含 3 个组件,功能过多建议拆分多个微应用
小部件额外规则
- 禁止浮动层超出卡片范围
- 禁止监听右键菜单触发