小程序模板和组件的使用和区别-CSDN博客

不得不说微信小程序的官方文档还是有很多坑啊(⊙﹏⊙)

使用模板和组件的目的：实现代码复用

template（模板）

相对于component而言，template更加轻量级，它的功能有限，主要是用于展示。模板只有两个以.wxml 和.wxss结尾的文件

定义模板

新建一个与pages同级的文件夹 => templates,在templates下创建templateItem文件夹，然后在这个文件夹里创建同名的.wxml和.wxss的文件

使用name属性，作为模板的名字，然后在<template/> 内定义代码片段，template必须要写

templateItem.wxml :

<template name="msgItem">    
    <view class="content">我是模板的内容</view>
</template>复制代码

可以在templateItem.wxss中添加一些好看的样式

.content {   
    width: 100%;    
    height: 400rpx;   
    background-color: yellowgreen;    
    display: flex;    
    justify-content: center;    
    align-items: center;
}复制代码

接下来就可以在页面中使用模板了

使用模板

要使用模板，首先得在要使用的页面引入模板，使用import标签导入，使用is属性，声明需要使用的模板，比如在index.wxml中使用：

index.wxml :

<!-- index.wxml -->
<import src="../../templates/templateItem/templateItem.wxml" />
<view>    
    <template is="msgItem" />
</view>复制代码

注意： import标签不能省略 /,不然会报错

现在，模板的内容可以显示在页面上了，但是模板的样式却没有生效。想要让样式生效，必须在index.wxss 中引入模板的样式文件：

/** index.wxss **/
/** 如果下面还有样式 这里的分号不能省略 **/
@import "../../templates/templateItem/templateItem.wxss";复制代码

现在，模板的颜色也出来啦~

到这里，一个最简单的模板就完成了

模板传值

模板除了可以写代码片段外，is属性可以使用Mustache语法，来动态决定具体需要渲染哪个模板

在index.js中的data中添加一些数据，

// index.js
//获取应用实例
cosnt app = getApp();
Page({    
    data: {    
        hero: {  
             name: '盖伦'，
             profession： '战士',
             skill: '得玛西亚正义' 
       }
    }
})复制代码

修改一下模板：

<template name="msgItem">
    <view class="content">
        <view class="content">我是模板的内容</view>
        <view>            
            <text>{{ name }}</text>---            
            <text>{{ professios }}</text>---            
            <text>{{ skill }}</text>        
         </view>   
    </view>
</template>复制代码

在模板原理的样式基础上中增加：

flex-direction: column;复制代码

保存并运行，此时，就多了好多内容了(#^.^#)

模板的作用域

模板拥有自己的作用域，只能使用data 传入的数据以及模板文件中定义的<wxs />模块

component（组件）

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

自定义组件

在pages的同级目录下创建components文件夹

类似于页面，一个自定义组件由json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在json文件中进行自定义组件声明（将component字段设为true)，使用微信开发者工具，创建component会自动生成。

{    "component": true}复制代码

在组件文件中编写一些看起来很厉害的代码

<!-- 这是自定义组件内部的内容 -->
<view class="herocontainer">    
    <view>姓名：{{ hero.name }}</view>    
    <view>职业：{{ hero.profession }}</view>    
    <view>技能：{{ hero.skill }}</view>
</view>复制代码

在自定义组件的js文件中，需要使用 Component 来注册组件，并提供组件的属性定义、内部数据和自定义方法

// 这是自定义组件内部的js文件
Component({    
    properties: {        
        // hero收一个对象        
        hero: Object    
    },    
    data: {   
        //这里是一些组件内部数据   
    },    
methods： {        
    //这里是自定义方法    
}})复制代码

也给它添加一些看起来很厉害的样式

/** 这是自定义组件内部的wxss文件 **/
.herocontainer {    
    width: 750rpx;    
    height: 200rpx;    
    background-color: yellow;    
    color: hotpink;
}复制代码

注意：在组件wxss中不应该使用ID选择器、属性选择器和标签名选择器

自定义组件中，写了wxss和 js，使用时无需在页面中导入，只需导入组件即可

使用自定义组件

使用自定义组件前，首先要在要使用的页面的json文件中进行引用声明，此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

{    
    "usingComponents": { 
      "my-component": "../../components/mycomponent/mycomponent"    
    }
}复制代码

这样，在页面的wxml 中就可以像使用基础组件一样使用自定义组件啦，节点名就是自定义组件的标签名，节点属性就是自定义组件的属性值

<view>    
    <my-component hero="{{hero }}" />
</view>复制代码

黄色部分为组件的内容：

自定义组件传值

页面 -----> 组件

组件中通过proprtties写上要接受的值

页面通过属性名称和值的方式传递

上面就是页面传值到组件

组件 -----> 页面

页面中写监听事件

组件中写触发事件

在自定义组件中添加一个事件

<button bindtap="onTap">点击按钮触发事件</button>复制代码

在组件的js文件methods中添加方法,通过this.triggerEvent()给也面传值，在data中定义一个数据用来传给页面

data: { 
    message: '欢迎来到英雄联盟'  
},
onTap(){    
    const message = this.data.message    
    this.triggerEvent('myevent',message)
}复制代码

在页面的js中，添加一个与data同级的方法，通过事件对象的e.detail拿到传过来的值

Page({    
    onMyEvent(e){ 
       console.log(e.detail)    
    }
})复制代码

在页面中绑定事件

<my-component hero="{{ hero }}" bindmyevent="onMyEvent" />复制代码

点击按钮之后，控制台会输出组件传过来的值

不出意外就是 ==> 欢迎来到英雄联盟

注意坑点

因为wxml节点标签只能是小写字母、中划线和下划线组合，自定义组件也只能是这样
自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式
自定义组件和页面所在项目根目录名不能以wx-为前缀，否则会报错

总结

template 和 components 的共性：不能单独呈现出来，必须依附显示在页面
不同点：template比较轻量级，没有自己的逻辑处理能力，只能来着页面显示值
组件要重量级一些，它有自己的逻辑处理能力