WeChat Mini 프로그램 개발 가이드: 애플리케이션 등록 및 개발 프로세스 예시

1단계: AppID 신청

각 AppID에는 관리자와 개발자의 ID가 있습니다. 관리자는 단 한 명이며 변경할 수 없습니다. 개발자는 최대 10개의 인증되지 않은 미니 프로그램과 최대 20개의 인증된 미니 프로그램을 보유할 수 있습니다. 그 중 하나가 있는 경우에만 WeChat에서 미리 볼 수 있습니다.

2단계: 환경 설정

1. 로그인

다른 IDE와 달리 WeChat ID를 사용하여 로그인해야 합니다. 이는 앞서 언급한 관리자 및 개발자 ID에 필요한 자격 증명이기도 합니다.

로컬 애플릿 프로젝트 선택

프로젝트 추가

appID를 입력하세요. appID가 없으면 No appID를 클릭하세요. 일부 기능이 제한된다는 메시지가 표시되므로 걱정하지 마세요. 프로젝트 이름을 입력하고 프로젝트 디렉터리를 선택하면 됩니다. 선택됨 현재 디렉터리에 빠른 시작 프로젝트 만들기

2. IDE 소개

공개 베타 제품인 이 버전의 IDE는 여전히 비교적 간단합니다. . WeChat 미니 프로그램이 공식적으로 출시되면 개발자의 개발 요구 사항을 충족하기 위해 IDE 사용이 크게 향상될 것이라고 믿습니다. IDE를 처음 열 때 인터페이스는 다음과 같습니다.

페이지 왼쪽에 편집, 편집, 5가지 옵션이 있는 탐색 영역이 있습니다. 디버그, 프로젝트, 편집 및 닫기. "편집"에서 코드를 보고 편집할 수 있으며, "디버그"에서 코드를 테스트하고 WeChat 클라이언트에서 미니 프로그램의 효과를 시뮬레이션한 다음 휴대폰으로 보내 "프로젝트"에서 실제 효과를 미리 볼 수 있습니다. 컴파일과 닫기는 단지 두 개의 기능 버튼일 뿐입니다. (그런데 이 IDE는 Ctrl + S를 누르면 자동으로 컴파일됩니다)

편집 시 리본은 다음과 같습니다.

3단계: 개발과정

처음으로 프로젝트를 생성합니다. 프로젝트 디렉터리는 다음과 같습니다. (두 페이지가 생성되어 실행 가능합니다.)

. js: JavaScript 코드 작성에 사용되는 논리 제어입니다.
.wxml: HTML을 작성하는 데 사용되는 페이지 구조입니다. 물론 WeChat에는 특정 패키지가 있으므로 사용하기 전에 해당 라벨을 이해해야 합니다.
.wxss: CSS 작성에 사용되는 스타일 시트 파일입니다.
.json: json 구문 형식을 따르는 스타일 구성입니다. 해당 범위 내에서 설정을 수행하는 데 사용됩니다.

프론트 직원이 이거 보고 엄청 신나했을 텐데요. 이게 프론트엔드 코드 아닌가요?

미니 프로그램은 전체 프로그램을 설명하는 앱과 해당 페이지를 설명하는 여러 페이지로 구성됩니다.

1.1 app 이름을 딴 각 파일은 전체 앱의 전역 구성 파일이며 프로젝트의 루트 디렉터리에 배치되어야 합니다. 다음과 같습니다:

공식 소개가 매우 자세하므로 자세한 내용은 다루지 않겠습니다: app.js , app.json , app.wxss.

1.2 페이지 디렉토리, 프로젝트 내의 페이지이며, 각 페이지는 페이지 아래의 폴더에 해당합니다. 폴더 이름은 파일 이름과 동일하며 접미사로 파일을 구분합니다(모든 파일이 필수는 아닙니다).

공식 소개가 매우 자세하기 때문에 자세한 내용은 다루지 않겠습니다: .js , .wxml , .wxss , .json

참고: 페이지를 설명하는 4개의 파일은 경로와 파일 이름이 동일해야 합니다.

2. 구성 요소

WeChat은 모든 사람의 개발 어려움과 작업량을 줄이는 것을 목표로 HTML 기반의 일련의 컨트롤을 캡슐화합니다. 공식 문서를 확인하세요.https://mp.weixin.qq.com/debug/wxadoc/dev/comComponent/?t=20161107

참고: 모든 구성요소와 속성은 모두 소문자이며 하이픈으로 연결됩니다. -

3.API

공식 문서를 확인하세요https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=20161107

더 많은 WeChat 미니 프로그램 개발 가이드: 애플리케이션 등록 및 개발 프로세스 예시를 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!