认识小程序文件结构

概述

这里以 Todo App 的demo为例去认识小程序整体文件结构，以及每种文件类型分别在小程序中的作用

目录结构

从下面的注释中先整体认识下小程序的目录结构

  1. assets          // 存放各种静态资源，如图片
  2. components      // 小程序自定义组件目录
  3.   --add-button  // 这里我们定义了一个叫add-button的组件
  4. pages           // 小程序里面包含的所有的页面都放在pages下面，一个页面一个文件夹
  5.   --add-todo    // 小程序页面
  6.   --todos       // 小程序页面
  7. app.js          // 这里配置了小程序的一些全局业务逻辑，比如全局方法，全局变量
  8. app.acss        // 全局样式配置，这里的样式在每一个页面都可以生效
  9. app.json        // 配置小程序页面一些基础配置信息，比如页面路径

json

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

  1. // app.json
  3. {
  4.   "pages": [
  5.     "pages/todos/todos",    
  6.     "pages/add-todo/add-todo"
  7.   ],
  8.   "window": {
  9.     "defaultTitle": "Todo App",
  10.     "titleBarColor": "#323239"
  11.   }
  12. }
  • pages属性是一个数组，数组中的每一个字符串都定义了小程序的页面路径，todo list的demo中外面配置了两个目录。当添加其他页面以后记得要同步的再pages里面添加相关的配置才能够访问。
  • window中的defaultTitle配置定义了小程序顶部的文案为："Todo App",titleBarColor将小程序的顶部背景色定义为指定的十六进制色彩。
    关于app.json文件的其他配置可以点击 这里查看。

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

axml

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

  • 标签不同，比如在小程序中使用<view></view>替代<div></div>。
  • axml支持的标签类型比html少。
  • axml标签有自己的解析语法，可以实现遍历，条件判断等高级操作，html只是静态标签。
  1. <view class="todo-item {{completed ? 'checked' : ''}}">
  2.   {{number}}
  3. </view>

在axml中通过 "{{ }}" 这样的形式来渲染变量或者执行一些简单的运算判断，比如上面的completed就是一个三元运算，当completed是true的时候class会被渲染为todo-item checked 或者只有 todo-item。而{{number}} 这个变量会根据被赋值的情况在渲染后显示相应的结果。

acss

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

  • 支持rpx单位计算。
  • 能够通过@import导入其他路径下的acss文件。
  • 更多信息点击这里查看。

js

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

  1. // pages/todos/todo.js
  2. const app = getApp();
  3. Page({
  4.   data: {},
  5.   onLoad() {},
  6.   onTodoChanged(e) {}
  7. });

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

  • data
    • data对象会作为axml的渲染上下文，通俗说假如data中有一个name属性是'alipay'，那么在对应的axml文件中就可以使用{{name}}这样的形式读取出'alipay'。当使用setData方法使data中的数据发生变化的时候，axml中的数据也会实时发生变更。
  • onLoad
    • 当这个页面被用户第一次初始化的时候这个函数会被调用。
  • onTodoChanged（用户自定义方法）
    • 这是用户自己定义的方法，用户可以定义更多自定义的函数以实现更多能力。
      以上我们先认识每一种文件类型在小程序中的作用，接下来会对 Todo App demo进行更加细致的讲解。

原文: https://docs.alipay.com/mini/developer/file-type