미니 프로그램에서 콘텐츠 목록 구성 요소를 개발하는 방법에 대한 간략한 분석

이 기사는 소규모 프로그램 개발의 실제 적용을 공유하고 콘텐츠 목록 구성 요소를 개발하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다!

홈페이지에 공통 검색입력창을 개발했는데, 홈페이지 파일에 코드가 직접 작성되어 있어서 컴포넌트라고 할 수 없습니다. 이 기사에서는 완전한 작은 프로그램 구성 요소를 작성하는 방법을 소개합니다. [관련 학습 권장사항: 미니 프로그램 개발 튜토리얼]搜索输入框，但其代码是直接写在首页文件中的，所以这样还不能称为是一个组件。这篇我们来介绍一下如何编写一个完整的小程序组件。【相关学习推荐：小程序开发教程】

组件的组成

组件结构

首先，组件同页面类似，都有一个单独的文件夹进行维护。我们先在小程序项目中创建一个components目录用于存放我们的组件，然后创建一个名为search-bar的目录用来作为我们的搜索框组件。

上面提到，组件其实和页面很像，都由一个目录所组成，所以自然其要展示的内容也都由index.wxml进行编写。所以我们直接将之前关于搜索框的部分粘贴过来。

粘贴到components/search-bar/index.wxml后，代码格式可能会不太好，可以在文件内容的空白地方右键，或者选中代码，然后点击格式化文档进行自动格式化。

这里需要注意的是，如果我们的结构文件中如果有资源的位置引用，当修改文件位置后，要确认修改后的位置对于资源的引用是否正确。比如这里，我们将原本pages/index/index.wxml下的内容粘贴至components/search-bar/index.wxml，其中image标签引用了assets/images下的文件，需要确认新位置下的图片引用路径依然有效。

组件样式

同样地，我们将之前写好的组件样式也粘过来

组件声明

这样，我们就完成了组件的结构和样式定义，但开发者工具还不认为这是一个组件，所以需要我们在组件目录创建index.json声明这个目录是一个有效的组件，方法如下图。

首先，我们需要在index.json中使用"component": true声明这是一个组件

其次，我们需要在index.js中使用全局方法Component()方法注册该组件，该方法的参数为一个对象，其中可以定义类似页面的各种内容，具体可参考 官方文档

组件使用

那么完成了组件的基本定义，我们的组件就可以投入使用了。只要在需要使用该组件的地方进行引入即可，引入方法比如在我们的首页配置文件中声明如下

其中，"search-bar"定义的是该组件的标签名称，正如我们使用的小程序内置组件input、image一样，而后面的内容则对应该组件对于当前引用者的相对位置，这个位置的寻找方法同image

구성요소 구성

구성요소 구조

우선 구성요소는 페이지와 유사합니다. . 유지관리를 위한 별도의 폴더가 있습니다. 먼저 미니 프로그램 프로젝트에서 구성 요소를 저장하기 위해 comments 디렉토리를 생성한 다음 검색 창으로 사용할 <code>search-bar라는 디렉토리를 생성합니다. 코드> 구성 요소.

위 언급한 바와 같이 컴포넌트는 실제로 페이지와 매우 유사하며 디렉토리로 구성되어 있으므로 자연스럽게 표시되는 내용도 index.wxml로 작성됩니다. 그래서 검색창에 대한 이전 부분을 직접 붙여넣습니다.

🎜🎜🎜🎜🎜comComponents/search-bar/index.wxml의 경우 코드 형식이 좋지 않을 수 있습니다. 파일 내용 중 빈 공간을 마우스 오른쪽 버튼으로 클릭하거나 코드를 선택한 후 서식을 클릭하세요. 문서. 자동 서식. 🎜🎜여기서 주목해야 할 점은 우리의 구조 파일에 리소스 위치 참조가 있는 경우 파일 위치를 수정한 후 수정된 위치가 리소스를 올바르게 참조하는지 확인해야 한다는 것입니다. 예를 들어 여기서는 pages/index/index.wxml 아래의 원본 콘텐츠를 comComponents/search-bar/index.wxml에 붙여넣습니다. 여기서 이미지 code >태그는 <code>assets/images 아래의 파일을 참조합니다. 새 위치의 이미지 참조 경로가 여전히 유효한지 확인해야 합니다. 🎜

컴포넌트 스타일

🎜마찬가지로 앞서 작성한 컴포넌트 스타일을 붙여넣습니다🎜🎜🎜🎜🎜

구성요소 선언

🎜이렇게 해서 컴포넌트의 구조와 스타일 정의를 완료했지만 개발자 도구에서는 아직 컴포넌트라고 생각하지 않기 때문에 index.json을 생성해야 합니다. 구성 요소 디렉터리 아래 표시된 대로 이 디렉터리를 유효한 구성 요소로 선언합니다. 🎜🎜먼저 index.json에서 "comComponent": true를 사용하여 이것이 구성 요소임을 선언해야 합니다🎜🎜🎜🎜두 번째로 index.js 컴포넌트를 등록하려면 전역 메소드인 <code>Component()를 사용하십시오. 이 메소드의 매개변수는 페이지와 유사한 다양한 컨텐츠를 정의할 수 있는 객체입니다. ="https://developers .weixin.qq.com/miniprogram/dev/framework/custom-comComponent/" target="_blank" ref="nofollow noopener noreferrer">공식 문서🎜🎜🎜

컴포넌트 사용법

🎜컴포넌트의 기본 정의를 마친 후 우리 컴포넌트를 사용할 수 있습니다. 꼭 필요한 곳에 컴포넌트를 소개해주시면 됩니다. 소개 방법은 홈페이지 구성 파일🎜🎜🎜🎜그 중 "search-bar"는 우리가 사용하는 대로 컴포넌트의 레이블 이름을 정의합니다. 미니 프로그램의 구성 요소 중 input 및 image와 동일하며, 다음 내용은 현재 참조 페이지에 대한 구성 요소의 상대적 위치에 해당합니다. 이를 찾는 방법은 다음과 같습니다. 위치는 image와 동일합니다. 태그에서 이미지 위치를 검색하세요. 🎜🎜위 컴포넌트 참조 선언 후 페이지 구조 파일에서 컴포넌트를 사용할 수 있습니다🎜🎜🎜🎜

이 과정에서 오른쪽 하단 콘솔에 오류가 발생하면 개발자 도구 상단 중앙에 있는 컴파일 버튼을 클릭하여 프로젝트를 다시 컴파일하고 다양한 파일을 다시 작성하고 구문 분석할 수 있습니다. 컴파일 후에도 여전히 오류가 있으면 코드에 실제로 오류가 있는지 확인할 수 있고, 다른 한편으로는 개발자 도구를 다시 시작하여 시도해 볼 수 있습니다(개발자 도구 자체에도 특정 버그가 있기 때문에, 가끔 이상한 문제가 발생하기도 합니다)

또한 참고용으로 개발자 도구 설정에서 자동 저장, 코드 들여쓰기 등 개인적인 개발 습관에 맞춰 몇 가지 맞춤 설정을 해두었습니다.

콘텐츠 목록 구성 요소

완전한 사용자 정의 구성 요소를 도입한 후 콘텐츠 목록 구성 요소 개발을 완료합니다. 内容列表组件的开发。

内容列表显然要必上面的搜索输入框复杂一些，但对于组件的开发方式都一样，我们只需要按照这种规则进行组件的开发即可。

首先，我们创建好组成组件的4个核心文件如下，其中index.js和index.json同之前写过的一样。

接着，我们通过index.wxml和index.wxss的编写来完成列表组件的元素定义。

既然是列表，那么就会用到小程序中的循环遍历语法，关于这部分可参考 官方文档 进行学习，具体使用如下。

然后，我们在index.js中定义组件接收的外部传入的数据如下

这样，在index.wxml中使用wx:for进行遍历的就是index.js中通过properties属性接收到的外部传入的数据列表。那么我们随即在首页中引入该组件，并对其传入真实的数据列表。使用方法依然是先在index.json中声明对组件的引用，然后在页面文件中使用引用时声明的标签名称即可。

这里我们通过声明items属性，为我们定义的内容列表组件传入了数据，而该数据又来源于首页内部定义的listData，这需要我们在首页的index.js的data中声明该数据。

data和properties

这里我们讲一下data和properties有什么不同，data是用于定义页面或组件内部自己的数据的，而properties是用于接收外部传入的数据的，所以只有组件才有这个属性。

比如对于内容列表组件，其需要外部传入真实的列表数据，所以在properties中相当于自定义了组件的参数，然后外部使用该组件时可通过组件声明的参数向其传入数据。

数据传入

因此，我们需要了解一下组件参数所需要的数据结构是怎样的，比如这里我们定义的列表组件需要传入一个数据列表，而数据列表中的每一项都包含正文和图片，所以我们在首页的listData定义如下数据

可以看到，列表的每一项要正好符合我们组件所使用的数据结构，即每个数据项都有text字段用于展示正文内容，并且有image字段用于展示正文的配图。

然后回到我们的组件内部，我们根据wx:for的语法，使用了代表每项数据的item字段访问了列表的数据项并进行展示。还使用了内置标签image的mode

컨텐츠 목록은 위의 검색 입력 상자보다 확실히 더 복잡하지만 컴포넌트 개발 방법은 동일합니다. 이 규칙에 따라 컴포넌트만 개발하면 됩니다.

먼저 컴포넌트를 구성하는 4개의 핵심 파일을 다음과 같이 생성합니다. 그 중 index.js와 index.json은 앞서 작성한 것과 동일합니다.

🎜계속 , index.wxml 및 index.wxss를 작성하여 list 구성 요소의 요소 정의를 완성합니다. 🎜🎜목록이므로 미니 프로그램의 loop traversal 구문을 사용하게 됩니다. 이 부분은 공식 문서를 참조하시면 구체적인 사용법은 다음과 같습니다. 🎜🎜🎜🎜그러면 , index.js의 구성 요소가 수신한 외부 수신 데이터를 다음과 같이 정의합니다🎜🎜🎜🎜 이런 식으로 index.wxml에서 wx:for를 사용하여 traverse는 index.js의 properties 속성을 ​​통해 수신된 외부에서 전달된 데이터 목록입니다. 그런 다음 즉시 홈페이지에 구성 요소를 소개하고 실제 데이터 목록을 전달합니다. 사용 방법은 여전히 ​​index.json에서 구성 요소에 대한 참조를 먼저 선언한 다음 페이지 파일에서 참조 중에 선언된 태그 이름을 사용하는 것입니다. 🎜🎜🎜🎜🎜🎜여기서 우리는 다음을 선언합니다. items 속성은 우리가 정의한 콘텐츠 목록 구성 요소에 대한 데이터를 전달하며, 데이터는 홈페이지 내부에 정의된 listData에서 가져옵니다. 이를 위해서는 우리가 선언해야 합니다. 이 데이터는 홈페이지에 있는 index.js의 data에 있습니다. 🎜🎜🎜

🎜데이터 및 속성🎜

🎜여기에서는 데이터와 속성, 데이터는 페이지나 구성 요소 내에서 자체 데이터를 정의하는 데 사용되는 반면 <code>속성은 외부 수신 데이터를 수신하는 데 사용되므로 구성 요소에만 이 속성이 있습니다. 🎜🎜예를 들어 콘텐츠 목록 구성 요소의 경우 실제 목록 데이터를 외부로 전달해야 하므로 속성에서는 구성 요소의 매개변수를 사용자 정의하는 것과 동일합니다. 그런 다음 외부에서 구성 요소를 사용하면 구성 요소에서 선언한 매개 변수를 통해 데이터가 구성 요소에 전달될 수 있습니다. 🎜

🎜데이터가 전달됩니다🎜🎜🎜따라서 여기에서 정의하는 목록 구성 요소와 같은 구성 요소 매개 변수에 필요한 데이터 구조가 무엇인지 이해해야 합니다. code >데이터 목록을 전달해야 하며, 데이터 목록의 각 항목에는 텍스트와 그림이 포함되어 있으므로 홈페이지🎜🎜<img src="https:%20<code>listData%EC%97%90%20%EB%8B%A4%EC%9D%8C%20%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC%20%EC%A0%95%EC%9D%98%ED%95%A9%EB%8B%88%EB%8B%A4.%20//img%20.php.cn/upload/image/401/959/787/1636685634217080.png" title="1636685634217080.png" alt="1미니 프로그램에서 콘텐츠 목록 구성 요소를 개발하는 방법에 대한 간략한 분석">🎜🎜목록의 각 항목이 구성 요소에서 사용하는 데이터 구조와 정확히 일치합니다. 즉, 각 데이터 항목에는 텍스트 내용을 표시하는 text 필드와 그에 따른 이미지를 표시하는 image 필드가 있습니다. 텍스트. 🎜🎜그런 다음 구성 요소 내부로 돌아가서 각 데이터 항목을 나타내는 item 필드를 사용하여 목록의 데이터 항목에 액세스하고 wx:for구문에 따라 표시합니다. > . 내장 태그 image의 mode 매개변수는 이미지 표시의 크기 스타일을 선언하는 데에도 사용됩니다. 🎜🎜🎜🎜🎜 다양한 스타일로 작성되었습니다 🎜

페이지의 최종 효과는 아래 그림과 같습니다

마지막으로 지금까지 개발한 미니 프로그램의 효과를 실제 머신에서 미리 보고, 홈페이지와 비교해보겠습니다. Zhihu 미니 프로그램은 다음과 같습니다.

왼쪽은 Zhihu 미니 프로그램의 홈페이지이고, 오른쪽은 저희가 직접 개발한 미니 프로그램 효과가 꽤 좋지 않나요?

Summary

마지막으로 오늘 배운 내용을 요약해 보겠습니다. 실제로 디렉토리를 보면 오늘 우리가 소개한 커스텀 컴포넌트 개발 과정은 다음과 같습니다自定义组件开发的完成过程如下

• 组件创建
• 组件定义及声明
• 组件引用
• 组件数据传入

通过如上方法，结合之前所讲的页面开发

• 컴포넌트 생성
• 컴포넌트 정의 및 선언 / li>
• 컴포넌트 참조
• 들어오는 컴포넌트 데이터

위의 방법을 통해 앞서 언급한 페이지 개발 방법과 결합하여 학습을 완벽하게 수행합니다. 소규모 프로그램 개발의 핵심 기술. 그 후, 우리는 우리 자신의 디자인에 따라 다양한 기능을 담당하는 미니 프로그램 페이지를 개발할 수 있고, 유연한 조합의 효과를 얻기 위해 각 페이지의 기능과 특성을 기반으로 일련의 사용자 정의 구성 요소를 개발할 수 있습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개

를 방문하세요! ! 🎜

위 내용은 미니 프로그램에서 콘텐츠 목록 구성 요소를 개발하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!