WeChat 애플릿에 대한 1시간 소개

阿神
풀어 주다: 2017-01-24 15:14:34
원래의
2077명이 탐색했습니다.

1. 시작하는 방법
리스트 개발부터 시작하세요
모바일 개발의 기본은 UI 개발이며, UI 개발의 가장 기본적인 기술은 리스트 개발입니다. (UITableView, UICollectionView, ListView, GridView) 따라서 목록을 능숙하게 사용할 수 있다는 것은 기본적으로 소개로 간주됩니다.
기술이 필요합니다
Android, iOS, WP, H5 등 모든 플랫폼에서 목록 페이지를 개발했습니다


2. 준비작업
1. 미니 프로그램 번호 등록
2. 도구 다운로드 및 개발
3. 데모 소스 코드 다운로드


3. 🎜>목표: 미니 프로그램 시작하기
경로: 목록 페이지를 구현하고 응답 세부정보 페이지로 이동하는 프로그래밍

기본 지식

1. 프로젝트 디렉토리 애플릿에는 전체 프로그램을 설명하는 앱이 포함되어 있습니다(애플릿 로직--app.js, 애플릿 공개 설정-3개의 파일로 구성됨). -app.json 미니 프로그램의 공개 스타일 시트인 app.wxss는 프로젝트의 루트 디렉터리에 배치되어야 하며 해당 페이지를 설명하는 여러 페이지에 있어야 합니다.


그림 1WeChat 애플릿에 대한 1시간 소개

2. 페이지 구성
작은 프로그램 페이지는 다음과 같은 4개의 파일로 구성됩니다. 페이지 로직-- 인덱스 .js(필수), 페이지 구조--index.wxml(필수), 페이지 스타일 시트--index.wxss(필수), 페이지 구성--index.json(필수)


그림 2WeChat 애플릿에 대한 1시간 소개

3. 페이지 수명 주기(js 파일)

1).onLoad: 페이지 로딩

2) .onShow : 페이지 표시

3).onReady: 페이지 초기 렌더링 완료

4).onHide: 페이지 숨김

5).onUnload: 페이지 언로드

구현 모듈

네트워크 데이터->목록 페이지 렌더링->상세 페이지로 이동구체 구현 방법

index.js에서 가져오기 네트워크 데이터 -> 네트워크 반환 데이터를 wxml에 전달합니다. ->wxml이 데이터를 받아 사용합니다
로직 레이어가 데이터를 가져옵니다

● index.js의 onShow에서 wx를 호출합니다. request()는 네트워크 데이터를 얻습니다

로직 레이어가 데이터를 보냅니다

● this.setData()를 호출하면 데이터가 JSON 형식으로 로직 레이어에서 렌더링 레이어로 전송됩니다. 전송된 데이터 형식은 JSON입니다. >

그림 4와 같이 데이터 획득 방법: {{xxx}}

WeChat 애플릿에 대한 1시간 소개그림 4

●렌더링 레이어 목록 구현

그림 4와 같이 homelist는 목록이고, scrollviewcell은 목록의 각 항목입니다(다른 데이터에 따라 여러 스타일이 정의될 수 있음)

wx:for(wx:for-item 포함) , wx:for-index), wx:if 는 wxml의 루프 및 판단 제어문입니다

●상세페이지로 이동WeChat 애플릿에 대한 1시간 소개

그림 4와 같이 항목에서 점프 페이지 기능을 구현할 수 있는데, 여기서 url은 페이지로 점프할 js 파일 경로이고, id, pic은 전달되는 매개변수이며, 하위 페이지의 로직 레이어에서 수신할 수 있습니다. 이 정보는 그림 5와 같습니다. onLoad:function(options){}의 옵션에 저장된 url 매개변수(이전 페이지의 url 매개변수, )

그림 5

●상세페이지에서 클릭 이벤트 전달

그림 5와 같이 , 그림 6

WeChat 애플릿에 대한 1시간 소개그림 6

IV. 요약WeChat 애플릿에 대한 1시간 소개

UI가 어떻게 구성되어 있는지, 데이터가 어떻게 전송되는지, 목록이 어떻게 구현되는지 이해해야 합니다. 및 페이지의 클릭 이벤트 바인딩 방법

●UI 레이아웃에는 XML 및 CSS에 대한 이해가 필요합니다.

●데이터 전송(1). 앱의 로직 레이어로 wx.request()를 호출합니다. (2) 로직 레이어에서 렌더링 레이어로 this.setData()를 호출합니다

●List 구현 ●유추 iOS 개발에서는 UITableView로, Android에서는 ListView로 ●클릭 이벤트 바인딩 바인딩 bintap="xxxxx"

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿