小程序分为 app 和 page 两层。app 用来描述整个应用，page 用来描述各个页面，此外还有关于整个 project 的配置描述（可选）。

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

page 由四个文件组成，分别是：

注意： 为了方便开发者，支付宝小程序规定这四个文件必须具有相同的路径与文件名。 project 特指 mini.project.json 文件，必须放在项目的根目录，其中的具体配置可查看 。开发者写的所有代码最终将会打包成一份 javascript 脚本，在小程序启动的时候运行，在小程序结束运行时销毁。

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

<view> hello {{name}}! view>
<button ontap="changename">click me!button>

// 逻辑层
var initialdata = {
  name: 'taobao',
};
// 注册一个页面
page({
  data: initialdata,
  changename(e) {
    // 改变数据
    this.setdata({
      name: 'alipay',
    });
  },
});

上面代码中，框架自动将逻辑层数据中的 name 与视图层的 name 进行了绑定，所以在页面一打开的时候会显示 hello taobao!。用户点击按钮的时候，视图层会发送 changename 的事件给逻辑层，逻辑层找到对应的事件处理函数。逻辑层执行了 setdata 的操作，将 name 从 taobao 变为 alipay ，因为该数据和视图层已经绑定了，从而视图层会自动改变为 hello alipay!。 注意： 由于框架并非运行在浏览器中，所以 javascript 在 web 中的一些能力都无法使用，如 document、window 等对象。逻辑层 js 可以用 es2015 模块化语法组织代码：

import util from './util'; // 载入相对路径
import absolute from '/absolute'; // 载入项目根路径文件

保留的导入符号

小程序中将浏览器部分内置对象名（如 window、document）作保留字使用，以应对未来的不时之需。 保留字有：globalthis、global、alipayjsbridge、fetch、self、window、document、location、xmlhttprequest。请勿使用保留字做导入符号，否则框架会出现无法正常访问导入内容的现象。如：

import { window } from './mywindow';
console.log(window); // undefined

上述代码中，因为使用了保留字做导入符号，使得引入的变量变成了 undefined 。正确的方法是不使用保留字，或者在导入时使用 as 关键字进行重新命名，例如：

import { window as mywindow } from './mywindow';
console.log(mywindow);

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

$ npm install query-string --save

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

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

有关 npm 的详细介绍，可查看 。

注意： 为了提高小程序编译性能，默认不会自动为 node_modules 中的代码转换语法，如果需要使用包含非 es5 语法的 npm 包，需要开启 配置项。