WeChat 미니 프로그램의 기본 원칙을 분석합니다.

페이지 렌더링에는 세 가지 주요 방법이 있습니다

권장: "Mini 프로그램 개발 튜토리얼"

1. 웹 렌더링

2. 네이티브 렌더링

3. 바로 하이브리드 렌더링입니다.

미니프로그램은 세 번째 형태로 선보입니다.

이중 스레드 통신 방법

듀얼 스레드가 필요한 이유는 무엇입니까? -> 제어 보안을 위해 DOM 운영을 피하세요.

애플릿의 렌더링 계층과 논리 계층은 각각 두 개의 스레드로 관리됩니다. 렌더링 계층의 인터페이스는 렌더링을 위해 WebView를 사용하고 논리 계층은 JsCore 스레드를 사용하여 JS 스크립트를 실행합니다.

WeChat 애플릿의 프레임워크는 뷰 레이어와 APP 서비스 로직 레이어의 두 부분으로 구성됩니다.

뷰 레이어는 페이지 구조를 렌더링하는 데 사용되며,

AppService는 논리 처리, 데이터 요청 및 인터페이스 호출에 사용됩니다.

두 개의 프로세스(두 개의 웹뷰)로 실행됩니다.

뷰 레이어와 로직 레이어는 시스템 레이어의 JSBridage를 통해 통신합니다.

로직 레이어: JavaScript 실행을 위한 별도의 스레드를 생성합니다. 이 환경에서는 미니 프로그램의 비즈니스 로직과 관련된 모든 코드가 실행됩니다.

렌더링 레이어: 인터페이스 렌더링과 관련된 모든 작업이 webView 스레드에서 실행됩니다. 렌더링되는 인터페이스를 제어하는 ​​논리 계층 코드입니다.

작은 프로그램에는 여러 인터페이스가 있으므로 렌더링 레이어에 여러 개의 웹뷰 스레드가 있습니다.

로직 레이어와 렌더링 레이어 간의 통신은 Native(WeChat 클라이언트)에 의해 전달됩니다.

로직 레이어에서 보낸 네트워크 요청도 Native에 의해 전달됩니다.

evaluate Javascript

뷰 레이어와 로직 레이어 간의 데이터 전송은 실제로 양측에서 제공하는 평가 자바스크립트를 통해 구현됩니다. 즉, 사용자가 전송한 데이터를 문자열로 변환하여 전달하는 동시에 변환된 데이터 내용을 JS 스크립트로 엮어 양쪽의 독립된 환경에 전달해야 합니다. JS 스크립트 형식입니다.

evaluateJavascript의 실행은 여러 측면의 영향을 받기 때문에 뷰 레이어에 도달하는 데이터는 실시간이 아닙니다. setData 함수는 논리 계층에서 뷰 계층으로 데이터를 비동기적으로 보냅니다.

템플릿 데이터 바인딩 솔루션

1. AST 생성을 위한 구문 분석

2. AST 결과를 기반으로 DOM 생성

3. 템플릿에 대한 데이터 바인딩 업데이트

추상 구문 트리(추상 구문 트리 또는 약어로 AST)

성능 문제가 발생할 가능성이 가장 높은 세 번째 사항은 주로 세 번째 사항입니다. 데이터 업데이트에 대한 해결책으로 React는 먼저 가상 DOM 설계를 제안했는데, 이는 현재 대부분의 프레임워크에 기본적으로 흡수되어 있으며 작은 프로그램도 예외는 아닙니다.

가상 DOM 메커니즘 가상 Dom

JS 객체를 사용하여 DOM 트리 시뮬레이션 -> 두 DOM 트리 비교 -> 실제 DOM 트리에 차이점 적용

1. 렌더링 레이어는 WXML을 해당 JS 객체로 변환합니다

2. 로직 레이어에서 데이터 변경이 발생하면 호스트 환경에서 제공하는 setData 메서드를 통해 데이터가 로직 레이어에서 Native로 전송된 다음 렌더링 레이어로 전달됩니다.

3. 전후 차이점 비교 후 원본 DOM 트리에 차이점 적용, 인터페이스 업데이트

미니 프로그램 기본 라이브러리

미니 프로그램 기본 라이브러리는 JavaScript로 작성되어 있으며, 렌더링 레이어와 로직 레이어를 실행합니다. 주로 사용되는 용도:

렌더링 레이어에서는 페이지의 요소를 조합하기 위한 다양한 구성 요소를 제공합니다.

로직 레이어에서는 다양한 요소를 처리하기 위한 다양한 API를 제공합니다.

데이터 바인딩, 구성 요소 시스템, 이벤트 시스템, 통신 시스템 등과 같은 일련의 프레임워크 논리를 처리합니다.

애플릿의 렌더링 계층과 논리 계층은 두 개의 스레드로 관리되며 두 스레드는 각각 기본 라이브러리.

미니 프로그램의 기본 라이브러리는 미니 프로그램의 코드에 포함되지 않으며 사전에 WeChat 클라이언트에 내장됩니다. 이 방법으로 다음을 수행할 수 있습니다.

비즈니스 애플릿의 코드 패키지 크기를 줄입니다.

비즈니스 애플릿의 코드 패키지를 수정하지 않고도 기본 라이브러리에서만 버그를 수정할 수 있습니다.

Exparser

Exparser는 다음의 구성 요소 구성 프레임워크입니다. 미니 프로그램 기본 라이브러리에 내장된 WeChat 애플릿은 미니 프로그램의 다양한 구성 요소에 대한 기본 지원을 제공합니다. 기본 제공 구성요소와 사용자 정의 구성요소를 포함한 미니 프로그램의 모든 구성요소는 Exparser에 의해 구성되고 관리됩니다.

이중 스레드 렌더링 메커니즘

이중 스레드 렌더링은 실제로 이전 메커니즘 시리즈의 조합입니다.

1. 템플릿 데이터 바인딩 및 가상 DOM 메커니즘을 통해 애플릿은 DSL에 페이지 구조를 설명하는 데이터 바인딩 구문 및 렌더링 레이어를 제공합니다.

<view> {{ message }} </view> <view wx:if="{{condition}}"> </view> <checkbox checked="{{false}}"> </checkbox>

2. 애플릿은 로직 레이어

this.setData({
key : value
});

3에서 페이지 데이터를 설정하기 위한 API를 제공합니다. 로직 레이어가 페이지를 변경해야 하는 경우 setData를 통해 수정된 데이터만 렌더링 레이어에 전달하면 됩니다.

전송되는 데이터는 문자열 형식으로 변환되어 전송되므로 대량의 데이터 전송은 피해야 합니다.

4. 렌더링 레이어는 렌더링 메커니즘에 따라 가상 DOM 트리를 재생성하고 이를 해당 DOM 트리로 업데이트하여 인터페이스를 변경합니다.

• 네이티브 구성 요소 소개

• 는 setData, 데이터 통신 및 다시 렌더링 프로세스를 우회하여 렌더링 성능을 향상시킵니다.

• 웹 기능을 확장하세요. 예를 들어 입력 상자 구성 요소(입력, 텍스트 영역)에는 키보드를 더 잘 제어할 수 있는 기능이 있습니다.

• 경험이 더 좋고 WebView의 렌더링 작업도 줄어듭니다. 예를 들어 지도 구성 요소와 같은 보다 복잡한 구성 요소의 렌더링 작업은 WebView 스레드를 차지하지 않고 기본 처리를 위해 보다 효율적인 클라이언트로 전달됩니다.

기본 구성 요소의 렌더링 프로세스:

• 구성 요소가 생성되고 구성 요소 속성에 순서대로 값이 할당됩니다.

• 컴포넌트가 DOM 트리에 삽입되고 브라우저 커널이 즉시 레이아웃을 계산합니다. 이때 페이지를 기준으로 컴포넌트의 위치(x, y 좌표), 너비 및 높이를 읽을 수 있습니다.

• 컴포넌트는 클라이언트가 너비와 높이에 따라 동일한 위치에 네이티브 영역을 삽입한 다음 클라이언트가 이 영역에 인터페이스를 렌더링한다는 것을 클라이언트에게 알립니다.

• 위치 또는 너비와 높이가 변경되면 구성 요소는 클라이언트에게 해당 조정을 하도록 알립니다.

위 내용은 WeChat 미니 프로그램의 기본 원칙을 분석합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!