支付宝小程序怎么开发?如何快速开发支付宝小程序( 二 )


每个小程序页面()由同一路径下的四种文件组成,分别是.js后缀的逻辑脚本文件、.json后缀的配置文件、.acss后缀的样式文件、.axml后缀的模板文件.
3.待办事项列表页面
tod??os.axml 为页面结构模板文件:

支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
使用
(),
(),
(),
(),
(),
(),
构建页面结构和a:for(#list渲染)绑定todos数据,循环todos数据展开节点 。
对于绑定数据,请参阅 view layer() 文档,对于绑定事件,请参阅 event () 文档 。
tod??os.js 是页面的逻辑脚本文件:
支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
在这个文件中你可以:
tod??os.acss 是页面的样式文件:
支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
acss 文件不是必需的 。语法可以在 style() 文档中找到 。当存在页面样式表时,页面样式表中的样式规则将层叠在 app.acss 中的样式规则之上 。如果不指定页面的样式表,也可以直接在页面的结构文件中使用app.acss中指定的样式规则 。
tod??os.json 是页面的配置文件:
不需要配置文件 。当页面有配置文件时,页面中的配置项会覆盖 app.json 中相同的配置项 。如果没有指定页面配置文件,则直接在页面使用app.json中的默认配置 。所以索引页的标题就是app.json中指定的Todo App 。
4.添加待办事项页面
add-todo.axml 为页面结构模板文件:
支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
与待办事项列表页面相比,添加待办事项页面使用 new () 来接受用户输入 。
add-todo.js 页面逻辑代码:
支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
add-todo.acss 与待办事项列表页面基本相同 。
add-todo.json 配置页面标题:
所以add-todo页面的标题不再是app.json中指定的Todo App,而是Add Todo 。
5.效果
支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
七.本地调试
1.预览区
这里可以模拟支付宝应用中的性能,大部分API都提供了模拟功能 。
2.调试模式
点击上面的调试标签切换到调试模式 。
支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
小程序调试工具提供axml和acss的支持,支持组件层级、属性回写等功能;还包括调试工具中的网络请求、DOM元素检查、源码调试等 。
3.预览日志
点击预览日志按钮,可以查看详细的代码编译底层日志,有助于排查和定位问题 。
支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图