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

落日映苍穹つ 2023-07-06 13:13 168阅读 0赞

**前言：**

除了component，微信小程序中还有另一种组件化你的方式template模板，这两者之间的区别是，template主要是展示，方法则需要在调用的页面中定义。而component组件则有自己的业务逻辑，可以看做一个独立的page页面。简单来说，如果只是展示，使用template就足够了，如果涉及到的业务逻辑交互比较多，那就最好使用component组件了。

**一. template模板:**

**1. 模板创建：**

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

由于模板只有wxml、wxss文件，而且小程序开发工具并不支持快速创建模板，因此就需要直接创建wxml、wxss文件了，一个template的模板文件和样式文件只需要命名相同即可。如果模板较多，建议在template目录下再创建子目录，存放单独的模板。

![format_png][]

**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;**

![format_png 1][]![format_png 2][]

**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

这样就可以了。

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

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

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNTQ2ODgyLzIwMTgwOC81NDY4ODItMjAxODA4MzAxMTUwMDk0NDgtMjA0ODg1MjMxNi5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNTQ2ODgyLzIwMTgwOC81NDY4ODItMjAxODA4MzExMzQ2MzIyMTEtNDUzNzg3Mzg4LnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNTQ2ODgyLzIwMTgwOC81NDY4ODItMjAxODA4MzExMzQ4MzM3MzUtOTI1MjI4OTc0LnBuZw?x-oss-process=image/format,png