微信小程序上手开发和使用总结(下)
在微信小程序上手开发和使用总结(上)中介绍了微信小程序的基本用法、数据处理和页面渲染等,这篇文章整理一下微信小程序的事件绑定及模板的用法。
一、模板
WXML提供模板组件给我们使用,可以在模板定义公用的代码片段,然后在需要引用的地方进行调用。
定义模板
定义模板使用name属性作为模板的名字,然后在template标签中定义代码片段:
1 |
|
使用模板
使用模板我们用is属性引用定义好的模板,然后把模板所需要的值通过data属性传给模板。比如需要遍历persons数组,我们可以将整个persons作为对象传给模板,也可以遍历persons后将每个对象传给模板,具体取决于所应用的场景。
1 |
|
需要的数据结构如下
1 |
|
注意:
- is属性也可以使用Mustache语法进行动态渲染,决定使用哪个模板
- data如果传的是对象类型的数据,需要用“…”进行“解构”,在模板中可以直接调用对象的属性;如果是其他数据类型则不需要用“…”
二、事件
什么是事件呢,简单来说,事件就是逻辑层到逻辑层的通讯方式。就是在页面上通过触发某个操作(就是我们说的事件),在逻辑层进行一系列的操作,最终来改变数据。
比如在一个输入框中用户输入了一段文字,但是data中的数据并没有随之改变,因此我们需要在输入框上绑定对应的输入事件来更改数据。
事件分类
事件也有分类,可以分为冒泡事件和非冒泡事件。“冒泡”这个词很形象的表现了事件向上传递的过程,这两种事件的区别也在于是否会向父节点进行传递。
一些常用的冒泡事件,除以下的事件外都是非冒泡事件:
名称 | 触发 |
---|---|
touchstart | 手指开始触摸 |
touchmove | 手指触摸后移动 |
touchend | 手指触摸动作结束 |
touchcancel | 触摸被打断,比如来点,弹框等 |
tap | 触摸后离开,有点像点击click |
longtap | 长按,超过350ms才离开 |
事件对象
当事件函数被调用时,从逻辑层有一个默认的事件对象传到函数中,不同的事件所包含的事件对象的属性有所区别,一些常用的事件对象的属性如下:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Int | 从页面加载到事件触发的时间戳 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的属性值集合 |
touches | Array | 触摸点信息的数组 |
detail | Object | 额外的信息 |
target和currentTarget区别
当不存在嵌套时,target和currentTarget没有区别。但是当嵌套触发事件是,current和currentTarget的区别就体现出来了。
1 |
|
点击组件B,当触发handle2事件时,收到target和currentTarget对象是一样,都指向组件B;而当点击组件B触发handle1事件时,target对象指向了组件B,currentTarget对象则组件A。总结一下:
- target对象指向了所触发事件的对象
- currentTarget对象指向了绑定事件所在的对象
向detail中添加内容
在组件中定义数据,当触发事件时,这些数据通过事件对象传给逻辑层。书写规则:以“data-”开头,多个字符用“-”连接,不能含有大写,可以绑定多个data值。例如data-element-name,最终会在event.currentTarget.dataset中转为elementName属性,属性的值就是定义的数据。
三、异步数据
小程序还提供发送异步的方法request(object),发起的是https请求。一个小程序,同时只有有5个网络请求链接。object的参数如下:
参数命 | 类型 | 说明 |
---|---|---|
url | Sring | 服务器接口地址 |
data | Object | 请求的参数 |
header | Object | 设置请求头header,header不能设置Referer |
method | String | 请求方式,默认GET |
success | Function | 请求成功的回调方法 |
fail | Function | 请求失败的回调方法 |
complete | Function | 请求完成的回调方法(请求成功、失败都会调用) |
跟jQuery不同的是,小程序请求的数据不是直接在success方法的res中(res是一个对象,还包括请求成功的状态码等),而是在res.data中。示例代码如下:
1 |
|
本网所有内容文字和图片,版权均属谢小飞所有,任何媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表。如需转载请关注公众号【前端壹读】后回复【转载】。