소규모 프로그램 구성 요소 개발의 기본 사용
작은 프로그램 구성 요소화 아이디어
구성 요소 슬롯 정의 사용
애플릿이 방금 시작되었을 때 구성 요소화를 지원하지 않았기 때문에 다음과 같은 비판도 받았습니다 .
그러나 v1.6.3부터 애플릿은 사용자 정의 구성 요소의 개발을 지원하기 시작했으며 이는 또한 프로그램에서 구성 요소화를 사용하는 것이 더 편리해졌습니다.
컴포넌트화 사고의 적용 :
컴포넌트화라는 아이디어로 차후 개발에 적극 활용하겠습니다.
페이지를 가능한 한 작고 재사용 가능한 구성 요소로 분할하십시오.
이를 통해 코드를 더 쉽게 구성하고 관리하고 확장할 수 있습니다.
따라서 컴포넌트는 현재 소규모 프로그램 개발에 있어 매우 중요한 챕터이며, 이를 주의 깊게 연구해야 합니다( 그러나 작은 프로그램의 컴포넌트화 아이디어는 기본적으로 Vue 컴포넌트화 아이디어와 동일합니다 ) .
구성 요소를 사용자 정의하는 프로세스
페이지와 마찬가지로 사용자 정의 구성 요소는 4개의 파일 json wxml wxss js 로 구성됩니다 .
내 개인적인 습관에 따르면 먼저 루트 디렉터리에 폴더 구성 요소를 만들고 나중에 이 파일에 사용자 지정하는 공용 구성 요소를 저장합니다.
공통 사용자 구성 요소에는 해당하는 4개의 파일이 포함됩니다.
구성 요소를 사용자 정의하는 단계 :
1. 먼저 json 파일에서 사용자 지정 구성 요소를 선언해야 합니다(구성 요소 필드를 true로 설정하고 이 파일 집합을 사용자 지정 구성 요소로 설정할 수 있음).
2. wxml에 자체 구성 요소의 템플릿을 작성합니다.
<!--components/section-info/section-info.wxml-->
<view class="section">
<view class="title">我是标题</view>
<view class="content">我是内容: 哈哈哈哈</view>
</view>
3. wxss에 우리 컴포넌트에 속하는 관련 스타일을 작성하십시오.
/* components/section-info/section-info.wxss */
.title {
color: skyblue;
font-size: 40rpx;
font-weight: 700;
}
.content {
color: #333;
font-size: 30rpx;
}
4. js 파일에서 구성 요소 내부의 데이터 또는 관련 논리를 정의할 수 있습니다( 현재 사용되지 않음 ).
구성 요소를 정의한 후 사용자 지정 구성 요소를 사용할 수 있습니다.
사용자 정의 구성 요소를 사용하려는 페이지 아래에 페이지의 json 파일
usingComponents속성 을 구성해야 합니다.
usingComponents속성은 개체에 해당하고 키는 사용할 구성 요소의 이름을 나타내며 값은 사용할 구성 요소의 경로를 나타냅니다.
- 예를 들어 인덱스 페이지에서 커스텀 컴포넌트를 사용하고 싶다면 인덱스 페이지의 json 파일에서 설정해야 합니다.
구성이 완료되면 구성 페이지의 wxml 파일에서 사용자 정의 구성 요소를 사용할 수 있습니다.
<section-info />
<section-info />
<section-info />
<section-info />
참고 :
사용자 지정 구성 요소는 다른 사용자 지정 구성 요소를 참조할 수도 있으며 참조 방법은 페이지에서 사용자 지정 구성 요소를 참조하는 방식(
usingComponents필드 사용)과 유사합니다.사용자 정의 구성요소 및 페이지가 있는 프로젝트의 루트 디렉토리 이름에는 "wx-" 접두어를 붙일 수 없습니다. 그렇지 않으면 오류가 보고됩니다.
app.json 의 usingComponents에 선언된 컴포넌트 가 전역 컴포넌트인 경우 페이지에 별도로 등록하지 않고 모든 페이지 및 컴포넌트에서 이 컴포넌트를 직접 사용할 수 있습니다.
구성 요소 스타일 구현 세부 정보
주제 1: 구성 요소 내부의 스타일이 구성 요소 외부의 스타일에 영향을 줍니까?
결론 1: 구성 요소의 클래스 스타일은 구성 요소 wxml의 노드에만 적용되며 구성 요소를 참조하는 페이지 페이지에는 적용되지 않습니다.
- 우리는 여전히 위에서 작성한 구성 요소를 사용하여 테스트합니다.
결론 2: id 선택기, 속성 선택기, 태그 선택기는 컴포넌트에서 사용할 수 없습니다( 페이지에서 사용 가능 ). 클래스 선택기를 사용해 보세요.
주제 2: 구성 요소의 스타일에 대한 외부 스타일의 영향
결론 1: 외부에서 사용되는 클래스의 스타일은 외부 wxml의 클래스에만 유효하며 컴포넌트 내에서는 적용되지 않습니다.
결론 2: 외부에서 사용되는 id 선택자와 속성 선택자는 구성 요소에 영향을 미치지 않습니다.
결론 3: 태그 선택기는 외부에서 사용되며 구성 요소에 영향을 미치 므로 태그 선택기는 권장하지 않습니다 .
주제 3: 클래스가 서로 영향을 미치게 하는 방법
Component 객체에서 options 속성에 styleIsolation 속성이 있는 options 속성을 전달할 수 있습니다.
styleIsolation에는 세 가지 값이 있습니다.
격리는 사용자 지정 구성 요소 내부와 외부에서 스타일 격리를 활성화하는 것을 의미합니다. 클래스에서 지정한 스타일은 서로 영향을 미치지 않습니다 (기본값) .
apply-shared는 페이지 wxss 스타일이 사용자 정의 구성 요소에 영향을 미치지만 사용자 정의 구성 요소 wxss에 지정된 스타일이 페이지에 영향을 미치지 않음을 의미합니다.
공유는 페이지 wxss 스타일이 사용자 정의 구성 요소에 영향을 미치고 사용자 정의 구성 요소 wxss에 지정된 스타일이 페이지 및 기타 설정에도 영향을 미친다는 것을 의미합니다( 둘 모두 서로 영향을 미침 ).
// components/section-info/section-info.js
Component({
options: {
styleIsolation: "shared"
}
})