开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 《微信小程序-基础篇》什么是组件化以及如何封装小程序组件 -> 正文阅读

[移动开发]《微信小程序-基础篇》什么是组件化以及如何封装小程序组件

大家好，这是小程序系列的第三篇文章，前两篇我们分享了关于小程序的初步认知以及一些基本语法，地址如下：
1.《微信小程序-基础篇》初识微信小程序
2.《微信小程序-基础篇》带你快速了解小程序的基础语法
这一篇文章分享的是关于组件化的一些知识，个人期望在学习阶段我们就需要具备组件化开发的思想，写代码的同时也要去思考这部分代码以后是否存在复用的可能性，一旦确定是高概率被复用的，那么就要考虑组件化了～
介绍完基础以后会实际同步开发一个微信小程序的项目并开源，项目的主题暂定是原神的资料站~~~
–
最后，求关注，求收藏，求点赞，谢谢～

前言

在上一章节中我们了解了小程序的一些 基本语法，如果小伙伴了解过Vue的话，真的会发现这些语法和Vue中的一些语法用法非常相似，尤其是列表渲染，条件渲染等等被Vue称之为指令的东西，毕竟到了现代的前端领域，MVVM的开发模式、开发效率已经比原来的MVC胜出太多了；
而本章节，我们主要介绍的是 关于组件开发的相关知识，耐心看完，你一定有所搜获～

阅读对象与难度

本文难度属于：初级，通过本文，你可以了解到组件化的意义是什么，并且在小程序中如何定义一个组件，以及针对在上一盘博文中留下的思考题 组件化Button进行编写与分享；
在这里插入图片描述

组件化的意义

先来说说，为什么要组件化开发吧，毕竟我们一直在说组件化、组件化，如果意义都不清楚，那么开发的时候就会相当的被动，不会主动的去思考为什么要这么干，有什么好处；
先来描述一下我觉得比较官方的说法吧，叫做：组件化开发可以降低系统各个功能之间的耦合性，提高了内部的聚合性，它可以将复杂的、常用的功能或界面进行复用，降低了维护的成本并提高了开发效率；
什么意思呢，说穿了，就是为了偷懒（偷懒才是人类提高效率的第一生产力…），不明白的话模拟个场景你就明白了：

场景

在项目开展的前期，经由设计组的设计你拿到了 一版设计稿，作为前端开发的你必须对这些设计稿进行严格的评估，评估其所有设计的功能、交互 是否都可以实现，当你评估完成之后，发现其中超过 一半以上的界面 都存在一个或几个的按钮，这些个按钮 最大的区别就是不同状态时颜色不一致，成功使用绿色，失败使用红色，此时怎么办，一般而言会有两种做法：

完全根据设计稿开发，哪个界面有按钮，就在哪个界面写一个按钮；
统一在某个文件路径下写一个按钮，为其集成了所有界面中使用到的复杂样式，使用的时候根据参数控制其展现的形式；

如果是你，你选择哪个？想了想，貌似都可以，按照组件化的逻辑，那肯定是选第二个，但是选第二个真的合适吗，先不说实现难度，就说为了实现其功能，需要花费比较多的时间在这个基础组件上开发，而选择第一个则已经直接开发页面了，进度上遥遥领先，每个页面自己写样式也只需要完成一个，之后拷贝代码就像行了，到这里貌似没有一定要使用组件化开发的意义；

接着，你安排好计划并根据计划开发，当完成了70%之后，领导说他像看看开发进度与效果，体验感受一下用户体验，那没办法，你这个时候就需要带着你的项目进行演示汇报，汇报到一半，领导突然说，按钮的颜色不合适，绿色不能代表成功，要改成蓝色，红色也不能代表失败，要改成边框灰色，背景色改为更符合领导审美的透明…
在这里插入图片描述
这时候，你是不是有那么一点掀桌子的想法，如果是组件化开发，那么由于是基于同一个Button实现的，那么不管怎么改需求，都只需要改一处地方就行了…

优点

看完上面那个场景，是不是觉得组件化的优点还是挺明显的，简单的说有以下几点：

更灵活，正如上面的场景描述，组件化后，由于组件是 统一管理 当需求变更时反而更能全局修改；
代码复用，组件化开发的难点在于组件本身的开发，当组件开发完成后使用时会非常简单，复用程度极高，即使组件本身出现BUG那么也只需要修复组件本身，并不会到各个业务页面去进行修复，并且不需要编写样式，不需要编写组件逻辑；
代码管理，由于代码时 高度复用，在管理上也变的简单的多，毕竟大段的代码都被剥离出来单独管理了，并不会影响业务功能；

优点还不止这些，还包括控制了 代码体积，提高了开发效率，甚至是为了我们能尽快改完问题，开发完功能早点下班过生活；
因此，组件化开发一定是未来，甚至不是未来，就是现在已经是前端的标准化开发模式；
在这里插入图片描述

小程序的组件化

了解了组件化开发的优势，那么接来下就聊聊小程序中如何组件化开发，首先当然是要了解官方文档，小程序关于组件化开发的文档在这里：《小程序中的自定义组件》，有兴趣的小伙伴可以先去看看官方如何描述以及使用的；

创建自定义组件

在小程序中自定义组件的创建类似于创建页面，它同样是由四个文件组成，分为是：json、wxml、wxss、js文件，但是与页面区别的是，它必须在json中声明，这是一个组件，声明代码如下：

{
  "component": true
}

另外，js中也不再是标准的小程序模版，而是使用到了一个函数Component，这个函数有小程序官方提供，并不需要引入，大致用法如下：

// component/Button/button.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

properties 类似与Vue中的props，代表父组件传递到自组件的值，data是存储数据的地方，methods则是编写事件的位置，假设现在要给当前这个button组件添加一个size属性，那么怎么写？其实就可以写在properties里

// component/Button/button.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    size:{
      // 这个属性的值必须是String类型
      type:String,
      // 默认值是normal
      value:"normal"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

而在wxml、wxss和js文件中的写法与界面一致，没有什么特殊的地方

引入自定义组件

有定义、编写自定义组件的地方，那必然也有引入使用的地方，假设，我们现在需要在一个名为welcome的页面里引入button组件，那么该怎么引入？其实很简单，找到对应页面的json文件，在其usingComponents属性里引入就行，值得注意的是，组件名就是usingComponents里的key，直接看例子吧

{
  "usingComponents": {
    "t-button":"../../TElement/Button/button"
  }
}

就这么简单，接着就是使用

<!--pages/welcome.wxml-->
<view class="btn-group">
  <t-button>这是一个按钮</t-button>
</view>

在这里插入图片描述

Button组件

既然已经知道了组件如何创建以及引入，那么找个简单的，实践一下，题目就是上篇中的Button组件，假设现在我们有以下这些需求：

size属性： 控制Button尺寸，分为三档：大，中，小，默认为中；
long属性： 控制Button是否横向拉满，默认false；
type属性： 控制Button颜色，可选值有：default，primary，success，默认default

接下来就是一起实现这三个需求的Button

分析

开始前，我们先简单分析一下，确认一下我们期望的功能和用法，大致上我们期望用法如下
size属性

// 尺寸为大的按钮
<t-button size="large"><t-button>
  
// 尺寸为中的按钮
<t-button><t-button>

// 尺寸为小的按钮
<t-button size="small"><t-button>

long属性

// long属性
<t-button long><t-button>

type属性

// 设置按钮的类型
<t-button type="primary"><t-button>

通过分析发现，这几个属性其实 都是在控制样式，size是根据传入的关键词添加对应的大小样式，long属性则是在控制button的width是否是100%，type则是控制button的背景色、字体颜色；

WXML

wxml其实相对比较简单的，通过需求我们知道，传入的属性就是在改变Button的样式

<!--component/Button/button.wxml-->
<button class="t-btn-style {{'btn-'+size}} {{'btn-'+type}} {{long?'is-long':''}}">
  <slot />
</button>

没错，就这么简洁，我们在预设了3个样式，其中size和type直接对样式进行了一个拼接，至于long我们则是通过三元表达式来判断is-long这个属性要不要添加；
可能有小伙伴问 slot 这个是啥，简单说一下就是一个插槽，比如，当我们使用组件的时候需要自定义按钮上的文字，毕竟我们不能确定使用按钮的人想要按钮上显示什么

WXSS

wxss或者说css，这里面就要比wxml中复杂一点，毕竟所有的样式都是需要实现的，大致如下

/* component/Button/button.wxss */
.t-btn-style{
  position: relative;
}
.t-btn-style.btn-large{
  padding: 18px 22px;
  font-size: 18px;
}
.t-btn-style.btn-normal{
  padding: 10px 14px;
  font-size: 16px;
}
.t-btn-style.btn-small{
  padding: 6px 10px;
  font-size: 12px;
}

.t-btn-style.btn-default{
  background-color: #ffffff;
  border:1px solid #e1e1e1;
  color: #333333;
}
.t-btn-style.btn-primary{
  background-color: #2d8cf0;
  color: #ffffff;
}
.t-btn-style.btn-success{
  background-color: #18b566;
  color: #ffffff;
}

.t-btn-style.is-long{
  width: 100%;
}

JS

就这个Button而言，js文件中没有什么特殊的逻辑处理，仅仅只有一个属性的传递，因此也不复杂

// component/Button/button.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    size:{
      type:String,
      value:"normal",
    },
    type:{
      type:String,
      value:"default",
    },
    long:{
      type:Boolean,
      value:false,
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
  }
})