当前位置：首页 > news >正文

HarmonyOS组件/模板集成创新活动-元服务小云体重管理引入案例（步骤条UI组件）

news 2025/7/14 8:35:23

写在前面

哈喽友友们好久没有更新啦，今天我们一起看下鸿蒙官方组件库如何快速使用和好处。对于个人开发者而言，这个真的是太好了，因为这个组件库，UI库极大的弥补了，个人开发者缺少UX设计辅助。让个人开发者的作品也具备网感。当然也很大程度上节约了代码的开发。

这些组件库，大家可以理解为官方出品或者其他大佬们，贡献出来的静态har包，如果你有过多模块架构项目开发经验、三方库开发或者使用经验，那么使用这个就会很快上手，而且这个组件库是官方在运营不用担心har包作者跑路导致对上架项目的影响，所以可放心使用。

我们一起以华为官方出品的【步骤条】UI组件 UISteps为例，看下如何引用到项目中，结合具体的业务来控制步骤的展示。
在这里插入图片描述

在这里插入图片描述

这里分两种引入方式，

引入方式一、在编辑器的组件市场，点击按钮添加组件到工程

这类方式可能是大家下意识的操作，然后跟着组件自述文件中的指引，在项目根目录build-profile.json5 oh-package.json5添加对应模块名与路径。这个路径不用我们费脑筋去做绝对或者相对路径的写法。当你点击添加到工程时。工程级oh-package.json5已经添加了，并带有模块路径，cv到build-profile.json5文件中对应位置即可

项目级build-profile.json5已经有了。
示例截图如下：
在这里插入图片描述

然后在oh-package.json5
在这里插入图片描述

使用组件

按照其自述文件中的步骤走即可，

在这里插入图片描述

这里我的经验是，先cv 第一行，引入，这样可以看下前面的步骤是否有操作失误。如果这行不报错，这个组件算是引入成功了，接下来就是如何用。

我们把它当成一个组件库或API即可，耐心读一下这个组件的相关文档描述，也许读一遍就知道了，不用过多思考。说不定在文档底部就有作者的示例代码了。
在这里插入图片描述

在这里插入图片描述

当然示例代码是一定会有的，不然可能无法上架组件库。

通过上面的实力代码截图，我们可以了解到，这需要一个数组来表示全部步骤，需要一个number类型的变量，来表示实时的步骤下标索引。
再看下他们的类型，那么在我的【小云体重管理】业务我很熟，如何结合组件开发我大概了解了。

在这里插入图片描述

我的这个界面至少需要6步，那我就创建一个长度为6的数组，不够再补，多了再加，在需要的位置上添加这个UI代码

 UISteps({options:[{ title:'①',desc:'选择性别' },{ title:'②',desc:'输入身高体重年龄' },{ title:'③',desc:'选择饮食习惯' },{ title:'④',desc:'选择运动习惯' },{ title:'⑤',desc:'选择天数' },{ title:'⑥',desc:'一键云测' },],active: this.currentStep,titleFontSize:16,descFontSize:8,dividerSize:this.currentWidthBreakpoint== 'sm'?  '15%':'10%',})

仅上面一段我具体引用的代码仅仅 15行左右，就完成了这个地方的UI布局，以及内部处理逻辑。效率简直高到离谱。
那么如何实现步骤的一步步完成的操作变化呢？

步骤控制

控制下标的变化 active: this.currentStep ，我们在选择性别的逻辑中添加步骤0，即让下标变为0，在输入身高体重中让下标变为1.。。。。来逐渐完成步骤

首先我们定义步骤函数，这样做是为了能够便于自己和后续开发者清楚的明白他是哪一步需要调用哪一个函数。

 // 步骤函数-小组step0(){this.currentStep=0}step1(){this.currentStep=1}step2(){this.currentStep=2}step3(){this.currentStep=3}step4(){this.currentStep=4}step5(){this.currentStep=5}

在对应的状态变量下做一个监听去执行步骤下标的变化函数即可
在这里插入图片描述

在点击事件里放这个函数执行一次即可
在这里插入图片描述

引入方式二、ohpm 命令安装

哈哈为了不打断思路，我们放在后面说第二种引入方式，为什么建议看完每个组件库的预览图后，还有耐心详细看下组件的自述文件中的【快速开始】呢，说不定真的很快很方便安装了。哈哈没想到吧，这也是我们的良苦用心，因为我们只要熟练了方式一的引入方式，基本什么组件都能引入了，而只会在终端安装，容易让我们忽略编辑器做了什么工作，以及模块间关系，不便于进阶我们的开发能力。

如果是可以直接通过ohpm 命令安装的就可在终端直接执行即可，本期案例UISteps也是如此，如果你使用终端安装后没能成功引入，可检查下引入方式一中的两个工程级文件，是否有对应的组件名，即可。
在这里插入图片描述