---
title: 框架概述
summary: "介绍小程序框架的文件结构、逻辑架构、模块化语法及 NPM 支持等基础概念。"
questions:
  - 涂鸦小程序的文件结构由哪些部分组成？
  - app 主体包含哪些文件，分别有什么作用？
  - 页面（page）由哪些文件组成，哪些是必填的？
  - 自定义组件需要包含哪些文件？
  - 小程序的逻辑结构是怎样的，视图层和逻辑层如何交互？
  - 小程序支持哪些模块化语法规范？
  - 小程序中有哪些保留关键字需要注意？
  - 如何在小程序中引入和使用第三方 NPM 模块？
---

# 框架概述

## 文件结构

小程序分为 `app` 和 `page` 两层。`app`用来描述整个应用，`page` 用来描述各个页面，此外还有关于整个 `project` 的配置描述（可选）。
`app` 由三个文件组成，必须放在小程序源码目录内。

> 小程序源码目录默认等于项目根目录，可在项目配置文件（`project.tuya.json`）中修改字段 `miniprogramRoot`。

### 完整项目示例

```
├── project.tuya.json
├── app.js
├── app.json
├── app.tyss
├── assets
│   └── images
│       └── tab
│           └─ component.png
├── i18n
│   └── strings.json
├── components
│   └── foo
│       ├── index.js
│       ├── index.json
│       ├── index.tyml
│       └── index.tyss
├── pages
│   └── page
│       ├── index.js
│       ├── index.json
│       ├── index.tyml
│       └── index.tyss
├── theme.json
├── package.json
└── node_modules
```

## app 主体

`app` 由三个文件组成，必须放在项目的根目录。

| 文件       | 必填 | 作用                           |
| ---------- | ---- | ------------------------------ |
| app.js     | 是   | 应用逻辑                       |
| app.json   | 是   | 公共设置，例如：所有页面路径等 |
| app.tyss   | 否   | 公共样式                       |
| theme.json | 否   | 主题配置文件                   |

## pages 页面

| 文件类型 | 必填 | 作用       |
| -------- | ---- | ---------- |
| js       | 是   | 页面逻辑   |
| json     | 是   | 页面配置   |
| tyml     | 是   | 页面结构   |
| tyss     | 否   | 页面样式表 |

> 注意： 为了方便开发者，智能小程序规定这四个文件必须具有相同的路径与文件名。
> project 特指 project.tuya.json 文件，必须放在项目的根目录，其中的具体配置请参见 [小程序项目配置](/cn/miniapp/develop/miniapp/framework/app/config)。
> 开发者写的所有代码最终将会打包成一份 JavaScript 脚本，在小程序启动的时候运行，在小程序结束运行时销毁。

## components 自定义组件

| 文件 | 必填 | 作用       |
| ---- | ---- | ---------- |
| js   | 是   | 组件逻辑   |
| json | 是   | 组件配置   |
| tyss | 否   | 组件样式表 |
| tyml | 是   | 组件结构   |

> 注意： 为了方便开发者，智能小程序规定这四个文件必须具有相同的路径与文件名。

## i18n

| 文件         | 必填 | 作用       |
| ------------ | ---- | ---------- |
| strings.json | 是   | 多语言配置 |

## 逻辑结构

小程序的核心是一个响应式的数据绑定系统，分为视图层和逻辑层。这两层始终保持同步，只要在逻辑层修改数据，视图层就会相应的更新。

示例代码：

```xml
<!-- 视图层 -->
<view> Hello {{name}}! </view>
<button bind:tap="changeName">Click me!</button>
```

```js
// 逻辑层脚本
// 注册一个页面
Page({
  data: { name: 'world' },
  changeName(e) {
    // 改变数据
    this.setData({ name: 'Smart MiniApp' });
  },
});
```

上面代码中，框架自动将逻辑层数据中的 `name` 与视图层的 `{{name}}` 进行了绑定，所以在页面一打开的时候会显示`Hello world!`。

用户点击按钮的时候，视图层会发送 `changeName` 的事件给逻辑层，逻辑层找到对应的事件处理函数。逻辑层执行了 `setData` 的操作，将 `name` 从 `world` 变为 `Smart MiniApp` ，因为该数据和视图层已经绑定了，从而视图层会自动改变为 `Hello Smart MiniApp!`。

> 注意： 由于框架并非运行在浏览器中，所以 `JavaScript` 在 `web` 中的一些能力都无法使用，如 `document、window` 等对象。

## 模块化

小程序均支持 `CommonJS` 和 `ESModule` 模块化语法规范，推荐使用 ESModule。需要注意的是项目内的脚本文件应遵循统一语法规范，否则可能出现程序运行异常的情况。

### ESModule 模块化语法

```js
import util from './util'; // 载入相对路径
import absolute from '/absolute'; // 载入项目根路径文件
import lodash from 'lodash'; // 载入 npm 三方包
```

### CommonJS 模块化语法

```js
const util = require('./util'); // 载入相对路径
const absolute = require('/absolute'); // 载入项目根路径文件
const lodash = require('lodash'); // 载入 npm 三方包
```

更多详细信息请参考 [模块化](/cn/miniapp/develop/miniapp/framework/module)

## 保留关键字

小程序中将浏览器部分内置对象名（如：`window`、`document`）作为保留字使用。请勿使用保留字作为变量名或使用保留字到逻辑中，否则小程序应用会出现无法正常运行的情况。

## NPM 模块

支持引入第三方模块，需先在项目目录下执行如下命令安装该模块：

`$ npm install query-string --save`

引入后即可在逻辑层中直接使用：

`import queryString from 'query-string'; // 载入第三方 npm 模块`