위 챗 애플 릿 입문 은 여기 서 출발 합 니 다(로그 인 등록,개발 도구,문서 및 구조 소개)

(1)준비 작업
(1)로그 인 등록
등록 계 정:이 건 말 할 것 도 없고 새로운 메 일 을 사용 하 는 것 에 만 주의 하 세 요.전에 공중 번호 애플 릿 등 을 등록 하지 않 으 면 됩 니 다.https://mp.weixin.qq.com/wxopen/waregister?action=step1로그 인 계 정:이메일 비밀 번 호 를 통 해 로그 인 하거나 위 챗 을 연결 한 후 스 캔 을 사용 해도 됩 니 다.https://mp.weixin.qq.com/
(2)APPID 가 져 오기
로그 인 한 후에 개발 입문 단계 에서 알 아야 할 중요 한 내용 이 있 습 니 다.바로 APPID 입 니 다.이해 하기 쉽 습 니 다.바로 이 작은 프로그램의 유일한 표지 입 니 다.바로 우리 의 신분증 과 비슷 합 니 다.로그 인 한 후에 첫 페이지 왼쪽 칸 에서[개발]을 선택 하고 뛰 어 넘 은 후에[개발 설정]을 선택 하면 우리 의 APPID 를 볼 수 있 습 니 다.

이 APPID 는 잘 기억 하 세 요.처음에 공 부 를 할 때 바로 사용 합 니 다.

(3)다운로드 도구
홈 페이지 에서 적당 한 버 전 을 선택 하여 다운로드 합 니 다.이것 이 바로 우리 애플 릿 의 컴 파일 러 입 니 다.여기 서 제 가 선택 한 것 은 개발 판 이지 만 안정 판 을 선택 하 는 것 도 괜 찮 습 니 다.입문 에 있어 큰 차이 가 없 지만 안정 판 에 나타 날 수 있 는 작은 결함 이 적 을 것 입 니 다.https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html설치 한 후에 스 캔 로그 인 을 직접 알려 주 고 그 다음 에 왼쪽[애플 릿]을 클릭 한 다음 에 오른쪽[새로 만 들 기](큰 플러스 번호)를 클릭 하여 기본 적 인 정 보 를 작성 합 니 다.

프로젝트 이름과 디 렉 터 리:알 아서 하면 됩 니 다

APPID:이전 페이지 에서 찾 은 APPID 는 이 럴 때 사용 할 수 있 습 니 다.테스트 번 호 를 사용 해도 들 어 갈 수 있 지만 뒤에 자신의 ID 를 사용 해 야 합 니 다.

개발 모델:애플 릿

백 엔 드 서비스:클 라 우 드 서 비 스 를 사용 하지 않 습 니 다.앞 에는 학습 애플 릿 자 체 를 위주 로 하고 이 옵션 을 사용 하지 않 습 니 다

언어:JavaScript 와 Typescript,자신의 익숙 한 프로그램 에 따라 선택 하면 됩 니 다

새로 만 들 면 첫 번 째 애플 릿 이 끝 납 니 다~
(2)초 식 애플 릿
(1)인터페이스 총람
아래 영역 은 새로 만 든 항목 인 터 페 이 스 를 초기 화 하 는 것 입 니 다.그림 이 명확 하 게 표시 되 어 있 습 니 다.각 항목 의 구체 적 인 내용 은 첫 번 째 항목 을 만 들 때 설 정 된 일반적인 설정 에서 기본 작업 영역 과 테마(옅 은 색 또는 짙 은 색)를 자신의 필요 에 따라 수정 할 수 있 습 니 다.
설명:애플 릿 공식 도구 에서 코드 를 직접 작성 하 셔 도 됩 니 다.하지만 저 는 개인 적 으로 vscode 나 sublime 에 맞 춰 코드 를 편집 하 는 것 을 선택 하 였 습 니 다.위 챗 공식 개발 도구 나 그 결과 와 콘 솔 의 정 보 를 보 는 것 을 선택 하 였 습 니 다.

(2)파일 형식
전통 적 인 웹 개발 과 달리 위 챗 애플 릿 은 wxml,wxs 등 설명 언어 를 재 정의 하 는 동시에 JSON 설정 파일 도 추가 로 제공 했다.
wxml(페이지 구조 파일)
웹 페이지 를 작성 하고 구축 하 는 데 사용 되 는 전통 적 인 웹 페이지 개발 과 유사 한 HTML
wxss(스타일 시트 파일)
페이지 스타일 을 만들어 페이지 를 미화 하 는 데 사용 되 며,전통 적 인 웹 개발 과 유사 한 CSS 입 니 다.
js(스 크 립 트 파일)
특정 페이지 의 대화 형 논 리 를 지정 하 는 데 사용 되 는 것 이 자바 script 입 니 다.
json(정적 데이터 프로필)
JSON 형식의 프로필,프로그램의 일부 설정 효과 설정
(3)구조 디 렉 터 리
A:전체적인 소개
공식 개발 도구 나 vscode 등 다른 편집 기 를 통 해 새로운 프로젝트 를 만 들 면 초기 화 된 프로젝트 구 조 를 기본적으로 생 성 합 니 다.그 안에 많은 파일 이 포함 되 어 있 습 니 다.접미사 형식 은 모두 우리 가 위 에서 소개 한 것 입 니 다.

다음은 몇 가지 주요 내용 에 대해 기본 적 인 소 개 를 하 겠 습 니 다.

├── pages        //      
|	├── index 						 //   
│ |	├── index.js				 //         
│ |	├── index.json			  //       
│ |	├── index.wxml			 	 //         
│ |	├── index.wxss				 //       

|	├── logs 						 //     
│ |	├── logs.js				 	 //           
│ |	├── logs.json			  //         
│ |	├── logs.wxml			 	 //           
│ |	├── logs.wxss				 //         

|	├── utils 						 //   js  （   ，   ）
│ |	├── util.js				 	 //           

│ ├── app.js						 //          
│ ├── app.json					 //          
│ ├── app.wxss					 //          
│ ├── project.config.json			 //            
│ ├── sitemap.json				 //       

구체 적 인 wxml wxss 등 용법 은 뒤에서 언급 할 것 입 니 다.여기 서 우 리 는 두 가지 내용 을 더 제시 해 야 합 니 다.
A:설명
app.js:프로젝트 의 입구 파일,응용 프로그램의 대상,처리 프로그램의 수명 주기
app.json:프로젝트 전역 설정 파일 은 페이지 의 경로,인터페이스/창의 표현 시간,격자 시간 초과,그리고 애플 릿 아래쪽 tab 등 과 관련 되 어 있 습 니 다.매우 중요 합 니 다.새 항목 을 초기 화하 면 다음 페이지 필드 와 windows 세그먼트 를 볼 수 있 습 니 다.

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

pages 필드 는 페이지 경로 에 관 한 것 입 니 다.즉,클 라 이언 트 에 게 애플 릿 페이지 가 어디 에 있 는 지 설명 하 는 것 입 니 다

window 필드,해당 페이지 의 색상,제목 등

tabbar 필드,아래쪽 tab 표시 줄(페이지 전환)

tabbar 에 대한 홈 페이지 설명 을 붙 입 니 다.
애플 릿 이 다 중 tab 응용 프로그램(클 라 이언 트 창의 아래쪽 이나 상단 에 tab 표시 줄 이 있 으 면 페이지 를 전환 할 수 있 습 니 다)이 라면 tabBar 설정 항목 을 통 해 tab 표시 줄 의 표현 과 tab 전환 시 표시 되 는 해당 페이지 를 지정 할 수 있 습 니 다.
속성
유형
필수
기본 값
묘사 하 다.
color
HexColor
예.
tab 의 텍스트 기본 색상 은 16 진수 색상 만 지원 합 니 다.
selectedColor
HexColor
예.
tab 에서 선택 한 텍스트 색상 은 16 진수 색상 만 지원 합 니 다.
backgroundColor
HexColor
예.
tab 배경 색,16 진수 색상 만 지원
borderStyle
string
아니.
black
tabbar 에 있 는 테두리 의 색상 은 black/white 만 지원 합 니 다.
list
Array
예.
tab 의 목록,list 속성 설명 참조,최소 2 개,최대 5 개 tab
position
string
아니.
bottom
tabBar 의 위치,bottom/top 만 지원 합 니 다.
custom
boolean
아니.
false
사용자 정의 tabBar,최소 2.5 버 전 필요

일반적으로 일반적인 효 과 를 설정 하려 면 list 를 사용 하여 설정 합 니 다.
속성
유형
필수
설명 하 다.
pagePath
string
예.
페이지 경로,pages 에서 먼저 정의 해 야 합 니 다.
text
string
예.
탭 단추 텍스트
iconPath
string
아니.
그림 경로,icon 크기 는 40kb 로 제한 되 어 있 으 며,사 이 즈 는 81px*81px 로 권장 되 며,네트워크 그림 은 지원 되 지 않 습 니 다.position 가 top 일 때 icon 을 표시 하지 않 습 니 다.
selectedIconPath
string
아니.
선택 한 그림 경 로 는 icon 크기 가 40kb 로 제한 되 어 있 으 며,81px*81px 로 권장 되 며,네트워크 그림 은 지원 되 지 않 습 니 다.position 이 top 일 때 icon 을 표시 하지 않 습 니 다.****
예 를 들 어 글 을 쓰 는 형식 이 이 렇 습 니 다.tabbar 는 반드시 pages 에 해당 하 는 페이지 를 설정 해 야 한 다 는 것 을 잊 지 마 세 요.

"tabBar": {
 "color": "#999",
 "selectedColor": "#ff2d4a",
 "backgroundColor": "#fafafa",
 "position": "bottom",
 "borderStyle": "black",
 "list": [
  {
  "pagePath": "pages/index/index",
  "text": "  ",
  "iconPath": "icons/home.jpg",
  "selectedIconPath": "icons/home.jpg"
  },
  {
  "pagePath": "pages/user/index",
  "text": "  ",
  "iconPath": "icons/my.jpg",
  "selectedIconPath": "icons/my.jpg"
  }
 ]
 },

모든 애플 릿 페이지 에서.json파일 을 사용 하여 이 페이지 의 창 표현 을 설정 할 수 있 습 니 다.페이지 의 설정 항목 은 현재 페이지app.json의window에서 같은 설정 항목 을 덮어 씁 니 다.마찬가지 로 설정 내용 도 많 으 니 홈 페이지 를 보면 됩 니 다.https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html엔 딩
위 챗 애플 릿 입문 에 관 한 이 글 은 여기 서 출발(로그 인 등록,개발 도구,파일 및 구조 소개)하 는 글 을 소개 합 니 다.더 많은 위 챗 애플 릿 입문 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!