template标签的使用

template标签，主要用于公用组件内容，方便调用，提高了代码的复用性

一层template

1. 先新建template文件和page

2. 在新建的template中的wxml定义

<template name="favourite">
  <view class='vertical' style='flex:auto;align-items: center;'>
    <text class='number'>{{no}}</text>
    <text class='numbertip'>{{noTip}}</text>
  </view>
</template>

3. 在需要调用template的wxml中使用

<import src="../../template/template.wxml" />
<template is="favourite" data="{{...favourite}}" />

4. 在js文件中去设置该数据源的值

data{
    favourite: {
      no: "0",
      noTip: "我的收藏"
    }
}

多层template赋值

1. 先新建template文件和page

2. 在新建的template中的wxml定义

<template name="mine">
  <view class='vertical'>
    <image src='{{imagePath}}' style='width:100rpx;height:100rpx'></image>
    <text class='number'>{{mine}}</text>
  </view>
</template>
<template name="minerow">
  <view class='horizontal' style='background-color:white; margin-top:30rpx;'>
    <template is="mine" data="{{imagePath,mine}}"></template>
    <view class='verticalline'></view>
    <template is="mine" data="{{imagePath:imagePath1,mine:mine1}}"></template>
    <view class='verticalline'></view>
    <template is="mine" data="{{imagePath:imagePath2,mine:mine2}}"></template>
    <view class='verticalline'></view>
    <template is="mine" data="{{imagePath:imagePath3,mine:mine3}}"></template>
  </view>
</template>

3. wxml中使用

<template is="minerow" data="{{...minerow11}}"></template>

4. 在js文件中去设置该数据源的值

data{
   minerow11: {
      imagePath: "../../../resource/mine.png",
      mine: "我的账户",
 
      imagePath1: "../../../resource/mine.png",
      mine1: "我的优惠券",
 
      imagePath2: "../../../resource/mine.png",
      mine2: "收货地址",
 
      imagePath3: "../../../resource/mine.png",
      mine3: "在线客服"
    }
}

对比2和4中可以发现，其实关键在于可以通过

data="{{imagePath: imagePath2,mine:mine2}}"

这种方式给不同的template进行赋值。