HarmonyOS-第一课学习笔记

学习网址:鸿蒙2.x系统应用开发-前端基础入门教程(p1 p2 p3)
笔记网址:华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程

1.鸿蒙系统简介

从下向上依次为:内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 组件”逐级展开。前端领域的发力点核心在于应用层的「拓展应用、三方应用」构建服务。
应用层包括「系统应用」和「第三方非系统应用」。应用由一个或多个 FA(Feature Ability)或 PA(Particle Ability)组成。其中,FA 有 UI 界面,提供与用户交互的能力;而 PA 无 UI 界面,提供后台运行任务的能力以及统一的数据访问抽象。基于 FA/PA 开发的应用,能够实现特定的业务功能,支持跨设备调度与分发,为用户提供一致、高效的应用体验。
鸿蒙系统简介

2.DevEco Studio使用简介

第一步:启动应用后,提示是否创建启动程序脚本,方便后续模板选择。

第二步:使用华为云 npm 包管理工具。

第三步:创建 or 导入项目。

第四步:选择项目类型及模板。

为了满足应用在多设备上运行的开发需求,DevEco Studio 2.1 Release 在原有单设备工程模板的基础上,新增了 11 个跨设备工程模板。开发者可根据工程向导,依次挑选模板和设备类型,轻松创建跨设备工程,自动生成示例代码和相关资源。

第五步:创建工程项目。
在这里插入图片描述

第六步:查阅并关闭开发简易提示。

第七步:项目自动下载对应的依赖及文件,这一步直接点击运行则会有错误提示。

第八步:在 DevEco Studio 菜单栏,点击Tools > SDK Manager 配置对应的 SDK 版本。

第九步:点击右上角 sign in 登陆华为账号,请输入已实名认证的华为帐号的用户名和密码进行登录,在网页中登陆成功后,完成授权。

第十步:进入到 src/main/js/default/pages/index 页面,打开 view -> Tool Windows -> Previewer 进行预览。

第十一步:进入 Tools -> Devices Manager 看到模拟器管理页面,这一步必须要实名认证的华为账号进行登录后,即可选择对应的设备,然后启动设备。

第十二步:启动设备后,再次点击 绿色运行按钮,即可在仿真设备上运行该项目。

PS:在 Views 可以快速设置编辑器主题,以及对应的开发设置。

3.应用开发目录介绍

JS FA 应用的 JS 模块 (entry/src/main/js/module) 的典型开发目录结构如下:

在这里插入图片描述

目录结构中文件分类如下:

.hml 结尾的 HML 模板文件,这个文件用来描述当前页面的文件布局结构。
.css 结尾的 CSS 样式文件,这个文件用于描述页面样式,如字体颜色等等。
.js 结尾的 JS 文件,这个文件用于处理页面和用户的交互。
各个文件夹的作用:

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

4.文件访问规则

应用资源可通过绝对路径或相对路径的方式进行访问,本开发框架中绝对路径以 “/” 开头,相对路径以 “./” 或 “…/” ,具体访问规则如下:

引用代码文件,需使用相对路径,比如:…/common/utils.js。

引用资源文件,推荐使用绝对路径。比如:/common/xxx.png。

公共代码文件和资源文件(主要放.image或.js等文件)推荐放在 common 下,通过以上两条规则进行访问。

CSS 样式文件中通过 url() 函数创建 数据类型,如:url(/common/xxx.png)。

如果代码文件A和文件B位于同一目录,则代码文件B引用资源文件时可使用相对路径,也可使用绝对路径。

如果代码文件A和文件B位于不同目录,则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时,代码文件B的目录会发生变化。

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值