支付宝小程序框架 概述

文件结构

小程序分为app和page两层。app描述整体程序，page描述各个页面。

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

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

注意：为了方便开发者，我们规定这四个文件必须具有相同的路径与文件名。

框架统一管理了整个小程序的页面路由，可以做到各个页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册进框架中，其他的一切复杂的操作都交由框架处理。

开发者写的所有代码最终将会打包成一份 JavaScript 脚本，在小程序启动的时候运行，在小程序结束运行时销毁。

逻辑结构

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

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

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

<!-- 逻辑层 -->
var helloData = {
  name: 'taobao'
};


// Register a Page.
Page({
  data: helloData,
  changeName(e) {
    // sent data change to view
    this.setData({
      name: 'alipay'
    })
  }
});

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

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

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

逻辑层 js 可以用 es2015 模块化语法组织代码，也支持从 node_modules 目录载入第三方模块，例如 page.js:

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

模块名的保留字

小程序中将浏览器部分内置对象名（如 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 模块

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

$ npm install query-string --save

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

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

有关 NPM 的详细介绍，请参见 NPM 包管理。

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