微信小程序组件化开发的实战步骤

下面我会详细讲解“微信小程序组件化开发的实战步骤”的完整攻略，共分为以下几个步骤：

1. 创建自定义组件

首先，在小程序项目中新建一个文件夹，用来存放自定义组件。命名可以根据需要自行定义，这里以 components 为例。在文件夹中按照组件的需求创建各个组件文件夹，比如 toast（提示框组件）、modal（弹框组件）等。

在组件文件夹中，需要新建三个文件：.js、.wxml 和 .wxss。.js 文件中，我们需要定义组件的属性和方法；.wxml 文件中，我们需要定义组件的 HTML 结构；.wxss 文件中，我们需要定义组件的样式。

2. 在页面中使用自定义组件

在使用自定义组件的页面中，需要在 .json 文件中声明组件。比如，在 app.json 或 index.json 中声明 toast 组件：

{
  "usingComponents": {
    "toast": "/components/toast/toast"
  }
}

这里的 toast 是我们自己定义的组件名，/components/toast/toast 中的第一个 toast 是组件文件夹的名称，第二个 toast 是组件文件夹中 .js 文件的名称。

接下来，在页面的 .wxml 文件中使用自定义组件。

<toast message="{{message}}" />

在上面的代码中，message 是传递给组件的属性。

3. 组件中的事件

组件中可以定义一些事件，供页面调用。比如，在 toast 组件中定义一个隐藏提示框的方法：

Component({
  properties: {
    message: {
      type: String,
      value: ''
    },
    duration: {
      type: Number,
      value: 2000
    },
    visible: {
      type: Boolean,
      value: true
    }
  },
  methods: {
    hideToast() {
      this.setData({
        visible: false
      })
    }
  }
})

在上面的代码中，hideToast 方法用来隐藏提示框。在页面中，可以通过以下代码调用该方法：

this.selectComponent('#toast').hideToast();

4. 组件传递数据

当组件需要向调用它的页面传递数据时，可以使用事件来实现。比如，在 modal 组件中定义一个确定按钮的点击事件：

Component({
  properties: {
    title: {
      type: String,
      value: ''
    },
    content: {
      type: String,
      value: ''
    }
  },
  methods: {
    handleSubmit() {
      this.triggerEvent('confirm', {
        title: this.data.title,
        content: this.data.content
      })
    }
  }
})

在上面的代码中，handleSubmit 方法用来触发名为 confirm 的事件，同时传递 title 和 content 两个数据给调用它的页面。

在页面中，可以使用以下代码监听该事件：

<modal bind:confirm="handleConfirm" />

在页面的 .js 文件中：

handleConfirm(e) {
  console.log(e.detail)
}

当用户点击确定按钮时，handleConfirm 方法会接收到 title 和 content 两个数据。

以上就是微信小程序组件化开发的实战步骤的详细攻略，可以根据实际项目需要进行相应调整。以下是两个示例说明：

示例 1：toast 提示组件

在 components/toast 文件夹中新建 toast.js、toast.wxml、toast.wxss 三个文件。代码如下：

// toast.js
Component({
  properties: {
    visible: {
      type: Boolean,
      value: false
    },
    message: {
      type: String,
      value: ''
    },
    duration: {
      type: Number,
      value: 2000
    },
    mask: {
      type: Boolean,
      value: false
    }
  },
  methods: {
    showToast() {
      this.setData({
        visible: true
      })

      setTimeout(() => {
        this.hideToast();
      }, this.data.duration);
    },
    hideToast() {
      this.setData({
        visible: false
      })
    }
  }
})

<!-- toast.wxml -->
<view class="toast {{visible ? 'show' : ''}}">
  <view class="toast__text">{{message}}</view>
</view>

/* toast.wxss */
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10rpx 20rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 4rpx;
  opacity: 0;
  z-index: 99;
  transition: .3s;
}

.toast__text {
  font-size: 28rpx;
  line-height: 38rpx;
  text-align: center;
  word-break: break-all;
}

.show {
  opacity: 1;
}

在页面中，引入 toast 组件，使用以下代码即可调用：

<toast message="Hello World" visible="{{visible}}" />

示例 2：modal 弹框组件

在 components/modal 文件夹中新建 modal.js、modal.wxml、modal.wxss 三个文件。代码如下：

// modal.js
Component({
  properties: {
    title: {
      type: String,
      value: ''
    },
    content: {
      type: String,
      value: ''
    },
    visible: {
      type: Boolean,
      value: false
    }
  },
  methods: {
    handleCancel() {
      this.hideModal();
    },
    handleSubmit() {
      this.triggerEvent('confirm', {
        title: this.data.title,
        content: this.data.content
      })

      this.hideModal();
    },
    hideModal() {
      this.setData({
        visible: false
      })
    }
  }
})

<!-- modal.wxml -->
<view class="modal {{visible ? 'show' : ''}}">
  <view class="modal__header">{{title}}</view>
  <view class="modal__content">{{content}}</view>
  <view class="modal__footer">
    <view bindtap="handleCancel" class="modal__button">取消</view>
    <view bindtap="handleSubmit" class="modal__button">确定</view>
  </view>
</view>

/* modal.wxss */
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 8rpx;
  z-index: 99;
  opacity: 0;
  transition: .3s;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, .6);
}

.modal__header {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20rpx;
}

.modal__content {
  font-size: 32rpx;
  color: #666;
  line-height: 46rpx;
  text-align: center;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 30rpx;
}

.modal__footer {
  display: flex;
  justify-content: space-around;
}

.modal__button {
  font-size: 36rpx;
  color: #333;
  padding: 20rpx;
  border-radius: 8rpx;
  cursor: pointer;
}

.show {
  opacity: 1;
}

在页面中，引入 modal 组件，使用以下代码即可调用：

<modal title="提示" content="确定删除吗？" visible="{{visible}}" bind:confirm="handleConfirm" />

在页面的 .js 文件中，定义 handleConfirm 方法来接收传递过来的数据：

handleConfirm(e) {
  console.log(e.detail)
}