애플 릿 구덩이 밟 기 (1)

4234 단어 전단애플 릿
위 챗 애플 릿 이 나 온 지 꽤 되 었 습 니 다. 아직 내부 테스트 단계 에 있 지만.여가 시간 을 이용 하여 나 는 벌 대출 위 챗 프로젝트 부분 을 애플 릿 으로 옮 겼 다.
1. 디 렉 터 리 구조
작은 프로그램의 주 체 는 세 개의 파일 로 구성 되 어 있 습 니 다. 이 세 개의 파일 은 프로젝트 의 루트 디 렉 터 리 에 놓 아야 합 니 다. 각각
  • app. js 설정 애플 릿 의 논리
  • app. json 공공 설정
  • app. wxss 공공 스타일
  • 애플 릿 은 페이지 를 사용자 정의 할 수 있 지만 페이지 는 app. json 에서 설명 을 해 야 합 니 다. 그렇지 않 으 면 IDE 가 잘못 보고 되 어 페이지 를 찾 을 수 없습니다.애플 릿 의 페이지 는 네 개의 파일 로 구성 되 어 있 으 며, 각각
  • . js 파일 페이지 논리
  • . wxml 그래 픽 파일, 페이지 구조
  • . wxss 스타일 파일, 페이지 스타일 시트
  • . json 파일, 프로필, 페이지 설정
  • 2. 애플 릿 설정
    app. json 은 페이지 파일 의 경로, 창 표현, 네트워크 시간 초과 설정, tab 설정 을 결정 합 니 다.
    pages 대상 에서 페이지 경 로 를 정의 합 니 다. pages 는 문자열 로 구 성 된 배열 을 받 아들 입 니 다. pages 배열 의 첫 번 째 요 소 는 애플 릿 의 첫 페이지 입 니 다.
  • window 는 애플 릿 의 상태 표시 줄, 네 비게 이 션 바, 제목, 창 배경 색 을 설정 하 는 데 사 용 됩 니 다.
  • tabBar 설정 항목 은 tab 표시 줄 의 표현 과 tab 전환 시 표시 되 는 해당 페이지 를 지정 합 니 다.
  • network Timeout 은 각종 네트워크 요청 시간 초과 설정
  • debug 는 불 형식 으로 개발 자 도구 에서 debug 모드 를 켤 지 설정 합 니 다
  • 3. 애플 릿 보기
    애플 릿 에 서 는 html 탭 으로 페이지 를 구성 할 수 없습니다. MANA 프레임 워 크 는 특정한 용기 구성 요소, view, scroll - view, swiper 가 있 습 니 다.
  • view 는 보기 용기 로 html 의 div 와 유사 하지만 다른 것 은 view 로 감 싼 내용 이 장치 창 을 초과 할 때 css 스타일 로 설 정 된 overflow: hidden
  • 과 같은 효 과 를 실현 합 니 다.
  • 주소록 이나 채 팅 목록 과 같은 스크롤 효 과 를 실현 하려 면 scroll - view 스크롤 용기 구성 요 소 를 사용 해 야 합 니 다. css 스타일 로 설 정 된 overflow: scroll 과 같은 효 과 를 실현 해 야 합 니 다.
  • swiper 는 슬라이더 보기 구성 요소 입 니 다. 라운드 맵 과 같은 효 과 를 실현 하려 면 둘 다 선택 할 수 있 습 니 다. 속성 설정 을 통 해 원점 을 표시 할 지, 자동 재생 여부, 전환 시간, 전환 간격 등 을 제어 할 수 있 습 니 다.작은 프로그램의 MANA 도 데이터 바 인 딩 을 실 현 했 습 니 다. 쓰기 방법 은 Angular 와 Vue 와 유사 합 니 다. 예 를 들 어 {{data}} 과 같은 이중 괄호 형식 을 통 해 사용 할 수 있 습 니 다. 주의해 야 할 것 은 용기 (설명 과 이 해 를 위해 다음 글 은 태그 로 설명 합 니 다) 에 쓰 면 변 수 를 이중 괄호 에 직접 쓰 면 됩 니 다. 예 를 들 어 {data},그러나 탭 의 속성 바 인 딩 변 수 를 주 려 면 두 개의 괄호 를 두 개의 따옴표 에 넣 어야 합 니 다. 예 를 들 어 Angular 와 Vue 와 비슷 합 니 다. 두 개의 괄호 안에서 간단 한 연산 을 할 수 있 습 니 다. 예 를 들 어:.

  • 세심 한 학생 들 은 데이터 바 인 딩 을 소개 할 때 우 리 는 wx: if 의 속성 을 사용 한 것 을 발견 할 수 있 습 니 다. 이것 은 MANA 가 제공 하 는 조건 렌 더 링 입 니 다. wx: if 전 불 값 (비 불 형식 으로 은사 전환) 을 판단 하여 렌 더 링 태그 의 내용 을 제어 합 니 다.MANA 에 서 는 콘 텐 츠 의 디 스 플레이 를 제어 할 수 있 는 속성 이 하나 더 있 습 니 다. 다른 것 은 wx: if 는 true 일 때 만 태그 의 콘 텐 츠 를 렌 더 링 합 니 다. hidden 은 항상 콘 텐 츠 를 렌 더 링 합 니 다. 조건 에 따라 콘 텐 츠 의 디 스 플레이 여 부 를 제어 합 니 다.
    또한 MANA 는 우리 에 게 비교적 실 용적 인 목록 렌 더 링 을 제공 합 니 다. wx: for 는 하나의 배열 을 받 아들 이 고 페이지 에서 배열 의 값 에 따라 페이지 목록 을 렌 더 링 할 수 있 습 니 다.
    목록 렌 더 링 을 사용 하여 보 기 를 재 활용 하 는 것 외 에 도 모드 를 통 해 재 활용 할 수 있 습 니 다. template 에서 코드 세 션 을 정의 한 다음 다른 페이지 에서 참조 할 수 있 습 니 다. 예 를 들 어:
    
    
    
    
        

    좋은 웹페이지 즐겨찾기