微信小程序template模板与component组件的区别和使用

前言:
除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义。而component组件则有自己的业务逻辑,可以看做一个独立的page页面。简单来说,如果只是展示,使用template就足够了,如果涉及到的业务逻辑交互比较多,那就最好使用component组件了。
一. template模板:
1. 模板创建:
建议单独创建template目录,在template目录中创建管理模板文件。
由于模板只有wxml、wxss文件,而且小程序开发工具并不支持快速创建模板,因此就需要直接创建wxml、wxss文件了,一个template的模板文件和样式文件只需要命名相同即可。如果模板较多,建议在template目录下再创建子目录,存放单独的模板。
 
2. 模板文件:
template.wxml文件中能写多个模板,用name区分:
1 <template name="demo">
2 <view class='tempDemo'>
3   <text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text>
4   <text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text>
5 </view>
6 </template>

3. 样式文件:

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

1 /* templates/demo/index.wxss */
2 .tempDemo{
3   width:100%;
4 }
5 view.tempDemo .name{color:darkorange}

4. 页面引用:

page.wxml

1 <!--导入模板-->
2 <import src="../../templates/demo/index.wxml" />
3 <!--嵌入模板-->
4 <view>
5   <text>嵌入模板</text>
6   <template is="demo" data="{{...staffA}}"></template><!--传入参数,必须是对象-->
7   <template is="demo" data="{{...staffB}}"></template><!--传入参数,必须是对象-->
8   <template is="demo" data="{{...staffC}}"></template><!--传入参数,必须是对象-->
9 </view>

page.wxss

1 @import "../../templates/demo/index.wxss" /*引入template样式*/

page.js

 1 Page({
 2   /**
 3    * 页面的初始数据
 4    */
 5   data: {
 6     staffA: { firstName: 'Hulk', lastName: 'Hu' },
 7     staffB: { firstName: 'Shang', lastName: 'You' },
 8     staffC: { firstName: 'Gideon', lastName: 'Lin' }
 9   },
10   clickMe(e) {
11     wx.showToast({ title: e.currentTarget.dataset.name, icon: "none", duration: 100000 })
12   }
13   ......
14 })

备注:

一个模板文件中可以有多个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代码:

 1 // components/demo/index.js
 2 Component({
 3   /**
 4    * 组件的属性列表
 5    */
 6   properties: {
 7     name: {
 8       type: String,
 9       value: ''
10     }
11   },
12 
13   /**
14    * 组件的初始数据
15    */
16   data: {
17     type: "组件"
18   },
19 
20   /**
21    * 组件的方法列表
22    */
23   methods: {
24     click: function () {
25       console.log("component!");
26     }
27   }
28 })

json配置文件:

1 {
2   "component": true,
3   "usingComponents": {}
4 }

3. 组件引用:

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

1  {
2    "navigationBarTitleText": "模板demo",
3    "usingComponents": {
4      "demo": "../../components/demo/index" 
5    }
6  }

然后在模板文件中进行使用就可以了,其中name的值为json配置文件中usingComponents的键值:

1       <demo name="comp" />
2       <!--使用demo组件,并传入值为“comp”的name属性(参数)-->

 

这样就可以了。 

PS:组件中不会自动引用公共样式,如果需要则需在样式文件中引入:

1 @import "../../app.wxss";

个人原创博客,转载请注明来源地址:https://www.cnblogs.com/xyyt/p/9559326.html

posted on 2018-08-31 17:03  逍遥云天  阅读(...)  评论(...编辑  收藏

导航

统计