微信小程序组件化开发教程、微信小程序组件化开发示例代码

微信小程序中的组件化开发可以使用 template 和 Component 两种方式来实现。

template 模板实现组件

template 模板是一种很简单的组件化方式，通常用于展示静态的内容。可以将页面中的某一段代码封装为一个 template 模板，再在需要使用的地方引入该模板即可。

下面以一个简单的自定义头部组件为例，先在 index.json 中定义好头部组件：

json

{
  "usingComponents": {
    "custom-header": "/components/header/header"
  }
}

然后在 components 文件夹下创建 header 文件夹，并在该文件夹下创建 header.wxml 和 header.wxss 两个文件，分别用于编写组件的模板和样式，例如：

header.wxml：

html

<view class="header">
  <image class="logo" src="../images/logo.png"></image>
  <text class="title">{{title}}</text>
</view>

header.wxss：

css

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #E6E6E6;
}

.logo {
  width: 40rpx;
  height: 40rpx;
}

.title {
  font-size: 28rpx;
  margin-left: 20rpx;
}

在 header.js 中定义组件的属性：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: { // 页面标题
      type: String,
      value: '默认标题'
    }
  },
})

最后在需要使用头部组件的页面中使用 <custom-header> 标签引用该模板文件，并传入需要显示的标题：

html

<custom-header title="首页"></custom-header>

Component 构造器实现组件

Component 构造器是一种更灵活、更复杂的组件化方式，可以自定义组件的行为、事件等。下面以一个自定义列表组件为例，介绍如何使用 Component 构造器来实现组件化开发。

首先在 components 文件夹下创建 list 文件夹，并在该文件夹下创建 list.wxml 和 list.wxss 两个文件，分别用于编写组件的模板和样式，例如：

list.wxml：

html

<scroll-view class="list" scroll-y="true" bindscrolltolower="_loadMore">
  <slot name="item"></slot>
</scroll-view>

list.wxss：

css

.list {
  width: 100%;
  height: 100%;
}

.list::after {
  content: "";
  display: block;
  padding-bottom: 20rpx; /* 预留底部距离 */
}

在 list.js 中定义组件，并实现相应的逻辑：

Component({
  options: {
    multipleSlots: true // 启用多插槽支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    hasMore: { // 是否还有更多数据
      type: Boolean,
      value: true
    }
  },
  /**
   * 组件的初始数据
   */
  data: {},
  /**
   * 组件的方法列表
   */
  methods: {
    _loadMore() { // 加载更多数据
      if (this.data.hasMore) {
        this.triggerEvent('loadmore')
      }
    }
  }
})

在需要使用列表组件的页面中使用 <list> 标签引用该组件，并在插槽中插入需要展示的数据项：

html

<list has-more="{{hasMore}}" bind:loadmore="_loadMore">
  <block wx:for="{{list}}" wx:key="index">
    <slot name="item">
      <view class="item">{{item.name}}</view>
    </slot>
  </block>
</list>