一个小程序由文本、代码、样式表、媒体内容等等的各种文件组成。当你开发小程序时，你需要以清晰的结构将它们存储在你的本地计算机中，保证这些文件之间的联系，使它们看起来正确，然后才能构建小程序，将构建结果上传至服务器 。本节将会讨论一些你需要注意的问题，这样你就能创建清晰的文件结构。
小程序应该存放在计算机何处？
当你在你自己的本地计算机操作你的小程序时，你应该将所有关联的文件放在一个能反映服务器上文件结构的单独的文件夹里。这个文件夹可以存放在任何你喜欢的位置，不过你应该将它放在你容易找到的位置，或许可以是你的桌面，你的主目录，或是磁盘根目录。
- 选择一个位置存放你的网站项目。创建一个文件夹（在本文中，我们将其命名为
"jtxm", “君土项目”的拼音首字母）。这将是你所有小程序项目存放的位置。 - 在jtxm文件夹里新建另一个文件夹来存放你的第一个小程序项目。在本文中，我们将其命名为 “jtma-rumen”, “入门”的拼音 （或者其它更有想象力的名称）。
一些关于大小写和空格的提示
你会注意到，文中所有的文件夹名和文件都使用小写字母，且没有空格。这是因为：
- 很多计算机，特别是网站服务器，是对大小写敏感的。举个例子，如果你将一张图片
"Tp.png"，然后在一个不同的文件里你试图以"tp.png"引用这张图片，这将不会起作用。 - 浏览器，网站服务器，还有编程语言不能一致处理空格。举个例子，如果你在文件名里使用空格，一些系统会把它这个文件名视为两个文件名。一些服务器将会把你的文件名里的空格替换为 “%20”（统一资源标识(URI)里空格的编码），破坏你所有的链接。最好使用横线，而不是下划线来分离名称：对比
"图-片.png"和"图_片.png"。
简单地说，你应该在文件名中使用连字符。搜索引擎把连字符当作一个词的分隔符， 但不会以这种方式处理下划线。基于这些原因，至少在你知道自己在做什么之前，最好养成在文件夹和文件名中使用小写，并且使用短横线而不是空格来分隔的习惯。这样可以避免你在以后碰到一些问题。
君土小程应该使用什么结构？
接下来，看看我们的君土小程入门应该拥有什么结构。这是我们君土小程项目的文件结构：
$ tree -N
.
├── .vscode
├── .git
├── 包.序
├── 说明.md
├── 君土配置.序
├── 微信小程序.配置.序
├── 代码
│ ├── 页面
│ │ ├── 入口
│ │ │ ├── 入口.样
│ │ │ ├── 入口.程
│ │ │ ├── 入口.配置.js
│ │ │ └── 入口.配置.序
│ │ ├── 图片
│ │ │ └── 超文本_选择.png
│ │ ├── 样式
│ │ │ └── 颜色2.程
│ │ ├── 脚本
│ │ └── 超文本
│ ├── 入口.html
│ ├── 应用.样
│ ├── 应用.程
│ ├── 应用.配置.js
│ └── 应用.配置.序
├── 配置
│ ├── 入口.序
│ ├── 产品.序
│ ├── 开发.序
│ ├── 产品.js
│ ├── 入口.js
│ └── 开发.js
├── node_modules
├── 包.js
├── 君土配置.js
├── 微信小程序.配置.js
├── 全局.d.ts
├── LICENSE
├── README.md
├── babel.config.js
├── jtconfig.json
├── package.json
├── project.config.json
├── yarn.lock
├── 发布
│ ├── h5
│ └── weapp
| 名称 | 类型 | 说明 |
| .vscode | 目录 | 集成开发环境配置文件目录 |
| .git | 目录 | 版本管理工具（git）目录 |
| 包.序 / package.json | 文件 | 项目或者模块包的描述 |
| 君土配置.序 / jtconfig.json | 文件 | 编译配置文件 |
| 微信小程序.配置.序 / project.config.json | 文件 | 微信小程序项目配置 |
| 代码 | 目录 | 源码目录 |
| 配置 | 目录 | 项目编译配置目录 |
| node_modules | 目录 | 诺德模块目录。存放用包管理工具下载安装的包的目录 |
| 发布 | 目录 | 项目编译配置目录 |
以下是对这写文件和目录的说明:
君土小程项目中最常使用的就是”代码”文件夹和”配置”目录。
“代码“文件夹 ：这个文件夹包含你网页上所有使用的代码。
. “应用.程” 文件 ：这个文件是网页应用程序代码入口文件。
文件路径
为了关联不同文件，你需要为它们提供文件路径——基本上是一个路线让一个文件知道另一个文件在哪。为了实现，我们来看看如何使用图片文件，让其显示你在你的网站看起来是什么样的？ 文章里选择的图像。
- 图片文件目录结构
- 在应用.配置.序 文件中对图片的使用。
引 { 配置 } 自 '@芋头/芋头';
定 应用配置: 配置 = {
启动首页: '页面/入口/入口',
页面: [
'页面/入口/入口',
'页面/超文本/入口',
'页面/样式/入口',
'页面/脚本/入口',
],
选项栏: {
列表: [{
页面路径: "页面/入口/入口",
文本: "首页",
图片路径:'页面/图片/小家.png',
选中图片路径:'页面/图片/小家_选择.png',
},
- 这行代码
图片路径:'页面/图片/小家.png'是配置选项栏的首页项的图片。我们需要配置 图片在哪里。这张图片在 “页面” 目录下的目录”图片”下，而 “页面” 目录与 应用配置文件(应用.配置.序) 处于同级目录。要从 应用配置文件(应用.配置.序) 所处一级目录进入图片所在目录，我们所需的文件路径是./页面/图片/你的图像文件名。例如，我们的图像叫做小家.png，所以文件路径就是页面/图片/小家.png。 - 编译、运行。你应该看到展示着你的图像的新网页！
一些文件路径的通用规则：
- 要引用一个位于调用的 代码 文件同级目录的目标文件，只需直接使用文件名，比如 ./入口.样 。
- 要引用一个子目录的文件，在路径前写下目录名并加一个斜杠，比如
./工具/网址。 - 要引用一个位于调用的 代码 文件的父级目录的目标文件，加上两个点。举个例子，如果
网址.程在代码下面的一个子目录工具而配置.程在代码目录，你可以在网址.程里使用 “../图片/小家.png” 。 - 你可以随意组合以上方法，比如
../子目录/又一子目录/我的代码.
到此为止，这就是你需要知道的全部内容。
提示：视窗(Windows)文件系统会使用反斜杠而不是斜杠，比如 C:\windows 。这在 代码 里没什么关系，就算你在 视窗（Windows） 上开发你的网页，你仍应该在你的代码中使用斜杠。