微信小程序搜索框代码

以下是一个简单的微信小程序搜索框的代码示例，包括wxml和wxss文件：

wxml代码：

<view class="search-box">
  <image class="search-icon" src="/images/search.png"></image>
  <input class="search-input" placeholder="请输入搜索内容"></input>
</view>

wxss代码：

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 10rpx;
}

.search-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
  background-color: #f5f5f5;
  border: none;
  outline: none;
}

这个搜索框包括一个搜索图标和一个输入框，可以根据需要进行样式修改。在wxml中，我们使用`<input>`标签来创建输入框，使用`<image>`标签来创建图片。在wxss中，我们使用`display: flex`来使搜索框内的元素水平排列，使用`align-items: center`来使它们垂直居中对齐，使用`background-color`来设置背景颜色，使用`border-radius`来设置圆角，使用`padding`来设置内边距。搜索图标和输入框的样式也可以通过修改相应的CSS属性来进行调整。