微信小程序內(nèi)測(cè)的時(shí)候，學(xué)習(xí)過(guò)一段時(shí)間卓练，后面就沒(méi)接觸隘蝎。回想一下襟企，至今快三年嘱么，忘的差不多了??，最近剛好有個(gè)小程序的開(kāi)發(fā)任務(wù)顽悼，相當(dāng)于一邊做一邊學(xué)習(xí)」澳欤現(xiàn)就個(gè)人了解的一些小程序相關(guān)的知識(shí)做個(gè)簡(jiǎn)單分享。template與component的區(qū)別與使用表蝙。
一拴测、簡(jiǎn)單介紹
其實(shí)template與component功能都差不多，都是實(shí)現(xiàn)組件化的方式府蛇。不同的是template里面可以定義多個(gè)不同的布局樣式集索，不涉及到過(guò)多的邏輯處理。而component一般就定義一個(gè)布局樣式汇跨，使用時(shí)是直接引用component整個(gè)內(nèi)容务荆，可以在里面實(shí)現(xiàn)復(fù)雜的邏輯處理。所以在使用上面穷遂，不涉及到邏輯業(yè)務(wù)的函匕，建議使用template，如果涉及到復(fù)雜的邏輯業(yè)務(wù)的蚪黑，建議使用component盅惜。
二、template模塊的使用
1忌穿、創(chuàng)建
創(chuàng)建template（創(chuàng)建indextemplate.wxml和 indextemplate.wxss文件）
<!-- indextemplate.wxml -->
<!-- 創(chuàng)建模塊 -->
<!-- 一定要給name賦值 -->
<template name="indextpl">
<view class="content" bindtap="clickme">這是一個(gè)模塊</view>
</template>
template樣式
/* indextemplate.wxss */
.content{
background-color: red;
}
2抒寂、使用
導(dǎo)入模塊的樣式文件，并在布局中使用
/* index.wxss */
@import "../../templates/indextemplate.wxss";
導(dǎo)入模塊的布局文件
<!-- index.wxml -->
<!-- 導(dǎo)入模塊 -->
<import src="../../templates/indextemplate.wxml"/>
<!-- 用is來(lái)標(biāo)識(shí)你是用哪一個(gè)模塊 -->
<template is="indextpl"></template>
由于模塊并沒(méi)有js文件掠剑，點(diǎn)擊方法需在使用該模塊的頁(yè)面中的js里面去定義
// index.js
clickme: function(e) {
console.log('模塊被點(diǎn)擊了')
}
三屈芜、component組件的使用
在目錄下右鍵--->新建component，取名indexcomponent,這樣就創(chuàng)建好了一個(gè)組件
創(chuàng)建
<!-- indexcomponent.wxml -->
<!-- 跟page里面的寫法是一樣 -->
<view class="content" bindtap="clickcomponent">我是一個(gè)組件</view>
/* indexcomponent.wxss */
.content{
background-color: green;
}
組件的js文件跟page的不大一樣
// components/indexcomponent.js
Component({
/**
* 組件的屬性列表
*/
properties: {
passvalue:{
type:String,
value:""
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
clickcomponent: function () {
console.log(this.properties.passvalue)
}
}
})
使用（組件的使用不需要導(dǎo)入其他文件了朴译，只需在使用頁(yè)面的json文件中引入組件名跟路徑）
// index.json
//引入組件
{
"usingComponents": {
"indexcomponent": "../../components/indexcomponent"
}
}
<!-- index.wxml -->
<!-- 頁(yè)面中直接使用 -->
<!--向組件傳值 井佑，字段須跟indexcomponent.js中的屬性名一致，如下通過(guò)passvalue向組件傳遞一個(gè)值 -->
<indexcomponent passvalue="我是組件"></indexcomponent>
附項(xiàng)目文件結(jié)構(gòu)圖
image.png
