小程序笔记-模板 import include

template

• 属性name 用于指定模板名称
• 内容中的{{name}}访问的不是js中data里的数据，而是需要模板传入，需要再调用模板时，通过属性 data指定，类似于函数传递参数的效果。传递时需要在变量名称前加 ...  
• 如下：...listdata_xx ，listdata_xx 为一个对象，传递后，模板会自动识别对象下的成员，及{{name}} 中name = listdata_xx->name
• 调用模板时使用关键字 is 

wxml

<!--定义模板-->
<template name="name-list">
  <view class="cls-template">
    <view> name:{{name}}</view>
    <view> age:{{age}}</view>
  </view>
</template>

<!--调用模板-->

<template is='name-list' data="{{...listdata[0]}}"></template>
<template is='name-list' data="{{...listdata[1]}}"></template>
<template is='name-list' data="{{...listdata_xx}}"></template>

js

  data: {
    listdata: [{
      name: '小明',
      age: 17
    }, {
      name: '小牛',
      age: 22,
    }],
    listdata_xx: {
      name: '小华',
      age: 21
    }
  },

wxss

.cls-template
{
  border: 2px solid #EEE;
  margin-top: 10px;
  height: 100px;
}

模板导入 import

创建模板文件

• 可以在主目录添加一个文件夹 template
• 在该文件夹下添加模板文件 itemTemplate.wxml

 itemTemplate.wxml

<!--定义模板-->
<template name="name-list">
  <view class="cls-template">
    <view> name:{{name}}</view>
    <view> age:{{age}}</view>
  </view>
</template>

导入模板

 templateDemo.wxml

<!--调用模板-->
<import src="/template/itemTemplate.wxml"></import>

<template is='name-list' data="{{...listdata[0]}}"></template>
<template is='name-list' data="{{...listdata[1]}}"></template>
<template is='name-list' data="{{...listdata_xx}}"></template>

其中模板中用到的样式cls-template 定义在模板同目录下却找不到，说明import导入模板没有逻辑关系，没有继承性，只是简单的将模板拷贝过来而已。

include  包含

• 代码段包含进来,不传递数据
• include目标文件下是可以直接访问data数据的

 templateDemo.wxml 

<include src="/template/header.wxml"/>

header.wxml 

<view>这是包含的view {{listdata_xx.name}}</view>