目录结构

以示例小程序「Calories」的目录结构举例：

.
├── app-side // 伴生服务目录
│   └── index.js // 伴生服务逻辑，作为入口文件（路径可以在 app.json 中配置）
├── setting // 设置应用目录
│   ├── i18n // 设置应用多语言目录
│   │   └── en-US.po
│   └── index.js // 设置应用逻辑，作为入口文件（路径可以在 app.json 中配置）
├── app-widget // 快捷卡片目录
│   └── index.js // 快捷卡片逻辑，作为入口文件（路径可以在 app.json 中配置）
├── secondary-widget // 副屏应用目录
│   └── index.js // 副屏应用逻辑，作为入口文件（路径可以在 app.json 中配置）
├── app.js // 小程序逻辑
├── app.json // 小程序配置
├── assets // 资源文件存放目录，以不同屏幕类型进行区分，子目录以 app.json 中 targets 对象的键来命名
│   ├── gt.r
│   │   ├── icon.png
│   │   ├── fonts
│   │   │   └── custom.ttf
│   │   └── image
│   │       └── logo.png
│   └── gt.s
│       ├── icon.png
│       ├── fonts
│       │   └── custom.ttf
│       └── image
│           └── logo.png
├── page // 设备应用页面
│   ├── home // 设备应用 home 目录（推荐一个页面一个目录）
│   │   ├── index.page.js // 页面逻辑
│   │   └── index.layout.js // 页面样式
│   └── i18n // 设备应用多语言目录
│       └── en-US.po
└── utils // 工具函数目录
    ├── constants.js
    ├── fs.js
    └── index.js

独立的样式文件

推荐在页面代码的组织遵循「样式」、「行为」分离的原则，这样一来可以将样式配置抽离到单独的 layout.js 文件中，减少页面逻辑的代码，二来方便在 layout.js 中去做多设备的屏幕适配工作，多设备（屏幕）的适配参考 屏幕适配。

i18n 多语言

/i18n 目录下的文件必须满足 ${key}.po 的文件命名约定，key 就是国家代码缩写。

多语言与国家的参考关系请参考 多语言映射。