小程序 template使用笔记

例：（index引用模版a）

template需要创建两个文件 a.wxml, a.wxss

// a.wxml 一个模版文件里面可以创建多个template，我在开发中arrow模版创建了nextArrow, backArrow

<template name='a'> //此模版名称 a
    <view class='.v' bindtap='clickMe'> // 指定响应事件 clickMe
        {{content}} //传递的参数 content
    </view>
</template>

//此模版名称 b
<template name='b'> 

    // 指定响应事件 clickA
    <view class='.v' bindtap='clickA'> 

        //传递的参数 content
        {{content}}
    </view>
</template>

// a.wxss

.v {
    height: 100rpx;
}

1. index.wxss引用a.wxss:

@import "a.wxss";

2. index.wxml引用a.wxml:

// 引用
<import src='a.wxml' />

//分别使用模版 a b

<template is='a' data='{{content:"string"}}' /> // 向a模版传递参数 content


<template is='b' data='{{content:"string2"}}' /> // 向b模版传递参数 content

3. index.js实现事件（模版的事件是在引用模版的page中实现，如果有复杂的事件最好使用Component）

Page({
    clickMe() { alert('这是模版a') },
    clickA() { alert('这是模版b') }
})