WeChat 애플릿의 뷰 레이어 WXML은 데이터, 템플릿, 로직을 바인딩합니다.

이전 기사에서는 미니 프로그램의 MVC 구조를 소개했습니다.

page.js는 비즈니스 로직 계층이라고도 하는 제어 계층(C)입니다.

페이지의 데이터 속성입니다. .js는 데이터 모델 레이어(M)이고,

page.wxml은 프레젠테이션 레이어(V)입니다.

page.wxss는 프레젠테이션 레이어 효과를 향상시키는 CSS입니다.

비즈니스 로직 레이어(C)를 통해 데이터 속성(M)을 수정하고 프리젠테이션 레이어(V)에 표시합니다.

이것이 MVC 디자인 패턴입니다.

1. 데이터 바인딩

먼저 페이지 페이지의 MVC 프로세스 구조를 살펴보세요

변수가 데이터에 정의된 경우(예:

Page({
    data:{
        title: '小程序实战教程',
        desc: '视图层—WXML'
    }
})

~ {{title}}) 페이지에서 다음 애니메이션과 같이 효과가 표시될 수 있습니다.

2. 데이터 바인딩의 일반 구문

2.1, content

{{ message }}

2.2, 컴포넌트 속성(큰따옴표로 묶어야 함)

내용과 동일

2.3, 제어 속성

< ;view wx:if="{{condition}}">

2.4, 키워드 (내에서 {{ } } 필요)

true: 부울 유형의 true, 참값을 나타냅니다.

false: 부울 유형의 false, false 값을 나타냅니다.

참고: selected="false"라고 직접 쓰지 마십시오. 계산 결과는 문자열이며, 실제 값을 나타내기 위해 부울 유형으로 변환됩니다.

2.5, 삼항 연산

2.6, 산술 연산
{{a + b}} + { { c}} + d

2.7, 문자열 연산
{{" hello" + 이름}}

2.8, 데이터 경로 연산

객체형의 경우 object.key를 통해 값을 얻을 수 있습니다.

배열형의 경우 첨자 인덱스를 통해 값을 얻을 수 있으며, 인덱스는 0부터 시작합니다

< ;view>{{object.key}} {{array[0]}}

코드 및 렌더링:

3. 3.1, 논리적 판단 wx:if

또는

1

2

3

wx 차단:if

view1

;/view>

3.2, wx:for

기본 배열 현재 항목의 첨자 변수 이름은 기본적으로 index로 설정되고, 배열에 있는 현재 항목의 변수 이름은 기본적으로 item으로 설정됩니다. wx:for-index 및 wx:for-item을 통해 지정할 수도 있습니다.

{{index}}: {{item.message}}

지정

{{idx}}: {{itemName.message}}

wx:for 차단

<보기> 색인}}:

{{item}}

3.3, wx:key

목록에 있는 항목의 위치가 동적으로 변경되거나 새 항목이 목록에 추가되고 목록에 있는 항목이 고유한 특성을 유지하도록 하려는 경우 및 상태(예: 의 입력 콘텐츠, 의 선택 상태)를 보려면 wx:key를 사용하여 목록에 있는 항목의 고유 식별자를 지정해야 합니다.

wx:key의 값은 두 가지 형태로 제공됩니다.


1) for 루프 배열에서 항목의 특정 속성을 나타내는 문자열, 해당 속성의 값 목록이어야 합니다. 문자열에 있는 유일한 문자열 또는 숫자이며 동적으로 변경할 수 없습니다.

2) 예약된 키워드 *this는 for 루프의 항목 자체를 나타냅니다. 이 표현을 사용하려면 항목 자체가 고유한 문자열 또는 숫자여야 합니다.

데이터 변경으로 인해 렌더링 레이어가 다시 렌더링되면 프레임워크는 구성 요소가 자체 상태를 유지하고 목록 렌더링 시간을 향상시키기 위해 다시 생성되지 않고 재정렬되도록 보장합니다. 능률.

id}}

사진 보기

4. 템플릿

WXML은 다양한 위치에서 호출되는 템플릿을 제공합니다. 재사용 효과를 얻으세요.