文章目录前言插件化的核心思路定义插件接口PluginManager插件生命周期管理实战写一个天气插件核心页面动态渲染插件 UI动态加载按需引入踩坑记录小结前言做 App 做到一定阶段总会遇到一个问题功能越堆越多包体积越来越大每次发版都要全量打包。更头疼的是产品经理说下周加个 XX 功能你一看代码耦合得一塌糊涂改一处牵一全身。这时候就该考虑插件化架构了——核心框架保持稳定功能以插件形式动态加载、热插拔。今天聊聊怎么在 HarmonyOS 里把这套东西跑通。插件化的核心思路插件化说白了就三件事定义接口、发现插件、加载执行。核心 App 只负责提供运行环境和插件管理能力具体功能全部由插件实现。插件之间互相隔离互不影响想加就加想卸就卸。类比一下核心 App 是个工具箱插件就是里面的扳手、螺丝刀、钳子。工具箱本身不做任何修理工作但它知道怎么收纳和取出工具。定义插件接口所有插件必须遵循统一的接口契约这是插件化的基石。// plugin/IPlugin.etsexportinterfaceIPlugin{// 插件唯一标识id:string// 插件名称name:string// 插件版本version:string// 初始化核心 App 传入上下文onInstall(context:PluginContext):void// 激活插件onActivate():void// 停用插件onDeactivate():void// 卸载清理onUninstall():void// 返回插件的主 UI 组件构建器getEntryUI():WrappedBuilder[PluginContext]}exportinterfacePluginContext{// 核心 App 提供的能力getApplicationContext():Context// 插件间通信总线eventBus:EventBus// 共享存储服务storage:PluginStorage}这里的关键是getEntryUI()返回一个WrappedBuilder这样每个插件可以注入自己的 UI 到核心框架里。PluginManager插件生命周期管理这是整套架构的中枢负责注册、发现、加载、卸载。// plugin/PluginManager.etsimport{IPlugin,PluginContext}from./IPlugintypePluginStateinstalled|active|inactive|errorinterfacePluginEntry{plugin:IPlugin state:PluginState loadTime:number}exportclassPluginManager{privateplugins:Mapstring,PluginEntrynewMap()privatecontext:PluginContextconstructor(context:PluginContext){this.contextcontext}// 注册插件不激活register(plugin:IPlugin):boolean{if(this.plugins.has(plugin.id)){console.warn(插件${plugin.id}已存在跳过注册)returnfalse}try{plugin.onInstall(this.context)this.plugins.set(plugin.id,{plugin,state:installed,loadTime:Date.now()})this.context.eventBus.emit(plugin:registered,{id:plugin.id})returntrue}catch(e){console.error(插件${plugin.id}注册失败:${e})returnfalse}}// 激活插件activate(id:string):boolean{constentrythis.plugins.get(id)if(!entry)returnfalsetry{entry.plugin.onActivate()entry.stateactivethis.context.eventBus.emit(plugin:activated,{id})returntrue}catch(e){entry.stateerrorreturnfalse}}// 停用插件deactivate(id:string):void{constentrythis.plugins.get(id)if(!entry||entry.state!active)returnentry.plugin.onDeactivate()entry.stateinactive}// 卸载插件uninstall(id:string):void{constentrythis.plugins.get(id)if(!entry)returnentry.plugin.onUninstall()this.plugins.delete(id)this.context.eventBus.emit(plugin:uninstalled,{id})}// 获取所有已激活的插件getActivePlugins():IPlugin[]{constresult:IPlugin[][]this.plugins.forEach((entry){if(entry.stateactive){result.push(entry.plugin)}})returnresult}getPlugin(id:string):IPlugin|undefined{returnthis.plugins.get(id)?.plugin}}这个 Manager 用了 Map 来做插件注册表每个插件有明确的状态流转installed → active ⇌ inactive → uninstalled。实战写一个天气插件来看看具体插件怎么写。以天气插件为例// plugins/WeatherPlugin.etsimport{IPlugin,PluginContext}from../plugin/IPluginBuilderfunctionWeatherUI(ctx:PluginContext){Column(){Text( 天气插件).fontSize(20).fontWeight(FontWeight.Bold)Text(北京 · 晴 · 28°C).fontSize(16).margin({top:12})Button(刷新天气).margin({top:16}).onClick(async(){ctx.eventBus.emit(weather:refresh,{})})}.padding(20).width(100%)}exportclassWeatherPluginimplementsIPlugin{idplugin.weathername天气version1.0.0privatectx:PluginContext|nullnullonInstall(context:PluginContext):void{this.ctxcontext}onActivate():void{console.info(天气插件已激活)}onDeactivate():void{console.info(天气插件已停用)}onUninstall():void{this.ctxnull}getEntryUI():WrappedBuilder[PluginContext]{returnwrapBuilder(WeatherUI)}}核心页面动态渲染插件 UI核心 App 的页面通过遍历已激活的插件来动态渲染// pages/ToolBoxPage.etsimport{PluginManager}from../plugin/PluginManagerimport{WeatherPlugin}from../plugins/WeatherPluginimport{CalculatorPlugin}from../plugins/CalculatorPluginimport{TranslatePlugin}from../plugins/TranslatePluginEntryComponentstruct ToolBoxPage{StatepluginManager:PluginManagernewPluginManager(this.buildContext())StateactiveIds:string[][]aboutToAppear():void{// 注册所有可用插件this.pluginManager.register(newWeatherPlugin())this.pluginManager.register(newCalculatorPlugin())this.pluginManager.register(newTranslatePlugin())// 默认全部激活this.pluginManager.activate(plugin.weather)this.pluginManager.activate(plugin.calculator)this.pluginManager.activate(plugin.translate)this.refreshList()}buildContext():PluginContext{return{getApplicationContext:()getContext(this),eventBus:newEventBus(),storage:newPluginStorage()}}refreshList():void{this.activeIdsthis.pluginManager.getActivePlugins().map(pp.id)}build(){Column(){Text(工具箱).fontSize(24).margin({bottom:16})ForEach(this.activeIds,(id:string){constpluginthis.pluginManager.getPlugin(id)if(plugin){Column(){plugin.getEntryUI()(this.buildContext())}.margin({bottom:12}).borderRadius(12).backgroundColor(#F5F5F5)}})}.padding(16).width(100%)}}核心页面完全不关心具体插件的实现细节它只负责把已激活的插件 UI 渲染出来。这就是插件化的精髓——核心稳定扩展开放。动态加载按需引入上面的例子是静态注册。如果想做真正的动态加载可以利用 HarmonyOS 的动态 import 能力asyncfunctionloadPluginDynamically(manager:PluginManager,modulePath:string):Promisevoid{try{constmoduleawaitimport(modulePath)constPluginClassmodule.defaultconstpluginnewPluginClass()asIPlugin manager.register(plugin)manager.activate(plugin.id)}catch(e){console.error(动态加载插件失败:${modulePath},${e})}}配合 HAR 模块可以把每个插件打包成独立的 HAR 包主 App 按需下载和加载。这样就能实现用户用到什么功能才下载什么插件大幅减小初始包体积。踩坑记录实际落地插件化有几个坑要留意接口版本兼容。插件接口升级后老版本插件可能跑不了。建议在PluginContext里加个apiVersion字段插件注册时做版本校验。插件间通信。别让插件直接互相引用全部走 EventBus 中转。这样插件之间完全解耦替换任何一个都不影响其他。内存泄漏。插件卸载时一定要调onUninstall做清理特别是定时器、事件监听这些不然内存会一直涨。小结插件化架构不是银弹小项目用了反而增加复杂度。但如果你的 App 功能模块多、迭代频繁、需要支持定制化分发比如不同客户给不同功能组合插件化就是救星。我的建议是从项目初期就把核心框架和业务能力分开哪怕一开始不做动态加载光把接口定义好、模块边界划清楚后期要往插件化演进也很容易。最怕的是一开始全部耦合在一起后面想拆都拆不动。
