以下内容基本来源于书籍《鸿蒙操作系统应用开发实践》,有需要的可购买:京东平台、当当平台
完整工程请下载:ISRC_OHOS/OpenHarmony-JS-Demos
打开entry→src→main→js,工程的开发目录如图所示
其中,
可将该FA一共分成三个部分:图片区、标题区、描述区。根据此分区,根节点的子节点应按列排列。 图片区和描述区分别使用 swiper组件和text组件实现。标题区由两个部分组成,以行来排列,其中第一部分由两个text组件组成,分别为商品名称和商品标语,以列排列。第二部分由image组件和text组件组成,分别为代表收藏功能的星号和代表收藏次数的数字,以行排列,如图所示。
首先构建FA基础布局。其中,实现图片区域通常用image组件来实现,由于需要左右滑动图片,因此在image外层加入swiper滑动容器,swiper容器提供了切换子组件显示的能力。 标题区和描述区采用了最常用的基础组件text,text组件用于展示文本,文本内容需要写在标签内容区。要将页面的基本元素组装在一起,需要使用容器组件,如上述swiper容器。在页面布局中常用到三种容器组件,分别是div、list和tabs。在页面结构相对简单时,可以直接用div作为容器,因为div作为单纯的布局容器,使用起来更为方便,可以支持多种子组件。 在index.hml文件中,实现基础布局,具体代码如下所示:
<div class="container">
<swiper class="swiper-style">
<image src="/common/Phone_00.jpg" class="image-mode"></image>
<image src="/common/Phone_01.jpg" class="image-mode"></image>
<image src="/common/Phone_02.jpg" class="image-mode"></image>
<image src="/common/Phone_03.jpg" class="image-mode"></image>
</swiper>
<div class="title-section">
<div class="phone-title">
<text class="phone-name">
HUAWEI
</text>
<text class="phone-definition">
Thinking Possibilities
</text>
</div>
<div class="favorite-image">
<image src="{{unFavoriteImage}}" class="image-size"onclick="favorite"></image>
</div>
<div class="favorite-count">
<text>{{number}}
</text>
</div>
</div>
<div class="description-first-paragraph">
<text class="description">{{descriptionFirstParagraph}}
</text>
</div>
<div class="description-second-paragraph">
<text class="description">{{descriptionSecondParagraph}}
</text>
</div>
</div>
在index.hml中,为每个组件和容器都定义了一个class=“***”的样式,需要在css文件中依次对样式进行构建。如本例,在index.css文件中,需要设定的样式主要有:flex-direction用于设置子组件容器的排列方式,paddind用于设置内边距,font-size用于设置字体大小,以及swiper组件的一些私有属性,如indicator-color用于设置导航点指示器的填充颜色,indicator-selected-color用于设置导航点指示器选中的颜色,indicator-size用于设置导航点指示器的直径大小等。具体代码如下所示:
.container {
flex-direction: column;
}
.swiper-style {
height: 700px;
indicator-color: #4682b4;
indicator-selected-color: #ffffff;
indicator-size: 20px;
}
.title-section {
flex-direction: row;
height: 150px;
}
.phone-title {
align-items:flex-start;
flex-direction: column;
padding-left: 60px;
padding-right: 160px;
padding-top: 50px;
}
.phone-name {
font-size: 50px;
color: #000000;
}
.phone-definition {
font-size: 30px;
color: #7A787D;
}
.favorite-image {
padding-left: 70px;
padding-top: 50px;
}
.favorite-count {
padding-top: 60px;
padding-left: 10px;
}
.image-size {
object-fit: contain;
height: 60px;
width: 60px;
}
.description-first-paragraph {
padding-left: 60px;
padding-top: 50px;
padding-right: 60px;
}
.description-second-paragraph {
padding-left: 60px;
padding-top: 30px;
padding-right: 60px;
}
.description {
color: #7A787D;
}
.image-mode {
object-fit: contain;
}
在index.js用于构建页面逻辑,对图片资源进行赋值,并通过添加交互实现收藏功能。收藏按钮通过一个div组件关联click事件实现。click事件作为一个函数定义在index.js文件中,可以更改isFavorite的状态,从而更新显示的image组件和text组件。index.js中代码如下所示:
export default {
data: {
unFavoriteImage: "/common/unfavorite.png",
isFavorite: false,
number: 20,
descriptionFirstParagraph:"The breakthrough of visual boundaries, the exploration of photography and videography, the liberation of power and speed, and the innovation of interaction are now ready to be discovered. Embrace the future with new possibilities.",
descriptionSecondParagraph: "Lighting up infinite possibilities. The quad camera of HUAWEI is embraced by the halo ring. It is a perfect fusion of reflection and refraction. Still Mate, but a new icon.",
},
favorite() {
var tempTotal;
if (!this.isFavorite) {
this.unFavoriteImage = "/common/favorite.png";
tempTotal = this.number + 1;
} else {
this.unFavoriteImage = "/common/unfavorite.png";
tempTotal = this.number -1;
}
this.number = tempTotal;
this.isFavorite = !this.isFavorite;
}
}
根据组件的功能,可以将组件分为以下四大类
组件类型 | 主要组件 |
---|---|
基础组件 | text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart |
容器组件 | div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、popup、list-item-group、refresh、dialog |
媒体组件 | video |
画布组件 | canvas |
Button是实现用户交互最常用的组件,可用于触发JS中的函数。可以使用JS提供的各种按钮(包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮)来实现许多有趣的功能。
<!-- index.hml定义多种按钮 -->
<div class="div-button">
<button class="button" type="capsule" value="胶囊按钮"></button>
<button class="button circle" type="circle" icon="common/logo.png"></button>
<button class="button text" type="text">文本按钮</button>
<button class="button download" type="download" id="download-btn"
onClick="setProgress">{{downloadText}}</button>
<button class="button" type="capsule" waiting="true">载入中...</button>
<button class="button" type="arc">弧形按钮</button>
</div>
上述下载按钮的onClick属性绑定到了js文件中的setProgress函数中,js文件的代码如下所示
export default {
data: {
progress: 5,
downloadText: "下载"
},
setProgress(e) {
this.progress += 10; //每次点击增加10%的进度
this.downloadText = this.progress + "%";
if (this.progress >= 100) {
this.downloadText = "完成"; //到达100%时显示完成
}
}
}
实现效果如下:
List组件常用于呈现多行连续同类的数据。List列表组件包含两类子组件,分别是list-item列表项和list-item-group列表项组。这里详细讲解一下list-item-group列表项组。 list-item-group是一个具有折叠效果list列表,配合list-item使用,以list-item-group中的第一个list-item作为分类标准,以下都折叠进分类中,点击具有折叠和扩展的效果。代码如下所示:
<!-- index.hml -->
<div class="container">
<list>
<list-item-group>
<list-item class="item_style"><text class="big_size">水果</text></list-item>
<list-item><text class="font_size">苹果</text></list-item>
<list-item><text class="font_size">香蕉</text></list-item>
</list-item-group>
<list-item-group>
<list-item class="item_style"><text class="big_size">饮料</text></list-item>
<list-item><text class="font_size">可乐</text></list-item>
<list-item><text class="font_size">咖啡</text></list-item>
</list-item-group>
<list-item-group>
<list-item class="item_style"><text class="big_size">零食</text></list-item>
<list-item><text class="font_size">薯片</text></list-item>
<list-item><text class="font_size">锅巴</text></list-item>
</list-item-group>
</list>
</div>
.item_style {
background-color: pink;
}
.big_size {
font-size: 50px;
}
运行上述代码,结果如图所示,实现了一个具有折叠效果的列表
自定义组件是用户根据业务需求,将已有的组件组合起来,封装成新的组件,并作为新组件可以在工程中被多次调用,从而提高代码的可读性和可扩展性。自定义组件通过element引入到宿主页面,使用方法的示例代码如下所示
<element name="comp" src="../comp.hml"></element>
<div>
<comp prop1='xxxx' @child1="bindParentVmMethod"></comp>
</div>
<div class="item">
<text class="title_style">{{title}}</text>
<text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text>
<text class="text-style" if="{{showword}}">hello world</text>
</div>
.item {
width: 700px;
flex-direction: column;
height: 300px;
align-items: center;
margin-top: 100px;
}
.text-style {
font-weight: 500;
font-family: Courier;
font-size: 40px;
}
export default {
props: {
title: {
default: 'title'
},
},
data: {
showword: false,
},
childClicked () {
this.$emit('eventType1', {text: "收到子组件参数"});
this.showword = !this.showword;
},
}
上述代码新创建了一个comp自定义组件,组件中设置了一个具有点击属性的文本内容,该点击效果会将自定义组件的数据传递给父组件,并将show值从初始化的false转为true,即显示hello world文本。 在父组件中通过element引入自定义组件,代码如下所示
<element name="comp" src="../comp/comp.hml"></element>
<div class="container">
<text>父组件:{{text}}</text>
<comp title="自定义组件" @event-type1="textClicked"></comp>
</div>
.container {
background-color: #f8f8ff;
flex: 1;
flex-direction: column;
align-content: center;
}
export default {
data: {
text: "开始"
},
textClicked (clicked) {
this.text = clicked.detail.text;
},
}
本示例中父组件通过添加自定义属性向子组件传递了名为title的参数,自定义子组件在props中接收,自定义组件可以通过props声明属性,父组件通过设置的属性向子组件传递参数,注意在命名prop时需要使用camelCase即驼峰式命名法,在外部父组件传递参数时需要使用kebab-case即用短横线分割命名,例如在上面示例代码中属性eventType1在父组件引用时需要转换为event-type1。子组件也通过事件绑定向上传递了参数text,父组件接收时通过clicked.detail获取数据。
父子组件之间的数据传输是单向的,一般的只能从父组件传递给子组件,而子组件如果需要向上传递必须绑定事件,通过事件的$
emit来传输。子组件获取来自父组件数据后,子组件不能直接修改父组件传递下来的值,可以通过将props传入的值用data接收后作为默认值,然后在对data的值进行修改。
如果需要观察组件中属性的变化,可以通过$
watch方法增加属性变化回调。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。