WeChat 개발 소개 (2) WeChat Mini 프로그램 개발 도구 사용법 및 디자인 사양

이 기사에서 배울 수 있는 내용:

1. 미니 프로그램 개발 도구를 사용하여 Hello World를 작성하는 방법

2. WeChat mini 프로그램 디자인 사양

3. WeChat Mini 프로그램 프로젝트 구조

》》》WeChat Mini 프로그램 개발 도구 사용

• 애플릿 다운로드 및 설치
  다운로드: WeChat 웹 개발자 도구

  다운로드: 공식 DEMO 소스 코드

  이 튜토리얼 시리즈 Mac 버전 개발자 도구를 사용합니다.

• 설치가 완료된 후 WeChat 웹 개발자 도구를 엽니다

1. QR 코드를 스캔하여 로그인합니다. 개인 WeChat

2. QR 코드를 스캔하여 로그인한 후 새 프로젝트를 생성하거나 기존 프로젝트를 가져옵니다(여기에서 공식 DEMO 소스 코드 빠른 시작 사용)

3. 새 프로젝트를 생성하고 방금 다운로드한 Quickstart 프로젝트를 가져옵니다.


내부 테스트에 초대받은 회사 또는 개인만 해당되므로 AppID가 있으면 반드시 "AppID 없음"을 선택하세요

4. 새로 만들기에 성공했습니다. 개발 도구의 실제 모습을 살펴보겠습니다


크롬 개발자 모드와 매우 유사합니까? . .

5. 개발 도구 소개 [디버깅]


"디버깅" 모듈에는 주로 디버깅 모델 선택, 네트워크 유형 선택, 콘솔 출력, 네트워크 리소스 선택이 포함됩니다.

6. 개발 도구 소개 [편집]


왼쪽의 빨간색 상자가 프로젝트 구조 디렉터리이고, 오른쪽이 는 코드 편집 영역입니다. 각 변경 사항을 저장한 후 "컴파일"을 클릭하면 수정된 페이지 효과를 볼 수 있습니다.

7. 새 폴더 또는 파일 만들기


폴더에 마우스를 올리면 오른쪽에 "+" 아이콘이 나타납니다. 클릭하여 폴더를 추가하거나 file

》》》미니 프로그램 디자인 사양(WeChat 미니 프로그램 디자인 가이드에서 발췌)

1. 친절하고 정중함
   사용자가 위챗에서 미니 프로그램 서비스를 이용할 때 복잡한 주변 환경으로 인해 주의가 산만해지는 것을 방지하기 위해 미니 프로그램을 디자인할 때는 관련 없는 디자인 요소가 사용자 목표에 간섭하는 것을 줄이고 정중하게 보여야 합니다. 사용자는 프로그램에서 제공하는 서비스를 이용하고 사용자가 친근하게 사용할 수 있도록 안내합니다.

2. 하이라이트
   사용자가 새 페이지에 들어갈 때마다 페이지의 내용을 빠르게 이해할 수 있도록 각 페이지에는 명확한 초점이 있어야 합니다. 사용자의 의사 결정 및 작업에 영향을 미치는 페이지의 다른 항목을 피하십시오.

3. 명확하고 명확함
   사용자가 미니 프로그램 페이지에 들어가면 우리는 사용자에게 자신이 어디에 있는지, 어디로 갈 수 있는지 명확하고 명확하게 알려야 할 책임과 의무가 있습니다. 사용자는 길을 잃지 않고 페이지를 자유롭게 이동할 수 있어 사용자에게 안전하고 즐거운 경험을 제공합니다.

》》》WeChat 미니 프로그램 프로젝트 구조

1. 파일 구조
   
   

2. 프레임워크 프로그램에는 전체 프로그램을 설명하는 앱과 해당 페이지를 설명하는 여러 페이지가 포함되어 있습니다. 프레임워크 프로그램의 주요 부분은 프로젝트의 루트 디렉터리에 배치되어야 하는 세 개의 파일로 구성됩니다.

文件	作用
app.js	小程序(全局)逻辑
app.json	小程序(全局)公共设置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
app.wxss	小程序公共(全局)样式表

1. 프레임 페이지는 4개의 파일로 구성됩니다.

文件类型	作用
js	页面逻辑
wxml	页面结构，框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
wxss	是一套样式语言，用于描述 WXML 的组件样式。用来决定 WXML 的组件应该怎么显示。
json	页面配置

"구성보다 관례"에 따름 , 프레임 페이지에는 js, wxml, wxss의 세 가지 파일 형식이 포함됩니다. 파일 이름은 홈페이지 index.js, index.wxml, index.wxss와 같이 동일해야 하며 동일한 위치에 배치되어야 합니다. 접는 사람. 페이지를 등록할 때 프레임워크가 통합을 위해 .json, .js, .wxml 및 .wxss 경로에서 4개 파일을 자동으로 찾기 때문에 파일 이름에 파일 접미사를 쓸 필요가 없습니다.

》》》요약

위에서는 개발 도구, 디자인 사양, 프로젝트 디렉토리의 세 가지 측면에서 WeChat 미니 프로그램 개발 준비 과정을 소개합니다. 나중에 공식 DEMO를 가져오고 Hello World 애플릿 페이지를 표시하여 동시에 업데이트할 수 있습니다. 일반적으로 미니 프로그램 개발 도구는 간소화되고 프로젝트 구조가 명확하며 문서가 완벽하고 진입 장벽이 높지 않습니다. WeChat 팀은 다양한 운영 체제와 다양한 모델을 패키지로 제공하므로 개발자는 해당 서비스를 호출하기만 하면 됩니다. API그게 다입니다. 물론 전체 프레임워크를 이해하려면 Redux의 작동 원리, 상태 모드, 단방향 및 양방향 데이터 바인딩, Android/IOS 기본 UI 구성 요소를 호출하는 JS 등을 깊이 연구해야 합니다.

궁금한 점이 있으시면 제 위챗 공개 계정 'ITNotes'를 팔로우하시면 함께 소통하고 배울 수 있습니다.

[관련 추천]

1. 위챗 공개계정 플랫폼 소스코드 다운로드

2.위챗 투표 소스코드

3.

WeChat Lala Takeaway 2.2.4 WeChat Rubik's Cube 소스 코드의 복호화된 오픈 소스 버전

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