前言：

除了组件，微信小程序里还有另外一种方法可以组件化你，模板模板。两者的区别在于模板主要用于显示，方法需要在被调用的页面中定义。组件组件有自己的业务逻辑，可以看作是一个独立的页面。简单来说，如果只是为了演示，使用模板就足够了。如果涉及许多业务逻辑交互，最好使用组件组件。

一、模板模板：

1.模板创建：

建议单独创建一个模板目录，并在模板目录中创建一个管理模板文件。

由于模板只有wxml和wxss文件，小程序开发工具不支持快速创建模板，所以需要直接创建wxml和wxss文件，模板的模板文件和样式文件只需要命名相同即可。如果模板较多，建议在模板目录下创建子目录，存储单独的模板。

2.模板文件：

您可以在template.wxml文件中编写多个模板，这些模板按名称区分：

模板名=' demo ' view class=' tempDemo ' text class=' name ' first name : { { first name } }，last name : { { last name } }/text text class=' fr ' bind tap=' clickMe ' data-name=' { ' Hello！我是‘名字’‘姓氏’！}}' clcikMe /text/view/template3。样式文件：

模板有自己的样式文件(用户定义的)。

/*模板/演示/index.wxss */。tempDemo { width :100%；} view . temp demo . name { color : dark orange } 4。页面参考：

page.wxml

！-导入模板-导入src=' http:/./templates/demo/index.wxml'/！-嵌入模板-viewtext嵌入模板/texttemplate为=' demo ' data=' { {.staffa } } '/模板！-传入的参数必须是对象-模板是=' demo '数据=' { { 0.staff } } '/模板！-传入的参数必须是对象-模板是=' demo '数据=' { { 0.staff } } '/模板！-传入的参数必须是对象- /viewpage.wxss

@ import././templates/demo/index.wxss'/*介绍模板样式*/page.js。

page({/* * * page的初始数据*/data : { stafa 3360 { first name 3360 ' huk '，lastname3360' Hu'}，staff b : { first name 3360 ' Shang '，lastName: 'You' }，staff fc : { first name : ' Gideon '，lastName: 'Lin' })，Click me(e){ wx . show toast({ title : e.})备注：

一个模板文件中可以有多个模板，每个模板需要定义名称来区分。当页面被调用时，还会指向对应的模板，模板名为；

模板模板没有配置文件(。json)和业务逻辑文件(。js)，所以模板模板中的变量引用和业务逻辑事件需要在引用页面的js文件中定义。

模板模板支持独立的样式，需要导入到引用页面的样式文件中。

模板导入src=' http:/./templates/demo/index . wxml '/应该在模板为=' demo ' data=' { {之前导入.staffa } } '/模板已嵌入

二.组件组件：

1.组件创建：

创建新组件目录——创建子目录——创建新组件；

2.编译组件：

新创建的组件组件也由四个文件组成，类似于page，但是js文件和json文件与page不同。

Js代码：

//components/demo/index . js component({/* * *组件属性列表*/properties : { name : { type : string，value:''})，/* * *组件的初始数据*/data : { type : ' component ' }，/* * *组件的方法列表*/methods 3360 { click 3360 function(){ console . log(' component！');} }})json配置文件：

{'component' : true，'使用components' : {}} 3。组件参考：

页面中引用的组件需要在json配置文件中进行配置，代码如下：

{ ' navigationBarTitleText ' : '模板演示'，' using components ' : { ' demo ' : '././components/demo/index'}}然后在模板文件中使用它，其中name的值是在json配置文件中使用组件的键值：

演示名称='comp' /！-使用demo组件并传入值为“comp”的name属性(参数)-没关系。

PS:组件中不会自动引用公共样式。如有必要，您需要介绍：

@import././app . wxss '；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。