위 챗 애플 릿 개발(1):서버 데이터 목록 렌 더 링 작업 예제 가 져 오기

이 사례 는 위 챗 애플 릿 서버 가 데이터 목록 렌 더 링 작업 을 가 져 오 는 것 을 보 여 줍 니 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
실제 프로젝트 개발 에 서 는 프론트 페이지 의 데 이 터 를 백 엔 드 서버 가 전달 해 야 할 때 가 많다.프론트 데스크 는 다음 페이지 와 같은 값 을 반복 적 으로 깔 아야 합 니 다.

요청 배경 데이터:

wx.request({
   url: getApp().globalData.httpUrl + '/sys/group/selectGroupProList', //      
   data: {
    //         
    pageNum: that.data.page,
    pageSize: that.data.pageSize
   },
   method: "post",
   success(res) {
    console.log(res.data);
   }
})
백 엔 드 반환 데이터 형식:

다음은 프론트 페이지 의 값 입 니 다.일반 사이트 의 페이지 에 값 을 깔 때 저 는 JS 문자열 연결 기술 을 사용 하여 데 이 터 를 페이지 에 맞 추 겠 습 니 다.바깥 빵 은 1 층for순환 하면 이런 목록 페이지 를 순환 적 으로 깔 수 있 습 니 다.현재 위 챗 애플 릿 에서 우 리 는 wxml 에 js 코드 를 일부 쓸 수 있 습 니 다.for 순환 을 wxml 에 쓸 수 있 습 니 다.

 <view bindtap="jumpPages" 
    wx:for="{{contentlist}}" 
    wx:key="{{index}}" 
    wx:for-index="index" 
    wx:for-item="item" 
  >
  <van-card
   num=" {{item.prjcount}}  "
   price="    "
   title="{{item.project_name}}" 
   desc="{{item.name}}"
   centered=true
   currency=""
   custom-class="custom-g"
   thumb-class="thumb"
   title-class="title-g"
   desc-class="desc-g"
  >
  </van-card>
 </view>
설명:코드 의<van-card>내 가 인용 한 구성 요소 라 이브 러 리 입 니 다.고려 할 필요 가 없습니다.




본 논문 에서 말 한 것 이 여러분 의 위 챗 애플 릿 디자인 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기