首页 > 程序开发 > 开发鸿蒙第一个demo工程
2020
09-15

开发鸿蒙第一个demo工程

介绍

昨天已经安装最新版本的HUAWEI DevEco Studio 2.0了, 今天开发一个简单的样例代码, 实现点击统计计数功能。

由于DevEco Studio2.0集成的模拟器只支持liteWearable项目。 所以新建一个lite wearable项目。

“The Huawei Lite Wearable Simulator supports only liteWearable projects.”

安装sdk和预览工具

路径:菜单栏tools—sdkManager

开发鸿蒙第一个demo工程 - 第1张  | 乐生活 开发鸿蒙第一个demo工程 - 第2张  | 乐生活

新建工程

新建一个liteWearable工程。

开发鸿蒙第一个demo工程 - 第3张  | 乐生活 开发鸿蒙第一个demo工程 - 第4张  | 乐生活 开发鸿蒙第一个demo工程 - 第5张  | 乐生活

 

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

开发鸿蒙第一个demo工程 - 第6张  | 乐生活 开发鸿蒙第一个demo工程 - 第7张  | 乐生活 开发鸿蒙第一个demo工程 - 第8张  | 乐生活

预览功能

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

开发鸿蒙第一个demo工程 - 第9张  | 乐生活 开发鸿蒙第一个demo工程 - 第10张  | 乐生活

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

实现计数功能

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

  • index.js代码

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

export default {

data: {

count: 0

},

tickClick() {

this.count += 1;

}

}

开发鸿蒙第一个demo工程 - 第11张  | 乐生活

 

  • index.hml代码

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

<div class=”container”>

<text class=”title” onclick=”tickClick”>

点击了 {{count}} 次

</text>

</div>

开发鸿蒙第一个demo工程 - 第12张  | 乐生活

  • 预览工程界面

开发鸿蒙第一个demo工程 - 第13张  | 乐生活

 

 

最后编辑:
作者:lehoon
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。