HarmonyOS开发（DevEco Studio）

开发环境搭建

下载DevEco Studio

进行环境配置

系统开发前端基础

应用开发目录结构

文件使用规则

基础组件介绍

Chart组件使用（线型图案例）

使用image-animator组件构建多图帧动画

TodoList应用构建

自定义组件使用

父子组件通信功能

路由功能实现

开发环境搭建

---------------------------------------------------------------------------------------------------------------------------------

下载DevEco Studio

官网下载链接：

HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

---------------------------------------------------------------------------------------------------------------------------------

进行环境配置

配置环境参考博客：

华为开发者工具 DevEco Studio 配置 SDK 教程_相逢不晚何必匆匆的博客-CSDN博客

---------------------------------------------------------------------------------------------------------------------------------

系统开发前端基础

---------------------------------------------------------------------------------------------------------------------------------

应用开发目录结构

从text文件进入entry文件，选择src文件中的main文件，我们主要的开发在于js部分

---------------------------------------------------------------------------------------------------------------------------------

目录结构中文件分类如下:
.hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构。
.css结尾的CSS样式文件，这个文件用于描述页面样式。
.js结尾的JS文件，这个文件用于处理页面和用户的交互。

---------------------------------------------------------------------------------------------------------------------------------
各个文件夹的作用:
app.js文件用于全局JavaScript逻辑和应用生命周期管理。
pages目录用于存放所有组件页面。
common目录用于存放公共资源文件，比如:媒体资源和JS文件。
i18n目录用于配置不同语言场景资源内容，比如:应用文本词条，图片路径等资源，注意i18n是开发保留文件夹，不可重命名。

---------------------------------------------------------------------------------------------------------------------------------

文件使用规则

文件访问

应用资源可通过绝对路径或相对路径的方式进行访问

本开发框架中绝对路径以 "/" 开头，相对路径以 "./" 或 "../"

公共代码文件和资源文件推荐放在common

---------------------------------------------------------------------------------------------------------------------------------

媒体文件

格式	支持版本	支持的文件类型
BMP	API Version 3+	.bmp
JPEG	API Version 3+	.jpg
PNG	API Version 3+	.png

---------------------------------------------------------------------------------------------------------------------------------

app.js 标签

标签	类型	默认值	必填	描述
name	string	default	是	标识JS实例的名字
pages	Array	-	是	路由信息

{  ...  "pages": [    "pages/index/index",    "pages/detail/detail"  ]  ...}

onCreate：在应用生成时被调用的生命周期函数。
onDestory：在应用销毁时被调用的生命周期函数。

---------------------------------------------------------------------------------------------------------------------------------

基础组件介绍

官网组件详细介绍：参考文档导读-参考文档导读-HarmonyOS应用开发

---------------------------------------------------------------------------------------------------------------------------------

Chart组件使用（线型图案例）

参考网站：chart-基础组件-组件-服务卡片开发-JS API参考-HarmonyOS应用开发

1.创建 pages.chart 文件夹，包含 chart.hml、chart.js、chart.css 三个文件

2.在 config.json 文件里配置路由

3.预览页面时，务必要注意打开当前需要预览的页面文件夹下 hml、css、js 任意一个文件

4.pages.chart文件夹下面的hml、css、js文件必须命名为index否则的话会出现预览错误

5.出现预览错误修改后重启预览器方可恢复正常

6.调整 chart 组件的相关参数，需要注意 xAxis 的 axisTick 参数设置过小，会出现数据丢失情况

---------------------------------------------------------------------------------------------------------------------------------

结果展示（显示坐标轴）

---------------------------------------------------------------------------------------------------------------------------------

使用image-animator组件构建多图帧动画

1.创建一个新的Ablity，命名为animate（在js文件夹内）

2.将官网代码示例复制粘贴到对应文件位置

3.截取不同大小图片，将图片放在common文件中的images

4.更改index.js处的代码实现多图帧动画

---------------------------------------------------------------------------------------------------------------------------------

结果展示

---------------------------------------------------------------------------------------------------------------------------------

TodoList应用构建

1.将文档中封装好的代码粘贴于对应文档中

（此处直接调用鸿蒙js封装好的组件，这里使用的是 switch 组件）

<div class="container"><text class="title">待办事项</text><div class="item" for="{{todolist}}"><text class="todo">{{$item.info}}</text><switch showtext="true" checked="{{$item.status}}"texton="完成" textoff="待办"class="switch" @change="switchchange($idx)"></switch><button class="remove" @click="remove($idx)">删除</button></div><div class="info"><text class="info-text">您还有</text><text class="info-num">{{todocount}}</text><text class="info-text">件事情待办，加油！</text></div><div class="add-todo"><input class="plan-input" type="text"></input><button class="plan-btn" onclick="addTodo">添加待办</button></div>
</div>

2.添加删除逻辑

3.计算代办时间

4.添加待办项目（由于预览模拟器无法添加事件）

进入模拟机可以进行添加待办事件操作，详细代码如下

<picker type="date" onchange="dateChange">{{date}}</picker>

export default {data: {date:'请选择日期'},dateChange(e){console.log(JSON.stringify(e))this.date = e.year + "年" + e.month + "月" + e.day + "日"}
};

---------------------------------------------------------------------------------------------------------------------------------

自定义组件使用

1.创建新项目

2.添加所需的文件包（如下图所示）

3.准备好下标图案文件

4.将相关代码放入准确的位置（common--datas--tabbaritem.js）

export default [{img:'common/images/home.png',simg:'common/images/home_s.png',name:'首页'},{img:'common/images/hot.png',simg:'common/images/hot_s.png',name:'热点'},{img:'common/images/us.png',simg:'common/images/us_s.png',name:'社区'},{img:'common/images/me.png',simg:'common/images/me_s.png',name:'我'}
]

导入components文件的tabbar

<!--hml文件-->
<div class="container"><toolbar class="tabbar"><toolbar-item for="{{tabbarItems}}" icon='{{$item.img}}' value='{{$item.name}}' onclick="jump($idx)" ></toolbar-item></toolbar>
</div>

//js文件
import tabbarItems from '../../common/datas/tabbarItem.js';
export default {data:{tabbarItems},jump(index){this.tabbarItems.forEach((item,index) => {item.img = tabbarItems[index].img;});this.tabbarItems[index].img = this.tabbarItems[index].simg;}
}

/*css文件*/
.tabbar {position: fixed;left: 0;bottom: 0;
}

5.自定义组件通过element引入到宿主页面

将下面的代码导入pages--index--index.hml，并在下面代码处写入<comp></comp>

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>

6.成果实现展示

提示：

name 属性指自定义组件名称(非必填)

自定义组件中绑定子组件事件使用下面的代码触发事件并进行传值，父组件执行

 (on|@)child1 语法，子组件中通过 this.$emit('child1', { params: '传递参数' })

bindParentVmMethod 方法并接收子组件传递的参数

---------------------------------------------------------------------------------------------------------------------------------

父子组件通信功能

父组件通过porps向子组件传值

1.Props 自定义组件可以通过 props 声明属性

2.添加默认值，子组件可以通过固定值 default 设置默认值，当父组件没有设置该属性时，将使用其默认值

3.数据单向性，父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将 props 传入的值用 data 接收后作为默认值，再对 data 的值进行修改

子组件定义

<!-- 务必需要注意的是：子组件的 hml、js、css 三个文件名必须保持一致 -->
<div class="ctest"><text class="title">我是子组件</text><text>{{ name }}</text>
</div>

export default {// props:[ "name" ],props:{name:{default: '默认内容'}}
}

父组件调用

<element name="ctest" src="../../components/ctest/ctest.hml"></element>
<div class="container"><ctest name="父传子内容"></ctest>
</div>

---------------------------------------------------------------------------------------------------------------------------------

父组件通过slot向子组件分发内容

1.普通 slot 插槽分发内容

2.具名插槽分发内容

---------------------------------------------------------------------------------------------------------------------------------

子组件通过自定义事件改变父组件状态

子组件也可以通过绑定的事件向上传递参数，在自定义事件上添加传递参数
子组件向上传递参数text，父组件接收时通过e.detail 来获取参数
需要注意的是父组件中自定义的事件名因为 hml 限制，对大小写不敏感，需要使用 - 进行拼接，但是，在子组件中调用则需要使用「驼峰式」进行 $emit 调用

---------------------------------------------------------------------------------------------------------------------------------

路由功能实现

代码部分（写入tabbar.js文件中）

   jump(index){switch(index){case 0:router.push({uri:"pages/index/index",params:{info:"这是路由传递的参数"}});break;case 1:router.push({uri:"pages/news/index",params:{info:"这是路由传递的参数"}});break;case 2:router.push({uri:"pages/about/index",params:{info:"这是路由传递的参数"}});break;case 3:router.push({uri:"pages/me/index",params:{info:"这是路由传递的参数"}});break;}}

路由结果展示

实现转换页面