微信小程序上手开发和使用总结(下)

  在微信小程序上手开发和使用总结(上)中介绍了微信小程序的基本用法、数据处理和页面渲染等,这篇文章整理一下微信小程序的事件绑定及模板的用法。

一、模板

  WXML提供模板组件给我们使用,可以在模板定义公用的代码片段,然后在需要引用的地方进行调用。

定义模板

  定义模板使用name属性作为模板的名字,然后在template标签中定义代码片段:

1
2
3
4
5
6
7
8
9
10
11
12
<template name="mytemplate1">
<view>
<text>firstName:{{firstName}}</text>
<text>lastName: {{lastName}}</text>
</view>
</template>
<template name="mytemplate2">
<view wx:for="{{persons}}">
<text>firstName:{{item.firstName}}</text>
<text>lastName: {{item.lastName}}</text>
</view>
</template>

使用模板

  使用模板我们用is属性引用定义好的模板,然后把模板所需要的值通过data属性传给模板。比如需要遍历persons数组,我们可以将整个persons作为对象传给模板,也可以遍历persons后将每个对象传给模板,具体取决于所应用的场景。

1
2
3
4
<view wx:for="{{persons}}">
<template is="mytemplate1" data="{{...item}}"></template>
</view>
<template is="mytemplate2" data="{{persons}}"></template>

  需要的数据结构如下

1
2
3
4
5
6
7
8
9
Page({
data:{
persons:[
{firstName: 'Hulk', lastName: 'Hu'},
{firstName: 'Shang', lastName: 'You'},
{firstName: 'Gideon', lastName: 'Lin'}
]
}
})

注意:

谢小飞博客专用防爬虫链接,想要看最新的前端博客请点这里

二、事件

  什么是事件呢,简单来说,事件就是逻辑层到逻辑层的通讯方式。就是在页面上通过触发某个操作(就是我们说的事件),在逻辑层进行一系列的操作,最终来改变数据。
  比如在一个输入框中用户输入了一段文字,但是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
2
3
4
5
6
<view class="A" bindtap="handle1">
outer
<view class="B" bindtap="handle2">
inner
</view>
</view>

  点击组件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
2
3
4
5
6
7
8
9
10
11
12
13
wx.request({
url: '/url',
data: {
x: '',
y: ''
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data) //接收到的数据
}
})

本网所有内容文字和图片,版权均属谢小飞所有,任何媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表。如需转载请关注公众号【前端壹读】后回复【转载】。