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

89c662c6f8b87e82add978948dc499d2 {{ message }} de5f4c1163741e920c998275338d29b2

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

내용과 동일

aaba81a7d774e6c2302573fd72615d5d de5f4c1163741e920c998275338d29b2

2.3, 제어 속성

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

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

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

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

be8755835126bf8aa7fcb5f89ba7b9fc 05746d9ee125ce13a8db285d2e718246

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

2.5, 삼항 연산
4c973292b3af8cbf480d0892c375bca0 de5f4c1163741e920c998275338d29b2

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

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

2.8, 데이터 경로 연산

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

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

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

코드 및 렌더링:

3. 3.1, 논리적 판단 wx:if
2428c98322da0786c26d2124ea16d07a 5}}"> de5f4c1163741e920c998275338d29b2
또는

2428c98322da0786c26d2124ea16d07a 5}}"> 1 de5f4c1163741e920c998275338d29b2

0164e52f109e972e49b2f115709300d2 2}} "> 2 de5f4c1163741e920c998275338d29b2

bfa4a14f223ef516586c1d434224916b 3 de5f4c1163741e920c998275338d29b2

wx 차단:if

f18182654dad930a0dbecb3c65defe3f

89c662c6f8b87e82add978948dc499d2 view1 de5f4c1163741e920c998275338d29b2

89c662c6f8b87e82add978948dc499d2 ;/view>
36b196a5d42bcd29e331cb722979f9a6

3.2, wx:for

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

9e0d8a870cc5f47752bf878d5d7fa047

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

de5f4c1163741e920c998275338d29b2

지정

e77fe766f41e9c0057cea4def0b512c9

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

de5f4c1163741e920c998275338d29b2

wx:for 차단

8ace29f837e2da56818de8aabb3f4aeb

e2df4c2f0cb11bad6027c3c1b71a6508 색인}}: de5f4c1163741e920c998275338d29b2

89c662c6f8b87e82add978948dc499d2 {{item}} de5f4c1163741e920c998275338d29b2
36b196a5d42bcd29e331cb722979f9a6

3.3, wx:key

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

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


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

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

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

5754d6e1fcaa8203ecd26fa4e2196d7d id}} 4cfc40e017beed9e13939e19a179680a

사진 보기

4. 템플릿

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

dcdc0fa59b5fea5bdae0d810c3919fcd 태그별:

템플릿 정의

name 속성을 템플릿 이름으로 사용하세요. 그런 다음 dcdc0fa59b5fea5bdae0d810c3919fcd 내에 코드 조각을 정의합니다.

템플릿 사용

is 속성을 사용하여 사용해야 하는 템플릿을 선언한 다음 템플릿에 필요한 데이터를 전달합니다.

코드는 다음과 같습니다.

템플릿 정의

5a18ce5877a3f2c9ea30dea7b9418106
89c662c6f8b87e82add978948dc499d2
28f128881ce1cdc57a572953e91f7d0f {{name}}: {{time}} 273e21371c5d5e701d3c98517a0bfa41
de5f4c1163741e920c998275338d29b2
9aef2673226c7cf7798f7b019dd771ab

템플릿 사용(객체 확장...)

792ea41a1e699b41ea39db9a3ddd0e57 {item}} de5f4c1163741e920c998275338d29b2

객체

1d0a75a97bc8038e1c6fa1ff1656539f

21c97d3a051048b8e55e3c8f199a54b2

확산 연산자를 사용하여 객체를 확장할 수도 있습니다.

은 확장 속성입니다(예: time:2016-11-20). tplItem의 시간을 덮어씁니다.

cd6639d94ecc90523bf16797f2112208

21c97d3a051048b8e55e3c8f199a54b2

WeChat 애플릿 뷰 레이어 WXML 바인딩 데이터, 템플릿, 로직과 관련된 추가 정보... 주의하세요. 기사를 보려면 PHP 중국어 웹사이트를 방문하세요!