概述

文件结构

小程序分为 app 和 page 两层。app 用来描述整个应用，page 用来描述各个页面。开发者编写的所有代码最终将会打包成一份 JavaScript 脚本，在小程序启动时运行，在小程序结束运行时销毁。

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

  文件	必需文件	作用
  app.acss	否	小程序全局样式表
  app.js	是	小程序逻辑
  app.json	是	小程序全局设置

• page 由四种类型的文件组成，分别是：

  文件类型	必需文件	作用
  acss	否	页面样式表
  axml	是	页面结构
  js	是	页面逻辑
  json	否	页面配置

逻辑结构

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

请看下面这个简单的例子。

<!-- 视图层 -->
<view> Hello {{name}}! </view>
<button onTap="changeName"> Click me! </button>

// 逻辑层
var initialData = {
  name: 'taobao',
};

// 注册一个页面
Page({
  data: initialData,
  changeName(e) {
    // 改变数据
    this.setData({
      name: 'mPaaS',
    });
  },
});

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

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

逻辑层 js 可以用 es2015 模块化语法组织代码：

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

第三方 NPM 模块

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

$ npm install lodash --save

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

import lodash from 'lodash'; // 载入第三方 npm 模块