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

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

一、模板

  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'}
]
}
})

注意:

  • 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
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) //接收到的数据
}
})

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

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