微信小程序 WXML学习 模板、事件、事件冒泡、引用

一.模板

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 要放在使用的前面