【微信小程序】使⽤⾃定义组件实现头部搜索框

本文链接：https://blog.youkuaiyun.com/qq_43971504/article/details/105859898

本文介绍如何在微信小程序中创建并使用自定义组件SearchInput，详细阐述了从创建组件文件、声明组件、引入组件到在页面中实际应用的完整过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使⽤⾃定义组件实现头部搜索框
在这里插入图片描述
1. 创建自定义组件
在⽂件夹components/SearchInput内，右键新建Component名为SearchInput

在组件的json⽂件中进⾏⾃定义组件声明
components/SearchInput.json

{
  "component": true,
  "usingComponents": {}
}

在组件的wxml⽂件中编写组件模板
components/SearchInput.wxml

<view class="search_input">
  <navigator url="/pages/search/index" open-type="navigate">搜索</navigator>
</view>

在组件的wxss⽂件中加⼊组件样式
components/SearchInput.wxss

.search_input {
  height: 90rpx;
  padding: 10rpx;
  background-color: var(--themeColor);}
.search_input navigator {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 15rpx;
  color: #666;
}

2. 声明引⼊⾃定义组件
在⻚⾯的json⽂件中进⾏引⽤声明，提供对应的组件名和组件相对路径
pages/index/index.json

{
  // 引用声明
  "usingComponents": {
    // 组件名: 组件相对路径
    "SearchInput": "../../components/SearchInput/SearchInput"
  },      
  "navigationBarTitleText": "商品分类"
}

3.⻚⾯中使⽤⾃定义组件
在页面的wxml文件中使用自定义组件
pages/index/index.json

<view class="pyg_index">
  <!-- 搜索框开始 -->
  <SearchInput></SearchInput>
  <!-- 搜索框结束 -->
</view>