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>
结果如图，作用域可以避免程序进入死循环，比如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。
