用微信小程序写一个搜索功能代码

好的，以下是一个简单的微信小程序搜索功能代码示例：

1. 在 wxml 文件中添加搜索框和搜索结果展示区域

<!--添加搜索框-->
<view class="search-container">
  <input class="search-input" type="text" placeholder="请输入关键词" bindinput="onInput" />
  <button class="search-btn" bindtap="onSearch">搜索</button>
</view>

<!--搜索结果展示区域-->
<view class="result-container" wx:if="{{showResult}}">
  <view class="result-title">搜索结果：</view>
  <view class="result-content" wx:for="{{resultList}}" wx:key="{{item.id}}">
    {{item.title}}
  </view>
  <view class="no-result" wx:if="{{resultList.length === 0}}">暂无搜索结果</view>
</view>

2. 在 js 文件中处理搜索逻辑

Page({
  data: {
    keyword: '', // 搜索关键词
    resultList: [], // 搜索结果列表
    showResult: false, // 是否展示搜索结果
  },

  // 监听输入框内容变化
  onInput(event) {
    this.setData({
      keyword: event.detail.value.trim(),
    });
  },

  // 点击搜索按钮，发送请求获取搜索结果
  onSearch() {
    const { keyword } = this.data;
    if (!keyword) {
      wx.showToast({
        title: '请输入关键词',
        icon: 'none',
      });
      return;
    }
    // 发送请求获取搜索结果，这里可以使用 wx.request 或者封装好的请求库
    // 请求参数中包含关键词 keyword，请求成功后将结果赋值给 resultList
    // 这里只是示例，实际应用中需要根据接口返回数据进行相应处理
    this.setData({
      resultList: [
        { id: 1, title: '搜索结果1' },
        { id: 2, title: '搜索结果2' },
        { id: 3, title: '搜索结果3' },
      ],
      showResult: true,
    });
  },
});

3. 在 wxss 文件中添加样式

/* 搜索框样式 */
.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  border: 1rpx solid #ccc;
  border-radius: 30rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  background-color: #f5f5f5;
}

.search-btn {
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #fff;
  background-color: #007aff;
  border-radius: 30rpx;
}

/* 搜索结果展示区域样式 */
.result-container {
  margin: 20rpx;
}

.result-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.result-content {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.no-result {
  font-size: 28rpx;
  text-align: center;
  color: #999;
}

这样，在微信小程序中就可以实现一个简单的搜索功能了。