安装开发工具

1、鸿蒙官网下载​​HUAWEI DevEco Studio 2.0​​ 开发工具

2、​​下载安装​​Gradle

gradle配置步骤:解压gradle-5.4.1-all.zip到本地目录,在DevEco Studio 2.0中选择File=》Settings=》Build=》Gradle,选择本地解压的目录

3、安装sdk和预览工具 

路径:菜单栏tools---sdkManager

搭建一个鸿蒙Hello World工程_ide

搭建一个鸿蒙Hello World工程_开发工具_02

 

新建鸿蒙工程 

搭建一个鸿蒙Hello World工程_ide_03

搭建一个鸿蒙Hello World工程_ide_04

搭建一个鸿蒙Hello World工程_鸿蒙_05

搭建一个鸿蒙Hello World工程_鸿蒙_05

 

具体代码路径如下,和idea的工程目录类似。 界面的首页路径为:ClickDemo\entry\src\main\js\default\pages\index.hml。 样式定义为index.css, 具体逻辑在index.js里面。

搭建一个鸿蒙Hello World工程_鸿蒙_07

搭建一个鸿蒙Hello World工程_开发工具_08

搭建一个鸿蒙Hello World工程_开发工具_09

预览功能

当我们安装了预览工具后, 在华为的ide右侧会有gradle和Previewer。 点击Previewer后,会打开一个预览窗口。

搭建一个鸿蒙Hello World工程_菜单栏_10

搭建一个鸿蒙Hello World工程_开发工具_11

这里是实时更新的,如果代码发生修改后,使用ctrl+s保存代码后,这里也会自动更新,或者点击刷新按钮重新载入。

实现计数功能

我们参考开发文档,实现一个点击累加计数器。

  • index.js代码

增加一个count计数器变量,初始值为0,增加一个tickClick方法,每次tickClick执行,则让count自增1.

export default {

data: {

count: 0

},

tickClick() {

this.count += 1;

}

}

搭建一个鸿蒙Hello World工程_ide_12

  • index.hml代码

修改index.hml代码,给text空间增加一个onclick方法,绑定tickClick方法。然后修改{{}}占位符,使用count变量替换模板生成的title。

<div class="container">

<text class="title" οnclick="tickClick">

点击了 {{count}} 次

</text>

</div>

搭建一个鸿蒙Hello World工程_ide_13

  • 预览工程界面

搭建一个鸿蒙Hello World工程_菜单栏_14

 

参考1 ​​https://mparticle.uc.cn/article.html?uc_param_str=frdnsnpfvecpntnwprdssskt&btifl=100&app=uc-iflow&title_type=1&wm_id=57f8df4aaaa9451d9304baa32d9db8ae&wm_cid=377717667554920448&pagetype=share&client=&uc_share_depth=1​

参考2​​https://iflow.uc.cn/webview/news?app=uc-iflow&aid=14542262858422333452&cid=100&zzd_from=uc-iflow&uc_param_str=dndsfrvesvntnwpfgicp&recoid=&rd_type=share&sp_gz=0&pagetype=share&btifl=100&uc_share_depth=1​