小程序封装公共搜索框

在小程序开发中，全局搜索是一个常见的需求，例如在一个商城小程序中，用户可以通过搜索框快速搜索商品。为了提高代码复用性和可维护性，我们可以将搜索框封装成一个组件，同时通过从父组件传递参数的方式，实现搜索框样式的定制化。本篇博客简单介绍了如何封装一个全局搜索框组件，并实现可自定义的样式效果。

1. 创建搜索框组件

首先，我们可以在小程序的 components 文件夹下创建一个新的组件文件夹，例如 search-box，并在该文件夹下创建以下文件：

• search-box.wxml：搜索框的模板文件
• search-box.wxss：搜索框的样式文件
• search-box.js：搜索框的逻辑文件
• search-box.json：搜索框的配置文件

在 search-box.wxml 文件中，我们可以定义搜索框的模板结构，例如：

<!-- search-box.wxml -->
<view class="search-box">
  <input class="search-input" bindinput="onInput" placeholder="{
    {placeholder}}" />
  <button class="search-btn" bindtap="onSearch">搜索</button>
</view>

在 search-box.wxss 文件中，我们可以定义搜索框的样式，例如：

/* search-box.wxss */
.search-box {
   
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.search-input {
   
  flex: 1;
  font-size: 28rpx;
  padding: 20rpx;
  border: none;
  outline: none;
}

.search-btn {
   
  font-size: 28rpx;
  color: #fff;
  background-color: #007aff;
  border: none;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  margin-left: 10rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

在 search-box.js 文件中，我们可以定义搜索框的逻辑，例如：

// search-box.js
Component({
   
  properties: {
   
    placeholder: {
   
      type: String,
      value: '请输入搜索关键词',
    },
  },

  methods: {
   
    onInput(event) {
   
      // 处理输入框输入事件
      const value = event.detail.value;
      this.triggerEvent('input', {
    value });
    },

    onSearch() {
   
      // 处理搜索按钮点击事件
      this.triggerEvent('search');
    },
  },
});

在 search-box.json 文件中，我们可以定义搜索框的配置，例如：

// search-box.json
{
   
  "component": true,
  "usingComponents": {
   }
}

2. 在父组件中使用搜索框组件

在需要使用搜索框的父组件中，我们可以引入刚刚创建的搜索框组件，并通过传递参数的方式，实现搜索框样式的定制化。例如，我们可以在父组件的 wxml 文件中引入搜索框组件，并传递 placeholder 和 class 参数：

<!-- parent.wxml -->
<view class="parent">
  <search-box class="custom-search-box" placeholder="请输入商品名称"></search-box>
</view>

在父组件的 wxss 文件中，我们可以定义搜索框样式，例如：

/* parent.wxss */
.custom-search-box {
   
  background-color: #fff;
  border: 2rpx solid #ccc;
  border-radius: 40rpx;
}

在父组件的 js 文件中，我们可以处理搜索框的输入和搜索事件，例如：

// parent.js
Page({
   
  onSearchInput(event) {
   
    const value = event.detail.value;
    // 处理搜索框输入事件
  },

  onSearch() {
   
    // 处理搜索事件
  },
});

最后，在父组件的 wxml 文件中，我们可以通过 bind 属性将搜索框的事件绑定到父组件的函数中：

<!-- parent.wxml -->
<view class="parent">
  <search-box class="custom-search-box" placeholder="请输入商品名称" bind:input="onSearchInput" bind:search="onSearch"></search-box>
</view>

这样，我们就可以在父组件中使用搜索框组件，并通过传递参数的方式，实现搜索框样式的定制化。

3. 总结

通过封装全局搜索框组件，并通过从父组件传递参数的方式，实现搜索框样式的定制化，可以大大提高代码复用性和可维护性。同时，小程序的组件化开发模式，也可以为我们提供更加灵活和高效的开发方式。在实际开发中，我们可以根据具体需求，进一步优化搜索框组件的功能和样式，以实现更好的用户体验和开发效率。