四，首页自定义搜索框的实现
我们的搜索框，会在多个页面使用，所以我们这里把搜索框做成一个自定义组件，这样就可以在别的地方很方便的使用我们的搜索框了。
老规矩，先看效果图
4-1，自定义搜索框组件
我们这里使用自定义的组件，需要下面3步
4-1-1，创建自定义组件
首先我们要创建一个专门存放自定义组件的目录components，然后在conpontents里新建一个searchInput组件如下。
我们先在自定义组件searchInput.wxml里随便写一句话，然后在首页里引用这个自定义组件，看能不能展示出来。
4-1-2，声明引用
引用自定义组件时，就要先在home.json里声明引用。
这里我们引用完自定义组件，并命名为searchInput
4-1-3，使用自定义组件
上面声明好引用以后，我们就可以当成一个组件来使用了，如下
这样我们就可以看出，我们的首页里就可以展示出来这个自定义组件了
4-2，美化自定义搜索框
我们上面定义好了搜索框组件，也在首页里成功的使用了，但是样式不是我们所要的，所以这里我们要做样式的美化。
4-2-1，自定义wxml布局
首先我们要在wxml里定义好我们搜索框的布局
我们这里定义的navigator主要是做点击跳转使用的，我们这里点击的时候需要跳转到search页，所以我们还要先创建search页
至于如何创建新页面，我已经讲了很多遍了，不知道的同学可以去翻看下我小程序基础课。
4-2-2，自定义wxss样式
我们上面布局定义好以后，就可以来写样式了。我这里直接把样式文件贴出来给大家。
关于样式基本上没有什么讲的，大家那个知识点不懂得，可以自己去看下相关的css知识点。这里我把完整的wxss代码，贴出来给到大家。关于css也可以直接复制石头哥的代码。
.search_input { height: 80rpx; padding: 15rpx; background: var(--themeColor); } .search_input navigator { height: 100%; display: flex; justify-content: center; align-items: center; background: white; border-radius: 15rpx; color: #666; }
这样样式定义好以后，在我们的home.wxml里直接使用我们的搜索框组件，就很简单了。
这就是我们自定义组件的好处，使用起来特别方便，哪里想使用只需要这么一行代码即可。后面想做修改时，只需要在自定义组件里做简单修改，就可以全局一起修改了。
