WeChat Mini 프로그램 개발 시리즈 (1) 개발 준비에 대한 자세한 설명

이 기사에서는 WeChat Mini 프로그램 개발 시리즈에 대한 자세한 설명을 제공합니다. (1) 개발 준비

1: 개발 준비

1 WeChat 개발자 계정 등록

로그인: https://mp.weixin.qq.com/ 등록.

현재 기업, 조직 등 개인이 아닌 사람만 WeChat 미니 프로그램 계정 등록이 지원됩니다. 등록 세부 사항을 확인하세요. 다음 링크를 참조하세요:

http://kf.qq.com/faq/140806zARbmm161103r6vmiA.html

참고: WeChat 애플릿 개발 방법을 배우고 싶다면 이 주소를 참조하여 테스트 계정을 등록할 수 있습니다:

2 WeChat 개발자 도구 다운로드

WeChat 공개 플랫폼의 개정으로 인해 다운로드할 수 있습니다. https://mp.weixin.qq.com/wiki에서 무료로 WeChat을 이용할 수 있습니다. 작은 프로그램 개발 도구 같은 것은 없습니다.

다음 웹사이트에서 개발 도구를 다운로드하려면 WeChat 애플릿 개발 계정이 있어야 하며 QR 코드를 스캔해야 합니다.

https://mp.weixin.qq.com/debug/wxadoc/introduction/#Login

그 외 단지 개발을 배우고 싶다면 위챗 애플릿 개발 검색하시면 됩니다 Baidu의 도구를 다운로드하여 네티즌이 공유하는 도구도 사용할 수 있습니다.

2: 개발 도구 사용 소개

1: 그림 1과 같이 PC 바탕 화면에서 WeChat 애플릿 개발 도구(WeChat 웹 개발자 도구)를 엽니다.

그림 1

2: 그림 2와 같이 WeChat을 사용하여 그림 1의 QR 코드를 스캔하고 첫 번째 항목인 "로컬 미니 프로그램"을 선택합니다. 프로젝트'(예: 그림 3 참조) (이제 개발툴의 버전이 너무 낮으면 스캔시 오류가 발생합니다. 먼저 개발툴을 업그레이드해 주세요. 개발툴이 자동으로 버전을 확인하고 자동으로 업그레이드해 드립니다.)

그림 2

그림 3

3: 그림 3에서 처음으로 프로젝트를 생성하는 경우 , "프로젝트 추가"를 선택하세요. 그렇지 않으면 이미 추가된 프로젝트를 선택하세요. 그림 4와 같이 "프로젝트 추가"를 선택합니다.

그림 4

4: 그림 4에서 학습 개발용이라면 "AppID 없음"을 선택한 후 입력하세요. 프로젝트 이름을 입력하고 프로젝트 디렉토리를 선택한 후 "프로젝트 추가" 버튼을 클릭하세요. 그림 5와 같이 WeChat 애플릿 개발 도구의 기본 인터페이스로 들어갑니다.

그림 5

5: 그림 5에서 도구 왼쪽 상단에 있는 "편집"을 클릭하면 도구가 편집 모드 인터페이스로 들어갑니다. , 그림 6 참조

그림 6

6: 그림 5에서 도구 왼쪽 상단에 있는 "디버그"를 클릭하면 도구는 그림 7과 같이 디버그 모드 인터페이스로 들어갑니다

그림 7

7: 그림 7에서 "Backstage"를 클릭합니다. 이때 프로그램은 전화가 오면 WeChat 애플릿이 진입하는 것을 시뮬레이션합니다. 배경 상태는 그림 8에 나와 있습니다.

그림 8
3: 프로젝트 디렉터리 구조

1: WeChat 애플릿 개발 도구를 열고 아래 그림 1과 같이 편집 모드로 들어갑니다

그림 9

1: 이 프로젝트는 주로 페이지/firstPage, 페이지/인덱스, 페이지/로그로 구성되며, 주로 전체 미니 프로그램의 인터페이스 정보를 설명하는 여러 폴더로 구성됩니다.

각 파일은 기본적으로 .js, .wxml, .wxss, .json 및 기타 파일로 나눌 수 있습니다.

예:

index.js: 인덱스 페이지의 논리적 정보를 설명합니다(유추: js 코드)

index.wxml: 인덱스의 레이아웃 정보를 설명합니다. 페이지(비유: HTML 페이지 레이아웃)

index.wxss: 인덱스 페이지의 레이아웃을 설명하는 스타일 정보(비유: CSS 정보)

2: 전체 프로젝트 구성 정보:

app.js, app.json, app.wxss 세 가지 파일로 구성됩니다

app.json: 그림 1과 같이 전체 프로젝트의 페이지 정보("페이지"로 설명됨)를 설명합니다. "창"은 주로 프로젝트의 전체 배경, 탐색 모음 및 기타 스타일을 설명합니다. .json 파일에 동일한 설명이 있는 경우 "window"에 설명된 정보를 덮어쓰게 됩니다.

app.wxss: 그림 2와 같이 주로 프로젝트의 전반적인 스타일을 설명합니다.

그림 10

app .js: 주로 프로젝트의 진입 로직을 설명하며, 그림 3

그림 11

위 내용은 WeChat Mini 프로그램 개발 시리즈 (1) 개발 준비에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!