위챗 애플릿 학습 노트 2 (데이터 귀속)

애플릿 소개

XML + CSS + JS를 사용한 모바일 애플리케이션 작성
위챗 애플릿의 가장 큰 특징은 동적 귀속 데이터이다.

데이터 바인딩(기본 구문)

페이지의 index 폴더에서 다음을 가정합니다.
index.js의 코드

Page({
    //   data  
    data : {
        greeting : "Hello World",
        textColor : "blue",
        isShowError : false,
        isLoading : true,
        num1 : 100,
        num2 : 200,
        username : Rose,
        languages : {
            {name:"Chinese",country:"China"},
            {name:"Korean",country:"Korea"},
            {name:"English",country:"British"}
        }
    }
})

index.wxml에서 코드
{{내용}}: 쌍괄호가 나타나면 인덱스를 검색하는 프레임워크를 사용합니다.js에서 데이터 속성에 '내용' 이라는 구성원이 있는지 여부입니다. 있으면 표시됩니다.
①태그 내용 바인딩

<view>{{greeting}}view>

② 바인딩 태그 속성

<view class="txt-{{textColor}}">          view>

③ 삼원 연산

<view>{{isLoading ? '   ......' : '    ！！！'}}view>

④ 산술 연산

<view>{{num1}} + {{num2}} = {{num1 + num2}}view>

⑤ 문자열 연산

 <view>{{"Hello," + username}}view>
 

⑥ 논리적 연산

<view wx:if="{{num1 + num2 === 300}}">    300view>
 

⑥ 데이터 조합

<view wx:for="{{[1,2,3,4,5,6,num1,num2]}}" wx:for-item="n">{{n}}view>

⑥ 객체 조합

<template name="t1">{{val1}} | {{val2}}template>

<template is="t1" data="{{val1:num1,val2:num2}}">template>

⑥ 간단한 조건 렌더링

<view wx:if="{{isShowError}}">
    <text class="error-msg">text>
view>

§ 브랜치가 있는 조건 렌더링

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

11 . 여러 구성 요소가 포함된 조건 렌더링

<block wx:if="{{true}}">
    <view>view1view>
    <view>view2view>
block>

12 . 목록 선택 렌더링
기본 그룹의 현재 항목의 하위 변수 이름은 index이고, 그룹의 현재 항목의 변수 이름은 item입니다

<view wx:for="{{languages}}" wx:for-index="i" wx:for-item="langu">
    {{i}} : {{langu.name}} : {{langu.country}}
view>

참고:

<view wx:for="array">{{item}}view>


<view wx:for="{{['a','r','r','a','y']}}">{{item}}view>

중점:

<view wx:for="{{array}} ">view>

<view wx:for="{{['a','r','r','a','y']+' '}}">

13 . 템플릿(재사용 가능)

    
    <template name="pro1">
        <view>
          <text>Name : {{name}}text>
        view>
        <view>
          <text>Age : {{age}}text>
        view>
    template>

    
    <template is="pro1" data="{{name:"Rose",age:20}}">template>

    

14 . 다른 파일의 템플릿 가져오기
1 . 사용:파일의 template 템플릿 가져오기

<import src="templates/pro1.wxml" />


<template is="pro1" data="{{name:'Jack',age:20}}">template>

2 . 사용: 파일의 내용을include에 지정하는 것과 같습니다

<include src="templates/banner.wxml" />

15 . 대상

 
Page({
    data : {
        a: 1,
        b: 2
    }
})
<template is="temp1" data="{{for:a,bar:b}}">template>



 
 Page({
     data : {
         obj1 : {
             a: 1,
             b: 2
         },
         obj2 : {
             c: 3,
             d: 4
         }
     }
 })
<template is="temp2" data="{{...obj1,...obj2,e:3}}">template>

이벤트 메커니즘
작은 프로그램에서 귀속 이벤트는 두 가지 방법이 있다
① bind 메서드
bind 방법을 사용하면 거품 이벤트를 받아들일 수 있습니다
② catch 방법
catch 이벤트를 사용하면 더 이상 거품이 생기지 않고 현재 원소에서 마감됩니다.

<view class="outer" bindtap="outerTap">
    <view class="center" catchtap="centerTap">
        <view class="inner" bindtap="innerTap">view>
    view>
view>

//index.js    
Page({
  outerTap : function (event) {
        console.log("outer");
        console.log(event);
  },
  centerTap : function (event) {
        console.log("center");
        console.log(event);
  },
  innerTap : function (event) {
        console.log("inner");
        console.log(event);
  }
})