超详细微信小程序自定义组件

一、创建组件

1、在根目录下自定义一个components文件夹，用来存放自定义的组件。

2、再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。

3、在指定组件的文件夹中右键->新建Component创建组件。这样创建的目的是在json文件中添加"component": true，将其声明为一个组件。

4、在wxml文件中做好组件的节点布局，比如以下代码：

<view class="outter">
  <view class="inner">我是自定义组件</view>
</view>

二、使用组件

1、在需要使用自定义组件的页面的json文件中注册组件。添加类似以下代码：

{
  "usingComponents": {
    "mybox":"/components/mybox/mybox",
    "mypage":"/components/mypage/mypage"
  }
}

其中"mybox"为组件名，"/components/mybox/mybox"为组件所在路径

2、然后在wxml模板文件中使用组件

<mybox></mybox>

实现结果如下：

我提前在自定义组件的wxss文件中定义了样式

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

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

以上就是自定义组件的定义和使用啦！！！