HarmonyOS学习Day01

 #学习视频：bilibili蜗牛学苑#
【最新】全套鸿蒙开辟HarmonyOS NEXT5.0实战教程
一、开辟预备

官方文档：文档中心
UI框架

现在官方提供两种开辟模式：
1、基于ArkTS的声明式开辟范式（简称“声明式开辟范式”）
接纳ArtTs语言来开辟项目
2、兼容JS的类Web开辟范式（简称“类Web开辟范式”）
接纳传统的html+css+js的开辟模式
现在官方主推第一种ArkTS开辟模式。这种模式内容会更丰富，开辟体验会更好
应用模子

• FA（Feature Ability）模子： HarmonyOS API 7开始支持的模子，已经不再主推。
  
• Stage模子： HarmonyOS API 9开始新增的模子，是现在主推且会长期演进的模子。这个模子里面提供更加丰富的api和kit能力。
  

工具预备

安装最新版的DevEco Studio（傻瓜式安装）。
下载中心 | 华为开辟者联盟-HarmonyOS开辟者官网，共建鸿蒙生态
二、创建项目

创建第一个ArkTs应用（Stage模子） 

目录结构

以下仅介绍开辟时重要用到的一些目录，详细介绍请参考官方文档：

创建新页面

此时创建的文件是一个完全空白的，路由也没有自动设置。

此时创建的文件会有一个Hello World模板，同时也会自动设置路由。
（可在resources>base>profile>main_pages.json中查看路由设置）
创建其他目录

在ets目录下，鼠标右键点击新建，点击目录创建新目录，以下为可能需要创建的一些目录：

在view目录下创建组件时，直接新建ArkTs File即可。
三、编写步伐

ArkTs最大的特点就是基于TS的开辟规则来计划的一种开辟语言。
里面涵盖了TS所有的规则。以及包罗了ES5\6的语法规则。
开辟鸿蒙项目：
1、相称于在大前端的基础上继承学习一个新的框架和开辟模式
2、接纳声明式的开放规范，在开辟中联合ArkUI来进行页面构造布局，并使用封装好的属性来进行页面样式渲染和布局优化。
学习过程中会频仍用到ArkUI，比如

1. Text("这是文本组件")
2. Button().onClick(()=>{})

复制代码

自界说组件

组件没有@Entry装饰器，不能直接在预览器预览，要想在组件引入但页面之前查看结果，可通过添加@Preview装饰器，预览结束后直接删除@Preview装饰器即可

1. // Header组件
2. @Preview
3. @Component
4. export struct Header{
5.   build() {
6.     Column(){
7.       Text("Header组件")
8.     }
9.     .width("100%")
10.     .height("100%")
11.   }
12. }

复制代码

在页面中引入组件

1. // index页面
2. import {Header} from "../view/Header" // 通过import引入Header组件
3. @Entry
4. @Component
5. struct Index {
6.   @State message: string = 'Hello World';
8.   build() {
9.     Column(){
10.       Text("这是主页面")
11.       Header() // 使用Header组件
12.     }
13.   }
14. }

复制代码

注意点：组件在向外袒露时如果是默认袒露（export default）,则引入时直接写组件名（import Header）；如果是普通袒露（export）,引入时需要以解构的方式（import {Header}）。
一个文件默认袒露只能袒露一次，普通袒露可以袒露多次。
在utils目录下封装一个公共日期组件

1. // DataFormat组件
2. export class DataFormat{
3.   dataFormat(value:Date){
4.     const year = value.getFullYear()
5.     const month = value.getMonth()
6.     const date = value.getDate()
7.     return `${year}-${month}-${date}`
8.   }
9. }
10. export default new DataFormat()

复制代码

在页面中引入

1. import {Header} from "../view/Header"
2. import formatUtils from "../utils/DataFormat"
3. @Entry
4. @Component
5. struct Index {
6.   @State message: string = formatUtils.dataFormat(new Date);
8.   build() {
9.     Column(){
10.       Text("这是主页面")
11.       Text(this.message)
12.       Header()
13.     }
14.   }
15. }

复制代码

四、项目的运行

预览器方式

现在最方便最简朴的方式。开辟工具默认提供了预览器，写完直接就热更新。  

模仿器方式

提供真机调试

使用usb毗连方式
使用无线调试毗连方式
调试代码

预览器无法支持进行调试，必须使用模仿器或者真机来调试代码。
需要在代码指定的位置打个断点，运行到指定的位置就可以断开。

调试代码过程中：
F8：代表进入下一段代码。如果代码是调用函数，默认不会关注函数内部，只会得到结果。
F7：代表进入下一段代码。如果当前这段代码是函数，默认进入函数内部进行调试 。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。