请逐步告诉我如何在迷你程序中开发搜索输入框组件

本文分享了实用的迷你程序开发实践，并介绍了如何开发搜索输入框组件。我希望它对每个人都有帮助！

这次，我们将解释有关组件开发的信息。 微型程序可以由许多页面组成，并且不同的页面可能具有相似的部分，因此，就像构建块块一样，您需要合理地将页面分为不同的组件并组合不同的组件以组装每个页面。这就是为什么存在组件发展的概念的原因。 [相关的学习建议：迷你计划开发教程]

让我们开始进行实际的战斗，而无需说出它。 页面分为组成部分的方式是由一系列页面开发后积累的经验指导的。首先，创建几页并找到感觉。

例如，首先创建一个迷你程序主页。应用程序的大多数典型首页都是内容列表。实际上，有一个更具专业的名称，称为“ feedstream”。

例如，上图是微博，Zhihu，Meituan和Boss Direct招聘的主页。 如您所见，它们基本上是由顶部搜索输入框和连续标记的主要部分组成的。

根据这个想法，我们将开始开发自己的迷你程序主页。

首先，打开app.json文件。在这里，该页面组成的第一项是Mini Program Homepage。

接下来，在主页上打开index.wxml文件，清除它，然后开始编写自己的主页内容。

在清除之前

您可以打开上图中显示的热重新加载。

此外，由于上面的四个主流微图的主页没有标题内容，因此您还可以将app.json中的navigationbartitletext字段更改为空字符串。

搜索框组件

我们指出，上面的主页由顶部的搜索输入框和主要部分列表组成。组件是因为两个元素都可以在其他页面上重复使用。

让我们先开发一个搜索输入框。让我们以最简单的形式作为示例，例如上面的第二和第四个主流小问题。 也就是说，在一个圆形输入框中，输入框的左侧有一个搜索图标，以及输入框中的一行默认提示文本。

内部组件输入

输入框，可以使用小程序提供的内部组件输入来查看文档。接下来，开发页面或组件时，您应该注意，在每个元素级别，您都将视图标签用作包装元素的容器。这将有助于后续控制布局中的元素。

例如，如果您在页面/index/index.wxml中写上述代码，则页面将显示在左侧。

我们使用applet的内置组件输入，并通过占位符属性设置默认提示文本。

接下来，您需要使用样式代码来样式搜索框。

将样式属性添加到元素标签

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

这是一个非常实用的发展技巧。如上图所示，您可以使用开发人员工具提供的调试器来显示页面的实际渲染结构和样式属性，从而使您可以直接更改页面元素样式以实时查看效果。 即使是颜色类属性，您仍然可以单击当前颜色以调整颜色选择面板，然后再调整元素的颜色。

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

最后，您应该在输入框左侧显示搜索样式图标。首先，您需要从Internet找到搜索样式图像。 在这里，我们建议使用ICONFONT网站进行图标过滤

选择图标后，您可以按照下面的照片下载它以更改图标的颜色和大小。

接下来，将下载的照片放入Applet Project文件夹中。打开Applet项目文件夹有很多方法。 例如，右键单击开发人员工具Explorer中的文件，然后在Explorer中选择“视图”，或单击右上角的详细信息面板，然后单击本地目录项目。

接下来，创建一个新的资产文件夹以将静态文件存储在小程序中，例如照片，公共样式。

之后，返回开发人员工具，您会发现现在复制的搜索图标已经准备就绪。 然后，它通过样式代码

出现在输入框中。首先，您可以使用上图中显示的方法来查看页面的当前元素结构，通过单击调试器左上角的图标。 此方法是首先单击调试器左上角的视图图标，然后将鼠标移至左侧的Applet预览中的任何位置。您会看到右面板根据左侧的选定位置突出显示所选元素的相应代码区域。

通过此方法，您可以直观地了解页面的当前相应代码结构，这使您可以在上述操作后确定应放置新添加的图标元素的哪些容器。

在上述操作后，您最终将看到搜索容器的容器-的容器。 在这里，将SRC属性设置为图像标签将自动提示您选择开发人员工具可以选择的路径。 图像位置位于当前文件所在的目录之外，因此您只需要输入它即可从以前的目录开始。然后，开发人员工具提示您到以前的目录中的哪些文件。

它最终将传递给index.w使用CSS语法在XSS中编写合理的样式，并在输入框左侧的垂直中心位置显示搜索图标。 对于特定的语法，请参阅有关学习的相关文档

因此，在上述开发后，主页已生效。 在这里，我们介绍了开发人员工具提供的另一个功能强大的功能，即实际机器预览功能。

单击面板顶部的预览按钮，如照片所示。开发人员工具编译了当前的applet项目，以通过开发人员登录到applet，以查看当前小程序在真实计算机上的有效性。 今天，我们首先介绍了组件开发的概念，以及为什么需要拆分组件。我们还使用示例引入了在组件开发过程中使用的几种开发技术，例如使用样式调试方法引入嵌入式组件。当然，在本文中，我们实际上并没有执行组件开发，因为这些元素是直接在页面文件中开发的。在下一篇文章中，我们将详细向您展示如何根据搜索输入框组件 +内容列表组件分开主页并开发迷你程序组件。

有关与编程相关的知识，请查看我们的编程视频！ 呢

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

• 简单分析如何在迷你程序中开发内容列表组件（如何创建和开发迷你程序）
• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 教你如何在小程序中开发搜索输入框组件（小程序搜索框复制是什么意思）
• 如何在小程序中开发内容列表组件（如何做一个小程序项目）
• 手把手带你实现小程序中保存图片组件的功能。

本文由主机参考刊发，转载请注明：请逐步告诉我如何在迷你程序中开发搜索输入框组件 https://zhujicankao.com/146185.html