HarmonyOS 十分钟实现Hello world|和车神哥一起学 原创

发布于 2022-1-18 18:28
浏览
0收藏

春节不停更,此文正在参加「星光计划-春节更帖活动」https://harmonyos.51cto.com/posts/9923


@[TOC](HarmonyOS(鸿蒙)十分钟实现Hello world)

十分钟完成实战

开发环境配置完成后,请参考创建和运行Hello World创建工程。设备类型以“Phone”为例:

  • 使用JS语言开发(传统代码方式),模板选择“Empty Ability”,Language选择JS。
  • 使用JS语言开发(低代码方式),模板选择“Empty Ability”,Language选择JS。
  • 使用eTS语言开发,模板选择“Empty Ability”,Language选择eTS。
  • 使用Java语言开发,模板选择“Empty Ability”,Language选择Java。

创建工程

DevEco Studio开发环境配置完成后,可以通过运行HelloWorld工程来验证环境设置是否正确。以Phone工程为例,在Phone的远程模拟器中运行该工程。

  1. 打开DevEco Studio,在欢迎页点击Create Project,创建一个新工程。
  2. 根据工程创建向导,选择需要的Ability工程模板,然后点击Next。关于工程模板的介绍和支持的设备类型,请参考工程模板和开发语言介绍。

HarmonyOS 十分钟实现Hello world|和车神哥一起学-开源基础软件社区

  1. 填写工程相关信息,Device Type选择Phone,Language选择Java ,其他保持默认值即可,点击Finish。关于各个参数的详细介绍,请参考创建一个新的工程。

HarmonyOS 十分钟实现Hello world|和车神哥一起学-开源基础软件社区

  1. 工程创建完成后,DevEco Studio会自动进行工程的同步,同步成功如下图所示。
    HarmonyOS 十分钟实现Hello world|和车神哥一起学-开源基础软件社区

使用模拟器运行HelloWorld

DevEco Studio提供远程模拟器和本地模拟器,本示例以远程模拟器为例进行说明。关于本地模拟器的使用请参考1.6.1-使用Local Emulator运行应用。

DevEco Studio提供模拟器供开发者运行和调试HarmonyOS应用/服务。

  1. 在DevEco Studio菜单栏,点击Tools > Device Manager。
  2. 在Remote Emulator页签中点击Login,在浏览器中弹出华为开发者联盟帐号登录界面,请输入已实名认证的华为开发者联盟帐号的用户名和password进行登录(查看远程模拟器登录常见问题)。
    说明

推荐使用最新版本Chrome浏览器,如果使用Safari、360等其他浏览器,要取消阻止跨站跟踪和阻止所有Cookie功能。

  1. 登录后,请点击界面的允许按钮进行授权。
    HarmonyOS 十分钟实现Hello world|和车神哥一起学-开源基础软件社区

  2. 在设备列表中,选择Phone设备P40,并点击按钮,运行模拟器。
    HarmonyOS 十分钟实现Hello world|和车神哥一起学-开源基础软件社区

  3. 点击DevEco Studio工具栏中的按钮运行工程,或使用默认快捷键Shift+F10(Mac为Control+R)运行工程。
    HarmonyOS 十分钟实现Hello world|和车神哥一起学-开源基础软件社区

  4. DevEco Studio会启动应用/服务的编译构建,完成后应用/服务即可运行在模拟器上。
    HarmonyOS 十分钟实现Hello world|和车神哥一起学-开源基础软件社区

已成功运行了第一个HarmonyOS应用/服务.

是不是很简单,是不学会啦!~

工程创建完成后,使用预览器或Phone模拟器运行该工程。

完成上述操作后,请参考使用JS语言开发(传统代码方式)、使用JS语言开发(低代码方式)、使用eTS语言开发、使用Java语言开发继续下一步的学习。

使用预览器查看应用/服务效果

在HarmonyOS应用/服务开发过程中,DevEco Studio为开发者提供了预览器的功能,可以查看应用/服务的UI界面效果,支持Java和JS应用/服务的预览。预览器支持布局代码的实时预览,只需要将开发的源代码进行保存,就可以通过预览器实时查看应用/服务运行效果,方便开发者随时调整代码。需要注意的是,由于Windows系统和真机设备的字体库存在差异,可能会出现预览器界面中的字体与真机运行效果的字体存在差异。

JS预览器同时支持Phone、Tablet、TV、Wearable、Lite Wearable和Smart Vision设备的JS应用/服务“实时预览”和“动态预览”。

  • 实时预览:只要在布局文件中保存了修改的源代码,在预览器中就可以实时查看布局效果。

HarmonyOS 十分钟实现Hello world|和车神哥一起学-开源基础软件社区

  • 动态预览:在预览器界面,可以在预览器中操作应用/服务的交互动作,如点击事件、跳转、滑动等,与应用/服务运行在真机设备上的交互体验一致。
    HarmonyOS 十分钟实现Hello world|和车神哥一起学-开源基础软件社区

查看eTS组件预览效果

Phone、Tablet、Car的eTS应用/服务支持组件预览,要求compileSdkVersion为8或以上。组件预览支持实时预览,不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现,在单个源文件中,最多可以使用@Preview装饰10个自定义组件。

@Preview的使用参考如下:

@Preview
@Component
struct Component1 {
    build() {
        Column() {
            Row() {
                Text('Hello Component1')
                    .fontSize("50lpx")
                    .fontWeight(FontWeight.Bold)
            }
        }
    }
}

以上示例的组件预览效果如下图所示:
HarmonyOS 十分钟实现Hello world|和车神哥一起学-开源基础软件社区
请注意,如果被预览的组件是依赖参数注入的组件,建议的预览方式是:定义一个组件片段,在该片段中声明将要预览的组件,以及该组件依赖的入参,并在组件片段上标注@Preview注解,以表明将预览该片段中的内容。例如,要预览如下组件:

@Component
struct Title {
  context: string
  build() {
    Text(this.context)
  }
}

建议按如下方式预览:

@Preview
@Component    //定义组件片段TitlePreview
struct TitlePreview {
  build() {
    Title({ context: 'MyTitle' })    //在该片段中声明将要预览的组件Title,以及该组件依赖的入参 {context: ’MyTitle’}
  }
}

学到这里差不多已经入门了哟,小伙伴们!~

加油

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-1-19 10:47:14修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐