教你如何在一个小程序中开发一个搜索输入框组件(小程序搜索框的简单实现)

本文将与您分享一个小程序开发实践，并介绍如何开发一个搜索输入框组件，希望对您有所帮助！

这次就说说组件的开发吧。由于小程序可能由许多页面组成，而不同的页面可能有相似的部分，我们应该合理地将页面拆分成不同的组件，就像积木一样，然后通过组合不同的组件将页面一个个组装起来，这就是为什么会有组件开发的概念。【相关学习推荐:小程序开发教程】

实战就不多说了，直接开始实战吧。如何将一个页面拆分成组件，是以页面开发后积累的一系列经验为指导的。让我们制作一些页面来找出这种感觉。

比如我们先做一个小程序主页。我们许多常见的应用程序主页大多是一个内容列表。其实它有一个更专业的名字叫“feed Stream”。

比如，以上图片是微博、知乎、美团、boss等直接雇佣的小程序首页。正如你所看到的，它们基本上由顶部的搜索输入框和主体部分的可持续上传的内容列表组成。

首页开发然后，按照这个思路，我们开始了自己的小程序首页开发。

首先，我们打开app.json文件，pages中第一个配置的项目是小程序的主页。

然后，我们打开首页的index.wxml文件清空，然后开始编写自己的首页内容。

清空前

清空后

我们可以打开上图提到的热重载，这样每次修改完页面内容后就可以实时看到修改效果，不用每次都手动点击编译。

另外，我们发现以上四个主流小程序的首页都没有标题内容，所以我们也将app.json中的navigationBarTitleText字段改为空字符串。

正如我们上面提到的，搜索框由顶部的搜索输入框和主体部分的列表组成，这很自然地将主页分为两个组件:搜索输入框和内容列表，因为这两个元素都可能被其他页面重用。

所以我们先开发搜索输入框。我们以最简单的形式为例，比如上述主流小程序的2、4。即一个圆形的输入框，左边有一个搜索图标，输入框中有一个默认的提示文本。

内置组件输入输入框我们会使用小程序提供的内部组件输入，文档作为输入可见。

然后，我们在开发页面或组件时，要注意在每个元素级别使用view标签作为容器来包装元素，这样以后在布局中操作元素会更容易。

例如，如果我们在pages/index/index.wxml中编写上述代码，页面将出现在左侧。

这里，我们使用applet的内置组件输入，并通过placeholder属性为其设置默认提示文本。

接下来，我们需要使用一些样式代码来装饰搜索框。

我们向元素标签添加了样式属性。

然后清空index.wxss中的原始内容，然后添加我们自己的样式代码。

这里的调试是一个非常实用的开发技巧。如上图所示，我们可以使用开发者工具提供的调试器来查看实际渲染的页面的结构和样式属性，并且可以在这里直接修改页面元素的样式，实时看到效果。甚至对于颜色类的属性，我们可以点击当前颜色调出颜色选择面板，然后调整元素的颜色。

然后，当我们将页面样式调整到最佳效果时，直接在调试器中选择并复制样式代码，然后粘贴到我们的index.wxss中

图标介绍最后，我们需要在输入框的最左侧显示一个搜索风格的图标，所以首先我们需要从网上找一张搜索风格的图片。这里推荐Iconfont用于图标过滤。

我们选定图标后，可以按照下图修改图标的颜色和大小，然后下载。

然后，我们把下载的图片放到applet项目文件夹中。有许多方法可以打开applet项目文件夹。例如，您可以在开发工具的资源管理器中右键单击任何文件，然后选择在资源管理器中显示它，或者单击右上角的详细信息面板，然后单击本地目录项。

然后我们创建一个新的assets文件夹来存储小程序的静态文件，比如图片、公共样式等。

我们把刚刚下载的搜索图片放到assets中的images目录下，把图片名称改成英文名称(一般建议用英文命名文件名，避免程序解析出现一些错误)。

然后我们回到开发者工具，我们可以看到刚刚复制的搜索图标已经准备好了。然后，我们通过样式代码将其显示在输入框中。

首先，我们可以使用上图所示的方法，点击调试器左上角的图标，查看我们页面的当前元素结构。方法是点击调试器左上角的视图图标，然后将鼠标移动到左侧小程序预览中的任意位置。您可以看到，右侧面板将突出显示与所选元素对应的代码区域，以及左侧的所选位置。

这样就可以直观的了解我们页面当前的代码结构，进而决定我们新添加的图标元素应该放在容器的哪一层。

布局经过上面的操作，我们最后在search-bar的容器中的第一行添加了另一个内置的组件图像，也就是和input同一个级别，然后通过src属性指明要显示的图像的位置。这里，当您在image标签中设置src属性时，开发工具会自动提示您可以选择的路径。由于我们的图片位置在当前文件所在的目录之外，我们只需要输入..首先转到下一个更高级别的目录，然后开发工具会提示我们下一个更高级别的目录中有什么文件。

最后我们在index.wxss中使用CSS语法写了一个合理的样式，在输入框左侧垂直居中位置显示搜索图标。具体可以参考相关文献学习语法。

所以经过以上的开发，我们的主页已经成型了。这里介绍一个开发者工具提供的强大功能——真机预览功能。

如图所示，单击面板顶部的预览按钮。开发者工具会将当前小程序编译成预览状态，然后通过登录小程序的开发者的微信扫描二维码，就可以看到当前小程序在真机中的效果。

好了，最后，让我们总结一下今天所讲的内容。今天我们首先介绍了组件开发的概念以及为什么要拆分组件，并通过一个例子介绍了开发组件过程中用到的一些开发技巧，包括

内置组件使用样式调试方法。图片资源引入真机预览。当然，本文并没有真正开发组件，因为我们已经直接在页面文件中开发了元素。在下一篇文章中，我们将按照搜索输入框组件+内容列表组件对主页进行拆分，从而详细介绍小程序组件的开发方法。

有关编程的更多信息，请访问:编程视频！！以上是教你在一个小程序中开发一个搜索输入框组件的细节。更多信息请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：教你如何在一个小程序中开发一个搜索输入框组件(小程序搜索框的简单实现) https://zhujicankao.com/76175.html