이전 기사 WeChat Mini 프로그램 실무 개발(1): WeChat Mini 프로그램 소개에서 우리는 이미 mini에 대해 배웠습니다. 프로그램 기능, 개발 도구 및 미니 프로그램 프로젝트를 만드는 방법. 오늘은 미니 프로그램의 기본 디렉토리 구조를 소개하기 위해 첫 번째 데모를 예로 들어 보겠습니다.
WeChat 애플릿 프로젝트를 열고 클릭하여 "편집" 메뉴에 들어가면 다음 5개의 파일/폴더를 볼 수 있습니다. 페이지 폴더, utils 폴더, 전역 파일 app.js 파일, 전역 파일 파일 app.json 파일, 이미지 편집 파일 도구 app.wxss 파일.
애플릿 디렉토리 구조의 전체적인 구조는 다음과 같습니다.
애플릿 디렉토리에 있는 각 파일과 폴더를 다음과 같이 소개하겠습니다. 세부 기능 및 주의사항을 알려드립니다.
1.pages 디렉토리 소개
pages:주로 미니 프로그램의 페이지 파일을 저장하며, 각 폴더는 페이지이고 각 페이지에는
색인 4개의 파일이 포함되어 있습니다. .js
.js는 미니 프로그램의 로직 파일로, 이벤트 상호작용 파일, 스크립트 파일로도 알려져 있습니다. 초기 데이터 설정, 이벤트 정의, 데이터 상호 작용, 논리 연산, 변수 선언, 배열, 개체, 함수, 주석 메서드 등과 같은 인터페이스의 이벤트에 대한 구문은 JavaScript와 동일합니다. index.js의 코드를 열고 자세히 살펴볼 수 있습니다.
먼저 데이터에 있는 모토의 hello 단어를 hello WeChat 애플릿으로 변경할 수 있습니다. 아래와 같습니다.
두 번째로 bindViewTap: function()의 기능을 살펴보겠습니다. 클릭하면 로그 페이지로 이동합니다. 아래와 같이 아바타를 클릭하면 데모 효과를 볼 수 있습니다.
 마지막으로 onLoad 함수를 살펴보겠습니다. 페이지가 시작됩니다. 페이지가 시작될 때 표시될 페이지를 수정하거나 아래 그림과 같이 새로운 기능을 추가할 수 있습니다.
일반적으로 사용되는 .js 기능은 다음과 같습니다.
페이지({
console.log('App onReady')
},
onShow:function(){
// 페이지 표시
console.log('App onShow')
},
onHide:function(){
// 페이지 숨기기
console.log('App onHide')
},
onUnload:function(){
//페이지 닫기
console.log('App onUnload')
}
})
코드 복사index.json.json 파일은 구성 파일로 주로 json 데이터 형식으로 저장되며 구성 효과를 설정하는 데 사용됩니다. 프로그램의. 아래와 같이 인덱스 디렉터리에 .json 구성 파일을 생성할 수 있습니다.
index.json 구성 파일은 이 디렉터리의 페이지 구성 파일만 구성할 수 있으며 탐색 텍스트, 배경색, 텍스트 색상 등 탐색 표시줄 표시 스타일 수정과 같은 탐색 표시줄 관련 파일만 구성 및 수정할 수 있습니다. . 구문은 json 구문과 동일합니다. 예를 들어, 아래 그림과 같이 네비게이션 바의 배경색을 빨간색으로 변경해 보겠습니다. 
배경색이 빨간색으로 변경되는 것을 확인할 수 있습니다. . . (이 색상 정말 끔찍해요!)
index.wxml
.wxml 파일이 인터페이스입니다. file , 은 페이지를 빌드하고 페이지에 컨트롤을 추가하는 데 사용되는 페이지 구조 파일입니다. 전체 이름은 weixin markup lanuage, WeChat 마크업 언어의 약어입니다. 다른 일반적인 마크업 언어와 마찬가지로 태그는 쌍으로 구성되고 태그 이름은 소문자로 표시됩니다. 클래스를 참조하여 모양을 제어할 수 있고, 이벤트를 바인딩하여 논리적 처리를 수행하고, 렌더링을 통해 필요한 목록을 완성할 수도 있습니다. 이는 사용자 작업과 백엔드 논리 간의 연결입니다. 페이지에 표시되는 모든 요소는 여기에서 편집할 수 있습니다. 예를 들어 아래와 같이 페이지에 버튼을 배치합니다.
.wxml에서 불필요한 프로그램 코드에 주석을 추가하는 방법은 무엇입니까? 다음과 같습니다:
-
{{userInfo.nickName}}000
-
- {{motto}}
-
-
-
- 코드 복사
참고:
1 WeChat 미니 프로그램의 이러한 특정 태그를 구성 요소라고 합니다.
index.wxss
.wxss는 스타일 시트 파일로 프런트 엔드의 CSS와 유사하며 .wxml 파일의 경우 입니다. 아름다운 파일은 인터페이스 디스플레이를 더욱 아름답게 만듭니다. 예를 들어, .wxml에서 텍스트의 크기와 색상, 그림의 너비와 높이를 설정하고 구성 요소의 위치와 간격을 설정합니다.
참고:
1. 미니 프로그램의 각 페이지에는 .wxml 및 .js 파일이 있어야 합니다.
2. 파일 이름은 필요하지 않습니다. 페이지와 일치해야 합니다. 폴더 이름은 index 폴더와 같이 동일해야 하며, 파일은 index.wxml, index.wxss, index.js 및 index.json만 가능합니다.
1.2 utils
이 파일은 주로 전역 .js 파일을 저장하는 데 사용되며 일부는 일반적으로 사용됩니다. 사용된 이벤트 처리 코드 파일은 글로벌 호출을 위해 이 폴더에 배치될 수 있습니다. 예를 들어 일반적인 방법: 처리 시간 등.
-
module.exports = {
formatTime: formatTime
}
코드 복사
외부 호출을 허용하는 메서드의 경우 module.exports를 사용하여 선언한 후 다음 코드를 사용하여 다른 js 파일에 도입합니다.
var util = require('../../utils/util.js')
복사 code 그런 다음 메소드를 호출할 수 있습니다. 예: 아래와 같이 utils 함수를 직접 정의합니다.
function util(){
console.log("모듈이 호출되었습니다!!")
}
module.exports.util = util
코드를 복사하세요
다음과 같이 index.js 파일에서 이 util 함수를 호출하세요.
var common = require('../../utils/util.js')
코드 복사저장한 후 아래와 같이 정의한 util 콘텐츠가 호출된 것을 백그라운드에서 확인할 수 있습니다.
1.3 app.js, app.json, app.wxss
app.js : 시스템 메소드는 전역 파일을 처리합니다. 즉, 전체 애플릿의 모든 프레임 페이지와 파일에 대해 이를 사용하면 파일에 지정된 기능과 데이터를 얻을 수 있습니다. 각 미니 프로그램에는 app.js 파일이 있으며 프로젝트의 루트 디렉터리에는 단 하나만 있습니다! app.js의 기능은 미니 프로그램이 미니 프로그램의 인스턴스를 app(객체) 형태로 등록하여 미니 프로그램이 다양한 단계에서 구현해야 하는 이벤트 기능(예: onLoad, onshow, 등. 전역 on 이벤트는 3개뿐입니다. 페이지의 on 이벤트보다 적습니다. 프로그램 수명 주기의 일부 방법을 주로 처리합니다. 예를 들어 프로그램이 막 실행되기 시작할 때의 이벤트 처리 등 app.js에는 다음과 같이 해당 이벤트 정의를 제공하는 app() 메서드가 포함되어 있습니다. 🎜>
App({
onLaunch: 함수 () {
-
console.log('앱 실행')
},
onShow: 함수 () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
}
})
코드 복사앱( ) 함수는 작은 프로그램을 등록하는데 사용됩니다. 애플릿의 수명주기 기능 등을 지정하는 객체 매개변수를 허용합니다. 
app.json : 시스템 전역 구성 파일이 포함되어야 합니다. 페이지 경로 설정, 하단 설정, 네트워크, 디버깅 모드, 탐색 헤더 색상 설정, 글꼴 크기, 아래 탭바 유무 및 기타 기능이 포함됩니다. 특정 페이지의 구성은 의 json 파일에서 별도로 수정됩니다. 모든 페이지는 앱에 있어야 합니다. json에 등록하지 않으면 페이지를 열 수 없습니다.
-
"페이지":[
"페이지/인덱스/인덱스",
"페이지/로그/로그"
],
코드 복사
( 프레임 json 우선순위가 전역 json 우선순위 ) .wxss : 전역 인터페이스 미화 코드, 필요하지 않음보다 높습니다. 우선순위도 프레임워크의 wxss만큼 높지 않습니다.
예: index.wxss에 아바타에 대한 여백 설정이 있습니다
.usermotto {
margin-top: 200px;
-
}
-
코드 복사
또한 app.wxss에서 전역 아바타 여백 설정을 400px로 정의하여 실행했는지 살펴보겠습니다.
.usermotto {
margin-top: 400px ;
-
}
-
코드 복사
다시 시작 프로세스 중에 전역 매개변수가 색인화되어 있는 것을 볼 수 있습니다. .wxss에 포함되어 있습니다.
WeChat 미니 프로그램에서 사진 추가 및 처리 WeChat 미니 프로그램에서 사진을 추가하는 것은 매우 번거롭고 프로젝트 폴더를 열어 열면 해당 디렉토리에 사진을 넣기만 하면 됩니다. 코드에서 이미지의 상대 경로 또는 절대 경로를 참조하면 됩니다. 현재 미니 프로그램 개발에서는 png, jpg 형식만 지원하며, 다른 형식의 그림은 열 수 없습니다. 
|
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
