主页 > 读物

支付宝小程序快速入门(一)

时间:2019-10-14 来源:llw说笑

支付宝小程序和微信小程序大体相同,先看一下目录结构。

目录结构

支付宝小程序快速入门(一)

目录结构

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

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

json

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

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

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

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

axml

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

  1. 标签不同,比如在小程序中使用替代
  2. axml支持的标签类型比html少。
  3. axml标签有自己的解析语法,可以实现遍历,条件判断等高级操作,html只是静态标签。

{{number}}

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

而{{number}} 这个变量会根据被赋值的情况在渲染后显示相应的结果。

acss

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

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

js

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

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

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

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