前两期讲了小程序开发的准备工作以及前期需要如何调试，今天我们就来介绍下开发一个支付宝小程序页面需要了解哪些信息。
一个小程序页面的整体功能的构成离不开页面展示（AXML）、页面样式（ACSS）以及页面逻辑（JS）这三方面，下面本文将从这三方面具体展开。
一、AXML(组件)
AXML 页面一般用来做页面的布局，用支付宝提供的容器和组件在页面上做编排。
1. 基础能力与属性介绍
不同的组件有不同的作用，组件的内容放在开始 <xx> 和结束 <xx/> 标签之间，分别代表着不同的组件作用。
例如，下方登陆页面中展示的不同组件：
<!-- axml页面代码块 --> <view> <image mode="scaleToFill" src="http://img.touxiangwu.com/zb_users/upload/2022/11/202211081667896715116887.jpg" /> <view> 用户名 </view> <input placeholder="" /> <view> 密码 </view> <input placeholder="" /> <button size="default" type="primary">登录</button> </view>
一般组件都拥有以下的共同属性：
其中：
- class、style 用来设置标签的样式（颜色、大小等）；
- on/catch 对标签进行事件绑定；
- data-* 可以用来设定标签的属性，触发事件之后，会将该值传输给 js 页面对应的方法中；
- 使用过程中可能会有一些常见问题，例如 👉 [事件的函数能像 js 一样传参吗]；
- 除了公共的属性之外，不同的组件还有各自特定的属性，可以参考对应组件文档中的属性说明进行查看。
更多组件相关内容，可以参考：组件概览 文档查询～
这里列举一些小程序开发的常见问题，供大家参考：
- [小程序支持类似 vue 的 v-html 的操作吗？]
- [axml 文件中能使用 js 函数吗]
2. 进阶功能
通过上面的例子，我们知道了组件的基础使用方法，但在实际开发环境中，页面不是一成不变的，更多用到的是根据实际使用情况对页面的组件进行动态的数据变化。
这里就需要给大家介绍一下 AXML 语法的进一步功能：
数据绑定
数据绑定需要将变量封装在 {{ }} 中，常见场景如下：
其中 message,id,condition 为动态值，在.js页面中设置 <view> {{ message }} </view> 文本数据动态设置 <view id="item-{{id}}"> </view> 组件属性需要再用""封装 <view a:if="{{condition}}"> </view> 控制属性需要用""封装 <view> {{ 1+2 }} </view> 可以进行算数运算 <view>{{"hello" + message}}</view> 可以进行字符串运算
条件渲染
通过与动态值 length 比较控制哪个模块展示：
<view a:if="{{length > 5}}"> 1 </view> <view a:elif="{{length > 2}}"> 2 </view> <view a:else> 3 </view>
这里列举一些小程序开发的常见问题，供大家参考：
- [条件渲染中 a:if 与 hidden 的区别]
列表渲染
<view a:for="{{list}}"> {{item}} </view>
二、JS 页面
JS 页面一般用来处理页面的逻辑。在介绍 JS 页面之前，我们要先了解下小程序的页面的运行机制。
在打开一个页面的时候，都需要在页面对应的 .js 文件进行注册，通过这个文件，我们可以在 page() 里面使用不同的 Object 对象来指定该页面的初始化数据、生命周期以及事件处理函数。
接下来，具体看下 JS 页面的基本功能～
1. 初始化数据
上面也说过，动态的数据需要在 .js 文件中设置，而设置的位置就是在 data 中。
data 可以直接设置对象类型：
Page({ data: { text: "Hello World~", //设置文本 list: ['a', 'b', 'c', 'd'],//设置数组 arr: [{text: '1' },{text: '2' }],//设置集合 object: { name: "sam", age: "18" }, }, doIt() { this.setData({ text: "bye bye~", }); }, });
data 也可以设置为函数类型，将函数的返回值作为当前页面的数据：
Page({ data() { return { arr: [], }; }, doIt() { this.setData({ arr: [1, 2, 3], }); }, });
⚠️ 注意：两者的区别在于，如果通过 doIt() 方法修改数据之后，再次进入该页面时，对象类型的数据会变为修改之后的值，而函数类型会变为原始值。
这里列举一些小程序开发的常见问题，供大家参考：
👉 [小程序页面关闭后重进数据依然保留了上次的赋值什么原因]
其他常见问题：
- [setData 数据路径修改数据]
- [小程序跳转页面时怎么清除 data 数据]
2. 生命周期函数
对一个页面来说，会有页面初始化、页面加载、页面隐藏、页面关闭等不同的状态，需要对这些状态进行不同的业务处理的话，就可以在下面这些函数中进行：
page({ onLoad(query) {}, // 页面页面初始化时触发。一个页面只会调用一次;query为携带的参数 onReady() {}, // 页面加载完成后触发 onHide() {}, // 页面切到后台触发 onShow() {}, // 页面从后台切回前台触发 onUnload() {}, // 页面被关闭时触发 })
这里列举一些小程序开发的常见问题，供大家参考：
- [onShow 里面可以做授权吗]
- [获取页面栈某个页面的 onload 参数]
3. 事件处理函数
除了页面状态之外，我们对小程序页面进行点击、拖拽时也会触发不同的事件，如果需要对这些状态进行不同的业务处理，可以在下面这些函数中进行：
page({ onShareAppMessage() {}, // 点击右上角分享时触发 onPullDownRefresh() {}, // 页面被下拉时触发 onReachBottom() {}, // 页面被拉到底部时触发 onTitleClick() {}, // 点击标题时触发。 })
除了官方提供的事件处理函数之外，也可以通过以“on（冒泡事件）/catch（非冒泡事件） + 触发类型 ”来设置事件处理函数。
触发类型如下：
例如：
<!--.axml页面 --> <view onTap="handleTap1"></view> <view catchTap="handleTap2"></view>
//.js页面 page({ handleTap1(){}, handleTap2(){}, })
这里列举一些小程序开发的常见问题，供大家参考：
- [小程序阻止事件冒泡]
- [如何防止连续快速点击事件]
- [设置了 onPullDownRefresh 下拉刷新后真机测试没有效果]
4. API
另外，小程序也提供了丰富的 API 能力，可以使用这些 API 快速进行支付、跳转等能力。
API 分为三种类型，分别是事件监听 API、同步功能 API、异步功能 API。
事件监听 API
以 my.on 开头：用来监听某个事件是否触发；
以 my.off 开头：用来解除同名 API 来监的听关系。
Page({ onLoad() { my.onError(this.errorHandler); }, errorHandler(error, stack) { console.log('onError error', error); console.log('onError stack', stack); }, onUnload() { my.offError(this.errorHandler) } })
同步功能 API
以 Sync 结尾：执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常：
Page({ onLoad() { //将数据同步地存储在本地缓存中指定的 key 中 let res = my.setStorageSync({ key: 'currentCity', data: { cityName: '杭州', adCode: '330100', spell: ' hangzhou', }, }); console.log(res); if (res.success) { console.log("执行成功"); } }, })
异步功能 API
大部分的 API 都是异步API ，包含 success、fail、complete 三个回调函数。
每个回调函数都会有 error、errorMessage、其它（API 返回的其它数据）参数。
page({ handleTap1(){ my.downloadFile({ url: 'https://img.alicdn.com/tfs/TB1x669SXXXXXbdaFXXXXXXXXXX-520-280.jpg', success(res) { console.log('downloadFile success：',res.apFilePath,res.tempFilePath); // apFilePath 与 tempFilePath 等价 }, fail(res) { console.log('downloadFile fail：',res); }, complete(res) { console.log('downloadFile complete：',res); }, }); }, })
更多相关内容可参考 API 概览～
三、ACSS
ACSS 是用于描述 AXML 组件样式的的语言，决定组件的显示效果，其中：
ACSS 的样式规则与 CSS 完全一致单位默认为 rpx，默认一个屏幕宽度为 750 rpx。app.acss 是全局的样式，页面 .acss 只作用于对应的页面如果需要导入外联样式表，需要使用@import语句导入：
@import "./button.acss"; /*相对路径*/
@import "/button.acss"; /*项目绝对路径*/
@import "third-party/page.acss"; /*第三方 npm 包路径*/
ACSS 文件里的本地资源引用请使用绝对路径的方式，不支持相对路径引用，例如：
/* 支持 */
background-image: url('/images/ant.png');
/* 不支持 */
background-image: url('./images/ant.png');
这里列举一些小程序开发的常见问题，供大家参考：
[如何动态修改 class 样式][button 按钮默认样式如何去除][rpx 与 px 单位相互换算][小程序是否支持 CSS3 动画]
以上就是关于小程序页面功能介绍的所有内容啦，希望可以帮助到你~✿✿ヽ(°▽°)ノ✿
下一期介绍下小程序的全局配置~~
到了这里，关于最新demo版 | 如何0-1开发支付宝小程序之小程序页面功能介绍（三）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
