运行第一个HarmonyOS Demo应用

https://developer.huawei.com/consumer/cn/training/detail/101615178142997051
HarmonyOS>HarmonyOS应用开发>高级篇>运行第一个HarmonyOS Demo应用
视频文字版:
1.如何运用第一个harmonyOS的demo 应用。
以创建一个phone设备的JS工程进行说明
运行deveco studio
在欢迎页点击create harmonyOS project (创建一个新工程)
设备选择Phone
模板选择empty feature ability(JS)
点击next, 配置工程的基本信息

package name 是应用的包名 必须唯一,一般采用反译名结构
compatible API version 是指应用兼容的SDK 最低版本
点击finish 等待工程同步完成即可。

接下来看工程的目录结构
主要包括工程级别目录和模块目录

工程级别目录
.grade 和.idea 是 工具自动生成的,存放一些缓存文件
entry为模块,存放harmonyOS 应用的源码,资源等。
gradle 是 编译构建所需要的工具,也是自动生成的。
build.gradle 是工程的自动化构建的脚本文件:例如应用的SDK脚本,maven地址,库依赖等配置信息。
其余 文件后续学习中说明。

接下来说模块目录:
一个工程中可以包含多个模块,模块类型为Entry 和Feature两种。

一个工程中同一个模块,有且仅有一个entry 模块、可以有多个feture 模块和没有feature 模块。

模块是由abilities libs resource config.json 等组成。

其中Abilities 分为FA(feature Ability 中文名是:元程序)和PA(Particle Ability,中文名称:元服务)
他们是应用的基本组成单元。
简单理解:FA是带UI界面的,PA是不带UI界面的。
看模块下的文件:
libs:存放应用依赖的三方库文件
java 目录:存放Java源码,提供JS应用的元能力基座和运行的入口
JS目录: JS应用的源码目录:
pages目录: 代表应用的页面
其中index表示应用的一个页面:包括页面的布局(HTML),样式(css),逻辑文件(JS)
如果有多个页面,可以创建多个JS page
i18n :用于存放国际化的资源文件,如中英文字符等。
app.js 是全局的JS逻辑文件和应用的生命周期管理。
resources: 用于存放应用的资源文件;如图片,音频,视频,字符等文件
build.grade 模块下的自动化构建的脚本文件,只对当前文件生效。
config.json 是应用的配置文件
其中bundleName: 该标签标识应用的APP的包名,用于标识应用的唯一性。
package: 该标签标识hap包的包结构名称,在应用内保持唯一性。
deviceType:该标签标识好可以运行在哪类的设备上。比如当前应用是运行在手机上的,该字段为phone
可以支持添加多个设备,
moduleName 和moduleType 该标签标识当前模块的名称和模块的类型(分为entry 和feature)。

abilities name: 该标签标识ability 类名;
icon 该标签标识ability 的图标资源文件索引。
label : 该标签ability对用户显示的名称;
pages :该标签是一个数组。,用于列举JSComponent中每个页面的 路由信息(页面信息+页面名称)
数组第一个元素代表JSFA首页。
接下来使用devEco Studio 的远程模拟器来运行应用。
点击tools ->HVD Manager.
首先登陆华为账号。(使用远程模拟器的话,华为账号需要实名认证)
个人开发者:建议使用个人银行卡进行认证,立即生效
如果使用身份证认证的话,需要经过人工审核,一般为1至2个工作日。
登陆华为账号后,需要对模拟器进行授权,

授权后,在对应的模拟器窗口可以看到对应的资源
我们选择Phone设备P40,点击运行按钮运行模拟器,可以看到手机模拟器就运行起来了

接下来使用模拟器运行应拥:就可以看到这里显示了已连接的设备,选中连接的设备,点击oK 开始隐形应拥,等待编译完成后, 可以在模拟器中看到应拥已经运行起来了,显示的结果为:“您好 世界”
接下来,我们来修改一下界面上显示的文字内容,定义文字显示内容放在i18n 如en_US.json 定义在英文模式下,页面显示的变量内容

现在我们在en-US.json 和 zh-CN.json 中增加一个文字变量“harmonyOS”,取值也为“harmonyOS”
接下来在index.js文件中
修改变量“title”的值的引用为“strings.harmonyos”
然后使用模拟器重新运行。
界面显示:您好,harmonyOS
接下来我们在界面中添加一个按钮,打开index.hml文件,添加一个button 控件 其中class 可以理解为一个id值。在index.css中编辑该id值的样式。type 是按钮的样式,我门当前选择的是胶囊模式。

value 属性值是按钮上的文字,也可以做成变量,动态的去加载。
接下来,打开index.css 文件,编辑该button的样式。添加button组件的 高度,宽度和字体大小。
在代码的编写过程中可以通国previewer 功能来查看界面的布局效果,可以实时展示界面布局,然后使用模拟器运行,展示效果。
接下来,在按钮上添加点击事件,通过点击按钮来改变字体的显示颜色。
首先在index.hml 文件中编程我们所添加的按钮控件。使其关联一个onClick 的响应事件,并将该响应时间设置为“button OnClick”函数
我们需要在index.js中定义这个函数,然后在该函数体内就可以实现点击按钮后的处理逻辑。
为了改变字体的颜色,我们用一个参数来控制字体颜色。参数的初始值给默认值当点击按钮后,在按钮的响应函数中改变该参数的值,就可以实现改变字体颜色的功能。

首先在index.js 中定义black: “#000000” (黑色)和red: “#ff0000” (红色)

再定义一个titleColor: " "
接下来在init函数找那个添加 this.titleColor = this.black 将颜色初始值设置为黑色。

然后在index.hml 的text 文件中将颜色的属性设置为我们在index.js中定义的“titleColor”

最后在index.js 的文件中补充响应函数button.OnClick() 的逻辑。

判断当前文字的颜色是否为黑色。如果当期那字体的颜色为黑色,则改变字体的颜色为红色。

如果当前字体的颜色为红色,那就改为黑色。重新加载模拟器,运行效果,点击按钮。

内容要点回顾:
1.如何通过工程想到创建工程
2.harmonyOS应用基础知识介绍
3.使用模拟器运行应用。
4.如何修改字符,添加控件,实现点击事件。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值