今天要介绍的是小程序的 自定义组件 ，类似的在做android 开发的过程中会用到自定义view，封装成通用的组件可以在不同页面里重复使用；可以将复杂的页面拆分成多个低耦合的模块，便于代码的维护。

一个自定义组件由js json wxml wxss  4个文件组成，微信开发者工具里新建 选择 Component，会自动创建这个4个文件， json文件里设置：

{  "component": true}复制代码

这一组文件可以当做自定义组件使用。

一个简单的例子，自定义item当做组件使用。   在组件的wxml文件里码上页面元素

    
       
     
      {
   {txt}}
       
     
          
      
             
             
       
        {
   {title}}    
       
          
      
       {
   {subTitle}}  
      
     
    复制代码

组件提供<slot>节点，用于承载组件在引用时提供的子节点，可以当做占位的标志，后面可以将视图直接填充到此节点。

wxss是对应组件的样式

.content{  display: flex;  justify-content: space-between;  align-items: center;  padding-left: 10px;  padding-right: 10px}.title{  color: #424242}.subTitle{  color: #939393;  font-size: 16px}复制代码

js文件里的Component构造器可以指定组件的属性、数据、方法等。

/*** 组件的属性列表*/properties: {    title: {      type: String, //属性类型      value: "--" //属性初始值    },    subTitle: {      type: String,      value: "--"     },}复制代码

属性列表里的值对应渲染在组件的wxml里。

/*** 组件的初始数据*/data: {    txt:"颜色"},复制代码

组件的内部数据用于wxml的渲染。

在需要用到组件的页面json文件里添加，注意路径是绝对路径：

{  "usingComponents": {    "item": "/component/item/item" //绝对路径  }}复制代码

wxml页面内直接使用<item>标签，该标签下的节点text 用于填充到<solt>内

    
       
     
          
      
       1、
        
     
    复制代码

一个简单的页面渲染

组件也可以接受外部传入的样式，在组件的js文件 Component 构造器里

Component({  externalClasses: ['title-class']})复制代码

注意这里使用*-class 的形式定义，在组件的wxml里

    
     {
   {title}}复制代码
    

外部使用的话，可以看到外部的样式传递给组件使用。

//wxml文件
    
         
     
      1、
     //wxss.red-class{  color: red}复制代码
    

一个简单的组件的例子完成，实际项目中，通过自定义组件便于在不同的页面中重复使用。