本文将介绍如何在华为手表 WATCH 3 Pro 上使用鸿蒙（HarmonyOS）进行开发，实现轻量级本地数据存储的逻辑，并分享一个简单的文本输入框的案例。

初

希望能写一些简单的教程和案例分享给需要的人

鸿蒙可穿戴开发

环境与设备

系统：window
设备：HUAWEI WATCH 3 Pro
开发工具：DevEco Studio 3.0.0.800

鸿蒙开发

文件夹：

entry:项目文件夹
js：前端文件夹
pages:页面文件夹
index:首页文件夹

文件

index.css:首页样式
index.hml:首页
index.js:首页脚本

开发步骤

创建项目文件夹和页面
在项目文件夹中创建前端文件夹 “js”，页面文件夹 “pages”，以及首页文件夹 “index”。

新增一个文本输入框

在首页文件夹 “index” 下的 “index.hml” 中添加以下代码来新增一个文本输入框。

以下是添加一个文本输入框的代码：

index.hml

<div class="container">
    <div class="input-item">
        <div class="color">
            <label class="input-title">用户名：</label>
            <input class="input"  value="{{userName}}" type="text" placeholder="请输入用户名"  onchange="changeUserName"></input>
        </div>
    </div>
    <input class="btn" type="button" value="确认" onclick="onSetting"></input>

    <dialog class="dialogClass" id="successDialog" dragable="true">
        <div class="content">
            <text>操作成功</text>
        </div>
    </dialog>
</div>

index.css

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

.color {
    margin: 0 4% 0 4% ;
    width: 92%;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.input-item {
    width: 100%;
    margin-bottom: 10px;
}
.input-title {
    width: 60px;
    color: #fff;
    font-family: HarmonyHeiTi;
    font-size: 12px;
    text-align: right;
}
.input {
    width: 65%;
    height: 36px;
    padding: 0% 10px;
    font-size: 14px;
    border-radius: 8px;
    background-color: #fff;
    color: black;
}
.btn{
    display: flex;
    width: 100px;
    font-size: 14px;
    height: 36px;
}

存储数据的逻辑

在 “index.js” 中添加以下代码来实现读取指定文件，将数据加载到 Storage 实例，用于数据操作。

index.js

在华为手表的开发中，为了实现数据的存储，需要使用到 @ohos.data.storage 和 @ohos.ability.featureAbility 两个模块。其中， @ohos.data.storage 模块提供了 Storage 类，用于实现轻量级数据存储和访问操作，包括读取、写入和删除数据等操作。而 @ohos.ability.featureAbility 模块则提供了获取上下文（Context）对象的方法，用于在应用程序中访问系统服务，比如获取文件存储目录。

通过引入这两个模块，我们可以在华为手表的开发中实现数据的存储和访问，为用户提供更好的应用体验。同时，这也展示了华为鸿蒙操作系统在开发上提供了良好的支持和便利，让开发者可以更加专注于业务逻辑的实现。

import prompt from '@system.prompt';
import data_storage from '@ohos.data.storage';
import featureAbility from '@ohos.ability.featureAbility';

export default {
    data: {
        userName: ""
    },
    onInit() {
        var currPage = this;
        // 获取本地存储的用户信息
        var context = featureAbility.getContext();
        context.getFilesDir().then((filePath) => {
            data_storage.getStorage(filePath + '/userNameValue', function (err, storage) {
                let promiseGet = storage.get('userName', '未知');
                promiseGet.then((value) => {
                    currPage.userName = value;
                }).catch((err) => {
                })
            })
        });
    },
    onSetting() {
        var currPage = this;
        // 写入本地存储
        var context = featureAbility.getContext();
        context.getFilesDir().then((filePath) => {
            data_storage.getStorage(filePath + '/userNameValue', function (err, storage) {
                if (err) {
                    console.info("Get the storage failed, path: " + filePath + '/userNameValue')
                    return;
                }
                storage.putSync('userName', currPage.userName)
                storage.flushSync();

                prompt.showToast({
                    message: "保存成功",
                    duration: 3000,
                });
            })
        });
    },
    changeUserName(e) {
        this.userName = e.value;
    },
    changePhone(e) {
        this.reminderMobileNumber = e.value;
    }
}

结果如下图