支付宝小程序3--->axml文件中使用data数据、条件、列表渲染、模板、生命周期

xinxin_k
259 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

今天学习了新的小程序知识，有一些和微信小程序有很多相通用法，对于不同的，或者小程序中新增的进行了总结。

axml中使用data数据语法规则

模板中的变量也是使用{{}}把data中的数据包裹起来，如果是对象的话，只需要写两个{}即可，不需要写三个。

//axml文件
<template is="objectCombine" data="{{foo: a, bar: b}}"></template>
//js文件
Page({
  data: {
    a: 1,
    b: 2,
  },
});
  • 最终合成的对象是{ foo:1 , bar:2 }
  • 也可用解构运算符 ... 来将一个对象展开：
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

条件渲染a:if和hidden

  • a:if：功能和微信小程序一样，使用a:if和a:elif和a:slse。一个条件渲染可控制多个组件，可以使用<block>组件。
  • hidden：只要变量为true，该组件就隐藏，为false，组件才显示。

4.png 3.png

列表渲染

  • a:key值：可以使用数组元素某一项唯一值字符串或者*this
  • key：也可以使用key代替a:key，但是直接key的写法不能用在<block>组件上

<template>模板

  • 使用模板时，要先定义，然后再调用，template中的数据要是data中定义的
  • 在支付宝小程序中，data中的数据可以定义为对象，也可以像vue中一样，data定义为一个函数，return出一个对象即可

页面生命周期

5.png

  1. 具体的生命周期同微信小程序一样。
  2. 注意onLoad(options){}生命周期中也可以接收路径中的参数

onShareAppMessage(options: Object)

该生命周期函数中全局的app.js中有，每个页面也有这个函数，如果页面中没有该函数，会触发全局的该函数，页面中有的话，就会触发页面的。 1.png

2.png

onOptionMenuClick()点击额外的图标触发的事件

也就是点击这个淘宝小图标时触发的事件。这个小图标可在页面的json文件中添加

3.png

onTabItemTap(){}（这个方法是新增的，可以用在tabBar页面中）

这个函数会在点击tabBar时触发。但不是切换时触发，是从首页切换到home（这时不会触发），再从home页切换回首页时触发

以上呢就是对今天学习的总结啦！！！

avatar
文章
阅读
粉丝