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

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

• 初
• 环境与设备

• 文件夹：
• 文件
• 新增一个文本输入框

• index.hml
• index.css

• 存储数据的逻辑

• index.js

• 结果如下图

初

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

鸿蒙可穿戴开发

环境与设备

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

鸿蒙开发

文件夹：

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

文件

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

新增一个文本输入框

代码如下：

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;
}

存储数据的逻辑

读取指定文件，将数据加载到Storage实例，用于数据操作，使用callback方式返回结果，此方法为异步方法。

代码如下：

index.js

import data_storage from ‘@ohos.data.storage’;
import featureAbility from ‘@ohos.ability.featureAbility’;

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;
    }
}

结果如下图