鸿蒙应用开发ArkTs——项目目录,含ets文件夹下的目录结构，resources目录下的文件类型详解

本篇以华为开发者官网上的闹钟（ArkTS）项目为例，详细讲解了一个使用ArkTs开发的项目的目录结构，并介绍了MVVM架构模式和鸿蒙应用resources资源目录中的文件类型

一、官网项目目录

这是闹钟项目的目录结构：

├─build-profile.json5 //是应用的构建配置脚本，其中配置了应用签名信息、编译和适配 SDK 版本，构建产物以及多个 module 信息
├─hvigorfile.ts //应用的编译脚本
├─LICENSE// 许可证
├─local.properties//系统配置或自定义配置。比如：sdk路径、ndk路径。
├─oh-package-lock.json5//配置三方包声明文件的入口及包名。本地配置
├─oh-package.json5//配置三方包声明文件的入口及包名。
├─README.md //项目说明文档
├─oh_modules //第三方库依赖信息
├─hvigor//hvigor 是一款基于任务管理机制实现的一套自动化构建工具
|   ├─hvigor-config.json5//会以插件形式引入 hvigor 构建工具并且标识其版本
|   └hvigor-wrapper.js//是一个 js 脚本文件，与 hvigor相关的包装器
├─entry//ablity模块文件目录
|   ├─hvigorfile.ts//当前模块编译脚本
|   ├─oh-package.json5//当前ablity的三方包配置
|   ├─src
|   |  ├─main
|   |  |  ├─module.json5//当前ablity配置信息  Stage模型模块配置文件
|   |  |  ├─resources//当前ablity的资源目录
|   |  |  |     ├─base//基础默认目录
|   |  |  |     |  ├─profile
|   |  |  |     |  |    └main_pages.json//页面路由信息
|   |  |  |     |  ├─media//图片、视频、音乐等媒体资源
|   |  |  |     |  ├─element//用于存放字符串、颜色、布尔值等基础元素 详见下文
|   |  |  |     ├─zh_CN//设备语言环境是简体中文时，优先匹配此目录下资源 内部文件和base对应
|   |  |  ├─ets//用于存放ets源码。
|   |  |  |  ├─viewmodel// 多界面 统一存取数据
|   |  |  |  |     ├─AlarmItem.ets
|   |  |  |  |     ├─AlarmSettingItem.ets
|   |  |  |  |     ├─DayDataItem.ets
|   |  |  |  |     ├─DetailViewModel.ets
|   |  |  |  |     ├─MainViewModel.ets
|   |  |  |  |     └ReminderItem.ets
|   |  |  |  ├─view //视图层  UI界面以及其控件 放一些自定义组件
|   |  |  |  |  ├─BackContainer.ets
|   |  |  |  |  ├─Main//按照对应页面或逻辑进行归类
|   |  |  |  |  |  ├─AlarmList.ets
|   |  |  |  |  |  ├─AlarmListItem.ets
|   |  |  |  |  ├─Detail
|   |  |  |  |  |   ├─DatePickArea.ets
|   |  |  |  |  |   ├─dialog
|   |  |  |  |  |   |   ├─CommonDialog.ets
|   |  |  |  ├─pages//应用/服务所包含的页面
|   |  |  |  |   ├─DetailIndex.ets
|   |  |  |  |   └MainIndex.ets
|   |  |  |  ├─model //操作层 自定义类 
|   |  |  |  |   ├─ReminderService.ets//提醒服务 相关逻辑操作类
|   |  |  |  |   ├─database//本地数据 增删改查
|   |  |  |  |   |    ├─PreferencesHandler.ets
|   |  |  |  |   |    └PreferencesListener.ets
|   |  |  |  ├─entryability//应用/服务的入口。
|   |  |  |  |      └EntryAbility.ets
|   |  |  |  ├─common//公共ets文件
|   |  |  |  |   ├─utils //工具文件 用于存放一些项目中重复用到的方法
|   |  |  |  |   ├─constants//常用的变量 存放一些项目重重复用到的变量
|   |  |  |  |   |     ├─AlarmSettingType.ets//对应某些逻辑的自定义文件
|   |  |  |  |   |     ├─CommonConstants.ets//ui样式 与resources中不同的是，这里放的是一些可变的样式
├─AppScope//应用配置及公共资源
|    ├─app.json5//应用包名、应用图标、应用标签
|    ├─resources//应用公共资源
|    |     ├─base
|    |     |  ├─media
|    |     |  |   └app_icon.png
|    |     |  ├─element
|    |     |  |    └string.json
 

ets目录下的文件

官网的CodeLabs中，常见的目录结构如上：这是一个类似MVVM的框架结构。

view文件夹

存放页面的视图组件 的文件
例如 主页的banner图组件，列表页的列表组件、页面弹窗等

model文件夹

存放数据操作逻辑文件
接口调用，操作数据的增删改查
操作用户首选项，本地数据

viewmodel文件夹

在view文件中不同组件间共同使用的数据

至于其他文件夹

• common 文件夹：这是一个放公共方法，公共变量或者其他一些公共的ets文件，不含ui操作
• entryablity 文件夹：必需，应用/服务的入口文件，模块生命周期，应用入口页面配置，用户首选项设置等在这里操作
• page 文件夹：必需，页面文件，每个文件是一个单页面，对应会在resources/profile/main_pages.json文件中生成页面路由信息

MVVM架构

element目录下的文件

resources资源目录中的文件，存放元素资源，内部存放 json 文件类型
字符串、整型数、颜色、样式等资源的json文件

官方的Element resource file中可创建的文件类型，建议存放数据类型如下：

-boolean.json// boolean值 true false
-color.json//颜色 "#ffffff"
-float.json//浮点型  "28vp" 
-intarray.json// 整数数组 [1,3,12]
-integer.json //整数 11
-pattern.json //正则 [A-Za-z]{3}
-plural.json //复数
-strarray.json //字符串数组
-string.json //字符串 "aaaa"
-theme.json//主题？？这个不太清楚 在官方文档上也找不到使用场景

从官方的这个分类方式感觉像是比较推荐按照数据资源的文件类型进行分类的
实际在一些CodeLabs中，比较常用的文件就几个：

1. color.json 放一些固定的颜色，例如主题色，按钮色，文字颜色之类
2. float.json 放视图元素的宽高设置，如图标大小，字体大小，按钮宽度，按钮高度……
3. string.json 放一些固定文本，如按钮文字，页面标题，应用名，提示语…… 如果项目配置了国际化的话，需要在对应语言目录下配置同一文本的对应的语言翻译，例如zh_CN中的exit_str字符串配了值‘退出’，那英文目录en_US下的exit_str字符串就要配值’exit’,当然，前提是在base文件夹中的string.json文件中必须要存放有同名数据

//  resources/base/element/string.json
{  
  "string": [  
        {  
      "name": "exit_str",  
      "value": "exit"  
    }  
  ]  
}

resources/zh_CN/element/string.json 中文

{  
  "string": [  
        {  
      "name": "exit_str",  
      "value": "退出"  
    }  
  ]  
}

resources/en_US/element/string.json 英文

{  
  "string": [  
        {  
      "name": "exit_str",  
      "value": "exit"  
    }  
  ]  
}

在DevEco编译器中增加资源文件：