安卓如何入手鸿蒙开发：简单的嘟嘟计数器

本文链接：https://blog.csdn.net/DJY1992/article/details/144711894

安卓如何入手鸿蒙开发：简单的嘟嘟计数器

android原生转入鸿蒙

转载请标明出处：
https://dujinyang.blog.csdn.net/
本文出自:【奥特曼超人的博客】

android原生转入鸿蒙

android原生如何入手鸿蒙，（HarmonyOS）鸿蒙系统凭借其分布式能力和多设备协同特性，为开发者提供了全新的开发体验。

本文将以一个简单的计数器应用为例，帮助初学者快速上手鸿蒙开发。

当然，如果你会HTML+CSS+JS的，这里理解就会相对简单多了。

环境准备

在开始之前，请确保以下开发环境已搭建完成：

安装 DevEco Studio：从华为官方开发者网站下载并安装。
配置环境：
- 注册华为开发者账号。
- 在 DevEco Studio 中安装 HarmonyOS SDK。
- 准备调试设备（支持鸿蒙系统的手机或模拟器）。
基础语言：本文采用 JavaScript（声明式开发模式）编写代码，初学者需具备基础的 HTML 和 JavaScript 知识。

创建鸿蒙应用项目

打开 DevEco Studio，点击 File > New > Project。
选择 HarmonyOS > Empty Ability，点击 Next。
配置项目名称，例如 DuduCounter，选择编程语言为 JS，点击 Finish。

编写嘟嘟计数器应用代码

嘟嘟计数器应用主要由以下功能组成：

显示当前计数值。
点击按钮增加计数值，并弹出提示框。
点击按钮重置计数值，并弹出提示框。

1. 修改应用界面（index.hml）

HTML的入口，相当于layout界面，打开项目目录下的 entry/src/main/js/default/pages/index/index.hml 文件，编辑界面代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>嘟嘟计数器</title>
</head>
<body>
    <div class="container">
        <text class="count">{{count}}</text>
        <button class="btn" onclick="increment">增加</button>
        <button class="btn" onclick="reset">重置</button>
    </div>
</body>
</html>

2. 添加样式（index.css）

控制CSS属性，在 entry/src/main/js/default/pages/index/index.css 中定义应用的样式：

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.count {
    font-size: 50px;
    margin: 20px;
}

.btn {
    width: 150px;
    height: 50px;
    margin: 10px;
    text-align: center;
    background-color: #007dff;
    color: white;
    border-radius: 5px;
}

3. 添加逻辑代码（index.js）

这里引用另外一个MD5的“类”，在 entry/src/main/js/default/pages/index/index.js 中定义计数器逻辑：

const TAG = '[dujinyang]';
let instance = null;
import util from '../../common/util';

export default {
    data: {
        count: 0
    },

    // 单例模式实现
    getInstance() {
        if (!instance) {
            console.info(`${TAG} 创建计数器实例`);
            instance = this;
        }
        return instance;
    },

    increment() {
        console.info(`${TAG} 调用 increment 方法`);
        this.count += 1;
        prompt.showToast({
            message: `当前计数值：${this.count}`
        });
        console.info(`${TAG} 当前计数值增加到：${this.count}`);
        const encryptedValue = util.md5Encrypt(this.count.toString());
        console.info(`${TAG} 当前计数值的 MD5：${encryptedValue}`);
    },

    reset() {
        console.info(`${TAG} 调用 reset 方法`);
        this.count = 0;
        prompt.showToast({
            message: "计数值已重置"
        });
        console.info(`${TAG} 计数值已重置为 0`);
        const encryptedValue = util.md5Encrypt(this.count.toString());
        console.info(`${TAG} 重置值的 MD5：${encryptedValue}`);
    }
};

新增工具类（util.js）

为了实现跨界面工具类并添加 MD5 加密功能，创建 entry/src/main/js/default/common/util.js 文件：

import crypto from '@ohos.crypto';

const TAG = '[dujinyang Util]';

export default {
    md5Encrypt(value) {
        console.info(`${TAG} 开始 MD5 加密`);
        const md5Digest = crypto.createHash('md5');
        md5Digest.update(value);
        const result = md5Digest.digest('hex');
        console.info(`${TAG} 加密结果：${result}`);
        return result;
    }
};