更新时间：2024-03-12 17:38:32收藏订阅更新我的文档设置返回文档简介完成入驻开放平台与创建小程序后，开始正式开发小程序，本文主要以 todo 示例 为例详细讲解文件结构。前端下载并安装小程序开发者工具小程序开发者工具是辅助开发支付宝小程序的本地应用工具，包含本地调试、代码编辑、真机预览、发布等功能，覆盖了应用开发的完整流程。请点此 下载 。请根据操作系统选择对应的开发工具：windows 64 位或 macos。其它操作系统下暂时未提供开发工具。创建并体验 todo app 小程序1打开小程序开发者工具，选择小程序 > 空白模板 > 选择端支付宝 > 选择模板 todo 小程序 > 填写 项目名称、项目路径 ，点击 完成；2关联小程序。由于每个账号可以拥有多个小程序的开发权限，因此需要关联控制台具体的小程序，才能决定本地代码的上传位置。3在开发者工具右侧模拟器预览小程序效果。至此第一个小程序已创建完成。 编写代码本节以 todo app 为例，介绍支付宝小程序的文件结构，以及每种文件类型在小程序中的作用。todo app 是一个简单的待办事项管理小程序，实现了用户登录、新增自定义待办事项、划除或恢复待办事项的功能。 全局配置●app.json 是小程序的全局配置，用于配置小程序的页面列表、默认窗口标题、导航栏背景色等。详情可查看 小程序应用配置介绍。 ●app.acss 定义了全局样式，作用于当前小程序的所有页面。●app.js 用于注册小程序应用，可配置小程序的生命周期，声明全局数据，调用丰富的 api，如获取用户授权及获取用户信息 api 等，更多 api 信息可查看 小程序 api 概览 。小程序页面此示例中有两个页面，todos 页面和 add todo 页面，都位于 pages 目录下。小程序的所有页面路径必须在 app.json 中声明，路径从项目根目录开始且不能包括后缀名，pages 的第一个页面就是小程序的凯发k8官方网娱乐官方首页。每一个 页面 由同路径下的四种类型文件组成，即 .json 后缀的配置文件、.axml 后缀的模板文件、.acss 后缀的样式文件、.js 后缀的逻辑脚本文件。todos 页面●todos.json：用于配置当前页面的窗口表现。此处定义了使用一个自定义组件 add-button ，指定它的组件名称及对应的路径。自定义组件详情可查看 自定义组件介绍。 页面配置文件不是必须的。当存在页面配置文件时，各个页面配置项会优先于 app.json 中 window 的同名配置项。当不存在页面配置文件，则直接使用 app.json 中的默认配置。因此，todo list 页面的标题为 app.json 中指定的 defaulttitle ，即 todo app。●todos.axml：为页面结构模板文件。使用 、、、、、，来搭建页面结构以及通过 mustache 语法两对大括号（{{}}）绑定 todos 数据。○绑定数据详情可查看 数据绑定。○绑定事件详情可查看 事件介绍。●todos.js：页面的逻辑脚本文件，小程序页面的逻辑代码必须包含在 page({}) 中。可实现：○监听并处理页面的生命周期函数 onshow、onload；○获取小程序实例以及其它页面实例 getapp、getcurrentpages；○声明并处理数据 data；○响应页面交互事件，调用 api 等；○这里需要注意的是 app.todos 是来自 app.js 中全局的变量定义。●todos.acss：定义页面局部样式。指定 todos.axml 中不同元素的样式，包括位置、背景颜色、字体、字体颜色等。页面的 .acss 文件不是必须的，但对于相同选择器，页面局部样式会覆盖 app.acss 全局样式。详情可查看 acss 语法参考。add todo 页面●add-todo.json：声明自定义组件名称和路径；●add-todo.axml：页面结构模板文件；此页面的两个核心功能为：○使用 组件接收用户输入。○是一个 自定义组件，可将一些功能完整的代码封装为自定义组件，便于在其它地方复用。●add-todo.js：页面逻辑代码；●add-todo.acss：同 todos.acss 用法一致，不再赘述。完成入驻与小程序创建后，正式开发小程序之前需要完成以下准备。在手机上预览小程序1使用手机支付宝扫码登录开发者工具，并允许关联支付宝小程序。 2点击开发者工具右上角工具栏上的 预览 按钮，可选择 扫码预览 或 自动预览，即可在手机上运行和预览小程序。 后端在前面的 demo 中，开发的小程序其实是“静态的”，即无论用户在 todo app 里面添加了多少条代码，不管完成了多少个事项，一旦刷新页面就会恢复成初始状态，不会有任何变化。如果想要开发“动态”的小程序，将用户的每一次操作进行保存，就需要将小程序接入后端服务。后端服务需要自行搭建，支付宝提供了 小程序云 服务可以大幅降低后端的搭建成本。自行搭建后端服务一般来说用户可以通过市面上有的云服务供应商，自行购买云服务，来实现后端接口。这里需要注意的是，当后端应用开发完毕，需要在控制台配置好 服务器域名白名单，才能够在小程序中调用接口。
