支付宝小程序学习篇之文件结构

一、基本结构

二、详细说明

1.json

json文件用来对代码进行各种配置，比如app.json，就是对整个小程序进行了相关配置。

// app.json
{"pages": ["pages/todos/todos",    "pages/add-todo/add-todo"],"window": {"defaultTitle": "Todo App","titleBarColor": "#323239"}
}

pages属性是一个数组，数组中的每一个字符串都定义了小程序的页面路径，todo list的demo中外面配置了两个目录。当添加其他页面以后记得要同步的再pages里面添加相关的配置才能够访问。

注意：papes数组中，第一个元素就是首次加载显示的页面

中的配置定义了小程序顶部的文案为：“Todo App”,将小程序的顶部背景色定义为指定的十六进制色彩。

关于app.json文件的其他配置可以点击 这里查看。

上面说的json文件是全局的json配置，每个页面或者组件内也有相关json的配置，用于指定组件的依赖等。

2.axml

axml总体上可以理解为小程序的html，和html的主要区别在于：

标签不同，比如在小程序中使用替代

。

axml支持的标签类型比html少。

axml标签有自己的解析语法，可以实现遍历，条件判断等高级操作，html只是静态标签。

{{number}}

在axml中通过 “{{ }}” 这样的形式来渲染变量或者执行一些简单的运算判断，比如上面的就是一个三元运算，当是true的时候class会被渲染为todo-item 或者只有 todo-item。

而{{}} 这个变量会根据被赋值的情况在渲染后显示相应的结果。使用过vue、的同学对这一点应该比较熟悉，就是动态绑定。

3.acss

acss在支持大部分css语法的基础上，扩展了css的能力。相比css，主要差别在于：

支持rpx单位计算。

能够通过@导入其他路径下的acss文件。

4.js

js文件用来描述代码逻辑，每个页面都需要有一个js文件来描述当前页面的逻辑关系。简单通过下面的代码来说明下。

// pages/todos/todo.js
const app = getApp();
Page({data: {},onLoad() {},onTodoChanged(e) {}
});

Page类是页面的构造函数，需要在每个页面定义时写入。

data

data对象会作为axml的渲染上下文，通俗说假如data中有一个name属性是’’，那么在对应的axml文件中就可以使用{{name}}这样的形式读取出’’。当使用方法使data中的数据发生变化的时候，axml中的数据也会实时发生变更。

当这个页面被用户第一次初始化的时候这个函数会被调用。

（用户自定义方法）

这是用户自己定义的方法，用户可以定义更多自定义的函数以实现更多能力。