前言：
除了component，微信小程序中還有另一種組件化你的方式template模板，這兩者之間的區別是，template主要是展示，方法則需要在調用的頁面中定義。而component組件則有自己的業務邏輯，可以看做一個獨立的page頁面。簡單來說，如果只是展示，使用template就足夠了，如果涉及到的業務邏輯交互比較多，那就最好使用component組件了。
一. template模板:
1. 模板創建：
建議單獨創建template目錄，在template目錄中創建管理模板文件。
由于模板只有wxml、wxss文件，而且小程序開發工具并不支持快速創建模板，因此就需要直接創建wxml、wxss文件了，一個template的模板文件和樣式文件只需要命名相同即可。如果模板較多，建議在template目錄下再創建子目錄，存放單獨的模板。
2. 模板文件：
template.wxml文件中能寫多個模板，用name區分：
<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><!--傳入參數，必須是對象--> <template is="demo" data="{{...staffB}}"></template><!--傳入參數，必須是對象--> <template is="demo" data="{{...staffC}}"></template><!--傳入參數，必須是對象--></view>page.wxss
@import "../../templates/demo/index.wxss" /*引入template樣式*/
page.js
Page({ /** * 頁面的初始數據 */ 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進行區分，頁面調用的時候也是以name指向對應的template;
template模板沒有配置文件(.json)和業務邏輯文件（.js）,所以template模板中的變量引用和業務邏輯事件都需要在引用頁面的js文件中進行定義；
template模板支持獨立樣式，需要在引用頁面的樣式文件中進行導入；
頁面應用template模板需要先導入模板 <import src="../../templates/demo/index.wxml" /> ，然后再嵌入模板<template is="demo" data="{{...staffA}}"></template>
二. Component組件：
1. 組件創建：
新建component目錄——創建子目錄——新建Component;
2. 組件編寫：
新建的component組件也由4個文件構成，與page類似，但是js文件和json文件與頁面不同。
js代碼：
// components/demo/index.jsComponent({ /** * 組件的屬性列表 */ properties: { name: { type: String, value: '' } }, /** * 組件的初始數據 */ 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屬性（參數）-->
這樣就可以了。
PS：組件中不會自動引用公共樣式，如果需要則需在樣式文件中引入：
@import "../../app.wxss";
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
