手把手带你学习微信小程序 —— 十二 （自定义组件）

配合官方文档一起使用，效果更加 —— 传送门

一、自定义组件的介绍

自定义组件，类似于前面说到过的模板 template，但是比模板更加灵活，自定义组件可以定义自己的属性，使用起来也更加方便，但是用起来还是会有些限制，比如在自定义组件中我们只能在自定义组件中修改样式（wxss），不能在渲染界面进行更改样式等等。但是自定义组件有一个很大的好处，我们可以自己添加其他的组件，添加方法等等。总的来说，这也是一个很好用的组件。

二、创建并使用自定义组件

2.1 创建组件

1. 单独创建一个名为 component 的文件夹，然后创建一个子文件，并命名为 mybox，然后再 mybox 文件装创建名为Component 的文件，并命名为 mybox
   

tips：这样做，和新建一个 page 是没有区别的，但是不同的点是在 json 文件和js文件，不同点是多了如下一部分的代码

js文件

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

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

  },

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

  }
})

json文件

{
  "component": true,
  "usingComponents": {}
}

这里的json 文件必须设置为 true

2.2 使用组件

在 mybox.wxml 文件与 mybox.wxss 设置两个盒子

2.2.1 自定义组件初始化

1. wxml文件

<view class='outter' >
  <view class='inner'>
  </view>
</view>

2. wxss样式

.outter{
  width: 200px;
  height: 200px;
  background: yellow;
}

.inner{
  width: 100px;
  height: 100px;
  background: red
}

3. 确保 json 文件找那个的 component 为 true

2.2.2 渲染自定义组件

1. 回到index.json 文件
   把 component 的信息添加进去

{
  "usingComponents": {
  // "创建的组件的名称":"路径"
    "mybox":"/component/mybox/mybox"
  }
}

tips：

• 路径不能错
• 名称必须与创建的子组件的名称一致

2. 在index.wxml 文件中可以直接通过标签 <mybox></mybox> 实现我们自定义的模板

三、给我们创建的标签创建属性

3.1 创建属性

1.语法示范—— 回到自定义组件中，在mybox.js文件下的 properties中，创建对象，语法如下：

properties:{
    属性名称: {
        type: 数据类型，String Number Boolean Object Array
        value:  一个初始化的默认值
    }
}

2. 我们给mybox.js 文件，分别给外边框和内边框设置两个属性

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    innerText:{
      type:String,
      value:"112233"
    },

    outterSize:{
      type:Number,
      value:200
    }
  },

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

  },

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

  }
})

3.2 使用属性

3. 然后就可以在 mybox.wxml 文件中通过 style 设置属性

<view class='outter' style="width:{{outterSize}}px;height:{{outterSize}}px">
  <view class='inner'>
  {{innerText}} <!--设置输出的语句，默认为空字符串-->
  </view>
</view>

4. 由于前面设置过 json 路径，所以我们就可以直接通过属性名，正常的修改样式

<mybox innerText="内部盒子" outterSize="400"></mybox>

效果图：

四、给属性添加组件

通过 slot 标签才可以添加组件

• 新建一个名为 mypage 的组件，在mypage.js 中添加 options 代码

Component({
  options:{
    multipleSlots:true
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

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

  },

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

  }
})

2. 在展示界面 的json 文件把路径添加上
3. 设置wxss 样式，与 wxml 文件

设置纵向布局，并结合全局的样式 container
mypage.wxss

.body{
  width: 100%;
  display: flex;
}

.left-group{
  flex: 1;
  background: yellow;
}

.right-group{
  flex: 1;
  background: green;
}

mypage.wxml

<!-- 设置全局变量修改样式 -->
<view class='container'>
  <view class='header'>
  这是header部分
  </view>
  <slot></slot>
  <!-- slot可以添加一个组件，可以在slot 中添加组件 --> 
   <view class='body'>
    <view class='left-group'>
      <slot name='left'></slot>
      <!-- 给slot 标签设置一个名称，然后最后通过名称 -->
    </view>

    <view class='right-group'>
      <slot name='right'></slot>
    </view> 
 </view> 
</view>

回到展示界面 —— index.wxml

<mypage>
<!-- 与上面的slot 设置的名称一一对应 -->
  <view slot='left'>我是左边</view>
  <view slot='right'>我是右边</view>
</mypage>

展示效果：

五、总结

1. 创建属性，需要在自定义组件的json文件加入如下代码

{
  "component": true,
  "usingComponents": {}
}

component 一定要设置为 true

2. 使用属性，在展示界面 json 文件加入如下代码

{
"usingComponents" :{
    "子文件的名称": "路径";
    }
}

3. 给自定义组件添加属性，在自定义组件 的 js 文件下的 Component，文件添加 如下代码

properties:{
    属性名称: {
        type: 数据类型，String Number Boolean Object Array
        value:  一个初始化的默认值
    }
}

4. 给自定义组件添加组件，在自定义组件的 js 文件添加 options

properties:{
	options:{
	multipleSlots:true
	},
}