1弛房、template
1.1 template的基本用法
通常值骇，對(duì)于一些簡單的莹菱、需要展示在頁面中的內(nèi)容，且在項(xiàng)目中需要多次使用該內(nèi)容塊的時(shí)候吱瘩，為了提高復(fù)用性道伟，可以考慮使用template來書寫這部分內(nèi)容。
使用template時(shí)使碾，首先使用name屬性給template命名蜜徽，然后在使用template的時(shí)候用is屬性來說明使用的是哪個(gè)模板。
此外票摇，一個(gè).wxml文件內(nèi)可以定義多個(gè)template模板（name屬性值需要不同拘鞋，用于區(qū)分這些模板）。
<!--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不會(huì)直接寫在要使用該模板的文件內(nèi)矢门，我們可以把它寫在外部盆色，然后通過引入外部文件來使用。
1.2 import和include
引入外部文件有兩種方式颅和，一種是import傅事，一種是include。
1.2.1 import
使用外部的template模板峡扩，首先需要在外部文件中寫好template模板蹭越。
<!--template.wxml-->
<view>
你看不見我，你看不見我教届，略略略(?????)
</view>
<template name="outside">
我是外部的template
</template>
如上响鹃，我們?cè)谕獠啃陆藗€(gè)template.wxml文件，然后在該文件下定義了一個(gè)name=“outside”的模板案训，下面可以使用import標(biāo)簽引入該模板到別的文件內(nèi)买置。
<!--index.wxml-->
<!-- 通過import標(biāo)簽引入外部wxml文件 -->
<import src="/template/template.wxml"></import>
<!-- 使用外部引入的template標(biāo)簽 -->
<template is="outside"></template>
此外，import有個(gè)作用域的概念强霎，即import只會(huì)把外部文件的template（模板）import進(jìn)去忿项。
a import b，b import c城舞。此時(shí)轩触，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>
結(jié)果如圖，作用域可以避免程序進(jìn)入死循環(huán)拉馋，比如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>
可以看到惨好，由于作用域的限制，此時(shí)程序并沒有進(jìn)入死循環(huán)随闺。
1.2.2 include
include和import相反日川，include是把目標(biāo)文件里除了template以外的代碼引入進(jìn)去。
<!--template.wxml-->
<view>
你看不見我板壮，你看不見我逗鸣，略略略(?????)
</view>
<template name="outside">
我是外部的template
</template>
<!--index.wxml-->
<!-- 通過import標(biāo)簽引入外部template -->
<include src="/template/template.wxml" />
<!-- 使用外部template.wxml的template標(biāo)簽 -->
<template is="outside"></template>
name="outside"的那個(gè)template呢？別急绰精，看看開發(fā)者工具提示的信息
結(jié)果發(fā)現(xiàn)撒璧，template并沒有引入進(jìn)去，除此之外的代碼都被引入了笨使。
此外卿樱，include支持嵌套引入，比如a include b硫椰，b include c繁调，那么相當(dāng)于把c.wxml中除了template以外的代碼復(fù)制到了b中，再把b中除了template以外的代碼復(fù)制到了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>
此時(shí)a.wxml相當(dāng)于
<!-- a.wxml -->
<view>a</view>
<view>c</view>
<view>b</view>
2靶草、component
通過使用template蹄胰，可以很方便的在多處復(fù)用同一段代碼，但是template竟然只有wxml和wxss文件奕翔，在多處復(fù)用時(shí)裕寨，如果涉及到交互，豈不是要在多處寫同一段js代碼派继？那template有個(gè)[嘩]用氨鐾唷？驾窟！我&&%庆猫！…@！…&￥%#
嗯绅络？什么月培？component有自己的js文件？可以解決這個(gè)問題恩急？
2.1 使用component
要使用component节视，首先在component的文件夾內(nèi)，右鍵——新建——component假栓，然后會(huì)出現(xiàn)四個(gè)文件（wxml、wxss霍掺、js匾荆、json）
當(dāng)寫好了這個(gè)component組件后拌蜘，然后在要使用這個(gè)組件的json文件中指明component的路徑，比如我要在classic頁面中使用這個(gè)組件：
// classic.json
{
"usingComponents": {
"music": "/components/classic/music/index" // 此處的music是組件名牙丽，可隨意更改
}
}
然后在classic.wxml文件中以標(biāo)簽的方式使用該組件（標(biāo)簽名是我們上面在json文件中自定義的組件名）
<!-- classic.wxml -->
<music />
總結(jié)
1简卧、對(duì)于不涉及js邏輯交互的簡單展示，可以考慮使用template烤芦。
2举娩、對(duì)于js邏輯交互多的組件，使用component构罗。
