미니 프로그램의 기원을 이해하도록 안내합니다.

WeChat 미니 프로그램이 어떻게 구성되어 있는지 철저하게 이해하고 나면 조용히 깨닫게 될 것입니다. 모든 혁신은 이전 제품을 기반으로 합니다. React는 효율적인 가상 DOM을 구현합니다. 이를 기반으로 WeChat은 작은 프로그램 실행 환경인 WeChat 브라우저를 구축합니다.

먼저 다음 도구가 필요합니다

1. Mac 컴퓨터

2. WeChat 웹 개발자 tools.app

3. 프로그래머나 IDE는 이름 변경을 지원하는 것이 좋습니다.

먼저 WeChat 웹 개발자 tools.app을 마우스 오른쪽 버튼으로 클릭한 다음 Contents/Resources/app에 패키지 콘텐츠

를 표시해야 합니다. .nw 다음 내용은 복사된 코드입니다.

간략한 설명:

app/ 앱 코드는

modified_modules/ 디렉터리에 있습니다. 즉, 몇 가지 수정 사항 마지막 모듈

node_modules/ 지구인은 다 아는

package.json ㅎㅎ NW 관련 내용이 구성되어 있다는 걸 아셔야 합니다

Modified_modules 파일이 2개 있습니다 디렉토리 하위 모듈:

anyproxy, 이름에서 이것이 프록시 모듈임을 알 수 있습니다.

weinre, 원격 디버깅 도구

IDE

우리는 이미 이것은 NodeWebkit으로 캡슐화된 웹 애플리케이션입니다.

package.json의 "main": "app/html/index.html"은 이 APP의 입구가 다른 파일이 아닌 이 index.html임을 정의합니다.

성공적으로 우리는 그들이

라는 파일을 보았습니다:

그 안에 init 메소드가 있는데, NodeWebkit과 관련된 항목인 것 같습니다. WebStorm의 Shift + f6RENAME 변수를 12번 이상 사용하다가 마침내 다음 코드를 보았습니다.

이것은 React 애플리케이션입니다. 다행히 1년 이상 전에 잘 배웠습니다. 코드를 스캔하고 마침내 다음 문장을 보았습니다.

ContainController.js로 직접 점프하고, render 메소드로 점프하여 다음을 발견했습니다.

물론, 정문은 정문 내부에 있습니다.

해당 인터페이스는 다음과 같습니다.

edit는 편집기 및 관련 사항

detail은 프로젝트 구성

추가하면, 그 중 편집 환경은 Monaco

WeAPP 실행 메커니즘

을 기반으로 패키징과 런타임 프로세스를 천천히 살펴보았습니다. 클로즈베타 자격을 얻지 못해서 시청하면서 추측을 해야 했습니다.

이전 기사에서 wxml과 wxss라는 두 가지 흥미로운 점을 언급했습니다. 이 두 파일은 wxml -> html, wxss -> css로 개별적으로 변환됩니다. 여러 가지 해당 변환이 있습니다:

transWxmlToJs

transWxssToCss

transConfigToPf

transWxmlToHtml

transManager

PF는 여기서 참조합니다. PageFrame에, pageFrame에는 해당 템플릿 파일이 있습니다:

이 스타일은 언뜻 보기에 바꾸기라는 문자열을 생성한 다음 wcc라는 파일과 wcsc tools라는 파일을 작성했습니다.

1. wxml의 custom 태그를 virtual_dom으로 변환하는 데 wcc를 사용합니다

2.wcsc에서 관찰한 현상은 wxss를 css로 변환하는 것입니다

따라서 WeChat 애플릿은 Virtual Dom + WebView와 다소 유사하다는 것을 이해할 수 있습니다. 결국 WAWebView 파일과 webviewSDK 파일이 있습니다.

물론 React + WebView인지 Vue + WebView인지는 중요하지 않습니다. 이제는 WA + WebView가 있습니다. 하하.

WeApp은 아래 그림과 같은 제출 방식을 채택하고 있습니다.

로컬에서 작성한 WeApp은 WeChat 서버에 제출된 후 패키징되어 서버에 업로드되어 전달됩니다. 배포를 위해 CDN에 — —결국.

업로드 과정은 대략 다음과 같습니다.

1. 앱은 날짜 + .wx 파일이라는 이름의 .wx 파일로 패키징됩니다.

2. 패키지 크기를 감지하고 다음 메시지를 표시합니다. 코드 패키지 크기는 xxkb이며, 이는 파일을 삭제하고 다시 시도하십시오. 이 xx는 1024인 것으로 보이므로 앱의 크기는 1M입니다.

3. 해당 APP은 servicewechat.com/wxa-dev/commitsource/?appid=xx&user-version=&user-desc=xx

에 업로드됩니다. 공개 계정 "'미니 프로그램 연동' 기능 전면 오픈

1. 미니 프로그램 연동 대상이 더 이상 제한되지 않습니다

2. 각 공식 계정은 최대 13개까지 연동 가능합니다. 미니 프로그램

3. 동일한 미니 프로그램은 최대 3개의 공개 계정과 연동 가능

자세한 내용은 링크를 참조하세요. 다중 배수가 허용됩니다.

--

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