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

发布时间 2023-11-23 17:07:18作者: 盐焗代码虾

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

一个小程序页面的整体功能的构成离不开页面展示(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 页面对应的方法中;
  • 除了公共的属性之外,不同的组件还有各自特定的属性,可以参考对应组件文档中的属性说明进行查看。

 

更多组件相关内容,可以参考:组件概览 文档查询~

 

这里列举一些小程序开发的常见问题,供大家参考:

 

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');

 

 

这里列举一些小程序开发的常见问题,供大家参考:

 

 

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

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