초보자는 어떻게 첫 번째 WeChat 미니 프로그램을 개발합니까?

"WeChat 웹 개발자 도구"를 설치한 후, 그림과 같이 개발자의 WeChat을 통해 코드를 스캔하여 입력하세요.

"프로젝트 추가"를 클릭하고 이전에 얻은 AppID를 입력하고(AppID가 없으면 무시할 수 있음) 프로젝트 이름 "Hello WXapplet"을 입력하고 로컬 폴더를 프로젝트 디렉터리로 선택합니다.

"현재 디렉터리에 빠른 시작 프로젝트 만들기"를 확인한 후 "프로젝트 추가" 버튼을 클릭하면 첫 번째 WeChat 애플릿 프로젝트인 Hello WXapplet이 성공적으로 생성되었습니다.

개발자 도구의 작동 및 사용

개발자 도구 인터페이스는 기본적으로 영역 1 "상위 메뉴", 영역 2 "탐색 메뉴", 영역 3 "디렉터리 파일초보자는 어떻게 첫 번째 WeChat 미니 프로그램을 개발합니까?시뮬레이션"의 네 가지 주요 영역으로 나뉩니다. 실행" ", 영역 4 "편집초보자는 어떻게 첫 번째 WeChat 미니 프로그램을 개발합니까?디버그 개발", 영역 1 및 영역 2가 수정되었습니다. 영역 3과 4는 탐색 메뉴 영역에서 선택한 다양한 기능이나 모드에 따라 달라집니다.

영역 1 "상위 메뉴", "설정"은 프로그램 실행 시 개발 머신이 네트워크에 연결되는 방식을 구성합니다. "액션"은 "새로 고침", "뒤로", "앞으로"와 같은 작업을 의미하며 주로 웹 페이지나 인터페이스를 디버깅할 때 사용됩니다. "도움말"은 웹 개발자 도구의 버전 및 저작권 설명과 같은 정보입니다. 직접 경험해 보세요WeChat 미니 프로그램, WeChat 미니 프로그램을 평가해 보세요.

영역 2 "탐색 메뉴"는 개발자가 자주 사용하는 기능 영역입니다. 특히 '편집'과 '디버깅' 기능은 개발자가 사용하는 가장 중요한 기능이 될 것이다.

편집 기능

편집 버튼을 클릭하면 그림과 같은 인터페이스가 나타납니다.

원본 4개 영역은 프로젝트의 파일 목록 영역과 해당 파일의 코드 편집 영역이 되며, 이를 코드 편집기라고도 합니다.

이제 코드 편집기는 wxml, wxss, js 및 json 파일의 4가지 유형의 파일 편집을 지원합니다. 코드 편집기는 또한 상대적으로 완전한 자동 완성 기능을 제공하여 개발자를 크게 촉진합니다.

코드 편집기는 단축키 작업도 지원합니다. 일반적으로 사용되는 일부 단축키는 다음과 같습니다.

Ctrl+End: 파일 끝으로 이동
Ctrl+Home: 파일의 시작 부분으로 이동 파일
Ctrl+i: 현재 줄 선택
 Shift+End: 줄의 끝으로 이동
Shift+Home: 줄의 처음으로 이동
Ctrl+Shift+L: 모든 일치 항목 선택
Ctrl+D: 일치 항목 선택
Ctrl +U: 커서 롤백
Shift+Al t+F: 코드 서식 지정
Alt+Up, Alt+Down: 한 줄 위로 이동하고 down
Shift+Alt+Up, Shfit+Alt+Down: 위쪽으로 아래 줄 복사
 Ctrl+Shift+Enter: 현재 줄 위에 줄 삽입

디버깅 기능

디버깅 함수는 그림에 표시된 것처럼 개발자가 코드 결과의 구현을 감지하고 문제를 해결하는 핵심 도구입니다.

이제 영역 4가 디버깅 도구 및 출력 영역이 됩니다. 시뮬레이터는 클라이언트에서 WeChat 애플릿 프로젝트의 논리와 작업 성능을 충실하게 시뮬레이션하며 대부분의 기능과 API 호출은 시뮬레이터에서 올바르게 렌더링될 수 있습니다.

디버깅 도구 및 출력 영역의 상단에는 콘솔, 소스, 네트워크, 저장소, AppData, Wxml, Senser 등의 메뉴가 있습니다. 맨 오른쪽의 확장 메뉴 항목은 사용자 정의 및 제어 개발 도구 버튼입니다. ┆".

콘솔 페이지: 콘솔 정보 페이지에는 두 가지 기능이 있습니다.

1) 개발자는 여기에서 직접 코드를 입력하고 디버그할 수 있습니다.

2) 애플릿의 오류 출력을 표시합니다.

소스 페이지: 소스 파일 디버깅 정보 페이지로, 현재 프로젝트의 스크립트 파일을 표시하는 데 사용됩니다.

참고: 미니 프로그램 프레임워크는 스크립트 파일을 컴파일하기 때문에 소스 파일 페이지에 표시되는 파일은 실제로 처리된 스크립트 파일입니다. 따라서 우리가 작성하는 코드는 정의 함수에 포함됩니다. 페이지 코드의 경우 패키징 스크립트 파일 끝에서 require 함수가 활성 호출 작업을 완료합니다.
네트워크 페이지: 네트워크 디버깅 정보 페이지로, 각 요소의 요청 정보, 소켓 상태 등 네트워크 관련 세부 정보를 관찰하고 표시하는 데 사용됩니다.

스토리지 페이지: 스토리지 API(wx.setStorage 또는 wx.setStorageSync) 인터페이스를 사용하여 현재 프로젝트의 데이터 스토리지 상태를 표시하는 데 사용되는 데이터 스토리지 정보 페이지입니다. 예를 들어 콘솔에 wx.setStorage({key:name,data:King})를 입력하면 Storage 페이지에서 키-값 데이터가 저장된 것을 볼 수 있습니다.

스토리지 페이지: 스토리지 API(wx.setStorage 또는 wx.setStorageSync) 인터페이스를 사용하여 현재 프로젝트의 데이터 스토리지 상태를 표시하는 데 사용되는 데이터 스토리지 정보 페이지입니다. 예를 들어 콘솔에 wx.setStorage({key:name,data:King})를 입력하면 Storage 페이지에서 키-값 데이터가 저장된 것을 볼 수 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

WeChat 애플릿 개발에서 전역 변수 캐싱 문제 처리

WeChat 애플릿 개발에서 WeChat 결제를 구현하는 방법

위 내용은 초보자는 어떻게 첫 번째 WeChat 미니 프로그램을 개발합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!