위 챗 애플 릿 데이터 처리

위 챗 애플 릿 데이터 처리 의 핵심 은 js 파일 Page 의 data 입 니 다.그 는 WXML 과 js 가 상호작용 하 는 중요 한 교량 으로 WXML 페이지 에서 보 여 줘 야 할 데 이 터 는 모두 data 에 정의 되 어야 하 며 그렇지 않 으 면 페이지 에서 보 여줄 수 없다.data 의 데 이 터 는 네트워크 요청 이나 논리 적 처 리 를 통 해 설정 되 고 초기 화 됩 니 다.data 데이터 의 설정 은 두 가지 방식 이 있 습 니 다. 예 를 들 어 우리 data 에 name 이 있 고 비어 있 습 니 다.

data:{
  name:'      name'
}

여러 개의 데이터 가 있 을 때 쉼표 영문 쉼표 ',' 분리 '를 사용 하면 데 이 터 를 변경 하고 싶 으 면 됩 니 다.

    //  1
    this.data.name='   name  Code4Android'
   //  2
    this.setData({
      name:'   name  Code4Android'
    })

그러나 어떤 방식 으로 든 처리 한 후에 name 의 값 은 '나 지금 name 값 은 Code4Android' 로 변 합 니 다. 우 리 는 this. data. name 을 통 해 name 의 값 을 꺼 낼 수 있 습 니 다.아마도 너 는 이 두 가지 방식 이 어떤 차이 가 있 는 지 의문 이 있 을 것 이다.그러면 우 리 는 지금 WXML 에서 name 의 값 을 표시 하기 위해 view 를 만 듭 니 다.

{{name}}

데이터 의 데 이 터 를 페이지 에 표시 해 야 할 때data 의 값 을 대괄호 로 가 져 와 표시 해 야 합 니 다. 위의 두 가지 방식 을 통 해 방식 1 설정 을 발견 한 후에 페이지 의 데 이 터 는 변 하지 않 았 고 초기 화 된 값 입 니 다. 두 번 째 방식 을 사용 할 때 데이터 가 바 뀌 었 습 니 다. 이 럴 때 두 가지 차이 점 을 분명히 해 야 합 니 다.데이터 가 대상 일 때, 예 를 들 어

data:{
people:{
  name:'Code4Android',
  address:'  '
}
}

그러면 저 희 는 people 대상 을 수정 하고 표시 하고 싶 습 니 다.

  this.setData({
      people:{
        name:'Code4Android1',
       address:'  '
      }
    })

이때 people 대상 이 모두 수정 되 었 습 니 다. 가끔 은 일부 데이터 만 수정 해 야 합 니 다. 예 를 들 어 위 에서 우 리 는 name 속성 만 수정 하고 address 의 값 은 변 하지 않 으 며 다음 과 같은 방식 으로 수정 할 수 있 습 니 다.

   this.setData({
      'people.name': 'Code4Android'
    })

만약 한 배열 이 있다 면, 안에 people 대상 이 놓 여 있다.

    this.setData({
      'peoples[0].name': 'Code4Android'
    })

우리 data 에 type 값 이 있 을 때 서로 다른 값 은 서로 다른 글 자 를 표시 해 야 한다. 예 를 들 어 type 은 1, 2, 3 가지 값 이 있 는데 각각 중학교, 고등학교, 대학 을 나타 낸다.그러면 서버 가 값 을 되 돌려 주면 type 값 을 대응 하 는 문자 로 어떻게 변환 해 야 합 니까?여기 서 세 가지 방식 을 제공 합 니 다.

 
 {{type==1 ?'  ':(type==2?'  ':'  ')}}

  
  
  

js       ：
    var typeName = ''
    if (this.data.type == 1) {
      typeName = '  '
    } else if (this.data.type = 2) {
      typeName = '  '
    } else {
      typeName = '  '
    }
    this.setData({
      typeName: typeName
    })

WXML:   
{{typeName}}

WXML 파일 에서 우 리 는 서로 다른 상태 에 따라 서로 다른 스타일 을 표시 합 니 다. 이 때 는 서로 다른 상태 에 따라 서로 다른 스타일 을 보 여 줘 야 합 니 다. 예 를 들 어 하나의 view 가 data 의 isSelected 가 true 일 때 배경 은 빨간색 이 고 글꼴 색 은 흰색 이 며 그렇지 않 으 면 배경 은 회색 (\ # ddd) 입 니 다. 그러면 다음 두 가지 방식 으로 이 루어 질 수 있 습 니 다.

    


   

wxss:
.isSelected {
  background-color: #f00;
  color: #fff;
}

.noSelected {
  background-color: #ddd;
  color: #000;
}

페이지 데이터 전달
새 페이지 를 열 때 wx. navigateTo 를 사용 합 니 다. 새 페이지 데 이 터 를 열 려 면 url 뒤에 연결 할 수 있 습 니까?key = value 의 형식, 여러 매개 변 수 는 & 로 나 뉜 다. 예 를 들 어

wx.navigateTo({
      url: '/pages/mypage/mypage?name=Code4Android',
       })`

navigateTo 를 통 해 새 페이지 를 열 면 새로운 페이지 는 제한 적 인 onLoad 방법 입 니 다. 이 방법 은 options 매개 변수 가 있 고 options. name 을 통 해 전 달 된 데 이 터 를 얻 을 수 있 습 니 다.
만약 우리 가 Object 대상 을 전달 하고 싶다 면, 예 를 들 어 위 에서 설명 한 people, 이때 url 에서 연결 하면?people = '+ people, 수신 시 데이터 가 정상적으로 해석 되 지 않 는 것 을 발견 하면 다음 방법 으로 전달 할 수 있 습 니 다.

var string = JSON.stringify(this.data.people)
wx.navigateTo({
      url: '/pages/mypage/mypage?people='+string ,
       })`

접수 후 통과

var string =options.people
var obj=JSON.parse(string)

그리고 obj 는 우리 JSON 대상 입 니 다. obj. name 에서 속성 값 을 가 져 올 수 있 습 니 다.너 는 이렇게 하면 만사 가 다 잘 될 것 이 라 고 생각 하 니?물론 아니다.예 를 들 어 우리 위 에 있 는 people 대상 데이터 때 이런 거.

data:{
    people: {
      name: '  &  ',
      age: 25,
      address: '  '
    }
}

이 때 위의 방법 으로 데 이 터 를 전달 하 는 것 은 JSON. parse 를 통 해 잘못 보 고 된 것 을 발견 할 수 있 습 니 다. 잘못된 원인 에서 쉽게 알 수 있 습 니 다. 이때 얻 은 people 은 완전한 문자열 이 아 닙 니 다. 그 이 유 는 name 속성 에 '&' 가 포함 되 어 있 기 때 문 입 니 다. 작은 프로그램 은 & 앞의 부분 이 people 의 값 이 라 고 생각 합 니 다. & 뒤의 데 이 터 는 7 일 동안 일부 데 이 터 를 사용 합 니 다.그래서 people 이 완전한 json 대상 이 아니 라 parse 실패 이상 을 초래 합 니 다.그러면 이 럴 때 데 이 터 를 어떻게 전달 해 야 합 니까? 제 해결 방향 은 두 가지 가 있 습 니 다. 하 나 는 위의 string 중의 & 기 호 를 모두 교체 하 는 것 입 니 다. 예 를 들 어

var string = JSON.stringify(this.data.people)
wx.navigateTo({
      url: '/pages/mypage/mypage?people='+string.replace(/&/g, ''),
       })`

그러면 이때 받 은 데 이 터 는 정상적으로 해석 할 수 있 지만 이름 에 있 는 & 가 없다 는 것 을 알 게 될 것 입 니 다. 만약 에 기호 & 에 대한 특별한 요구 가 없다 면 & 특별한 의 미 를 대표 하지 않 을 때 바 꿀 수도 있 고 & 를 다른 유일한 문자 로 바 꾼 다음 에 바 꿀 수도 있 습 니 다.물론 우 리 는 wx. setStorageSync ("people", this. data. people) 를 사용 하여 데 이 터 를 저장 한 다음 에 새로 열 린 페이지 wx. getStorageSync ("people") 에서 데 이 터 를 꺼 내 고 꺼 낸 데이터 구 조 는 저 장 된 것 과 같 습 니 다.
현재 페이지 에서 선택 한 데 이 터 를 이전 페이지 로 되 돌려 야 할 때 가 많 습 니 다. 예 를 들 어 페이지 1 에 주소 정 보 를 표시 하고 주소 변경 버튼 이 있 습 니 다. 새 페이지 2 에서 주 소 를 선택 하고 선택 한 주 소 를 1 페이지 에 표시 합 니 다.

 var pages = getCurrentPages()
      pages[pages.length - 2].setData({
        address: address
      })

페이지 가 데 이 터 를 전달 하 는 것 은 우리 가 흔히 볼 수 있 는 것 은 현재 페이지 가 목록 데이터 입 니 다. 특정한 아 이 템 을 클릭 할 때 데 이 터 를 새로운 페이지 로 전달 하 는 것 입 니 다. 그러면 우 리 는 현재 클릭 항목 의 데 이 터 를 어떻게 확인 합 니까?

    
      
      
        {{item.address}}
      
    

wx: for = "{peoples}" 은 peoples 데이터 순환 렌 더 링 을 말 합 니 다. Android ListView 효과 와 마찬가지 로 wx: for - index 는 당연히 item 의 색인 키 이름 을 표시 합 니 다. data - 사용자 정의 데이터 입 니 다. data - 뒷부분 은 사용자 정의 입 니 다. data - 사용자 정의 데 이 터 는 e. currentTarget. dataset 를 통 해 가 져 옵 니 다.위 클릭 이벤트

select: function (e) {
    var index = e.currentaTrget.dataset.index
    var people = this.data.peoples[index]
    var string = JSON.stringify(this.data.people)
    wx.navigateTo({
      url: '/pages/mypage/mypage?people='+string.replace(/&/g, ''),
       })`
  },