如此简单!一文带你学会15个HarmonyOS JS组件

局长 发布于 04/15 17:44
阅读 244
收藏 0

【HarmonyOS CodeLab栏目】

HarmonyOS应该如何上手?有没有实操项目可供入门?HarmonyOS CodeLab栏目致力于挖掘生动有趣的案例,用浅显易懂的文字,简单易上手的代码,呈现HarmonyOS开发的多样性,让你一看就懂,一敲就会!

本期就让我们从一个简易的HarmonyOS购物应用入手,通过5个可视页面来为大家介绍15个JS常用组件,看看HarmonyOS是如何通过多种组件,帮助开发者减少开发量,让开发者只需关注实现逻辑的。事不宜迟,我们马上开始。

【请注意】本Demo只为展现多种JS组件用法,购物应用仅为场景演示,并非完整应用,欢迎各位开发者根据自己的业务场景进行完善哦~

首先来看一下本Demo中涉及的15个组件,包括:搜索框组件(search)、页签组件(tabs)、列表组件(list)、图片组件(image)、分隔器组件(divider)、交互式组件(input)、滑动容器(swiper)、跑马灯组件(marquee)、自定义弹窗容器(dialog)、滑动选择器组件(picker)、评分条组件(rating)、进度条组件(progress)、菜单组件(menu)、按钮组件(button)和图表组件(chart)。

再来看一下涉及的5个可视页面,分别为商品陈列页面、购物车页面、我的信息面,商品详情页面,商品数据分析页面。其中,前3个页面的构建将在homepage代码文件中展现。商品详情页将在shoppingDetailsPage代码文件中构建,商品数据分析页面将在viewChart代码代码文件中呈现,更多为了展示按钮组件和图表组件的使用方式。

我们用一个表格来让大家一目了然:

在正式开始敲代码之前,开发者们需要先下载安装 Huawei DevEco Studio,如果对于这个流程不甚熟悉,可以参照官网的教程操作。

Huawei DevEco Studio安装指南:

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415

请注意,本次Codelab针对的是步骤拆解和重点讲解,限于篇幅原因不会展示完整代码,开发者们可在码云平台-https://gitee.com/openharmony/codelabs/tree/master/ShoppingJs获取完整代码哦~

工程的代码结构

先让我们来了解一下工程的代码结构,这里我们提取几个重要信息跟大家说明一下:

  1. entry/src/main/js/default/common 文件夹存放一些公共的资源,本次的图片内容皆存放在此。
  2. entry/src/main/js/default/pages 文件夹存放 HarmonyOS JS的代码文件,包含css、hml、js三类文件,这里我们创建了homepage、shoppingDetailsPage、viewsChart。
  3. entry/src/main/config.json:配置文件

页面构建及组件使用详解

接下来,我们就可以编写css、hml、js代码了。

我们先来明确一下5个可视页面的逻辑。Demo从主应用界面(Demo直接展现的页面)菜单栏可划分为三个可视页面,分别为商品陈列页面、购物车页面、我的信息页面,这三个可视页面的构建都在homepage中,当用户点击商品陈列页面中的商品可跳转到商品详情页(为了方便演示均采用同一商品详情页),该可视页面在shoppingDetailsPage中实现。此外,由商品详情页中的某个入口可跳转到商品数据分析页面,该页面在viewChart中编写。

下面我们将通过组件代码结合页面实现的部分,来为大家展示关键代码部分。

homepage代码文件

在本示例中,商品陈列页面、购物车页面、我的信息页面均在homepage代码文件中完成,每个可视页面均有不同的组件展现,下面我们来具体看一下。

  • 商品陈列页面

在此可视页面中,用户可以通过搜索框搜索,或者直接在页面内浏览推荐商品。如果想要了解某个商品的详细信息,可以通过点击进入商品详情页查看。

这里我们将会用到:搜索框组件(search)、tab页签容器(tabs)、列表组件(List)、图片组件(image)

搜索框组件(search)

搜索框组件用于提供用户搜索内容的输入区域。

官网链接:https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-search-0000000000618599

在本示例中,search 组件中的hint属性囊括了搜索提示文字“寻找宝贝、店铺”,value用于搜索框搜索文本值,这里是一个固定值——手机,focusable确定当前组件是否可以获取焦点,本例中设置为true,可以实现用户点击时弹出,当用户在输入框内输入的值,发生变化的时候,会触发change事件,submit实现页面底部出现“搜索词+正在搜索中…”文字字样。

代码和图片示例如下:

<search hint="{{pageWord.searchKeyWord}}" value="{{pageWord.searchValue}}" focusable="true" 
        @submit="submitColumn">
</search>  

tab页签容器(tabs)

tabs 是一个tab页签容器,tab-bar与tab-content均为其子组件,其中前者用于展示tab的标签区。后者用于展示tab的内容区。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tabs-0000000000611572

在本示例中,搜索框下方“热销单品”、“精品推荐”、“智慧生活”、“年货节”等就用到了tab页签容器,组件中的index代表激活态,vertical代表内容排列方式,false为上下true为左右,这里采用的是上下,当点击或滑动标签时会触发change事件,标签兰下方的内容湖根据标签的变化而变化,当前的标签栏会显示红色,这样一个简单美观的标签栏就构造好啦。

而下面使用到了tabs的子组件tabs-bar和tab-content。tabs-bar中设置该组件的排列方式为横向排列,tabs-content用于展示tab的内容区,其中的scrollable,用于实现滑动切换页签。

当然,开发者可以根据需要 改变tabs页签的页面内容、逻辑以及样式。

代码和图片示例如下:

<tabs class="tabs" index="0" vertical="false" onchange="change"> 
    <tab-bar class="tab-bar" mode="fixed"> 
        <text class="tab-text" for="{{ item in titileList}}">{{ item }} 
	</text> 
    </tab-bar> 
    <tab-content class="tabcontent" scrollable="true"> 
        <div class="item-content" for="{{ item in contentList}}"> 
	    <list class="todo-wraper"> 
		<list-item for="{{lists}}"> 
		    <div class="margin10" @click="detailPage"> 
		        <div class="todo-total"> 
                            <text class="todo-title">
                                 {{$item.title}}
</text> 
                            <text class="todo-content">
{{$item.content}}
</text> 
                            <text class="todo-price"> 
                                <span>
¥
</span> 
                                <span>
{{$item.price}}
</span> 
			              </text> 
			          </div> 
                        <div class="width30"> 
                             <image src="{{$item.imgSrc}}" class="container-home-image">
</image> 
			        </div> 
		        </div> 
		      </list-item> 
	        </list> 
         </div> 
    </tab-content> 
</tabs>

列表组件(List)

list,即列表,包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。list-item 是list的子组件,用来展示列表具体item。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-container-list-0000001123447025

在本示例中,商品页面宽度高度整齐的排列,就依托于list组件在.hml中声明以及在.css中进行样式设置。而list-item则展示

部分代码和图片示例如下:

<list class="todo-wraper"> 
	<list-item for="{{lists}}"> 
		<div class="margin10" @click="detailPage"> 
			<div class="todo-total"> 
				<text class="todo-title">
					{{$item.title}}
				</text> 
				<text class="todo-content">{{$item.content}}
				</text> 
				<text class="todo-price"> 
					<span>
					    ¥
					</span> 
					<span>
					  {{$item.price}}
					</span> 
				</text> 
			</div> 
			<div class="width30"> 
				<image src="{{$item.imgSrc}}" class="container-home-image">
				</image> 
			</div> 
		</div> 
	</list-item> 
</list> 

图片组件(image)

Image,图片组件,在开发应用中,也是比较常见的一个组件,用来渲染展示图片。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-0000000000611597

在本示例中,商品的图片展示就是利用了图片组件来完成,其中src中是填写图片的路径。

部分代码和图片示例如下:

<image src="{{$item.imgSrc}}" class="container-home-image">
</image>

  • 购物车页面

购物车页面让用户可以把选中的商品加入其中,并在其中选择想要的商品用于结算。在本例中为了便于大家理解,购物车中的商品已经锁定。这里我们将会用到分隔器组件(divider)和交互式组件(input)。

分隔器组件(divider)

分隔器组件(divider)用于分隔不同内容块/内容元素,可用于列表或界面布局。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-divider-0000000000618583

在本示例中,多次使用到分隔器组件(divider),在这个页面中,我们仅做样式变化,但divider还可以使用vertical属性实现组件见的分割,比如在shoppingDetailPage中,我们使用该分割器实现评分条上“确认”和“取消”这两个按钮的分割。

该组件使用所在的购物车页面代码及图片如下:

<divider class="dialog-divider">
</divider>

交互式组件(input)

交互式组件(input)包括单选框,多选框,按钮和单行文本输入框,在本例中用于购物车产品的选择。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673

在本Demo中,我们多次用到该交互式组件。其中,在购物车页面中,input定义为多选框,用户可以选择自己喜欢的一个或多个商品进行结算,type="checkbox"类型定义为多选框 value是input组件的value值,在此地方是商品的价格 @change当多选框勾选状态发生变化时触发该事件

代码及图片如下:

<input type="checkbox" value="{{$item.price}}" @change="addShopping">
</input> 

  • 我的信息页面

我的信息页面布局,主要使用的是图片组件(image),用来呈现页面中的图标,使用方法与前面类似,这里就不多说。直接上代码和示例图片:

<div class="container-my-deals"> 
    <text class="container-my-deals-text">{{pageWord.myDeals}}</text> 
    <div class="container-my-deals-div"> 
        <div class="container-my-deals-div-div" for="{{transaction}}"> 
            <image src="{{$item.src}}" class="container-my-image"></image> 
            <text class="container-my-text">{{$item.title}}{{$item.num}}</text> 
        </div> 
    </div> 
</div>

完成了上述三个可视页面的开发,我们接下来要开发商品详情页面。用户在商品陈列页面中点击任意商品即可跳转到该页面,此跳转动作在homepage的.js文件中实现。由于不属于组件内容,这里只简单显示代码:

detailPage() { 
    router.push({ 
        uri: "pages/shoppingDetailsPage/shoppingDetailsPage" 
    }) 
},

shoppingDetailsPage代码文件

在本示例中,shoppingDetailsPage代码文件主要包含商品详情页面的构建。

1. 商品详情页面

商品详情页面将会展示商品更加详细的信息,包括头部的滑动图片、价格、收货地址选择等。涉及到的组件包括:滑动容器(swiper)、跑马灯组件(marquee)、自定义弹窗容器(dialog)、滑动选择器(picker)、评分条(rating)、进度条组件(progress)和菜单组件(menu),下面我们来具体看一下。

滑动容器(swiper)

滑动容器,用户可以在swiper组件上进行滑动 左右切换图片,或者3s自动滑动一次。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-container-swiper-0000001078560398

在本示例中,通过图片轮播图的形式对商品的图片进行展示。其中,class="swiper"是构建swiper的样式,id="swiper"表示"swiper"是该组件的唯一标识,index显示当前容器的第几张图片,在本例中默认是从0开始,autoplay="true"表示开启图片自动循环播放,interval="3000"是每隔3S切换一次图片,indicator="true"启用导航点指示器,loop="true"开启循环轮播。digital="false",关闭数字导航点,当开发者以往显示数字的时候,就可以设置成true。

代码及图片示例如下:

<swiper class="swiper" id="swiper" index="0" autoplay="true" interval="3000" indicator="true" loop="true" digital="false"> 
    <div class="swiperContent" for="{{ item in swiperList }}"> 
        <image src="/common/computer/computer{{item}}.png"></image> 
    </div> 
</swiper>

跑马灯组件(marquee):

跑马灯组件(marquee):展示一段单行滚动的文字。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-marquee-0000000000611657

在本示例中,该跑马灯组件是用于展示一段文字从左往右无限循环滚动。其中id是跑马灯组件的唯一标识。scrollamount跑马灯每次滚动时移动的最大长度,开发者可以根据实际情况给予长度。当loop=-1的时候,表示连续滚动。direction是设置跑马灯的文字滚动方向。

代码和图片示例如下:

<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}" direction="{{marqueeDir}}" @bounce="onMarqueeBounce" @start="onMarqueeStart" @finish="onMarqueeFinish">         
    {{pageInfo.marqueeCustomData}} 
</marquee>

自定义弹窗容器(dialog):

dialog,自定义弹窗容器,在本例中调出省市级选择和时间选择。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-dialog-0000001050068157

在开发此应用中,多次用到自定义弹窗容器(dialog),开发者可以通过 this.$element('id').show();调起 dialog 弹窗,通过 this.$element('id').close();关闭 dialog 弹窗,id是dialog组件的唯一标识,定义在 dialog组件内,具体的详细页面开发者可以根据需要在dialog中进行编写代码。

代码与图片示例与下面滑动选择器(picker)合并展示。

滑动选择器(picker)

滑动选择器(picker),滑动选择器组件,类型支持普通选择器,日期选择器,时间选择器,时间日期选择器,多列文本选择器。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-picker-0000000000621791

在本例中dialog自定义弹窗容器和滑动选择器(picker)两者联合使用,点击选择会弹出Dialog,页面会有时间选择器和省市级联选择器。

用户在弹出的时间选择器上选择日期,点击确定,页面上的数据也会同时改变。省市级联选择器,同理。其中日期选择器:type="date"。省市级联选择器:type="multi-text"我们选择多列文本选择器。 @columnchange是当多列文本选择器中某一列的值改变时会触发此事件,columns是设置多列文本选择器的列数。range是设置多列文本选择器的选择项。value是设置多列文本选择器的值,即页面上显示的默认值,@change当用户选择的值点击确认按钮时触发该事件

代码与图片如下(这里仅展示时间选择图片)展示如下:

<dialog id="simpledialog" class="dialog-main">
    <div class="dialog-div">
        <div>
            <div class="container-margin-left-comm">
                <image src="/common/computer/computer1.png" class="dialog-div-titleimage">
                </image>
            </div>
            <div class="dialog-flex-justify">
                <text class="dialog-divs-text1">
                    {{pageInfo.annualPrice}}
                </text>
                <text class="dialog-divs-text2">
                    {{pageInfo.inventory}}
                </text>
            </div>
            <image src="/common/computer/icon-close.png" class="dialog-divs-icon-close"
                   @click="cancelSchedule">
            </image>
        </div>
        <div class="dialog-div-select">
            <div>
                <text class="dialog-div-select-text">
                    {{pageInfo.selectRewardTime}}
                </text>
                <div class="dialog-div-select-picker">
                    <picker type="date" selected="{{ newDate }}" hours="24" value="{{ newDate }}"
                            @change="changeDate" @cancel="cancelDate">
                    </picker>
                </div>
            </div>
            <div>
                <text class="dialog-div-select-text">
                    {{pageInfo.selectRewardCity}}
                </text>
                <div class="dialog-div-select-picker">
                    <picker type="multi-text" @columnchange="columnTextData" columns="3" range="{{cityList}}"
                            value="{{selectCityList}}" @change="changeCity">
                    </picker>
                </div>
            </div>
        </div>
        <div class="dialog-div-bottom" @click="buy">
            <text class="dialog-div-bottom-text">
                {{pageInfo.nowSell}}
            </text>
        </div>
    </div>
</dialog>

菜单(menu)

菜单(menu),提供菜单组件,作为临时性弹出窗口,用于展示用户可执行的操作。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-menu-0000000000618614

在本示例中,该菜单组件展示四个菜单内容分别为:评分、分享、浏览量、退出。当用户点击任意菜单内容,都会执行对应的事件逻辑。其中 id是菜单组件的唯一标识,可以通过this.$element("id").show调起菜单组件。@selected是当选中菜单中某个值被点击选中时触发的事件

代码如下:

<menu id="apiMenu" @selected="onMenuSelected">
    <option value="Item-1">
        {{pageInfo.scoring}}
    </option>
    <option value="Item-2">
        {{pageInfo.sharing}}
    </option>
    <option value="Item-3">
        {{pageInfo.views}}
    </option>
    <option value="Item-4">
        {{pageInfo.exit}}
    </option>
</menu>

右上角操作菜单(menu),点击即会出现一系列菜单选项可供选择,如图所示:

评分条组件(rating)

评分条,相信开发者都不陌生。点击评分,会弹出带有评分弹框的dialog弹窗容器。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-rating-0000000000611645

在本示例中,该评分条组件用于给软件评分,用户可以选择0-5颗星进行打分,其中可以出现0.5的情况,例如:2.5分、3.5分。numstars设置评分条的星级总数,默认为5。 rating设置评分条当前评星数,即默认评星数。 @change当评分条的评星发生改变时触发该事件。

代码及图片如下:

<rating numstars="5" rating="{{ratingNum}}" @change="ratingChange">
</rating> 

进度条组件(progress):

进度条,在本Demo中,点击立即抢购会弹出一个含有进度条(progress)的弹框。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-progress-0000000000611609

在本示例中,该进度条组件用于商品抢购,当点击抢购按钮,系统会弹框显示进度条组件,进度条从0-100,当进度达到100%,会提示抢购成功。type="scale-ring"设置成带刻度圆环形进度条。 percent最初页面当前进度的值。secondarypercent最初页面次级进度的值。

图片示例和代码如下:

<progress class="min-progress" type="scale-ring" percent="{{progress.percent}}" secondarypercent="{{progress.secondarypercent}}">
</progress>

ViewChart代码文件

ViewChart代码文件于构建商品数据分析页面。

商品数据分析页面

商品数据分析页面在本Demo中仅为了呈现图表及按钮组件,通过商品详情页面右上角的菜单中的“浏览量”中进入。涉及的组件包括chart组件和button组件。

图表组件(chart)

chart组件为图表组件,用于呈现线形图、柱状图、量规图界面,本例中用的曲线图可以实时动态更新数据,其中,type="line",把图表设置成线形图。 ref="linechart",

用来指定指向子元素或子组件的引用信息,该引用将注册到父组件的$refs 属性对象上,我们最常用到的就是用ref 对图标进行添加数据this.$refs.linechart.append()。 options是设置图表参数, datasets设置图标的数据集合及其背景颜色

代码及图片示例如下:

<chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}">
</chart> 

按钮组件(button)

按钮组件最常用到的组件,该组件包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。这里就不赘述了。

官网链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-button-0000000000621726

在开发应用中,在开发此应用中,是和chart组件结合起来使用的,当我们触发第一个按钮的时候,我们会加快chart组件刷新数据的速率,当我们触发第二个按钮的时候,我们会手动随机添加一个数据。

代码及图片如下:

<button value="setInterval" onclick="autoAddData" class="button-sty">
</button>
<button value="Add data" onclick="addData" class="button-sty">
</button>

至此,我们已经通过一个简单的购物应用,体验了JS的15个常见组件,看到这里,你是不是已经对于这些组件有了更为全面的了解,那就赶紧上手试试吧。

本文源码下载:https://gitee.com/openharmony/codelabs/tree/master/ShoppingJs

Codelab所有源码下载:https://gitee.com/openharmony/codelabs

HarmonyOS最新进展,欢迎关注开源中国鸿蒙专区:https://www.oschina.net/group/harmonyos
HarmonyOS开源项目-OpenHarmony最新代码仓更新,请关注OpenHarmony Gitee组织代码仓:https://gitee.com/openharmony/
HarmonyOS CodeLab系列栏目,也欢迎关注HarmonyOS开发者公众号订阅。

这里也给各位开发者小小剧透一下,以上Codelab在4月17日HarmonyOS 开发者日活动可现场体验!实用与有趣交相辉映,更多精彩的Codelab等你现场解锁,华为专家带你现场体验,上手一敲,还有精美奖品待你一一收入囊中!更多精彩, 4月17 日,相约上海,HarmonyOS开发者日,我们等你来~

活动报名链接:https://www.oschina.net/event/2321922
直播地址:http://huawei.osctraining.com/

加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部