微信小程序template模板與component組件的區(qū)別和使用詳解
前言：
除了component，微信小程序中還有另一種組件化你的方式template模板，這兩者之間的區(qū)別是，template主要是展示，方法則需要在調(diào)用的頁面中定義。而component組件則有自己的業(yè)務邏輯，可以看做一個獨立的page頁面。簡單來說，如果只是展示，使用template就足夠了，如果涉及到的業(yè)務邏輯交互比較多，那就最好使用component組件了。
一. template模板:
1. 模板創(chuàng)建：
建議單獨創(chuàng)建template目錄，在template目錄中創(chuàng)建管理模板文件。
由于模板只有wxml、wxss文件，而且小程序開發(fā)工具并不支持快速創(chuàng)建模板，因此就需要直接創(chuàng)建wxml、wxss文件了，一個template的模板文件和樣式文件只需要命名相同即可。如果模板較多，建議在template目錄下再創(chuàng)建子目錄，存放單獨的模板。
2. 模板文件：
template.wxml文件中能寫多個模板，用name區(qū)分：
<template name="demo">
<view class='tempDemo'>
<text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text>
<text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text>
</view>
</template>
3. 樣式文件：
模板擁有自己的樣式文件（用戶自定義）。
/* templates/demo/index.wxss */
.tempDemo{
width:100%;
}
view.tempDemo .name{color:darkorange}
4. 頁面引用：
page.wxml
<!--導入模板-->
<import src="../../templates/demo/index.wxml" />
<!--嵌入模板-->
<view>
<text>嵌入模板</text>
<template is="demo" data="{{...staffA}}"></template><!--傳入?yún)?shù)，必須是對象-->
<template is="demo" data="{{...staffB}}"></template><!--傳入?yún)?shù)，必須是對象-->
<template is="demo" data="{{...staffC}}"></template><!--傳入?yún)?shù)，必須是對象-->
</view>
page.wxss
@import "../../templates/demo/index.wxss" /*引入template樣式*/
page.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
staffA: { firstName: 'Hulk', lastName: 'Hu' },
staffB: { firstName: 'Shang', lastName: 'You' },
staffC: { firstName: 'Gideon', lastName: 'Lin' }
},
clickMe(e) {
wx.showToast({ title: e.currentTarget.dataset.name, icon: "none", duration: 100000 })
}
......
})
備注：
一個模板文件中可以有多個template,每個template均需定義name進行區(qū)分，頁面調(diào)用的時候也是以name指向?qū)膖emplate;
template模板沒有配置文件(.json)和業(yè)務邏輯文件（.js）,所以template模板中的變量引用和業(yè)務邏輯事件都需要在引用頁面的js文件中進行定義；
template模板支持獨立樣式，需要在引用頁面的樣式文件中進行導入；
頁面應用template模板需要先導入模板 <import src="../../templates/demo/index.wxml" /> ，然后再嵌入模板<template is="demo" data="{{...staffA}}"></template>
二. Component組件：
1. 組件創(chuàng)建：
新建component目錄——創(chuàng)建子目錄——新建Component;
2. 組件編寫：
新建的component組件也由4個文件構(gòu)成，與page類似，但是js文件和json文件與頁面不同。
js代碼：
// components/demo/index.js
Component({
/**
* 組件的屬性列表
*/
properties: {
name: {
type: String,
value: ''
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
type: "組件"
},
/**
* 組件的方法列表
*/
methods: {
click: function () {
console.log("component!");
}
}
})
json配置文件：
{
"component": true,
"usingComponents": {}
}
3. 組件引用：
頁面中引用組件需要在json配置文件中進行配置，代碼如下：
{
"navigationBarTitleText": "模板demo",
"usingComponents": {
"demo": "../../components/demo/index"
}
}
然后在模板文件中進行使用就可以了，其中name的值為json配置文件中usingComponents的鍵值：
<demo name="comp" /> <!--使用demo組件，并傳入值為“comp”的name屬性（參數(shù)）-->
這樣就可以了。
PS：組件中不會自動引用公共樣式，如果需要則需在樣式文件中引入：
@import "../../app.wxss";
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JSON+JavaScript處理JSON的簡單例子，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了javascript實現(xiàn)的上下無縫滾動效果,具有無縫滾動及響應鼠標滑過停止?jié)L動的功能,簡便實用,需要的朋友可以參考下2016-09-09
iframe的高度需要根據(jù)子頁面的實際高度來進行調(diào)整，但是如果子頁面不在同一域中怎么辦？這時候腳本沒有辦法獲取到子頁面的高度，存在JavaScript跨域的問題2013-09-09
JavaScript實現(xiàn)獲取遠程的html到當前頁面中
今天做個項目，需要在當前的html頁面中引用一個遠程的html頁面，百度了一下，發(fā)現(xiàn)一個非常好用的代碼，這里分享給大家，有相同需求的小伙伴可以來看看2017-03-03
定時器(setTimeout/setInterval)調(diào)用帶參函數(shù)失效解決方法
setInterval()方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式,setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式，詳細使用方法可以參考下本文2013-03-03
這篇文章主要介紹了javascript中this用法,結(jié)合具體實例形式詳細分析了javascript中this的含義及對象、函數(shù)等各種調(diào)用中的使用技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JavaScript實現(xiàn)購物車特效的相關(guān)資料，文中通過示例代碼詳細介紹了，利用Javascript如何實現(xiàn)類似淘寶購物車中商品的單選、全選、刪除、修改等功能，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
javascript實現(xiàn)百度地圖鼠標滑動事件顯示、隱藏
這篇文章主要介紹了javascript實現(xiàn)百度地圖鼠標滑動事件顯示、隱藏的思路和方法，十分的實用，這里推薦給小伙伴們，有需要的朋友可以參考下。2015-04-04
js console.log打印對像與數(shù)組用法詳解
這篇文章主要介紹了js console.log打印對像與數(shù)組用法,結(jié)合實例形式較為詳細的分析了js使用console.log實現(xiàn)打印對象與數(shù)組的具體實現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下2016-01-01
關(guān)于導入excel時js轉(zhuǎn)換時間的正確方式
這篇文章主要給大家介紹了關(guān)于導入excel時js轉(zhuǎn)換時間的正確方式,以及js讀取excel中日期格式轉(zhuǎn)換問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09