1、template

1.1 template的基本用法

通常，对于一些简单的、需要展示在页面中的内容，且在项目中需要多次使用该内容块的时候，为了提高复用性，可以考虑使用template来书写这部分内容。

使用template时，首先使用name属性给template命名，然后在使用template的时候用is属性来说明使用的是哪个模板。

此外，一个.wxml文件内可以定义多个template模板（name属性值需要不同，用于区分这些模板）。

<!--index.wxml-->
<template name="people">
  <view>
    <view>姓名： {{name}}</view>
    <view>性别： {{sex}}</view>
    <view>年龄： {{age}}</view>
  </view>
</template>

<!--使用name=“people”的template模板-->
<template is="people" data="{{...boy}}"></template>

//index.js
Page({
  data: {
    boy: {
      name: "张三",
      sex: "男",
      age: 18
    }
  }
})

不过一般template不会直接写在要使用该模板的文件内，我们可以把它写在外部，然后通过引入外部文件来使用。

1.2 import和include

引入外部文件有两种方式，一种是import，一种是include。

1.2.1 import

使用外部的template模板，首先需要在外部文件中写好template模板。

<!--template.wxml-->
<view>
  你看不见我，你看不见我，略略略(ૢ˃ꌂ˂ૢ)
</view>

<template name="outside">
  我是外部的template
</template>

如上，我们在外部新建了个template.wxml文件，然后在该文件下定义了一个name=“outside”的模板，下面可以使用import标签引入该模板到别的文件内。

<!--index.wxml-->
<!-- 通过import标签引入外部wxml文件 -->
<import src="/template/template.wxml"></import>

<!-- 使用外部引入的template标签 -->
<template is="outside"></template>

预览图

此外，import有个作用域的概念，即import只会把外部文件的template（模板）import进去。

a import b，b import c。此时，a可以使用b定义的template，b可以使用c定义的template，但是a不可以使用c定义的template。

<!--c.wxml-->
<template name="c">
  <text>c</text>
</template>

<!--b.wxml-->
<template name="b">
  <text>b</text>
  <!--b import了c-->
  <import src="c.wxml"></import>
</template>

<!--a.wxml-->
<template name="a">
  <text>a</text>
  <!--a只import了b.wxml-->
  <import src="b.wxml"></import>
  <template is="b"></template>
  <template is="c"></template>
</template>

预览图 not found

结果如图，作用域可以避免程序进入死循环，比如a和b之间相互import。

<!--a.wxml-->
<template name="a">
  <text>a</text>
  <import src="b.wxml"></import>
  <template is="b"></template>
</template>

<!--b.wxml-->
<template name="b">
  <text>b</text>
  <import src="a.wxml"></import>
  <template src="a"></template>
</template>

预览图

可以看到，由于作用域的限制，此时程序并没有进入死循环。

1.2.2 include

include和import相反，include是把目标文件里除了template以外的代码引入进去。

<!--template.wxml-->
<view>
  你看不见我，你看不见我，略略略(ૢ˃ꌂ˂ૢ)
</view>

<template name="outside">
  我是外部的template
</template>

<!--index.wxml-->
<!-- 通过import标签引入外部template -->
<include src="/template/template.wxml" />

<!-- 使用外部template.wxml的template标签 -->
<template is="outside"></template>

结果图

name="outside"的那个template呢？别急，看看开发者工具提示的信息

结果发现，template并没有引入进去，除此之外的代码都被引入了。

此外，include支持嵌套引入，比如a include b，b include c，那么相当于把c.wxml中除了template以外的代码复制到了b中，再把b中除了template以外的代码复制到了a中

<!-- c.wxml -->
<view>c</view>

<!-- b.wxml -->
<include src="c.wxml" />
<view>b</view>

<!-- a.wxml -->
<view>a</view>
<include src="b.wxml"></include>

预览图

此时a.wxml相当于

<!-- a.wxml -->
<view>a</view>
<view>c</view>
<view>b</view>

2、component

通过使用template，可以很方便的在多处复用同一段代码，但是template竟然只有wxml和wxss文件，在多处复用时，如果涉及到交互，岂不是要在多处写同一段js代码？那template有个[哗]用啊？！我&&%！…@！…&￥%#

嗯？什么？component有自己的js文件？可以解决这个问题？

2.1 使用component

要使用component，首先在component的文件夹内，右键——新建——component，然后会出现四个文件（wxml、wxss、js、json）

当写好了这个component组件后，然后在要使用这个组件的json文件中指明component的路径，比如我要在classic页面中使用这个组件：

// classic.json
{
  "usingComponents": {
    "music": "/components/classic/music/index"   // 此处的music是组件名，可随意更改
  }
}

然后在classic.wxml文件中以标签的方式使用该组件（标签名是我们上面在json文件中自定义的组件名）

<!-- classic.wxml -->
<music />

预览图

总结

1、对于不涉及js逻辑交互的简单展示，可以考虑使用template。
2、对于js逻辑交互多的组件，使用component。