鸿蒙动态导入实战

零、什么是动态导入动态导入并不是鸿蒙系统特有的而是TypeScript语言具有的特性。但是鸿蒙系统增加了一些特有规则因为鸿蒙系统存在HAR、HSP、HAP模块所以动态导入会有一些系统上的约束。这篇文章会详细的分享鸿蒙系统中 “怎么使用动态导入” 和 “为什么要使用动态导入” 。进入正题前先解决一个问题什么是动态导入既然有动态导入很正常就会联想到静态导入。日常中在代码文件开头使用import导入其他代码的方式就是静态导入例如以下代码导入一个User类用于承载用户信息。import{User}from./bean/BeanconstusernewUser()相比之下动态导入是在需要使用时才进行import通过传入文件路径来加载对应模块以下代码实现了与上面相同的逻辑constmoduleawaitimport(./bean/Bean)constusernewmodule.User()这篇文章并不是讲解黑科技在鸿蒙上的使用只是分享日常工作中 “动态导入” 的使用场景是完全遵循着官方文档进行操作。官方文档入口https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-dynamic-import一、动态导入有什么作用既然静态导入可以把代码文件导入达到 A 代码文件可以使用 B 代码文件中定义的类、方法、常量等为什么还需要动态导入呢一个东西的产生肯定是为了解决某些问题它可以解决以下的问题解决 HAR 循环依赖解决 ts 无法依赖 ets解决 Worker 内存隔离让 HAR 加载外部逻辑延时加载模块…接下来便一一分享每个问题是怎么处理的。二、解决 HAR 循环依赖在较为复杂的项目中一般都会对业务代码进行拆解放到不同的模块中只要拆分就会有不同层级的模块依赖高层模块对低层模块的依赖是单向的则不会有问题。但是同层级的模块如果要相互调用此时就会有模块的循环依赖问题而动态导入可以解决这一问题。上图 HarA 和 HarB 是同层级的两个 HAR 模块被上层模块HAP/HSP依赖。 HarA 和 HarB 有着下面各自的业务逻辑HarA 中的HarALogic.ets提供了一个sayHello方法classHarALogic{sayHello(name:string):string{Log.i(HarALogic,Hello,${name}!)returnHarALogic 已经执行完 Hello,${name}!}}exportconstharALogicnewHarALogic()HarB 中的HarBLogic.ets提供了一个sayHi方法classHarBLogic{sayHi(name:string):string{Log.i(HarBLogic,Hi,${name}!)returnHarBLogic 已经执行完 Hi,${name}!}}exportconstharBLogicnewHarBLogic()现在有一个场景HarA 模块需要调用HarBLogic的逻辑HarB 模块需要调用HarALogic的逻辑。如果静态导入则两个模块需要互相依赖然后在需要使用的地方导入文件但这会导致循环依赖的编译错误如下图所示。所以需要改为动态导入但在进行代码编写之前需要如下配置1、HAP 的 build-profile.json5 配置动态导入 HAR 模块时需要在 HAP 的build-profile.json5中配置runtimeOnly.packages声明哪些 HAR 包会被动态导入{apiType:stageMode,buildOption:{arkOptions:{runtimeOnly:{packages:[hara,harb]}}}}同时需要移除 HarA 和 HarB 在oh-package.json5中对彼此的静态依赖配置。如果不配置runtimeOnly.packages编译不会有任何的错误提示直到运行动态导入才会报找不到模块。2、模块导出逻辑// HarA 模块的 Index.etsexport{harALogic}from./src/main/ets/HarALogic// HarB 模块的 Index.etsexport{harBLogic}from./src/main/ets/HarBLogic3、代码调用// HarA 调用 HarBclassHarACallHarBLogic{asynccall():Promisestring{constharNameharbconstns:ESObjectawaitimport(harName)returnns.harBLogic.sayHi(江澎涌)}}// 调用上面的代码会输出// 54367 A01000/om.jian...ort/HarBLogic I Hi, 江澎涌!// 54367 A01000/om.jian...enceComponent I 【HarA 调用 HarB】msgHarBLogic 已经执行完 Hi, 江澎涌!// HarB 调用 HarAclassHarBCallHarALogic{asynccall():Promisestring{constharNameharaconstns:ESObjectawaitimport(harName)returnns.harALogic.sayHello(Jiang Peng Yong)}}// 调用上面的代码会输出// 54367 A01000/om.jian...ort/HarALogic I Hello, Jiang Peng Yong!// 54367 A01000/om.jian...enceComponent I 【HarB 调用 HarA】msgHarALogic 已经执行完 Hello, Jiang Peng Yong!三、解决 ts 无法依赖 ets在鸿蒙开发中如果你在.ts文件中使用import { xxx } from ./xxx.ets编译器会直接报错。但是通过动态导入 HAR 模块名.ts可以在运行时访问该 HAR 入口文件Index.ets导出的内容某种程度上也算是一种 “解决 ts 无法依赖 ets” 的方案吧。接下来演示如何在 ts 文件中导入 HarA 模块的 ets 文件并使用它。和平常的 HAR 模块一样在 HarA 模块的Index.ets导出了harALogic单例和User类两者均为 ets 文件export{harALogic}from./src/main/ets/HarALogicexport{User}from./src/main/ets/User然后在 HAP 中的 ts 文件例如示例中的TsFile.ts通过动态导入来使用 HarA 的 ets 代码exportclassTsFile{asynccallHarEtsFile(){constpathharaconstns:ESObjectawaitimport(path)constmsgns.harALogic.sayHello(小朋友)Log.i(TsFile,【callEtsFile】msg${msg})}// 调用后输出// 47860 A01000/om.jian...ort/HarALogic I Hello, 小朋友!// 47860 A01000/om.jian...import/TsFile I 【callEtsFile】msgHarALogic 已经执行完 Hello, 小朋友!asynccreateUserInfo(){constpathharaconstns:ESObjectawaitimport(path)constusernewns.User(小朋友,18)constinfouser.info()Log.i(TsFile,【createUserInfo】info${info})}// 调用后输出// 47860 A01000/om.jian...import/TsFile I 【createUserInfo】info你好我是小朋友。我今年18岁。}四、解决 Worker 内存隔离Worker 是鸿蒙中实现多线程的方式每个 Worker 拥有独立的内存空间。这意味着主线程中import加载的模块和创建的实例不会自动传递到 Worker 中。所以如果要在 Worker 内部使用某个模块必须在 Worker 内部自行加载。动态导入是 Worker 内部按照外部需求加载模块的核心手段主线程通过消息告诉 Worker 需要加载哪个模块Worker 内部通过await import(path)完成加载。这里借助JWorker库展示一下 Worker 加载外部逻辑的场景JWorker 是一套简单易用的基于鸿蒙 Worker 的双向 RPC 通讯机制。OHPM 的传送门https://ohpm.openharmony.cn/#/cn/detail/jworker1、先编写 Worker 文件并通过 JWorker 建立通讯 Channel// Worker 文件import{initJWorker,JWorkerChannel}fromjworkerimport{EntryServerChannel}from./channel/EntryServerChannelconstsubWorkerinitJWorker()JWorkerChannel(EntryChannel,newEntryServerChannel())通过 JWorker 的通讯 Channel 接收主 Worker 发送的信息进行动态加载模块和调用逻辑importUserBean方法是动态导入一个类并创建一个实例子 Worker 才能持有真正的 User 实例。在主 Worker 创建的实例子 Worker 因为内存隔离是无法获取的。importIdCreator方法是动态导入一个单例同样该单例和主 Worker 的单例也是内存隔离的。// EntryServerChannel exportclassEntryServerChannelextendsChannel{asynchandleMessage(methodName:string,data:Any){switch(methodName){caseimportUserBean:{try{constloadInfodataasLoadInfoconstmodule:Anyawaitimport(loadInfo.path)constusernewmodule[User]()Log.i(TAG,【importUserBean】user${JSON.stringify(user)}info${user.info()})}catch(e){Log.e(TAG,【importUserBean】e${e})}finally{break}}caseimportIdCreator:{try{constloadInfodataasLoadInfoconstmodule:Anyawaitimport(loadInfo.path)constidmodule[idCreator].obtain()Log.i(TAG,【importIdCreator】id${id})}catch(e){Log.e(TAG,【importIdCreator】e${e})}finally{break}}}}}// Bean.ts exportclassUser{name:string江澎涌height:number170weight:number122info():string{return你好我是${this.name}身高${this.height}厘米体重${this.weight}斤。}}// IdCreator.ts classIdCreator{privateid0obtain():number{returnthis.id}}exportconstidCreatornewIdCreator()2、在主 Worker 编写调用逻辑// 创建 Worker 并且构建通讯 Channelthis.jworkercreateJWorker(newworker.ThreadWorker(entry/ets/workerDynamicImport/EntryWorker.ets))this.entryClientChannelnewEntryClientChannel()this.jworker.addChannel(EntryChannel,this.entryClientChannel)// 发送 importUserBean 方法会让子 Worker 构建 Userthis.entryClientChannel.send(importUserBean,{path:../bean/Bean}asLoadInfo)// 会输出以下内容// 47860 A01000/om.jiang...erverChannel I 【importUserBean】loadInfo{path:../bean/Bean} user{name:江澎涌,height:170,weight:122} info你好我是江澎涌身高170厘米体重122斤。// 发送 importIdCreator 方法会让子 Worker 加载单例this.entryClientChannel.send(importIdCreator,{path:../utils/IdCreator}asLoadInfo)// 会输出以下内容// 47860 A01000/om.jiang...erverChannel I 【importIdCreator】loadInfo{path:../utils/IdCreator} id0值得注意在这个场景中因为IdCreator.ts是完全通过动态导入的编译器无法分析到不会将其编译因此需要在 HAP 的build-profile.json5文件中进行配置在runtimeOnly.sources中增加该文件具体如下{apiType:stageMode,buildOption:{sourceOption:{workers:[./src/main/ets/workerDynamicImport/EntryWorker.ets]},arkOptions:{runtimeOnly:{sources:[// 一定要添加这个否则会加载失败./src/main/ets/workerDynamicImport/utils/IdCreator.ts]}}}}如果不增加则会报以下错误7756 A01000/om.jiang...erverChannel E 【importIdCreator】eReferenceError: Cannot find module ../utils/IdCreator imported from entry/src/main/ets/workerDynamicImport/channel/EntryServerChannel.五、让 HAR 加载外部逻辑基于上一小节 “解决 Worker 内存隔离” 我们进一步分享一个场景——相机拍摄模块加载外部滤镜。我们封装了一个 Camera HAR 模块内部有一个 Worker 用于处理相机帧相机模块需要提供一个给外部添加滤镜的 API 业务才能根据自身需要开发不同效果。所以这里就涉及了两个问题相机的 Worker 和主线程内存隔离相机模块是基础模块被上层业务依赖所以无法通过oh-package.json5进行设置依赖而动态导入可以解决这些问题。动态加载无法加载 HAP 的代码所以为了能让 Camera HAR 可以动态加载到滤镜的代码首先需要建立一个 Filter HAR 模块同时让它依赖 Camera HAR 模块才能让业务滤镜实现Filter接口。 然后在 HAP 模块的build-profile.json5中配置filter。{apiType:stageMode,buildOption:{arkOptions:{runtimeOnly:{packages:[filter]}}}}Camera 模块定义了Filter接口同时需要定义一个描述滤镜加载信息的接口FilterInfo。exportinterfaceFilterInfo{module:string// HAR 模块名clazz:string// 类名}exportinterfaceFilter{setId(id:string)render()}在 Filter 模块中编写业务的滤镜需要实现Filter接口遵循 Camera 滤镜规范。import{Filter}fromcamera;exportclassMonoFilterimplementsFilter{privateid:string|undefinedundefinedprivatecount1setId(id:string):void{this.idid}render():void{Log.i(MonoFilter,【render】id${this.id}count${this.count})}}然后在 Filter 模块的Index.ets中将滤镜导出即可。最后业务只需要像以下方式addFilter添加滤镜信息即可。constcameranewCamera()camera.start()// 添加滤镜指定模块名和类名camera.addFilter({module:filter,clazz:MonoFilter})相机模块内部则需要通过 JWorker 发送信息到子 Worker 进行创建和添加至滤镜链。exportclassCameraServerChannelextendsChannel{privatefilterChain:FilterChainnewFilterChain()asynchandleMessage(methodName:string,data:Any){switch(methodName){caseCameraMessageType.AddFilter:{constfilterInfodataasFilterInfotry{constnsawaitimport(filterInfo.module)constfilternewns[filterInfo.clazz]()filter.setId(${CameraServerChannel.filterId})this.filterChain.addFilter(filter)}catch(e){Log.e(TAG,【AddFilter】添加失败 e${e})}break}caseCameraMessageType.FrameAvailable:{this.filterChain.render()break}}}}等到下次相机帧可用的时候调用滤镜链则会看到以下输出24494 A01000/om.jian...ServerChannel I 【AddFilter】模拟添加滤镜 filterInfo{clazz:MonoFilter,module:filter} 24494 A01000/om.jian...ServerChannel I 【FrameAvailable】模拟相机帧驱动 24494 A01000/om.jian...t/FilterChain I 【FrameAvailable】使用滤镜 filters 个数1 24494 A01000/om.jian...rt/MonoFilter I 【render】id0 count1六、延时加载模块除了解决上面提到的各种限制问题动态导入还有一个常见用途延迟加载 / 按需加载。静态导入会在应用启动时就加载所有导入的模块即使某些模块当前页面并不需要。动态导入则是在运行时按需加载可以减少首屏加载时间提升应用启动性能。以下代码展示了静态导入和动态导入的对比// 静态导入应用启动时就会加载 Bean 模块后续可以直接使用import{User}from../workerDynamicImport/bean/BeanconstusernewUser()Log.i(TAG,【静态导入】user${JSON.stringify(user)})// 动态导入运行到对应逻辑才会加载模块constmoduleawaitimport(../workerDynamicImport/bean/Bean)constusernewmodule.User()Log.i(TAG,【动态导入】user${JSON.stringify(user)})两种方式的区别静态导入import { User } from ...在文件顶部声明应用启动时即加载该模块无论用户是否会用到。动态导入await import(...)在需要时才执行模块在用户真正需要时才加载。对于功能模块较多的应用将非首屏必需的模块改为动态导入可以有效减少启动时的模块加载数量提升启动速度。七、写在最后这篇文章更多的是分享鸿蒙动态加载的具体使用场景算是对官方文档的一个真实场景扩充吧。如果你觉得文章对你有所帮助请给我一个赞并关注我吧。如果发现有哪些欠妥的地方请在留言区与我讨论我们共同进步。项目地址https://github.com/zincPower/DynamicImport-ohos/tree/main个人博客掘金https://juejin.im/user/5c3033ef51882524ec3a88ba/postscsdnhttps://blog.csdn.net/weixin_37625173公众号微信搜索 “江澎涌”