首页 > 其他分享 >【HarmonyOS】低代码开发使用module中的自定义组件

【HarmonyOS】低代码开发使用module中的自定义组件

时间:2023-06-27 12:02:31浏览次数:34  
标签:自定义 创建 Module Library HarmonyOS Visual module 组件

 “Module是应用/服务的基本功能单元,包含了源代码、资源文件、第三方库及应用/服务配置文件,每一个Module都可以独立进行编译和运行。一个HarmonyOS应用/服务通常会包含一个或多个Module,因此,可以在工程中创建多个Module,每个Module分为Ability和Library两种类型。”

这个是HarmonyOS官网对Module模块的描述,我们可以在本地依赖库中创建组件,然后在主Module中使用。对于低代码开发我们可以创建一个”Visual Library“本地库。在本地库中创建我们的自定义的低代码组件。流程如下

第一步、创建”Visual Library”:

【HarmonyOS】低代码开发使用module中的自定义组件_Visual

右键主Module entry->New->Module,选择Visual Library点击Next输入Module Name,点击Finish完成Module创建。

【HarmonyOS】低代码开发使用module中的自定义组件_自定义组件_02

第二步,在Visual Library中创建自定义的Visual组件

自定义组件可以参考官网步骤:

1、选中支持的目录,选择File > New > Visual > Component,或者右击目录,选择New > Visual > Component

2、  在弹出的New Visual Component对话框中,输入自定义组件名称,单击Finish

然后我们可以根据我们的需要给这个组件添加一些内容,作为演示,我这边给这个组件添加了一个图片和按钮:

【HarmonyOS】低代码开发使用module中的自定义组件_自定义组件_03

完成自定义组件创建后,我们就可以在Visual Library的其他页面中拖拉拽我们刚刚创建好的这个自定义组件了。

【HarmonyOS】低代码开发使用module中的自定义组件_本地库_04

完成了上述的步骤后,我们还是不能在主Module Entry目录下使用我们创建的lib中的自定义组件,那该如何操作呢

第三步,导入创建完成的Visual Library包

导入Visual Libray包有两种方法,

第一种:通过ohpm命令导入

在安装新版DevEco Studio的时候系统会让我们安装对应的ohpm工具,我们可以在项目根目录下运行命令,导入Library包:ohpm install .\library\

注意这边使用的是文件目录 library是我们创建的Visual library包的名字

第二种:在项目级oh-package.json5的“dependencies”中添加"library": "file:library",点击同步sync完成library的添加

【HarmonyOS】低代码开发使用module中的自定义组件_自定义组件_05

完成上述操作后,我们就可以在entry中使用library中创建的组件了

【HarmonyOS】低代码开发使用module中的自定义组件_本地库_06

标签:自定义,创建,Module,Library,HarmonyOS,Visual,module,组件
From: https://blog.51cto.com/u_15687416/6562027

相关文章