全部产品

概述

文件结构

应用分为 apppage 两层。app 用来描述整个应用,page 用来描述各个页面。

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

文件

必需

作用

app.js

应用逻辑

app.json

应用全局设置

app.acss

应用全局样式表

每个页面 page 由 4 个文件组成,分别是:

文件类型

必需

作用

[page].js

页面逻辑

[page].axml

页面结构

[page].acss

页面样式表

[page].json

页面配置

为了方便组织您的代码,我们约定这 4 个文件必须具有相同的路径与文件名。

小程序的所有代码最终会被打包成一份 JavaScript 脚本,在应用启动的时候运行,在应用结束时销毁。

逻辑结构

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

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

<!-- 视图层 -->
<view> Hello {{name}}! </view>
<button onTap="changeName"> Click me! </button>
// 逻辑层 
var initialData = {
  name: 'aliyun',
};
// 注册一个页面
Page({
  data: initialData,
  changeName(e) {
    // 改变数据
    this.setData({
      name: 'ali',
    });
  },
});

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

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

注意:

逻辑层的 JS 可以用 ES2015 模块化语法组织代码:

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

小程序框架运行在非浏览器环境,所以 JavaScript 不能访问部分 Web 能力,如 windowdocument 等对象。这些内置对象名作 保留字 使用,以应对未来的不时之需。

有这些保留字:globalThisglobalAlipayJSBridgefetchselfwindowdocumentlocationXMLHttpRequest

请不要使用这些保留字做模块名,否则会出现无法正常访问模块的现象。如:

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

上述代码中,因为使用了保留字做模块名,使得引入的模块变成了 undefined 。正确的方法是不使用这些保留字命名模块,或者使用 as 关键字给模块重命名,例如:

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

第三方 NPM 模块

应用支持引入第三方模块,需先在应用根目录下,打开命令行工具,执行如下命令安装该模块:

$ npm install lodash --save

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

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

注意:由于 node_modules 里第三方模块代码不会经过转换器,为了确保各个终端兼容,node_modules 下的代码需要转成 ES5 格式再引用,模块格式推荐使用 ES2015 的 import/export。类似前面的文档所述,浏览器部分 Web 能力无法使用。