WeChat 애플릿 다운로드 도구 및 디버깅에 대한 자세한 소개

高洛峰
풀어 주다: 2017-03-06 10:32:14
원래의
1700명이 탐색했습니다.

어제 늦게 WeChat 팀은 WeChat Mini 프로그램 개발자 도구, WeChat Mini 프로그램 개발 문서 및 WeChat Mini 프로그램 디자인 가이드를 출시했습니다. 새로운 개발자 도구는 개발자가 WeChat을 개발할 수 있도록 개발 및 디버깅, 코드 편집 및 프로그램 릴리스 기능을 통합합니다. 미니 프로그램을 간단하고 효율적으로. 다음은 미니 프로그램 개발자 도구 및 디버깅 가이드의 다운로드 주소가 포함된 공식 문서입니다.

다운로드 주소: 개발자 도구 버전 0.9.092300
windows 버전 64, windows 버전 32, mac 버전

개발자가 WeChat 애플릿을 간단하고 효율적으로 개발할 수 있도록 출시했습니다. 개발 및 디버깅, 코드 편집, 프로그램 출시 등의 기능을 통합한 새로운 개발자 도구입니다.

devtools

코드를 스캔하여 로그인

도구를 시작할 때 개발자는 백그라운드에서 성공적으로 바인딩된 WeChat ID를 사용하여 로그인용 QR 코드. 이후의 모든 작업은 이 WeChat 계정을 기반으로 합니다.

프로그램 디버깅에는 세 가지 주요 기능 영역이 있습니다: 시뮬레이터, 디버깅 도구 및 소규모 프로그램 작업 영역

시뮬레이터

시뮬레이터 클라이언트에서 WeChat 애플릿의 실제 논리적 성능을 시뮬레이션하고 대부분의 API에 대해 시뮬레이터에 올바른 상태를 표시할 수 있습니다.

에뮬레이트

디버깅 도구

디버깅 도구는 Wxml, Console, Sources, Network, Appdata, Storage 및

3Wxml Pannel

Wxml Pannel은 개발자가 Wxml 변환 인터페이스를 개발하는 데 사용됩니다. 여기에서 실제 페이지 구조와 구조에 해당하는 wxss 속성을 볼 수 있으며 동시에 해당 wxss 속성을 수정하고 시뮬레이터에서 수정 사항을 실시간으로 볼 수 있습니다. 디버깅 모듈의 왼쪽 상단에 있는 선택기를 통해 페이지의 구성 요소에 해당하는 wxml 코드를 빠르게 찾을 수도 있습니다.

wxml

소스 패널

소스 패널은 현재 프로젝트의 스크립트 파일을 표시하는 데 사용됩니다. 브라우저 개발과 달리 WeChat 애플릿 프레임워크는 스크립트 파일을 컴파일합니다. 개발자가 소스 패널에서 볼 수 있는 파일은 처리된 스크립트 파일입니다. 개발자의 코드는 정의 함수에 래핑되며 페이지 코드의 경우 마지막에 require에 대한 활성 호출이 있습니다.

sources

Network Pannel

Netwrok Pannle은 요청 및 소켓 요청 상태를 관찰하고 표시하는 데 사용됩니다

network

Appdata Pannel

Appdata 패널은 현재 프로젝트의 현재 앱 데이터 관련 데이터를 표시하고 프로젝트 데이터에 대한 실시간 피드백을 제공하는 데 사용됩니다. 여기에서 데이터를 편집하고 적시에 인터페이스에 피드백할 수 있습니다.

appdata

스토리지 패널

스토리지 패널은 wx.setStorage 또는 wx.setStorageSync를 사용한 후 현재 프로젝트의 데이터 스토리지 상태를 표시하는 데 사용됩니다.

스토리지

콘솔 패널

콘솔 패널에는 두 가지 주요 기능이 있습니다.

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

콘솔

미니 프로그램의 오류 출력이 여기에 표시됩니다.

4 미니 프로그램 작업 영역

미니 프로그램 작업 영역은 개발자가 일부 클라이언트 환경 작업을 시뮬레이션하는 데 도움이 됩니다. 예를 들어 사용자가 미니 프로그램에서 채팅창으로 돌아오면 미니 프로그램의 배경에 설정된 API가 실행됩니다.


5 미니 프로그램이 다중 창을 사용하는 경우 상단 작업 영역에서 페이지를 전환할 수 있습니다. 이 작업은 개발자의 편의를 위해서만 존재합니다. 실제 WeChat 클라이언트에서는 사용할 수 없습니다.

편집 영역에서는 현재 프로젝트에 대한 코드를 작성하는 동시에 파일의 기본적인 추가, 삭제, 이름 변경 등을 수행할 수 있습니다.

이 도구는 현재 네 가지 유형의 파일 편집 기능을 제공합니다: wxml wxss js json

자동 완성

대부분의 편집기와 마찬가지로 완전한 자동 완성 기능을 제공합니다

자주 사용되는 단축키


형식 조정

Ctrl+S: 파일 저장

Ctrl+[, Ctrl+]: 코드 줄 들여쓰기
Ctrl+Shift+[, Ctrl+Shift+]: 코드 블록을 접어서 열기
Ctrl+C Ctrl+V: 복사하여 붙여넣기, 선택한 텍스트가 없으면 한 줄을 복사하여 붙여넣기
Shift+Alt+F: 코드 서식 지정
Alt+Up, Alt +Down: 줄을 위아래로 이동
Shift+Alt+Up, Shift+Alt+Down: 줄을 위아래로 복사
Ctrl+Shift+Enter: 현재 줄 위에 줄 삽입

커서 관련

Ctrl+End: 파일의 끝으로 이동

Ctrl+Home: 파일의 처음으로 이동
Ctrl+i: 현재 줄 선택
Shift +End: 커서부터 줄 끝까지 선택
Shift+Home: 줄 처음부터 커서까지 선택
Ctrl+Shift+L: 일치하는 항목 모두 선택
Ctrl+D: 선택 일치
Ctrl+U: 커서 롤백

프로젝트 디렉토리에는 아이콘, appid, 디렉토리 정보 등을 포함하여 현재 프로젝트의 일부 세부 정보가 표시됩니다.

미리보기 기능을 클릭하면 도구가 자동으로 코드를 컴파일 및 빌드하고 WeChat 서버에 업로드할 코드 패키지를 생성합니다. 성공하면 개발자가 새 버전을 사용할 수 있습니다.

에서 해당 프로젝트의 실제 성과를 확인하세요.

내부 테스트 기간 동안 코드 업로드 기능은 관리자의 WeChat ID로만 작동 가능하다는 점에 유의하시기 바랍니다.

위 내용은 WeChat 애플릿 다운로드 도구 디버깅을 위한 정보 모음입니다. 향후 관련 정보를 추가하겠습니다. 이 사이트에 대한 귀하의 지원에 감사드립니다.

WeChat 애플릿 다운로드 도구에 대한 자세한 소개와 디버깅 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

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