HarmonyOS应用开发（鸿蒙JS实战）（微课版）课件 项目4 类Web开发范式组件

《鸿蒙JS应用开发》项目4类Web开发范式组件4.3.1任务掌握搜索组件的使用1、学习如何使用搜索组件来创建一个基本的搜索功能。2、了解如何设置搜索框的属性，并处理各种与搜索相关的事件。3、创建一个简单的搜索界面，处理用户的搜索请求，并提供实时的反馈。任务陈述学习目标实现一个简单的搜索功能，处理用户的搜索请求，并提供实时反馈理解搜索组件的重要性和它在实际应用中的应用场景学习如何设置搜索框的基本属性，如提示文字、搜索按钮文本和搜索图标熟悉处理与搜索相关的事件，如搜索事件、文本更改事件等基本的HTML、CSS和JavaScript知识对于事件处理和DOM操作有一定的了解知识准备应用场景01组件的应用场景在实际开发中，搜索组件是不可或缺的一部分，它为用户提供了快速定位和获取所需信息的通道。无论是在电商网站中帮助用户找到想购买的商品，还是在音乐、视频平台中帮助用户查找喜欢的内容，或是在企业内部系统中快速定位到所需数据，搜索组件都发挥着重要的作用。它不仅提升了应用的用户体验，也提高了应用的效率和实用性。通过一个精心设计和实现的搜索组件，可以实现模糊搜索、精确搜索、实时推荐等功能，满足用户多样化的搜索需求。同时，与后端数据的交互也是搜索组件不可忽视的一环，通过合理的数据处理和传输，能够保证用户获取到准确、及时的搜索结果。hml代码实现02<divclass="container">

<searchhint="运动球鞋"searchbutton="search"onsearch="search"

onchange="change"ontranslate="translate"onshare="share"

onsubmit="submit">

</search>

</div>hml代码下述代码中，search组件的相关属性设置解释如下：以下是制作一个简单的搜索组件入门案例，hml代码如下所示：hint属性：hint属性用于在搜索框中显示提示文字，它为用户提供了一个轻微的指示，表明他们应该在这里输入什么。在此例中，提示文字是“运动球鞋”。searchbutton属性：searchbutton属性用于设置搜索按钮的文本。在这个例子中，搜索按钮的文本是"search"。相关事件的设置onsearch事件：当用户点击搜索按钮或者按下键盘上的"Enter"键时，onsearch事件被触发。它通常用于处理用户的搜索请求。在此例中，当onsearch事件被触发时，它将调用名为search的方法。01除了上述属性以外，还可以通过icon属性来设置搜索组件的搜索图标。相关事件设置解释如下：更多相关事件的设置onchange事件：当用户在搜索框中输入或删除字符时，onchange事件会被触发。它常用于实现实时搜索或其他实时反馈功能。在此例中，它将调用名为change的方法。02030405onsubmit事件：onsubmit事件通常在用户提交表单时触发。onshare事件：该事件在用于选中文本并且执行分享操作的时候触发。ontranslate事件：该事件在用于选中文本并且执行翻译操作的时候触发。css代码实现03css

样式css代码如下所示：.container{

width:100%;

height:100%;

padding:0px20px;

flex-direction:column;

align-items:center;

justify-content:center;

background-color:#F1F3F5;

}

search{

color:black;

placeholder-color:darkgrey;

caret-color:blue;

}Tips：同学们可以通过color、placeholder-color和caret-color样式来设置搜索框的文本颜色、提示文本颜色和光标颜色。js代码实现04js代码js代码如下所示：importpromptActionfrom'@mptAction'

exportdefault{

search(e){

promptAction.showToast({

message:e.value,

duration:3000,

});

},

translate(e){

promptAction.showToast({

message:e.value,

duration:3000,

});

},

share(e){

promptAction.showToast({

message:e.value,

duration:3000,

});

},

change(e){

promptAction.showToast({

message:e.value,

duration:3000,

});

},

submit(e){

promptAction.showToast({

message:'submit',

duration:3000,

});

}

}预览结果05预览结果预览器查看效果如下图所示：HarmonyOSTHANKS《鸿蒙JS应用开发》项目4类Web开发范式组件4.3.2任务掌握选择器组件的使用1、学习如何在HarmonyOS应用中使用选择器组件（picker）2、通过实际的代码示例来探讨不同类型的选择器组件，如普通选择器、日期选择器和时

间选择器，并实现与它们相关的事件处理逻辑。任务陈述▲选择器组件是一个非常实用且常见的组件，它能够在不同的场景下为用户提供直观且友好的数据选择方式。能够通过实际的代码示例来应用和实践选择器组件的使用，提高用户交互体验。学习目标理解和掌握不同类型的选择器组件的基本使用方法。了解如何为选择器组件设置属性以及如何处理相关的事件。对HTML、CSS和JavaScript有基本的了解和使用经验。了解HarmonyOS应用开发的基本知识，例如数据绑定、事件处理等。知识准备应用场景01组件的应用场景在实际开发过程中，选择器组件的使用十分常见，它为用户提供了直观且友好的数据选择方式。无论是在填写日期、选择时间，还是在一系列选项中做出选择，picker组件都能提供流畅的用户体验。例如，在做预约打车服务的应用时，用户可以通过日期选择器和时间选择器快速选择预约出行的时间；在购物应用中，多列文本选择器可以帮助用户在多个属性（如颜色、尺码）中做出选择；普通选择器则可以应用于任何需要从多个选项中选择一项的场景，如选择国家、城市等。通过灵活运用picker组件，不仅可以使应用界面更为简洁，还能大大提升用户的交互体验。hml代码实现02hml代码接下来我们来编写三个不同的选择，分别用于选择年龄，生日以及时间。hml代码如下所示：左述代码中，通过设置picker的type属性来改变选择器类型<divclass="container">

<pickerid="picker_text"type="text"value="{{textValue}}"

range="{{rangeText}}"class="picker_text"

onchange="changeText"></picker>

<pickerid="picker_date"type="date"value="{{dateValue}}"

lunarswitch="true"start="2000-2-5"end="2030-6-5"

class="picker_date"onchange="changeDate"></picker>

<pickerid="picker_time"type="time"value="{{timeValue}}"

hours="12"onchange="changeTime"class="picker_time">

</picker>

</div>type=text表示普通选择器；type=time表示时间选择器。type=date表示日期选择器；不同选择器的注意事项普通选择器设置取值范围时，需要使用数据绑定的方式。0201不同选择器在使用时需要注意以下细节：lunarswitch="true"表示允许切换到农历显示。不同选择器的注意事项0304不同选择器在使用时需要注意以下细节：hours属性为12：按照12小时制显示，用上午和下午进行区分；hours属性为24：按照24小时制显示。css代码实现03css

样式css代码如下所示：.container{

width:100%;

height:100%;

flex-direction:column;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}

.picker_text{

margin-bottom:30px;

}

.picker_date{

margin-bottom:30px;

}js代码实现04js代码js代码如下所示：exportdefault{

data:{

rangeText:['20',"21","22",'23',"24","25",

'26',"27","28",'29',"30"],

textValue:'选择年龄',

dateValue:'选择生日',

timeValue:'选择时间',

},changeText(e){

this.textValue=e.newValue;

},changeDate(e){

this.dateValue=e.year+"-"+(e.month+1)+"-"+e.day;

},

changeTime(e){

this.timeValue=e.hour+":"+e.minute;

}

}可以对picker添加change和cancel事件，来对选择的内容进行确定和取消。预览结果05预览结果预览器查看效果如下图所示：HarmonyOSTHANKS《鸿蒙JS应用开发》项目4类Web开发范式组件4.3.3任务掌握开关组件的使用学习如何在HarmonyOS应用中创建和使用开关组件，并通过事件处理逻辑来响应用户的操作。任务陈述▲在许多应用中，开关组件都是非常常见且重要的一个UI元素，它为用户提供了一种直观且简洁的操作方式，以控制某些功能的开启和关闭。任务目标理解和掌握HarmonyOS中开关组件的基本使用方法。学习如何为开关组件设置属性，包括显示文本、开启/关闭状态等。

了解如何通过事件处理逻辑来响应开关组件的状态变化，并给予用户相应的反馈。基本的HTML、CSS和JavaScript知识。HarmonyOS应用开发的基础知识，例如数据绑定、事件处理等。知识准备hml代码实现01hml代码首先，我们在HML中创建开关组件，并为其设置一些基本属性。例如，我们可以通showtext属性来控制是否显示文本，通过texton和textoff属性来设置开关打开和关闭时的文本。同时，我们也为开关组件绑定了一个change事件处理函数，以便在开关状态变化时执行相应的逻辑。html代码如下所示：<divclass="container">

<switchshowtext="true"texton="ON"textoff="OFF"checked="true"

@change="switchChange"></switch>

</div>当showtext=“true”时当showtext=“false”时css代码实现02css

样式css代码如下所示：.container{

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}

switch{

texton-color:#002aff;

textoff-color:silver;

text-padding:20px;

font-size:60px;

texton-color:black;

}js代码实现03js代码js代码如下所示：这里的switchChange(e)函数对应hml代码的@change事件绑定预览结果04预览结果通过以上代码，我们成功地创建了一个具备基本功能的开关组件，并能够为用户提供直观的交互反馈。预览器查看效果如下图所示：HarmonyOSTHANKS《鸿蒙JS应用开发》项目4类Web开发范式组件4.3.4任务掌握滑动条组件的使用1、学习如何创建和配置HarmonyOS中的滑动条组件。2、理解如何捕获和使用用户的输入。任务陈述▲滑动条组件是用户界面中常见的元素，它允许用户通过滑动选择一个值。这种交互方式非常直观，并可以在多种场景下使用。例如调整音量、择亮度或其他需要连续值的设置。学习目标理解并掌握滑动条组件在HarmonyOS中的基本使用。学习如何配置滑动条组件的属性，例如最小值、最大值和步长。了解如何通过事件实时捕获用户的滑动的数值。基本的HTML、CSS和JavaScript知识。HarmonyOS应用开发的基础知识，例如数据绑定、事件处理等。知识准备hml代码实现01hml代码在HTML中，我们创建了一个滑动条组件，并通过属性设置了它的最小值、最大值、初始值和长。我们还为它绑定了一个onchange事件处理函数，以便捕获用户的滑动数据。hml代码如下所示：组件属性1min:此属性定义了滑动条的最小值。0102max:此属性定义了滑动条的最大值。在这个例子中，滑动条的最大值设置为100。相关滑动条组件属性设置解释如下：组件属性1这里的{{value}}就是1和2的当前值03value:此属性定义了滑动条的当前值。它通常用于数据绑定，以显示和更新用户的选择。在这个例子中，它绑定到一个名为value的变量。组件属性2step:此属性定义了滑动条的步长，也就是每次滑动时值的增减量。在这个例子中，步长设置为2，这意味着每次滑动时，滑动条的值会以2的增量变化。0405mode:此属性定义了滑动条的模式。inset模式意味着滑动条的轨道会“嵌入”到组件中。其他值包括outset，它将使轨道“凸出”。组件属性3showtips:此属性决定是否在滑动时显示提示。设置为true时，会显示一个提示，显示当前滑动条的值。0607onchange:此属性定义了一个事件处理函数，当滑动条的值发生变化时，它会被触发。在这个例子中，setValue函数会被调用，以处理滑动条值的变化。css代码实现02css

样式css代码如下所示：.container{

width:100%;

height:100%;

flex-direction:column;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}js代码实现03js代码js代码如下所示：预览结果04预览结果通过以上代码，我们成功地创建了一个具备基本功能的滑动条组件，并能够为用户提供直观的交互反馈。预览器查看效果如下图所示：HarmonyOSTHANKS《鸿蒙JS应用开发》项目4类Web开发范式组件4.3.5任务掌握进度条组件的使用学习如何使用不同类型的进度条组件，并通过样式自定义进度条的外观。任务陈述▲在开发过程中，进度条是一个常用组件，它可以清晰地向用户展示任务的完成程度或加载进度。任务目标理解并能使用不同类型的进度条组件。能通过样式自定义进度条的外观。理解进度条的基本属性及其应用。熟悉基本的HTML和CSS语法。

熟悉基本的组件属性设置和样式自定义。知识准备hml代码实现01hml代码鸿蒙提供了多种不同类型的进度条组件，例如scale-ring，horizontal，arc，ring。每种类型的进度条通过type属性来定义。同时，可以通过CSS

样式来自定义进度条的外观，例如stroke-width设置进度条的线条宽度，color和background-color设置进度条的颜色等。hml代码如下所示：css代码实现02css

样式css代码如下所示：.container{

flex-direction:column;

height:100%;

width:100%;

align-items:center;

justify-content:center;

}

.min-progress{

width:300px;

height:300px;

}

.one{

stroke-width:60px;

scale-width:10px;

scale-number:30;

}

.two{

color:skyblue;

stroke-width:20px;

background-color:darkgrey;

}min-progress

是所有进度条组件的classonetwo预览结果03预览结果预览器查看效果如下图所示：HarmonyOSTHANKS《鸿蒙JS应用开发》项目4类Web开发范式组件4.3.6任务掌握工具栏组件的使用1、学习如何在HarmonyOS应用开发中有效地使用toolbar和toolbar-item组件2、将通过实践学习这些组件的基础知识和应用，特别是在创建电商导航工具栏方面。任务陈述学习目标掌握如何在电商应用中实现一个基于toolbar的导航栏。将通过实践学习这些组件的基础知识和应用，特别是在创建电商导航工具栏方面。掌握如何创建和配置这些组件。学习组件的相关属性和事件。基础的HTML、CSS和JavaScript知识。HarmonyOS的基础架构和组件系统。对HarmonyOS的数据绑定和事件处理有一定了解。知识准备任务实施01掌握目标本任务主要目的是帮助学生掌握在HarmonyOS应用开发中工具栏组件的基本使用方法，toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。学生需要学习掌握如何创建toolbar组件，toolbar-item组件，以及组件的相关属性和事件，最后开发实现一个电商的导航工具栏。hml代码实现02hml代码首先在pages/index目录下的hml文件中创建一个toolbar组件，hml代码如下所示：<divclass="container">

<toolbarstyle="position:fixed;bottom:0%;

width:100%;background-color:#F1F3F5;">

<toolbar-itemvalue="item1"></toolbar-item>

<toolbar-itemvalue="item2"></toolbar-item>

<toolbar-itemvalue="item3"></toolbar-item>

<toolbar-itemvalue="item4"></toolbar-item>

<toolbar-itemvalue="item5"></toolbar-item>

<toolbar-itemvalue="item6"></toolbar-item>

</toolbar>

</div>css代码实现03css

样式css代码如下所示：.container{

width:100%;

height:100%;

flex-direction:column;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}

toolbar-item{

font-size:35px;

}预览结果04预览结果预览器查看效果如下图所示：工具栏（toolbar）组件专门用于容纳toolbar-item

子组件，而且在一个页面上最多只能显示5个这样的子组件。如果你添加了超过5个的`toolbar-item`，系统将仅显示前4个，而第5个及之后的toolbar-item会被归入一个名为"更多项"的特殊菜单中。用户可以通过点击这个"更多项"菜单来查看并访问那些超出数量限制的`toolbar-item`。需要注意的是，被归入"更多项"菜单的`toolbar-item`将使用系统默认的样式，而不会应用任何自定义样式设置。开发电商导航栏05hml代码接下来我们使用工具栏组件开发一个实际电商项目中的导航栏，并且可以点击每一个选项卡切换不同的toolbar-item，实现页签切换的效果。hml代码如下所示：css

代码css代码如右图：.container{

width:100%;

height:100%;

flex-direction:column;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}

toolbar-item{

font-size:35px;

}js代码Js代码如右图：跳转的实现原理上述代码示例展示了如何使用toolbar和toolbar-item组件来构建一个固定在页面底部的工具栏，以及如何使用这个工具栏来切换不同的图片。当用户点击一个toolbar-item时，@click="switchToolbar({{$idx}})"会被触发，这将调用switchToolbar函数并传入当前点击的toolbar-item的索引。在switchToolbar函数中，active状态会被更新为当前点击的toolbar-item的索引，根据active状态的变化，相应的图片会在image组件中显示。状态改变的实现原理活动的（被点击的）toolbar-item会显示为红色字体和特殊的背景色，这是通过style="color:{{active==$idx?'red':'black'}};background-color:{{active==$idx?'#dbe7f1':'#F1F3F5'}};"来实现的。状态改变的实现原理Tips：如需实现选项卡图标状态的改变可以模仿背景色的改变语句，例如以上语句icon="{{active==$idx?item.icon_Active

:

item.icon

}}"预览结果预览器查看效果如下图所示：HarmonyOSTHANKS《鸿蒙JS应用开发》项目4类Web开发范式组件任务

掌握自定义组件的使用4.4本任务主要目的是帮助学生掌握在HarmonyOS应用开发中自定义组件的基本使用方法，以及如何通过自定义事件在父子组件间传递数据。学生需要学习如何创建自定义组件，如何传递props属性，以及如何通过自定义事件在组件之间进行数据交互。任务陈述学习目标学习如何在HarmonyOS应用中创建和使用自定义组件。掌握如何通过props传递数据给自定义组件。学习如何在自定义组件内部使用自定义事件来实现父子组件间的数据传递。基础的HTML、CSS和JavaScript知识。理解HarmonyOS的基本架构和组件系统。了解事件处理和数据绑定的基础知识。知识准备自定义组件是一种非常强大的开发工具，允许开发人员创建可重用的代码块，用户可以根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，增强代码的可维护性和可读性。在本任务中，我们将详细介绍如何创建和使用自定义组件以及组件间的数据传递。任务实施自定义组件与数据传递01为了使内容更具体和实用，我们将创建一个“天气卡片”自定义组件。这个组件专门用于显示天气状况、温度和城市名。首先需要创建一个component目录专门用于存储组件代码，相关目录结构如下图所示：和pages目录一样，在组件目录下存放三类文件，分别是：

weatherCard.hml,weatherCard.css，weatherCard.js。自定义组件与数据传递其中hml代码如下：css代码如下：自定义组件与数据传递Js代码如下：自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。子组件可以通过固定值default设置默认值，当父组件没有设置该属性时，将使用其默认值。上述代码中如果父组件没有传递参数给子组件，那么默认值就是北京，晴，22。自定义组件与数据传递通过element标签进行自定义组件的导入。自定义组件的name属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写。src属性指自定义组件hml文件路径(必填)，若没有设置name属性，则默认使用hml文件名作为组件名。camelCase(驼峰命名法)的组件名，在外部使用自定义组件时，需要使用短横线分隔命名形式。例如组件名称为weatherCard，那么在使用的时候使用weather-card。接着我们需要在index.hml文件中使用天气卡片自定义组件，hml代码如下所示：自定义组件与数据传递这里我们有两个不同的方法使用自定义组件：自定义组件与数据传递直接使用自定义组件：这个例子直接使用了标签，没有添加任何属性。这意味着组件将使用在weatherCard.js中定义的默认props值（分别为"北京"、"晴"和"22"）。通过props传递数据给自定义组件：在第二个<weather-card>标签中，通过props传递了city、condition和temperature这三个属性的值（分别为"深圳"、"多云"和"28"）。这样，组件就会使用这些传入的值而不是默认值。预览图如下：1.自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数。

props支持类型包括：String，Number，Boolean，Array，Object，Function。2.命名使用：prop名采用camelCase(驼峰命名法)形式，在外部父组件传递参数时需要使用短横线分隔命名)形式，比如自定义的属性名称为compProp，在父组件引用时需要转换为comp-prop。3.添加默认值:子组件可以通过固定值default设置默认值，当父组件没有设置该属性时，将使用其默认值。4.自定义组件通过element引入到宿主页面。代码中的name属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写。src属性指自定义组件hml文件路径(必填)，若没有设置name属性，则默认使用hml文件名作为组件名