微信小程序 组件的定义与使用（一）

微信小程序 组件的使用

微信小程序支持简洁的组件化编程。好的组件可以多次重复使用，引入方式简单，代码量少，页面简洁好维护，看起来逻辑比较清晰，代码也比较好看。今天我们来讲一下 怎么自定义一个自己的组件，并使用它。

首先先放官方的文档，介绍的还是比较清楚详细，有能力的同学请直接阅读官方文档小程序组件官方文档

1. 自定义自己的小程序组件
2. 页面使用组件

一、自定义组件

1、新建一个组件文件夹

文件夹下面包涵我们需要的4个文件，就跟我们的pages下页面文件夹一样的格式
js、json、wxml、wxss

我的目录结构如下

2、json文件设置

在组件 json文件中声明该页面为 自定义组件文件

{
  "component": true
}

3、编写页面wxml代码

这里就一个view用来显示

<view class="jw-title-box">自定义组件文件</view>

4、编写样式wxss代码

.jw-title-box{
  width: 700rpx;
  height: 80rpx;
  margin: 50rpx auto;
  background: linear-gradient(45deg, #0081ff, #1cbbb4);
  font-size: 28rpx;
  color: white;
  line-height: 80rpx;
  text-align: center;
}

4、编写js代码

这里先给出基本的结构格式，下一篇文章再详细讲解

Component({
  /**
   * 组件的属性列表
   */
  properties: {},
  /**
   * 组件的初始数据
   */
  data: {},
  /**
   * 组件的方法列表
   */
  methods: {}
})

这样我们自定义组件就已经写完了，接下来看看怎么使用

二、使用自定义组件

1、 在 页面json文件中引入组件

在需要的页面json文件或者app.json文件声明引用该组件。格式为引入组件的名称（可自己定义）+ 组件的路径

一般如果是少数调用到的组件就在页面的json文件里面声明引入即可，如果是很多页面需要用到的，就在app.json文件里面声明引入，这样所有页面都可以直接使用组件

{
  "usingComponents": {
    "jw-title": "../../lib/component/jw-title/jw-title"
  }
}

2、 在 页面文件中使用组件

  <jw-title></jw-title>

效果图

到此我们自定义组件就已经完成了。

下一篇就是页面与组件直接的传参与组件页面直接的方法调用