支付宝小程序开发文件结构

云小米

[color=rgba(0, 0, 0, 0.65098)]小程序分为 app 和 page 两层。app 用来描述整体程序，page 用来描述各个页面。

[color=rgba(0, 0, 0, 0.65098)]app 由三个文件组成，必须放在项目的根目录。

[color=rgba(0, 0, 0, 0.65098)]

文件

必填

作用

app.js
是
小程序逻辑

app.json
是
小程序公共设置

app.acss
否
小程序公共样式表

[color=rgba(0, 0, 0, 0.65098)]page 由四个文件组成，分别是：

[color=rgba(0, 0, 0, 0.65098)]

文件类型

必填

作用

js
是
页面逻辑

axml
是
页面结构

acss
否
页面样式表

json
否
页面配置

[color=rgba(0, 0, 0, 0.65098)]注意：为了方便开发者，我们规定这四个文件必须具有相同的路径与文件名。

[color=rgba(0, 0, 0, 0.65098)]开发者写的所有代码最终将会打包成一份 JavaScript 脚本，在小程序启动的时候运行，在小程序结束运行时销毁。

逻辑结构

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

[color=rgba(0, 0, 0, 0.65098)]请看下面这个简单的例子。

<!-- 视图层 --><view> Hello {{name}}! </view><button onTap="changeName"> Click me! </button><!-- 逻辑层 -->var initialData = {  name: 'taobao'};// Register a Page.Page({  data: initialData,  changeName(e) {    // sent data change to view    this.setData({      name: 'alipay'    })  }});

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

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

[color=rgba(0, 0, 0, 0.65098)]注意：由于框架并非运行在浏览器中，所以 JavaScript 在 web 中的一些能力都无法使用，如 document、window等对象。

[color=rgba(0, 0, 0, 0.65098)]逻辑层 js 可以用 es2015 模块化语法组织代码：

import util from './util'; // 载入相对路径import absolute from '/absolute'; // 载入项目根路径文件第三方NPM模块

[color=rgba(0, 0, 0, 0.65098)]小程序支持引入第三方模块，需先在小程序根目录下执行如下命令安装该模块:

npm install lodash

[color=rgba(0, 0, 0, 0.65098)]引入后即可在逻辑层中直接使用：

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

[color=rgba(0, 0, 0, 0.65098)]注意：由于 node_modules 里第三方模块代码不会经过转换器，为了确保各个终端兼容，node_modules 下的代码需要转成 es5 格式再引用，模块格式推荐使用 es2015 的 import/export。同时，浏览器相关web能力同样无法使用。