一.模板
WXML提供模板（template），可以在模板中定义代码片段，然后再不同的地方调用
1.定义模板
使用name 属性，作为模板的名字，然后在<template/>内定义代码片段。
<!--1. 模板 -->
<template name="msgItem">
<view>Time:{{time}}</view>
</template>
2.使用模板
使用is属性，声明需要的使用模板，然后将模板所需要的data传入
<!-- 2.使用模板 -->
<template is="msgItem" data="{{...template}}"/>
data: {
template:{
time:"98年6月20日"
}
}
使用的is的名字和定义的时候name 的名字是相对应的，它会对应的去找模板，传入的data值给模板中对应的组件上展示的数据用
is属性可以使用Mustache语法，来动态决定需要渲染那个模板
<block wx:for="{{[1,2,3,4,5,6,7,8]}}">
<template is="{{item%2==0?'msgItem':'msgIndex'}}" data="{{...template}}"/>
</block>
注意：模板只能使用data传入的数据
二.事件
1.事件概述
事件：用户对界面操作的响应
绑定事件：以bind或catch开头，然后跟上时间的类型，如bingtap，catchtouchstart
bing时间绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
举例：
<--data-hi 自定义属性-->
<view id="tapTest"
data-hi="mina"
bindtap="tapName">
点击我
</view>
bindtap="tapName" 通过bind+tap绑定tap(手指触摸后离开)事件执行的函数名为tapName
其中tapName要在js文件的Page()中定义
(1)事件冒泡：
一般组件外面会套很多组件，当点击最里层的组件难免会触发外层组件。事件一般会先触发最里层的组件然后一层一层的想外传递事件。
<view bindtap='clickOne'>
<view bindtap='clickTwo'>
<view bindtap='clickThree'>
点我
</view>
</view>
</view>
clickOne:function(e){
console.log("==clickOne===="+e);
},
clickTwo: function (e) {
console.log("===clickTwo===" + e);
},
clickThree: function (e) {
console.log("==clickThree====" + e);
},
2.事件对象
如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
image.png
target
触发事件的源组件。
image.png
currentTarget
事件绑定的当前组件
image.png
dataset
在组件中可以定义数据，这些数据将会通过事件传递给service，书写方式：data-开头，多个单词由连接符-链接，不能有大写（大写会自动转成小写）如data-element-type，最终在event。target.dataset中将连字符转成驼峰elementType。
touches
touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。
image.png
detail
特殊事件携带的数据，如表单组件提交事件会协同用户的输入，媒体的错误事件会协同错误信息
3.事件分类
1.冒泡事件：当一个组件上的时间被触发后，该事件会向父节点传递。
2.非冒泡事件：当一个组件上的时间被触发后，该事件不会向父节点传递。
WXML的冒泡事件列表
image.png
除上表之外的其他组件自定义事件都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件
三.引用
WXML提供两种文件引用方式import和include
import:可以在该文件中使用目标文件定义的template
include：可以将目标文件除了<tempate/>的整个代码引入，相当于是拷贝到include位置
在 item.wxml 中定义了一个叫item的template：
<view>include也会显示此部分内容</view>
<template name="item">
<text>{{text}}</text>
</template>
使用
<import src="item.wxml"/>
<template is="item" data="{{text: '使用了import文件中template'}}"/>
<include src="item.wxml"/>
<template is="item" data="{{text: '使用了include文件中的template，并且不是template的内筒也显示'}}"/>
import 只会显示template里面的内容
include 这个文件里面的所有内容都显示
目的就是把我们所有定义的template布局放一块，代码就整洁了
注意import 和include 要放在使用的前面
网友评论