初

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

鸿蒙可穿戴开发

环境与设备

系统：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;}
}

结果如下图

华为手表开发：WATCH 3 Pro（11）存储数据_轻量级存储_到本地相关推荐

华为手表开发：WATCH 3 Pro（3）创建项目以及运行完整流程
华为手表开发:WATCH 3 Pro(3)创建项目以及运行完整流程初环境与设备创建项目创建项目入口配置项目运行项目报错需要在 Appgallery Connect , 创建项目,然后在 ...
华为手表开发：WATCH 3 Pro（2）生成密钥和证书请求文件，生成签名和配置签名
华为手表开发:WATCH 3 Pro(2)生成密钥和证书请求文件,生成签名和配置签名初环境与设备生成密钥生成签名初希望能写一些简单的教程和案例分享给需要的人鸿蒙可穿戴开发环境与设备系 ...
华为手表开发：WATCH 3 Pro（17）传感器订阅指南针
华为手表开发:WATCH 3 Pro(17)传感器订阅指南针初环境与设备指南针传感器介绍与说明鸿蒙开发文件夹: 文件新增展示的文本标记 index.hml index.css index. ...
华为手表开发：WATCH 3 Pro（15）传感器订阅加速度计
华为手表开发:WATCH 3 Pro(15)传感器订阅加速度计初环境与设备加速度传感器介绍与说明鸿蒙开发文件夹: 文件重点新增展示的文本标记 index.hml index.css in ...
华为手表开发：WATCH 3 Pro（8）获取位置服务
华为手表开发:WATCH 3 Pro(8)获取位置服务初环境与设备文件夹: 文件新增第二页面 geolocation.hml geolocation.js 修改首页 -> 新建按钮 &q ...
华为手表开发：WATCH 3 Pro（5）点击按钮弹窗
华为手表开发:WATCH 3 Pro(5)点击按钮弹窗初环境与设备创建项目认识目录结构修改首页 -> 新建按钮 " 按钮 " 文件名:**index.hml** 引 ...
华为手表开发：WATCH 3 Pro（10）获取心率
华为手表开发:WATCH 3 Pro(10)获取心率初环境与设备文件夹: 文件新增第二页面引用包 import sensor from '@system.sensor'; showHeart ...
华为手表开发：GT3（1）配置调试设备
华为手表开发:GT3(1)配置调试设备初环境与设备获取手表UUID 登录 AppGallery Connect 点击用户与访问初希望能写一些简单的教程和案例分享给需要的人鸿蒙可穿戴开发欢 ...
java 存储数据到文件中_本机速度文件支持的“纯” Java大数据存储
java 存储数据到文件中动机所有这一切始于意识到我买不起足够大的计算机. 音频处理需要大量的内存. Audacity是一款出色的免费音频处理器,它使用文件支持的存储系统对其进行管理. 这是解决此 ...

华为手表开发：WATCH 3 Pro（11）存储数据_轻量级存储_到本地