微信小程序 template添加点击事件绑定事件

介绍

template是微信小程序提供的模板，可以在模板中定义代码片段，然后在不同的地方调用。

简单使用

定义template

现在要创建一个template然后再index中使用。因为项目中可能会用到个多个template，所以最好新建一个文件夹来存放template相关的文件。注意这里的.wxml和.wxss文件是单独的创建，并不是创建Page或者Component. 如图：

这里只做简单的演示，只显示一个view，myTemplate.wxml文件的代码如下：

<template name='selectView'>
  <view class='tbgview' bindtap='clickView'>{{title}}</view>
</template>

可以看出template和普通的标签定义差不多，但是每个template必须为它设置name，因为在使用的时候可以是根据这个name的值来找到对应关系的。 

然后开始布局，myTemplate.wxss文件代码：

.tbgview{
  font-size: 30rpx;
  width: 80rpx;
  height: 60rpx;
  line-height: 60rpx;
  color: #000000;
}

使用template

经过上面几步template的定义工作就基本完成了，下面开始具体的使用，首先在需要使用template的文件中引入myTemplate.wxml文件，index.wxml文件的具体代码：

<import src="../template/myTemplate.wxml" />

 <view class='view'>
<!--和普通标签一样使用，is对应的是templates中的name  data是传入template值  -->
    <template is='selectView' data="{{...Data}}"></template>
  </view>

然后再index.wxss中引入template中用到的样式,即引用myTemplate.wxss：

@import "../template/myTemplate.wxss"

这样template中的view就可以显示了，但是我们看到templates.wxml中有一个点击事件 bindtap='clickView' ，那点击事件怎么处理呢？

1.如果你在index.wxml只调用一次template的话，很简单，我们只需要在index.js中添加一个名称为clickView的function即可：

  clickView: function(){
    console.log("我是template的点击方法")
  },

2.如果你在index.wxml多次调用template的话，1中的方法就会有缺陷，会导致多个组件只能共用一个事件。解决方法可以参考：https://blog.csdn.net/wangcheng_/article/details/79764584。