WeChat Mini 프로그램 개발의 기본 구조 개요(2)

WeChat 미니 프로그램 개발 튜토리얼(기초) 1 - WeChat 미니 프로그램 첫 소개

이전 튜토리얼의 끝에서 이 과정에서 "Hello World"와 유사한 미니 프로그램을 생성했습니다. 코드 한 줄을 작성하지 마세요.
새 프로젝트를 생성한 후 WeChat 애플릿은 기본 프로그램 프레임워크를 생성하고 후속 프로그램 개발 작업은 이 프레임워크에서 수행됩니다. 이 기본 프레임워크에는 다음 부분이 포함되어 있습니다.

app.xx

각 WeChat 애플릿에는 app.js, app.json 및 app.wxss라는 세 가지 파일이 포함되며, 그 중 app.js가 있습니다. file 프로그램의 논리 구현 코드가 포함되어 있으며 app.json은 전역 구성 파일이고 app.wxss는 전역 스타일 파일입니다. 각 파일의 내용과 기능은 나중에 자세히 소개하겠습니다.

pages 디렉토리

pages 디렉토리에는 프로그램의 현재 페이지 파일이 포함되어 있습니다. 기본적으로 생성된 프로그램을 예로 들면, 이 디렉토리에는 프로그램이 포함되어 있음을 나타내는 index와 log라는 두 개의 디렉토리가 포함되어 있습니다. 인덱스 및 로그 두 페이지.

index를 예로 들어 보겠습니다. 이 디렉터리에는 index.js, index.wxss 및 index.wxml의 세 가지 파일이 포함되어 있습니다. js는 코드 파일, wxss는 스타일 파일, wxml은 페이지 구조 설명입니다. 파일.

웹 개발에 익숙한 학생들이라면 매우 친숙하게 느껴질 것입니다. WeChat 애플릿의 개발 모델은 실제로 웹 개발과 매우 유사합니다. 현재 로직 부분은 JavaScript 언어만 지원하며, wxml(html과 유사) 및 wxss(css와 유사)를 사용하여 페이지의 구조와 스타일을 설명합니다. 여기서의 자바스크립트는 웹에서의 자바스크립트와 완전히 동일하지만, 브라우저 환경에서 실행되지 않기 때문에 윈도우, 문서 등의 객체를 사용할 수 없고, 당연히 jquery와 같은 타사 라이브러리도 사용할 수 없습니다. wxml 및 wxss의 구문도 html 및 css의 구문과 매우 유사합니다.

페이지에는 구성을 위한 index.json 파일도 포함될 수 있지만 필수는 아닙니다.

일반적으로 완전한 WeChat 애플릿에는 위의 두 부분이 포함되어 있습니다. 물론 공개 코드와 프로그램에 필요한 기타 파일을 저장하기 위해 자체 디렉토리를 정의할 수도 있습니다.

app.json

app.json 파일을 열면 다음 코드를 볼 수 있습니다.

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

페이지 부분에는 프로그램의 페이지가 포함되어 있어 프레임워크가 페이지 파일을 어디서 찾을 수 있는지 알아보세요. 창 부분에는 프로그램 창의 일부 구성이 포함되어 있습니다. 자세한 구성 항목은 구성 미니 프로그램

app.wxss

app.wxss 파일을 참조하세요. 기본 생성 프로그램에는 selector.container 클래스가 하나만 있습니다. 이 유형은 index.wxml 및logs.wxml에서 사용됩니다.

app.js

이 파일에는 프로그램의 주요 프로세스 코드 구현이 포함되어 있습니다. 이 부분에 대한 분석은 다음 튜토리얼을 참조하세요.

위 내용은 WeChat Mini 프로그램 개발의 기본 구조 개요(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!