미니프로그램 개발의 기초 - 데이터 바인딩 1부(7)

이전 튜토리얼에서 설명한 것처럼 WeChat 애플릿 프레임워크는 프로그램을 논리 계층(.js 파일)과 보기 계층(.wxml 파일)으로 나눕니다. 이는 UI와 로직을 분리한 일반적인 프로그래밍 방식으로, 개발된 프로그램이 더욱 유연하고 확장이 용이합니다.

이 프로그래밍 방법은 일반적으로 두 가지 문제를 해결합니다.

UI 계층은 논리 계층의 논리 및 데이터 변경에 응답합니다.
UI 계층은 사용자 작업을 논리 계층에 피드백합니다.

일반적으로 UI 레이어와 로직 레이어는 서로 인터페이스를 노출할 수 있습니다. 하지만 유연성과 확장성을 위해 관리를 위해 UI 레이어를 피할 수 있는 중간 레이어가 도입됩니다. . 로직 레이어 간의 직접적인 종속성.

WeChat 애플릿 프레임워크는 이 모델을 기반으로 설계되었습니다. .wxml 파일은 UI 레이어를 설명합니다(WeChat의 공식 이름은 뷰 레이어이며 튜토리얼에서도 를 사용합니다. 미래 레이어 에서 보기), .js 파일은 로직 레이어를 처리하고 WeChat의 프레임워크는 둘 사이의 통화를 관리하는 중간 레이어 역할을 합니다.

개발자가 WeChat 애플릿을 개발하는 데 더 나은 도움을 주기 위해 WeChat은 개발자가 뷰 계층과 논리 계층을 연결하는 데 도움이 되는 몇 가지 구문과 규칙을 정의합니다.

데이터 바인딩

문자열 내용 표시

//page.wxml
<text class="user-motto">{{motto}}</text>

//page.js
 data: {
    motto: &#39;Hello World&#39;,
  },

뷰 레이어에 "{{motto}}"를 삽입하여 코드를 실행하면 인터페이스에 "Hello World"가 표시됩니다

문자열 내용 변경

setData({
  motto:'Hello My World'
  })

위 코드가 실행되면 인터페이스에 "Hello My World"가 표시됩니다.

위 부분에서 설명해야 할 두 가지 사항이 있습니다.

1: 뷰 레이어에는 {{motto}} 대신 {{data.motto}}이 포함되어 있습니다. 기본적으로 WeChat 프레임워크는 설정됩니다. 페이지 개체의 🎜>데이터 속성 에 정의할 뷰 레이어에 바인딩된 변수, 즉 변수를 뷰 레이어에 바인딩해야 하는 경우 를 정의해야 합니다. 의 데이터 속성

2: 페이지 개체(미리 정의된 페이지 개체) 메서드의

를 호출하면 인터페이스 데이터를 업데이트할 수 있지만 setData 변수를 직접 설정하는 것은 유효하지 않습니다. 뷰 레이어에 바인딩된 변수는 항상 메소드를 사용하여 변수 값을 설정합니다setData

이미지 표시개발 도구에서 생성된 프로그램 홈페이지에는 기본적으로 사용자의 아바타가 해당 코드는 다음과 같습니다.

//index.wxml
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

//index.js
onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }

태그의 image 속성 src 변수가 바인딩되어 있으며, userInfo.avatarUrl 메소드를 호출하여 onLoad이 설정됩니다. > 방법. setDatauserInfo

속성 바인딩

은 뷰 구성 요소의 속성 값(예: 위의

태그의

속성)에 변수를 바인딩할 수 있습니다. ), image 속성에 바인딩할 때 외부에 큰따옴표 쌍을 추가해야 합니다. src

src="{{userInfo.avatarUrl}}"

속성 바인딩에는 이미지 표시 외에도 많은 기능이 있습니다.

연관 데이터

사용자가 특정 학생 정보를 클릭하면 목록을 사용하는 페이지가 표시된다고 가정해 보겠습니다. 학생의 세부 정보가 페이지에 입력됩니다.

사용자의 클릭 이벤트가 발생하면 어떤 학생의 데이터가 클릭되었는지 알아야 하며, 데이터 연결을 위해 해당 학생의 ID를 뷰 구성 요소의 ID 속성에 바인딩할 수 있습니다.

뷰 숨기기/표시 제어

구성 요소의 숨겨진 속성 값을 변경하여 변수를 뷰 구성 요소의 숨겨진 속성에 바인딩할 수 있습니다. 를 사용하면 구성요소 표시 여부를 제어할 수 있습니다.

속성 제어

위에서 언급한 것처럼 속성 바인딩을 통해 뷰 컴포넌트의 표시 여부를 제어할 수 있으며, 속성을 제어하여 이 기능을 구현할 수도 있습니다.

//Page.wxml
<view wx:if="{{condition}}"> </view>

//Page.js
Page({
  data: {
    condition: true
  }
})

속성에 데이터를 바인딩하면 구성 요소 표시 여부를 제어할 수 있습니다.

프레임워크는 wx:elif 및 wx:else 속성도 제공하며 사용법은 다음과 같습니다.wx:if

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

여러 뷰 구성 요소를 동시에 제어하려면

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

block wx:if 마찬가지로 속성 바인딩을 제어할 때 큰따옴표를 추가해야 합니다.

wx:if vs Hidden

일반적으로 즉, wx:if는 전환 비용이 더 높고 숨겨진 경우 초기 렌더링 비용이 더 높습니다. 따라서 빈번한 전환이 필요한 경우에는 Hidden

을 사용하는 것이 좋으며, 런타임 시 조건이 변경될 가능성이 없다면 wx:if가 더 좋습니다.

키워드

프레임워크는 참 및
거짓을 나타내는 두 개의 키워드를 제공합니다. 참값을 나타내는 부울 유형입니다.
: 부울 유형 false, 거짓 값을 나타냅니다. true
코드 예false

<checkbox checked="{{false}}"> </checkbox>

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

데이터 바인딩에 대한 자세한 내용은 계속 지켜봐 주시기 바랍니다

미니 프로그램 개발의 기초 - 데이터 바인딩(8부)

위 내용은 미니프로그램 개발의 기초 - 데이터 바인딩 1부(7)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!