教你如何在小程序中开发搜索输入框组件（小程序搜索框复制是什么意思）

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

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

实战演练不多说了，直接开始实战吧。如何将一个页面拆分成组件是由页面开发后积累的一系列经验来指导的。先做几页找找感觉。

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

比如上图是微博、知乎、美团、boss直聘的小程序首页。如您所见，它们基本上由顶部的搜索输入框和可在主要部分连续滚动的内容列表组成。

首页开发然后，根据这个想法，我们开始了自己的小程序首页开发。

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

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

清空前

清空后

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

此外，我们发现上述四个主流小程序的主页都没有标题内容，因此我们还将app.json中的navigationBarTitleText字段更改为空字符串。

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

然后让我们先开发搜索输入框。我们以最简单的形式为例，比如上面的第二种和第四种主流小程序。也就是一个圆角输入框，输入框内最左侧有一个搜索图标，输入框内有一个默认提示文本。

内置组件输入输入框我们将使用小程序提供的内部组件输入，并且文档中可以看到输入。

然后，当我们开发一个页面或组件时，我们应该注意在每个元素级别使用一个视图标签作为容器，以便以后更容易操作布局中的元素。

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

这里我们使用小程序的内置组件输入，并通过占位符属性为其设置默认提示文本。

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

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

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

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

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

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

选择图标后，我们可以如下图所示修改图标的颜色和大小，然后下载。

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

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

我们将新下载的搜索图像放入assets中的images目录中，并将图像名称更改为英文名称（一般建议用英文命名文件，以避免一些程序解析错误）。

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

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

通过这种方式，我们可以直观地了解我们页面的当前代码结构，然后决定我们新添加的图标元素应该放在哪一层容器中。

经过上述操作后，我们最终在search-bar的容器的第一行添加了另一个内置组件图像，即与input处于同一级别，然后通过src属性指示要显示的图像位置。这里，当您在image标签中设置src属性时，开发人员工具将自动提示您可以选择的路径。因为我们的图片位于当前文件所在的目录之外，所以我们只需要输入...首先转到下一级目录，然后开发工具会提示我们下一级目录中有哪些文件。

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

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

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

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

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

更多编程相关知识请访问:编程视频！！

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

• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中开发内容列表组件（如何做一个小程序项目）
• 手把手带你实现小程序中保存图片组件的功能。
• 教你如何在一个小程序中开发一个搜索输入框组件(小程序搜索框的简单实现)

本文由主机参考刊发，转载请注明：教你如何在小程序中开发搜索输入框组件（小程序搜索框复制是什么意思） https://zhujicankao.com/107511.html