最新demo版 | 如何0-1开发支付宝小程序之小程序页面功能介绍（三）

前两期讲了小程序开发的准备工作以及前期需要如何调试，今天我们就来介绍下开发一个支付宝小程序页面需要了解哪些信息。

一个小程序页面的整体功能的构成离不开页面展示（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 动画]

 

 

以上就是关于小程序页面功能介绍的所有内容啦，希望可以帮助到你~✿✿ヽ(°▽°)ノ✿

下一期介绍下小程序的全局配置~~