[위챗 애플릿] 데이터 귀속 + 조건문 + 목록 순환

애플릿 보기층 문법 기초

뷰 레이어 기본 구문

1. 데이터 바인딩 {{}}

WXML의 동적 데이터는 해당 페이지의 데이터에서 가져옵니다.단순 바인딩 데이터 바인딩은 Mustache 구문(중괄호)을 사용하여 다음과 같은 변수에 적용할 수 있습니다.

<view> {{ message }} view>

Page({
   data: { 
	message: 'Hello MINA!' 
    } 
}) 	

구성 요소 속성(큰따옴표 안에 있어야 함)

<view id="item-{{id}}"> view> 

Page({ 
data: { 
id: 0 
} 
}) 	

연산은 {{}} 내에서 간단한 연산을 할 수 있으며 다음과 같은 몇 가지 방식을 지원합니다.
1. 산수 연산

<view> {{a + b}} + {{c}} + d view> 
Page({ 
   data: { 
        a: 1,         b: 2,         c: 3 
   } 
}) 

view의 내용은 3 + 3 + d입니다.
2. 삼원 연산

<view hidden="{{flag ? true : false}}"> Hidden view>

3. 논리적 판단

<view wx:if="{{length > 5}}"> view> 

4. 문자열 연산

<view>{{"hello" + name}}view> 

Page({ 
   data:{ 
        name: 'MINA' 
   } 
}) 

5. 조합은 Mustache 내에서 직접 조합하여 새로운 대상이나 그룹을 구성할 수 있다.

수조

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} view>

Page({	
data: {
    		zero: 0
    	}       
    })

최종 조합수조[0,1,2,3,4]

객체

<template is="objectCombine" data="{{for: a, bar: b}}">template>

Page({
  data: {
        a: 1,
        b: 2
      }
    })

최종적으로 조합된 대상은 {for:1,bar:2}

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

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}">template>

Page({
   data: {
        obj1: {a: 1,b: 2 },      
        obj2: {c: 3,d: 4}
     }
  })

최종적으로 조합된 대상은 {a:1,b:2,c:3,d:4,e:5}
주의: 논리층의 그룹 연결에서 함수를 호출할 수 없습니다.

2. 조건 렌더링 wx:if wx:elif wx:else*

프레임워크에서, 우리는 wx:if= "{{{condition}}"으로 이 코드 블록을 렌더링해야 하는지 여부를 판단합니다.

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

Page({ 
	data: { 
		condition: True
 	} 
}) 	

wx:if와hidden

wx:if와hidden은 작은 프로그램의 요소의 표시 여부를 제어할 수 있습니다.

wx:if는true를 만났고,hidden은false를 만났습니다.그들은 또 하나의 미세한 차이가 있다.

wx:if는 숨길 때 렌더링하지 않으며,hidden은 숨길 때 렌더링하지 않습니다.

그래서 자주 전환하면 wx:if로 더 많은 자원을 소모할 수 있습니다. 보여줄 때마다 과장하고 숨길 때마다 소각하기 때문입니다.

만약 전환이 빈번하지 않다면 wx:if를 사용하는 것이 비교적 좋다. 왜냐하면 처음부터 그렇게 많이 과장되는 것을 피하기 때문이다.

결론
자주 전환: hidden을 사용합니다.가끔 전환하거나 전환하지 않음: wx:if를 사용합니다.

<text hidden="{{condition2}}">hidden ， ， false， text>

wx:elif 및 wx:else를 사용하여 else 블록을 추가할 수 있습니다.

<view wx:if="{{length > 5}}"> 1 view> 
<view wx:elif="{{length > 2}}"> 2 view>
<view wx:else> 3 view> 	

block wx:if

wx:if는 제어 속성이기 때문에 탭에 추가해야 합니다.그러나 여러 개의 구성 요소 라벨을 한꺼번에 판단하려면 라벨을 사용하여 여러 구성 요소를 포장하고 위에서 wx:if 제어 속성을 사용할 수 있습니다.

<block wx:if="{{true}}"> 
<view> view1 view> 
<view> view2 view> 
block> 

주의: 는 하나의 구성 요소가 아닙니다. 이것은 단지 하나의 포장 요소일 뿐입니다. 페이지에서 어떠한 렌더링도 하지 않고 제어 속성만 받아들일 수 있습니다.

3. 목록 순환 wx:for

구성 요소에 wx:for 제어 속성을 사용하여 하나의 그룹을 연결하면 그룹의 데이터를 사용하여 이 구성 요소를 반복적으로 렌더링할 수 있습니다.

기본 그룹의 현재 항목의 하위 변수 이름은 index이고, 그룹의 현재 항목의 변수 이름은 item

이다.

<view wx:for="{{items}}"> 
{{index}}: {{item.message}} 
view>

Page({ 
data: { 
   items: [{ message: 'foo', },
    { message: 'bar' }]
}
}) 	

wx:for-item을 사용하면 그룹의 현재 요소의 변수 이름을 지정할 수 있습니다. wx:for-index를 사용하면 그룹의 현재 아래에 표시된 변수 이름을 지정할 수 있습니다.

<view wx:for="{{items}}" wx:for-index="idx" wx:for-item="itemName"> 
{{idx}}: {{itemName.message}} 
view> 	

Warning이 나타날 수 있음을 주의하십시오:

Now you can provide attr “wx:key” for a “wx:for” to improve performance.

이 목록이 정적이라는 것을 명확히 알거나 순서에 신경 쓰지 않으려면 무시할 수 있습니다.

경고를 없애려면'wx:for'뒤에 wx:key='xxx'를 추가하면 됩니다. xxx는 순환array에서 item의 어떤'속성'입니다. 이'속성'의 값은 목록의 유일한 문자열이나 숫자이며 동적으로 바꿀 수 없습니다.

도 키워드'*this'가 for 순환에 있는 item 자체를 보존할 수 있습니다.

wx:for도 끼워 넣을 수 있는데, 아래는 구구단이다.

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> 
   <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> 
        <view wx:if="{{i <= j}}"> 
            {{i}} * {{j}} = {{i * j}} 
        view> 
   view> 
view> 

block wx:for

block wx:if와 유사하며 wx:for를 탭에 사용해서 여러 노드를 포함하는 구조 블록을 렌더링할 수 있습니다.예:

<block wx:for="{{[1, 2, 3]}}"> 
   <view> {{index}}: view> 
   <view> {{item}} view> 
block>