위챗 애플릿 학습-02-wxml

위챗 애플릿 구성 요소 탭

view

html에서div와 유사

<view>
  hello world || {{msg}}
  <view>num:{{num}}view>
  <view>isBoy:{{isBoy}}view>
  <view>person.name:{{person.name}} -- person.heigth : {{person.height}}view>
  <view data-id="{{title}}">titleview>
  <view><checkbox checked="{{true}}">checkbox>view>
view>

Page({

  /**
   *        
   */
  data: {
    msg:"hello world home",
    num:11000,
    isBoy:true,
    person:{
      name:"xx",
      height:165
    },
    title:"      "
  }
})

기타 문서 보기

운산

<view><checkbox checked="{{isCheck?true:false}}">checkbox>view>


<view>{{num+10}}view>
<view>{{num1+num2}}view>


<view>{{str1+str2}}view>


<view><checkbox checked="{{length>5}}">checkbox>view>

목록 렌더링

wx:for

wx: for-item/지정한 그룹의 현재 요소 변수 이름 item

wx: for-index//현재 표시된 변수 이름 index

를 지정합니다

Page({
	data:{
		arr:["  ","  ","  "],
		person:{
			name:"xx",
			heigth:180
		}
	}
})

<view>
	<view wx:for="{{arr}}" wx:key="{{index}}">
		{{index}}:{{item}}
	view>
	<view wx:for="{{person}}" wx:key="{{index}}" >
		{{index}}:{{item}}
	view>
	<view wx:for="{{person}}" wx:key="{{index}}" wx:for-index="key">
		{{key}}:{{item}}
	view>
	
	<block wx:for="{{person}}" wx:key="{{index}}" >
		{{index}}:{{item}}
	block>
view>