介绍
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。