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

一、基本结构

在这里插入图片描述

二、详细说明

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数组中，第一个元素就是首次加载显示的页面
window中的defaultTitle配置定义了小程序顶部的文案为：“Todo App”,titleBarColor将小程序的顶部背景色定义为指定的十六进制色彩。
关于app.json文件的其他配置可以点击这里查看。
上面说的json文件是全局的json配置，每个页面或者组件内也有相关json的配置，用于指定组件的依赖等。

2.axml
axml总体上可以理解为小程序的html，和html的主要区别在于：
标签不同，比如在小程序中使用替代

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

<view class="todo-item {{completed ? 'checked' : ''}}">
  {{number}}
</view>

在axml中通过 “{{ }}” 这样的形式来渲染变量或者执行一些简单的运算判断，比如上面的completed就是一个三元运算，当completed是true的时候class会被渲染为todo-item checked 或者只有 todo-item。
而{{number}} 这个变量会根据被赋值的情况在渲染后显示相应的结果。使用过vue、angular的同学对这一点应该比较熟悉，就是动态绑定。
3.acss
acss在支持大部分css语法的基础上，扩展了css的能力。相比css，主要差别在于：
支持rpx单位计算。
能够通过@import导入其他路径下的acss文件。
4.js
js文件用来描述代码逻辑，每个页面都需要有一个js文件来描述当前页面的逻辑关系。简单通过下面的代码来说明下。

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

Page类是页面的构造函数，需要在每个页面定义时写入。
data
data对象会作为axml的渲染上下文，通俗说假如data中有一个name属性是’alipay’，那么在对应的axml文件中就可以使用{{name}}这样的形式读取出’alipay’。当使用setData方法使data中的数据发生变化的时候，axml中的数据也会实时发生变更。
onLoad
当这个页面被用户第一次初始化的时候这个函数会被调用。
onTodoChanged（用户自定义方法）
这是用户自己定义的方法，用户可以定义更多自定义的函数以实现更多能力。