(微信小程序 )template模板介绍,以及import和include引用方式

喜欢ヅ旅行 2021-09-16 02:42 582阅读 0赞

### 1.定义模板 ###

使用\`<template name="tempName"></template>\`标签定义模板，并将模板名称命名为tempName，赋值给属性name。在标签内部，定义模板结构

<template name="msgItem">
      <view>
          <text> {
       {index}}: {
       {msg}} </text>
          <text> Time: {
       {time}} </text>
      </view>
    </template>

### 2.使用模板 ###

使用<template is="tempName" />标签，在需要使用模板的地方。如果要用到js文件中的数据，则需要添加data属性。如下：

<template is="msgItem" data="{
       {...item}}"/>
    
     
    
    Page({
     data: {
      item: {
       index: 0,
       msg: 'this is a template',
       time: '2016-09-15'
      }
     }
    })

### 3.is属性 ###

is属性不仅可以静态的指向渲染的模板，也可以使用Mustache语法，来动态决定具体需要渲染哪个模板。如下：

// templates
    <template name="odd">
      <view> odd </view>
    </template>
    <template name="odd">
      <view> even </view>
    </template>
     
    // is属性使用Mustache语法动态渲染template
    <block wx:for="{
       {[1, 2, 3, 4,5]}}">
      <template is="{
       {item % 2 == 0 ? 'even' : 'odd'}}" />
    </block>

### 4.模板引用 ###

如上都是在同一个wxml文件中定义和引用模板，而模板的定义和引用是可以分开的。即在一个文件中定义模板，而在其他一个或多个文件wxml文件中都可以使用定义好的模板。从外部文件中引用模板，使用import src="templateUrl" />标签。同样使用is属性来指向要引用的标签。

<import src="../template/template.wxml">//这里引入template下的模板
    <template is="msgItem" data={
       {...indexData}}/>// 但是使用的数据是自己js文件中的数据

### 5.import和include ###

//定义
    
    <template name="msgItem">
      <view>
          <text> {
       {time}} </text>
      </view>
    </template>
    
    
    //import
    <import src="item.wxml"/>//先引入
    <template is="msgItem" data="...items">//后使用  //items:{item:'xiaochengxu'}
    
    
    //include
    <include src="item.wxml"/>//直接在要使用的位置引入即可

**注意:**

1.import需要引入template,然后再使用template；但是include不需要预先引入，直接在需要的地方引入模板即可。

2.include模式非常的简单，就是简单的代码替换，不存在作用域，也不像import需要data传递变量。它只是简单的将代码拿出去然后再拿回来，其作用只是单纯的简化页面。

template模板的好处是它可以让多个调用方调用，template模板就像我们自己定义的组件一样，在我们需要的时候我们只需要使用即可。template模板由于有多方调用，所以不可能要求每个调用方都使用相同的变量名来调用模板，这种由定义方要求调用遵守变量命名的做法不太合理，所以要解决这个问题就必须消除对于外部变量的依赖，可以使用扩展运算符“...”也就是“三个点”展开传入对象变量来消除这个问题。

3.如果模板仅仅只是静态wxml，不涉及数据传递，可以使用include。但是如果涉及数据绑定还是用import。