>  기사  >  위챗 애플릿  >  WeChat 미니 프로그램 개발 미니 프로그램 아키텍처 그림

WeChat 미니 프로그램 개발 미니 프로그램 아키텍처 그림

高洛峰
高洛峰원래의
2018-05-14 11:58:5138536검색

1. 미니 프로그램 구조

각 미니 프로그램의 구조는 두 가지 주요 부분으로 구성됩니다. 본편 + 각 페이지 .

많은 프레임워크와 유사하게 주요 부분은 주로 핵심 구성에 사용되며, 각 페이지는 주로 다양한 비즈니스 시나리오에 사용됩니다.

1.1, 주요 부분은 크게 3개의 파일로 구성됩니다.

1) app .js: 미니 프로그램 로직, APP 초기화

2) app.json: 네비게이션, 창, 페이지 http 요청 점프 등 미니 프로그램 구성

3) app.wxss: Public 스타일 구성

기본 구성이 완료된 후 해당 사업이 전개되는데, 가장 많이 운영되는 페이지이다. 개발자에 의해. 미니 프로그램 페이지 디자인은 기본적으로 MVC 구조에 따라 구성됩니다.

MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,
用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,
在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、
处理和输出功能在一个逻辑的图形化用户界面的结构中。

1.2, 페이지는 4개의 파일로 구성됩니다.

1) js: 페이지 로직, 컨트롤과 동일 레이어(C); 데이터의 일부(M)도 포함합니다.

2) wxml: 페이지 구조 표시, 뷰 레이어(V)

3) wxss: 페이지 스타일 시트, 순수 프런트 엔드, wxml 표시를 지원하는 데 사용

4) json: 페이지 구성, 일부 페이지 표시 데이터 구성 및 역할 모델 일부(M)

그림과 같이

WeChat 미니 프로그램 개발 미니 프로그램 아키텍처 그림

코드 구조 참조

WeChat 미니 프로그램 개발 미니 프로그램 아키텍처 그림

2 . app.json 구성

자세한 내용은 핵심 아키텍처 구성을 참조하세요. 미니 프로그램 개발 문서.

app.json

페이지 파일의 경로, 창 성능 및 설정을 전역적으로 구성합니다. 네트워크 시간 초과, 여러 탭 설정 등

페이지
배열을 허용하며 각 항목은 문자열이며 미니 프로그램이 어떤 페이지로 구성되는지 지정합니다.

WeChat 미니 프로그램 개발 미니 프로그램 아키텍처 그림

window
는 미니의 상태 표시줄과 탐색 표시줄을 설정하는 데 사용됩니다. 프로그램, 제목, 창 배경색.

WeChat 미니 프로그램 개발 미니 프로그램 아키텍처 그림

탭바

tabBar 구성 항목을 통해 탭바의 성능과 탭 전환 시 표시되는 해당 페이지를 지정합니다.

tabBar 구성 배열은 최소 2개, 최대 5개 탭만 배열 순서대로 구성할 수 있습니다.

WeChat 미니 프로그램 개발 미니 프로그램 아키텍처 그림

networkTimeout
다양한 네트워크 요청에 대해 시간 초과를 설정할 수 있습니다.

WeChat 미니 프로그램 개발 미니 프로그램 아키텍처 그림

디버그

true/false

개발자 도구의 콘솔 패널에서 디버깅 정보가 다음과 같은 형태로 제공됩니다. info 페이지 등록, 페이지 라우팅, 데이터 업데이트, 이벤트 트리거가 있습니다. 이는 개발자가 몇 가지 일반적인 문제를 신속하게 찾는 데 도움이 될 수 있습니다.

page.json
각 미니 프로그램 페이지는 .json 파일을 사용하여 이 페이지의 창 성능을 구성할 수도 있습니다. 페이지 구성은 app.json의 전역 구성보다 훨씬 간단합니다. app.json에서 창 구성 항목의 내용을 설정하면 페이지의 구성 항목이 앱 창의 동일한 구성 항목을 덮어씁니다. json.

WeChat 미니 프로그램 개발 미니 프로그램 아키텍처 그림

관련 기사:

WeChat 애플릿 데이터 액세스 상세 예제 설명

WeChat 애플릿 예제 코드의 라벨 구성 요소에 대한 자세한 설명

WeChat 애플릿 개발 튜토리얼의 예제 단계에 대한 자세한 설명

위 내용은 WeChat 미니 프로그램 개발 미니 프로그램 아키텍처 그림의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.