- A+
前两期讲了小程序开发的准备工作以及前期需要如何调试,今天我们就来介绍下开发一个支付宝小程序页面需要了解哪些信息。
一个小程序页面的整体功能的构成离不开页面展示(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
同步功能 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
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');
这里列举一些小程序开发的常见问题,供大家参考:
以上就是关于小程序页面功能介绍的所有内容啦,希望可以帮助到你~✿✿ヽ(°▽°)ノ✿
下一期介绍下小程序的全局配置~~