harmonyos鸿蒙学习笔记基于ets的入门应用结构简单梳理(代码片段)

郭梧悠 郭梧悠     2022-12-01     717

关键词:

鸿蒙eTS项目结构

前言

本文旨在简单说明鸿蒙eTS项目结构及相关知识点梳理,为以后自己鸿蒙开发的学习铺路

整体项目结构

eTS模块目录结构如下图所示:


其中.ets结尾的eTS(extended TypeScript)文件,用于描述UI布局、样式、事件交互和页面逻辑。

各个文件夹和文件的作用:

app.ets文件用于全局应用逻辑和应用生命周期管理。

pages目录用于存放所有组件页面,pages可以重命名为其他名字,只需要在config.json文件js属性的pages属性配置正确的路径即可。关于config.json的详细说明,可以参考此文档config.json配置文件说明(JS/eTS)

common目录用于存放公共代码文件,比如:自定义组件和公共方法。

APP的启动首页配置

在demo项目中有如下,pages目录中有四个页面,我们想要让FirstPage.ets作为App启动首页,该怎么办呢?

很简单,在config.json的pages做如下处理即可,就是将pages/FirstPage作为pages数组的第一个元素,那么启动app的时候,首先打开的页面就是FirstPage:

   "pages": [
          "pages/FirstPage",
          "pages/SecondPage",
          "pages/ThirdPage",
          "pages/FourthPage"
        ]

bundleName 属性简单说明

在config.json里面有如下,有一个bundleName的属性,代表着应用的包名,用于标识应用的唯一性,在Android中也就是package

  "app": 
    "bundleName": "com.example.firststartdemo",
    "vendor": "example",
    "version": 
      "code": 1000000,
      "name": "1.0.0"
    
  

在鸿蒙项目编译之后,会生成AndroidManifest.xml,我们可以看其package属性

js name 属性简单说明

在config.json里面有如下有个js标签,该标签有个name属性,表示JS Component的名字:

 "js": [
            
        "name": ".MyAbility",      
      

比如这里我们命名为.MyAbility,注意在abilities标签里也有个name属性,其值就是js name属性的值:

 "abilities": [
      
       //Ability的名称,需在一个应用的范围内保证唯一
        "name": ".MyAbility",
       
      
    ]

最终项目的config.json如下:

运行项目后在build目录下会生成一个MyAbility的类。

package属性简单说明:

在config.json的module节点下有个package属性:

  "module": 
    "package": "com.example.entry",
    

它表示HAP的包结构名称,在应用内保证唯一性。这么说可能不直观,运行app后在build文件夹下会生成如下文件夹:

本篇博文先写到此处, 后面随着博主学习的深入会继续更新。

参考资料

本文涉及的资料都来自于鸿蒙官方文档,通过官网可以了解第一手资料。
1、鸿蒙开发官方文档
2、@Entry、@Component 组件说明
3、eTS模块目录结构
4、使用eTS语言开发Hello World入门应用
5、Page Ability简单说明
6、config.json配置文件说明(JS/eTS)

harmonyos鸿蒙学习笔记路由ohos.router的使用(代码片段)

ohos.router路由入门指南前言路由跳转传递和接收参数参考资料前言本文以eTS-3.1.6.6位版本来说明ohos.router的使用,重点来说明ohos.router怎么传递和接收参数的。关于路由的更多细节说明,参考页面路由鸿蒙官方文档进行学习... 查看详情

harmonyos鸿蒙学习笔记2路由ohos.router的使用(代码片段)

ohos.router路由入门指南前言路由跳转传递和接收参数参考资料前言本文以eTS-3.1.6.6位版本来说明ohos.router的使用,重点来说明ohos.router怎么传递和接收参数的。关于路由的更多细节说明,参考页面路由鸿蒙官方文档进行学习... 查看详情

harmonyos鸿蒙学习笔记(16)canvas入门使用(代码片段)

Canvas入门指南1、Canvas代码结构2、简单案例2.1fillStyle和fillRect绘制蓝色矩形2.2strokeRect和strokeStyle绘制红色边框2.3lineCap的使用2.4lineJoin的使用2.5closePath的使用3、参考资料1、Canvas代码结构在使用Canvas的时候,需要向初始化RenderingC... 查看详情

harmonyos鸿蒙学习笔记(16)canvas入门使用(代码片段)

Canvas入门指南1、Canvas代码结构2、简单案例2.1fillStyle和fillRect绘制蓝色矩形2.2strokeRect和strokeStyle绘制红色边框2.3lineCap的使用2.4lineJoin的使用2.5closePath的使用3、参考资料1、Canvas代码结构在使用Canvas的时候,需要向初始化RenderingC... 查看详情

harmonyos鸿蒙学习笔记(16)canvas入门使用(代码片段)

Canvas入门指南1、Canvas代码结构2、简单案例2.1fillStyle和fillRect绘制蓝色矩形2.2strokeRect和strokeStyle绘制红色边框2.3lineCap的使用2.4lineJoin的使用2.5closePath的使用3、参考资料1、Canvas代码结构在使用Canvas的时候,需要向初始化RenderingC... 查看详情

harmonyos鸿蒙学习笔记(15)swiper实现抖音切换视频播放效果(代码片段)

Swiper实战1、项目结构2、PageVideo和PlayView简单说明2.1@State变量的使用2.2@Link和@Watch变量的使用2.3、Swiper的使用和PlayView的初始化2.4、页面可见状态发生改变时对视频进行暂停和播放2.5PlayView和PageVidew源码:参考资料࿱... 查看详情

harmonyos鸿蒙学习笔记tabs模仿安卓viewpager+fragment的效果(代码片段)

Tabs组件入门前言具体实现监听页面切换参考资料前言在Android开发中常用Fragment和ViewPager组合使用来进行页面的切换(如下图),在鸿蒙在APIVersion7开始提供了Tabs组件来实现类似的效果。具体实现实现类似上面的效果... 查看详情

harmonyos鸿蒙学习笔记tabs模仿安卓viewpager+fragment的效果(代码片段)

Tabs组件入门前言具体实现监听页面切换参考资料前言在Android开发中常用Fragment和ViewPager组合使用来进行页面的切换(如下图),在鸿蒙在APIVersion7开始提供了Tabs组件来实现类似的效果。具体实现实现类似上面的效果... 查看详情

harmonyos鸿蒙学习笔记tabs模仿安卓viewpager+fragment的效果(代码片段)

Tabs组件入门前言具体实现监听页面切换参考资料前言在Android开发中常用Fragment和ViewPager组合使用来进行页面的切换(如下图),在鸿蒙在APIVersion7开始提供了Tabs组件来实现类似的效果。具体实现实现类似上面的效果... 查看详情

harmonyos应用系统开发——鸿蒙开发体系详解及入门实例运行(代码片段)

...全貌,那这样你就真的只是一个会码代码的农民。1、HarmonyOS开发概述 1.1HarmonyOS开发概要    针对HarmonyOS开发按不同的角度划分,可以有不同的分发:    1、从宏观大类上分为三类:1)通用开发(可安... 查看详情

鸿蒙新作《鸿蒙harmonyos应用开发从入门到精通》拆箱

终于拿到《鸿蒙HarmonyOS应用开发从入门到精通》这本书。迫不及待与大家分享书中的内容。拆书视频也可见B站:【老卫拆书】007期:《鸿蒙HarmonyOS应用开发从入门到精通》拆箱_哔哩哔哩_bilibili外观正如之前帖子里面所介... 查看详情

harmonyos鸿蒙学习笔记(14)@objectlink的作用(代码片段)

在HarmonyOS鸿蒙学习笔记(12)@Link的作用一文中简单介绍了@Link的作用。其局限性在于@Link是针对某个数据对象进行的整体同步,而当开发者只想针对父组件中某个数据对象的部分信息进行同步时,使用@... 查看详情

harmonyos鸿蒙学习笔记(12)@link的作用(代码片段)

通过HarmonyOS鸿蒙学习笔记(5)@State作用说明和简单案例一文我们知道@State修饰的变量发生变化时,会刷新相关页面更新UI。如果是子组件想要改变父组件的状态从而刷新UI改怎么办呢?比如如下代码:如... 查看详情

harmonyos鸿蒙学习笔记(12)@link的作用(代码片段)

通过HarmonyOS鸿蒙学习笔记(5)@State作用说明和简单案例一文我们知道@State修饰的变量发生变化时,会刷新相关页面更新UI。如果是子组件想要改变父组件的状态从而刷新UI改怎么办呢?比如如下代码:如... 查看详情

harmonyos(鸿蒙)开发一文入门

...去官网认真学习!知识官网地址:https://developer.harmonyos.com/cn 查看详情

harmonyos(鸿蒙)开发一文入门

...去官网认真学习!知识官网地址:https://developer.harmonyos.com/cn 查看详情

鸿蒙应用开发培训笔记01:harmonyos介绍

...ff09;智能终端产业飞速发展带来历史性机遇(二)HarmonyOS+超级终端,带给消费者的不一样(三)HarmonyOS开启万物互联时代的一把钥匙(四)支持“超级终端”的HarmonyOS抽象模型与关键技术(五... 查看详情

我的harmonyos实战——鸿蒙系统开发入门学习

1.为什么要学习鸿蒙开发?开发者的角度:安卓操作系统连接外部设备时,发现,配对,连接,组合,验证每一步都不能少。连接上了之后才能调用控制第三方设备。换一个设备之后,所有的代码需... 查看详情