미니 프로그램에서 검색 입력 상자 구성 요소를 개발하는 방법을 단계별로 가르칩니다.

이 기사는 소규모 프로그램 개발의 실제 적용을 공유하고 검색 입력 상자 구성 요소를 개발하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

이번에는 컴포넌트 개발에 대해 이야기해보겠습니다. 미니 프로그램은 여러 페이지로 구성될 수 있고 서로 다른 페이지에는 유사한 부분이 있을 수 있으므로 빌딩 블록처럼 페이지를 여러 구성 요소로 합리적으로 분할해야 합니다. , 그리고 서로 다른 컴포넌트를 결합하여 각 페이지의 조립을 완성하는 것이 컴포넌트 개발이라는 개념이 있는 이유입니다. [관련 학습 권장사항: 미니 프로그램 개발 튜토리얼]组件的开发。由于小程序可能由很多页面组成，而不同页面可能会有相似的部分，所以我们要将页面合理拆分成不同的组件，就像一块块积木一样，然后再通过组合不同组件完成一个个页面的组装，这就是为什么会有组件开发这个概念。【相关学习推荐：小程序开发教程】

实战演练

那么话不多说，我们直接开始实战。如何将一个页面拆分成组件是由一系列页面开发后积累的经验所指引的，我们先来做几个页面找找感觉。

比如我们先来做一个小程序首页，我们常见的很多应用首页大多是一个内容列表，其实它有一个比较专业的名称，叫做“feed流”。

比如上图，分别是微博、知乎、美团和boss直聘的小程序首页。可以看到，它们基本都是由一个顶部的搜索输入框和主体部分一个可以持续上划的内容列表所组成的。

首页开发

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

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

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

清空前

清空后

我们可以将上图中所指的热重载打开，这样可以在每次修改完页面的内容后实时看到修改效果，而无需每次手动点击编译。

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

搜索框组件

我们上面提到过，首页由顶部的搜索输入框和主体部分的列表所组成，这就已经天然地将首页拆分成了搜索输入框+内容列表两个组件了，因为这两个元素都可能是被其他页面重复使用的。

那么先来开发搜索输入框，我们以最简单的形式为例，比如上面主流小程序中第2个和第4个。即一个圆角输入框，输入框内部最左侧有一个搜索图标，输入框内部有一行默认的提示文字。

内置组件input

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

然后我们在开发页面或组件的时候，注意在每一个元素层级都尽量以一个view标签作为容器，对元素进行包裹，这样后面对于元素在布局中的操控都会更加容易。

比如我们在pages/index/index.wxml中写下如上代码，页面就会呈现出左侧的样子。

这里我们使用了小程序内置组件input，并通过placeholder属性为其设置了默认提示文字。

接着，我们需要使用一些样式代码来对搜索框进行样式修饰。

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

接着在index.wxss

실습

더 이상 고민할 필요 없이 바로 실제 전투를 시작하겠습니다. 페이지를 구성요소로 분할하는 방법은 일련의 페이지를 개발한 후 축적된 경험을 바탕으로 먼저 몇 페이지를 만들어서 감을 잡아보겠습니다. 🎜🎜예를 들어, 먼저 작은 프로그램 홈페이지를 만들어 보겠습니다. 우리가 흔히 사용하는 많은 애플리케이션의 홈페이지는 사실 '피드 플로우'라는 좀 더 전문적인 이름을 가지고 있습니다. 🎜🎜🎜🎜For 예시 위 사진은 각각 Weibo, Zhihu, Meituan, Boss Direct Recruitment의 미니 프로그램 홈페이지입니다. 보시다시피 기본적으로 상단의 검색 입력 상자와 지속적으로 위로 스크롤할 수 있는 주요 부분의 콘텐츠 목록으로 구성됩니다. 🎜

홈페이지 개발

🎜그래서 이 아이디어에 따라 우리는 자체 미니 프로그램 홈페이지 개발을 시작합니다. 🎜🎜먼저 app.json 파일을 엽니다. 여기서 pages의 첫 번째 구성 항목은 미니 프로그램 홈페이지입니다. 🎜🎜🎜🎜계속 , 홈페이지에서 index.wxml 파일을 열고 지운 다음 자체 홈페이지 콘텐츠 작성을 시작합니다. 🎜🎜삭제 전🎜🎜🎜🎜삭제 후🎜🎜🎜🎜위 그림과 같이 hot reload를 켜면 매번 수동으로 컴파일을 클릭할 필요 없이 페이지의 내용을 수정한 후 수정 효과를 실시간으로 확인할 수 있습니다. 시간. 🎜🎜또한 위 4가지 주류 미니 프로그램의 홈페이지에는 제목 콘텐츠가 없는 것으로 확인되어 app.json의 navigationBarTitleText 필드도 빈 항목으로 변경했습니다. 문자열. 🎜

검색창 구성요소

🎜 위에서 언급했듯이 홈페이지는 상단의 검색 입력창과 메인의 목록으로 구성됩니다. 부분. 홈페이지는 자연스럽게 검색 입력 상자 + 콘텐츠 목록의 두 구성 요소로 분할되었습니다. 이 두 요소는 다른 페이지에서 반복될 수 있기 때문입니다. 사용 . 🎜🎜그럼 먼저 위의 주류 애플릿의 2번째와 4번째와 같이 가장 간단한 형태를 예로 들어보겠습니다. 즉, 둥근 모서리 입력 상자가 입력 상자의 맨 왼쪽에 검색 아이콘이 있고 기본 프롬프트 텍스트 줄이 있습니다. 입력 상자 안에 있습니다. 🎜

내장 구성 요소 입력

🎜입력 상자 미니에서 제공하는 내부 구성 요소 입력을 사용합니다. 프로그램을 실행하면 문서가 입력으로 표시됩니다. a>🎜🎜그러면 페이지나 구성 요소를 개발할 때 view 태그를 각 요소 수준의 컨테이너로 사용하여 요소를 래핑하는 데 주의하세요. 레이아웃은 나중에. 🎜🎜🎜🎜For example pages/index/index.wxml에 위 코드를 작성하면 왼쪽과 같은 페이지가 됩니다. 🎜🎜여기에서는 미니 프로그램의 내장 구성 요소인 input을 사용하고 placeholder 속성을 ​​통해 기본 프롬프트 텍스트를 설정합니다. 🎜🎜다음으로 검색창의 스타일을 지정하려면 일부 스타일 코드를 사용해야 합니다. 🎜🎜🎜🎜us 요소 태그에 스타일 속성을 추가했습니다🎜🎜🎜🎜그런 다음 index.wxss에서 원본 콘텐츠를 지우고 자체 스타일 코드를 추가하세요. 🎜

스타일 디버깅

다음은 매우 실용적인 개발 팁입니다. 위 그림과 같이 개발자 도구에서 제공하는 디버거를 사용하여 실제 렌더링된 구조와 스타일 속성을 볼 수 있습니다. 페이지에서 직접 페이지 요소의 스타일을 수정하고 실시간으로 효과를 확인할 수 있습니다. 색상 속성의 경우에도 현재 색상을 클릭하여 색상 선택 패널을 불러오고 위에 표시된 대로 요소의 색상을 조정할 수 있습니다. 调试器查看页面实际渲染出的结构以及样式属性，并且我们可以直接在这里对页面元素的样式进行修改并实时看到效果。甚至对于颜色类的属性我们可以像上图中的操作，点击当前颜色唤出颜色选择面板，进而调整该元素的颜色。

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

图标引入

最后，我们还需要在输入框内部的最左侧显示一个搜索样式的图标，那么首先我们需要从网上找一个搜索样式的图片。这里推荐使用 iconfont 这个网站进行图标筛选

我们选择好图标后，可以按照下图对图标的颜色和大小进行修改，然后下载。

接着，我们将下载好的图片放到小程序项目文件夹中，打开小程序项目文件夹的方式有很多种。比如你可以右键开发者工具中的资源管理器中任何一个文件，然后选择在资源管理器中显示，或者点击右上角的详情面板，然后点击本地目录一项。

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

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

然后我们回到开发者工具，可以看到刚才拷贝而来的搜索图标已经准备好。接着，我们通过样式代码来将它显示在输入框中

首先，我们可以使用上图所示的方法，点击调试器左上角的图标，来查看我们页面当前的元素结构。方法是先点击调试器左上角的查看图标，然后将鼠标移动到左侧小程序预览中的任意位置，可以看到右侧面板会随着左侧选中的位置而高亮提示你选中的元素所对应的代码区域。

通过这样的方法，我们可以直观地了解我们的页面目前所对应的代码结构，从而决定我们新加入的图标元素应该放到哪层容器比较合适。

位置布局

经过如上操作，我们最终在search-bar这一层容器内部的第一行，即与input同级的位置新增了另外一个内置组件image，然后通过src属性指明要显示的图片位置。这里当你在image标签中设置src属性时，开发者工具会自动提示可以选择的路径。由于我们的图片位置在当前文件所在目录的外部，所以我们一开始只需要输入..来进行上一级目录，接下来开发者工具就会提示我们上一级目录都有哪些文件。

最终，我们通过在index.wxss

그러면 , 페이지 스타일을 최상의 효과로 조정할 때 디버거에서 스타일 코드를 직접 선택하여 복사한 다음 index.wxss에 붙여넣으세요.

아이콘 소개

🎜마지막으로 입력창 맨 왼쪽에도 검색 스타일 아이콘을 표시해야 하므로 먼저 에서 검색 스타일 이미지를 찾아야 합니다. 인터넷. iconfont🎜 사용을 권장합니다. 이 웹사이트는 아이콘 필터링에 사용됩니다🎜🎜🎜🎜아이콘을 선택한 후 아래와 같이 아이콘을 조정하세요. 색상과 크기를 수정한 후 다운로드하세요. 🎜🎜🎜🎜계속 , 다운로드한 사진을 미니 프로그램 프로젝트 폴더에 넣습니다. 미니 프로그램 프로젝트 폴더를 여는 방법은 여러 가지가 있습니다. 예를 들어 개발자 도구의 탐색기에서 파일을 마우스 오른쪽 버튼으로 클릭한 다음 탐색기에서 표시를 선택하거나 오른쪽 상단에 있는 세부정보 패널을 클릭하고 그런 다음 로컬 디렉터리 항목을 클릭하세요. 🎜🎜🎜🎜그러면 사진, 공개 스타일 등과 같은 미니 프로그램의 정적 파일을 저장하기 위해 새로운 assets 폴더를 만듭니다. 🎜🎜🎜🎜us 방금 다운로드한 검색 이미지를 assets의 images 디렉터리에 넣고, 이미지 이름을 영어 이름으로 변경합니다(일반적으로 파일 이름은 영어로 지정하는 것이 좋습니다) 일부 프로그램 구문 분석 오류를 방지하려면)🎜🎜🎜🎜그런 다음 개발자 도구로 돌아가면 방금 복사한 검색 아이콘이 준비된 것을 확인할 수 있습니다. 다음으로 스타일 코드를 사용하여 입력 상자 🎜🎜🎜🎜먼저 위 그림에 표시된 방법을 사용하고 디버거의 왼쪽 상단에 있는 아이콘을 클릭하여 페이지의 현재 요소 구조를 볼 수 있습니다. 방법은 먼저 디버거의 왼쪽 상단에 있는 보기 아이콘을 클릭한 다음 왼쪽의 미니 프로그램 미리 보기에서 원하는 위치로 마우스를 이동하는 것입니다. 오른쪽 패널에 선택한 요소가 해당 항목에 따라 강조 표시되는 것을 볼 수 있습니다. 해당 코드 영역은 왼쪽에서 선택됩니다. 🎜🎜이 방법을 통해 페이지의 현재 코드 구조를 직관적으로 이해하고 새로 추가된 아이콘 요소를 어떤 컨테이너 레이어에 배치할지 결정할 수 있습니다. 🎜

🎜위치 레이아웃🎜🎜🎜위 작업 후에 마침내 search-bar 레이어 컨테이너 내부의 첫 번째 줄에 도달하게 됩니다. 와 동일 또 다른 내장 컴포넌트인 <code>image가 >input과 같은 레벨에 추가되고, 표시될 이미지의 위치는 src 속성. 여기에서 <code>image 태그에 src 속성을 ​​설정하면 개발자 도구가 자동으로 선택할 수 있는 경로를 묻는 메시지를 표시합니다. 이미지의 위치는 현재 파일이 있는 디렉터리 외부에 있으므로 상위 디렉터리로 이동하려면 ..만 입력하면 됩니다. 그러면 개발자 도구에서 상위 디렉터리를 묻는 메시지가 표시됩니다. -레벨 디렉토리는 어떤 문서가 있는지입니다. 🎜🎜🎜🎜드디어 , 우리는 CSS 구문을 사용하여 index.wxss에 적절한 스타일을 작성하여 입력 상자 왼쪽의 수직 중앙 위치에 검색 아이콘을 표시합니다. 구체적인 구문은 🎜관련 문서🎜를 참고하여 학습하시기 바랍니다🎜🎜🎜실제 머신 미리보기🎜🎜🎜 위와 같은 개발을 거쳐 홈페이지가 구체화되기 시작했습니다. 여기서는 개발자 도구가 제공하는 또 다른 강력한 기능인 실제 머신 미리보기 기능을 소개합니다. 🎜

그림과 같이 패널 상단의 미리보기 버튼을 클릭하면 개발자 도구가 현재 미니 프로그램 프로젝트를 미리보기 가능한 상태로 컴파일한 후, 미니 프로그램에 로그인한 개발자의 위챗. 코드를 스캔하면 현재 미니 프로그램이 실제 기기에 미치는 영향을 확인할 수 있습니다预览按钮，开发者工具会将当前小程序项目编译为可预览状态，然后通过登录了该小程序的开发者的微信进行二维码扫描，即可在真机中看到当前小程序的效果

总结

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

• 内置组件使用
• 样式调试方法
• 图片资源引入
• 真机预览

当然，本篇其实还没有进行真正地进行组件开发，因为我们还是直接在页面文件内进行了元素的开发，下一篇我们将会把首页按照搜索输入框组件+内容列表组件

요약

자, 드디어 오늘 이야기한 내용을 정리해보겠습니다. 오늘은 먼저 컴포넌트 개발의 개념과 컴포넌트 분할이 필요한 이유를 소개하고,

• 내장 컴포넌트 사용
스타일 등 컴포넌트 개발에 사용되는 몇 가지 개발 기술을 예제를 통해 소개했습니다. 디버깅 방법
• 이미지 리소스 소개
• 실제 기기 미리보기

물론 이 글은 아직 컴포넌트를 실제로 개발하지는 않았습니다 , 여전히 페이지 파일에서 직접 요소를 개발하기 때문에 다음 기사에서는 검색 입력 상자 구성 요소+콘텐츠 목록 구성 요소에 따라 홈페이지를 만들겠습니다. 작은 프로그램 컴포넌트를 개발하는 방법을 자세히 소개합니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 미니 프로그램에서 검색 입력 상자 구성 요소를 개발하는 방법을 단계별로 가르칩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!