华为鸿蒙系统|开发鸿蒙第一个demo工程华为鸿蒙系统

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

介绍
昨天已经安装最新版本的HUAWEI DevEco Studio 2.0了，今天开发一个简单的样例代码，实现点击统计计数功能。
由于DevEco Studio2.0集成的模拟器只支持liteWearable项目。所以新建一个lite wearable项目。
“The Huawei Lite Wearable Simulator supports only liteWearable projects.”
安装sdk和预览工具路径：菜单栏tools---sdkManager

新建工程新建一个liteWearable工程。

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

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

这里是实时更新的，如果代码发生修改后，使用ctrl+s保存代码后，这里也会自动更新，或者点击刷新按钮重新载入。
实现计数功能我们参考开发文档，实现一个点击累加计数器。

index.js代码

增加一个count计数器变量，初始值为0 ，增加一个tickClick方法，每次tickClick执行，则让count自增1.
export default {
【华为鸿蒙系统|开发鸿蒙第一个demo工程】data: {
count: 0

tickClick() {
this.count += 1;

index.hml代码

修改index.hml代码，给text空间增加一个onclick方法，绑定tickClick方法。然后修改{{占位符，使用count变量替换模板生成的title 。
<div class=\"container\">
<text class=\"title\" onclick=\"tickClick\">
点击了 {{count 次
</text>
</div>