如何获取文件数据呢?

1.将JSON文字放到rawfile 目录下(示例:使用data.json文件)

我的data.json文件内容示例:

{
  "DATA": [
    {
      "title": "第一个标题",
      "data": "第一个数据"
    },
    {
      "title": "第二个标题",
      "data": "第二个数据"
    }
  ],
  "DATA2": [
    {
      "title": "第三个标题",
      "data": "第三个数据"
    },
    {
      "title": "第四个标题",
      "data": "第四个数据"
    }
  ]
}

1)根据 json 文件约定数据类型(给出下面代码示例)

export interface DataItem {
  title:string
  data:string
}

type Datas = Record<string, DataItem[]>

2.初始化获取数据

使用 textDecoder.decodeToString 转换数据把二进制数据转成字符串

@ohos.resourceManager (资源管理)-ArkTS API-Localization Kit(本地化开发服务)-应用框架 - 华为HarmonyOS开发者

使用textDecoder文本解析工具,getRawFileContentSync获取资源-获取二进制数据

代码示例:(具体讲解已经在代码中)

  // 初始化datas变量,用于存储从 JSON 文件中读取的单词数据
  datas: Datas = {}
  // 组件即将显示时调用的生命周期方法
  aboutToAppear() {
    // 调用该方法初始化数据
    this.initDatas()
  }
  // 使用 @State 装饰器标记 DataKey 变量,当该变量的值发生变化时,组件会自动重新渲染
  @State DataKey: string = ''
  // 初始化数据的方法
  initDatas() {
    // 获取当前组件的上下文
    const ctx = getContext(this)
    // 从资源管理器中同步获取名为 'data.json' 的原始文件内容,返回一个 Uint8Array 类型的数据
    const uint8Array = ctx.resourceManager.getRawFileContentSync('data.json')
    // 实例化一个文本解析工具,用于将 Uint8Array 类型的数据解析为字符串
    const textDecoder = new util.TextDecoder()
    // 使用 decodeToString 方法将 Uint8Array 解析为字符串(适用于 API 12+)
    const jsonStr = textDecoder.decodeToString(uint8Array)
    // 将解析后的 JSON 字符串转换为对象,并赋值给datas 变量
    this.datas = JSON.parse(jsonStr) as Datas
    // 获取 datas 对象的第一个键,并赋值给 DataKey 变量
    this.DataKey = Object.keys(this.datas)[0]
  }

3.进行数据渲染

完整示例代码(包含详细讲解):

// 从 "@kit.ArkTS" 模块中导入 util 工具
import { util } from "@kit.ArkTS"

export interface DataItem {
  title:string
  data:string
}

type Datas = Record<string, DataItem[]>

@Entry
@Component
struct Index {
  // 初始化datas变量,用于存储从 JSON 文件中读取的单词数据
  datas: Datas = {}
  // 组件即将显示时调用的生命周期方法
  aboutToAppear() {
    // 调用该方法初始化数据
    this.initDatas()
  }
  // 使用 @State 装饰器标记 DataKey 变量,当该变量的值发生变化时,组件会自动重新渲染
  @State DataKey: string = ''
  // 初始化数据的方法
  initDatas() {
    // 获取当前组件的上下文
    const ctx = getContext(this)
    // 从资源管理器中同步获取名为 'data.json' 的原始文件内容,返回一个 Uint8Array 类型的数据
    const uint8Array = ctx.resourceManager.getRawFileContentSync('data.json')
    // 实例化一个文本解析工具,用于将 Uint8Array 类型的数据解析为字符串
    const textDecoder = new util.TextDecoder()
    // 使用 decodeToString 方法将 Uint8Array 解析为字符串(适用于 API 12+)
    const jsonStr = textDecoder.decodeToString(uint8Array)
    // 将解析后的 JSON 字符串转换为对象,并赋值给datas 变量
    this.datas = JSON.parse(jsonStr) as Datas
    // 获取 datas 对象的第一个键,并赋值给 DataKey 变量
    this.DataKey = Object.keys(this.datas)[0]
  }

  build() {
    Column() {
      Row() {
        Column({ space: 4 }) {
          // 在 Column 中添加一个文本组件,显示获取的当前数据数量
          Text(`${this.DataKey}中共 ${this.datas[this.DataKey].length} 个数据`)
            .fontSize(12)
        }
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding(16)
      // 添加一个分割线组件
      Divider()
        // 设置分割线的宽度为 6
        .strokeWidth(6)
      List() {
        // 使用 ForEach 指令遍历当前单词组中的每个数据项
        ForEach(this.datas[this.DataKey], (item: DataItem) => {
          // 为每个单词项创建一个列表项组件
          ListItem() {
            Row({ space: 7 }) {
              Column({ space: 10 }) {
                // 在 Column 中添加一个文本组件,显示数据的标题
                Text(item.title)
                  // 设置文本的字体加粗
                  .fontWeight(FontWeight.Bold)
                // 在 Column 中添加一个文本组件,显示数据的数据
                Text(item.data)
                  // 设置文本的字体大小为 14
                  .fontSize(14)
              }
            }
            .padding(8)
          }
        })
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

适用HarmonyOS NEXT / API12或以上版本

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐