위 챗 애플 릿 학습 총화(1)프로젝트 생 성과 디 렉 터 리 구조 분석

이 글 의 실례 는 위 챗 애플 릿 프로젝트 의 생 성과 디 렉 터 리 구 조 를 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
우선 위 챗 공식 플랫폼 의 인터넷 주 소 를 올 립 니 다.https://mp.weixin.qq.com/,아래 내용 은 충분히 따라 할 수 있 습 니 다.https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
개발 도 구 를 다운로드 하 다.
프로젝트 생 성
그림 에서 보 듯 이

이 검사 점 을 선택 하면 됩 니 다.오른쪽 에 상세 한 상황 이 있 으 면 눌 러 서 두 번 보 세 요.

테스트 와 텐 센트 를 올 리 는 것 은 왜 일 까요?프로젝트 를 만 들 때 AppID,다음 문 제 를 작성 하지 않 았 기 때 문 입 니 다.
구체 적 인 것 은 다운로드 해서 조금 만 보면 된다.다음은 구 조 를 소개 한다.
디 렉 터 리 구조

1.wxml 는 html,wxs 는 css 에 해당 합 니 다.
2.app.json 의 pages 필드 에 새 페이지 가 필요 한 경 로 를 추가 하면 페이지 변경 에 필요 한 파일 이 자동 으로 생 성 됩 니 다.

마찬가지 로 네 개의 파일 이 생 성 되 고 파일 이름과 같은 이름 의 파일 이 생 성 됩 니 다.

3.ctrl+s 는 클릭 하여 컴 파일 하 는 것 과 같 습 니 다.
4.바깥 에 있 는 네 개의 문 서 는 전체 문서 에 해당 합 니 다.그러면 누구의 것 을 듣 는 것 입 니까?당연히 가 까 운 원칙 입 니 다.누구 에 게 가 까 운 영향 을 받 습 니까?
예:index.wxml 에 이 문장 을 썼 습 니 다<text>hello world </text>index.wxs 에text{ color:red; }전체 wxs 에text{ color:blue; }라 고 썼 습 니 다.그 결과 색 이 빨간색 이 었 습 니 다.
5.제 이 슨 파일 뭐 하 러 왔 어?공식 적 인 설명 을 보 겠 습 니 다.app.json 파일 은 위 챗 애플 릿 을 전역 적 으로 설정 하고 페이지 파일 의 경로,창 표현,네트워크 시간 초과 설정,다 중 tab 설정 등 을 결정 합 니 다.
제1 부분 페이지

작은 프로그램 이 어떤 페이지 로 구성 되 어 있 는 지 지정 하기 위해 서 배열 을 받 아들 입 니 다.각 항목 은 해당 페이지 의[경로+파일 이름]정 보 를 대표 하고 배열 의 첫 번 째 항목 은 애플 릿 의 초기 페이지 를 대표 합 니 다.애플 릿 에서 페이지 를 새로 추가 하거나 줄 이려 면 pages 배열 을 수정 해 야 합 니 다.
두 번 째 부분 window
애플 릿 의 상태 표시 줄,네 비게 이 션 바,제목,창 배경 색 을 설정 하 는 데 사용 합 니 다.

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