前两期讲了小程序开发的准备工作以及前期需要如何调试，今天我们就来介绍下开发一个支付宝小程序页面需要了解哪些信息。
一个小程序页面的整体功能的构成离不开页面展示（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 一样传参吗]；
- 除了公共的属性之外，不同的组件还有各自特定的属性，可以参考对应组件文档中的属性说明进行查看。
更多组件相关内容，可以参考：组件概览 文档查询～
这里列举一些小程序开发的常见问题，供大家参考：
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>
这里列举一些小程序开发的常见问题，供大家参考：
列表渲染
<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() 方法修改数据之后，再次进入该页面时，对象类型的数据会变为修改之后的值，而函数类型会变为原始值。
这里列举一些小程序开发的常见问题，供大家参考：
👉 [小程序页面关闭后重进数据依然保留了上次的赋值什么原因]
其他常见问题：
2. 生命周期函数
对一个页面来说，会有页面初始化、页面加载、页面隐藏、页面关闭等不同的状态，需要对这些状态进行不同的业务处理的话，就可以在下面这些函数中进行：
page({
onLoad(query) {}, // 页面页面初始化时触发。一个页面只会调用一次;query为携带的参数
onReady() {}, // 页面加载完成后触发
onHide() {}, // 页面切到后台触发
onShow() {}, // 页面从后台切回前台触发
onUnload() {}, // 页面被关闭时触发
})
这里列举一些小程序开发的常见问题，供大家参考：
3. 事件处理函数
除了页面状态之外，我们对小程序页面进行点击、拖拽时也会触发不同的事件，如果需要对这些状态进行不同的业务处理，可以在下面这些函数中进行：
page({
onShareAppMessage() {}, // 点击右上角分享时触发
onPullDownRefresh() {}, // 页面被下拉时触发
onReachBottom() {}, // 页面被拉到底部时触发
onTitleClick() {}, // 点击标题时触发。
})
除了官方提供的事件处理函数之外，也可以通过以“on（冒泡事件）/catch（非冒泡事件） + 触发类型 ”来设置事件处理函数。
触发类型如下：
例如：
<!--.axml页面 -->
<view onTap="handleTap1"></view>
<view catchTap="handleTap2"></view>
//.js页面
page({
handleTap1(){},
handleTap2(){},
})
这里列举一些小程序开发的常见问题，供大家参考：
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');
这里列举一些小程序开发的常见问题，供大家参考：
以上就是关于小程序页面功能介绍的所有内容啦，希望可以帮助到你~✿✿ヽ(°▽°)ノ✿
下一期介绍下小程序的全局配置~~
