위챗 미니프로그램 : Hello World 시작하기

유튜브 강좌 : youtu.be/GM9STmB-ddc

 

- 미니프로그램 디렉토리 구조

-> (3) 파일관리자 열기 선택하면 디렉토리 구조를 확인할수 있다. 

기본적으로 루트 디렉토리에 배치하는 프로젝트 파일과

  - app.js : 미니프로그램 로직 스크립트

  - app.json : 미니프로그램의 구성에 사용되며 페이지 경로, 인터페이스 동작, 네트워크 시간 초과 및 상단/하단 설정등을 설정.

  - app.wxss : 미니프로그램 공통 스타일 시트 (웹페이지의 CSS의 역활)

  - project.config.json : 경로설정, 컴파일타입, lib버젼, appid, 패키지 구성 옵션, 디버깅 옵션등 프로젝트의 다양한 구성을 설정.

여러개의 페이지를 구성하는 4개의 파일이 각 페이지 폴더안에 구성되어 있다.

  - pagename.js : 페이지 로직

  - pagename.json : 페이지 구성

  - pagename.wxml : 페이지 구조 (웹페이지의 HTML의 역활)

  - pagename.wxss : 페이지 스타일 시트 (웹페이지의 CSS의 역활)

- 컴파일과 시뮬레이터로 미리보기

만약 코드가 수정되었다면 (1) 컴파일을 클릭하면 자동 저장과 컴파일 후 (2) 시뮬레이터 미리보기가 리플레쉬되어 나타난다.

- 컴파일과 Preview로 보기

먼저 핸드폰에 위챗을 열고....

-> (1) Preview 선택

-> (2) Automatic Preview 선택

-> (3) Compile and Preview 선택

-> (4) 앱종료

- 기본 디버깅 해보기 (BreakPoint)

app.js 소스에 있는 logs변수의 값을 확인해 보는 디버깅을 해보자.

-> (1) Sources 탭을 선택

-> (2) BreakPoint를 지정할 app.js파일 선택.

-> (3) 6번줄을 클릭해서 BreakPoint를 설정.

-> (4) BreakPoints를 확인할수 있다.

-> (5) 컴파일버튼을 눌러 앱을 실행하자.

-> (6) logs변수의 값을 확인하기 위해 Watch에 변수를 추가하자.

-> (7) 추가한 변수를 확인할수 있다.

-> (8) 그 외 Local변수값을 확인할수 있다.

- Remote Debug 해보기

먼저 핸드폰에 위챗을 열고....

-> (1) Remote Debug 선택

-> (2) Automatic Remote Debug 선택 

-> (3) Compile and Remote Debug 선택

-> (4) 더보기로 확장

-> (5) 앱종료

(1) / (2) : Remote Debug창이 뜨는데 기본 디버그와 방식은 같다.

- 마무리

지금까지 신규프로젝트를 생성했을때 나오는 Hello World에 대해 알아봤다.