개발자 환경
이제 미니 앱 자체를 다루었으므로 다양한 슈퍼 앱 플랫폼의 개발자 환경에 집중해 보겠습니다. 모든 플랫폼의 미니 앱 개발은 슈퍼 앱 플랫폼에서 무료로 제공하는 IDE에서 이루어집니다. 더 많은 IDE가 있지만 가장 인기 있는 4가지와 비교를 위한 퀵 앱용 5번째 IDE에 집중해 보겠습니다.
미니 앱 IDE
슈퍼 앱과 마찬가지로 대부분의 IDE는 중국어로만 제공됩니다. 최신 버전이 아닐 수 있으므로 때때로 제공되는 영어 (또는 해외) 버전이 아닌 중국어 버전을 설치해야 합니다. macOS 개발자는 일부 IDE가 서명되지 않았으므로 macOS에서 설치 프로그램을 실행하지 않는다는 점에 유의하세요. Apple 도움말에 설명된 대로 이 문제를 사용자 책임하에 우회할 수 있습니다.
미니 앱 스타터 프로젝트
미니 앱 개발을 빠르게 시작할 수 있도록 모든 슈퍼 앱 제공업체는 즉시 다운로드하고 테스트할 수 있으며 때로는 다양한 IDE의 '새 프로젝트' 마법사에 통합되는 데모 앱을 제공합니다.
개발 흐름
IDE를 실행하고 (데모) 미니 앱을 로드하거나 만든 후에는 항상 로그인하는 것이 첫 번째 단계입니다. 일반적으로 IDE에서 생성된 슈퍼 앱 (이미 로그인한 상태)으로 QR 코드를 스캔하기만 하면 됩니다. 비밀번호를 입력해야 하는 경우는 매우 드뭅니다. 로그인하면 IDE에서 사용자의 ID를 인식하고 프로그래밍, 디버깅, 테스트, 검토를 위해 앱 제출을 시작할 수 있습니다. 다음에서는 위의 단락에 언급된 5가지 IDE의 스크린샷을 확인할 수 있습니다.
보시다시피 모든 IDE의 기본 구성요소는 매우 유사합니다. 항상 VS Code를 지원하는 동일한 프로젝트인 Monaco Editor를 기반으로 하는 코드
편집기가 있습니다. 모든 IDE에는 Chrome DevTools 프런트엔드를 기반으로 하는 디버거가 있으며, 이에 관한 자세한 내용은 나중에 설명합니다 (디버거 참고). IDE 자체는 NW.js 또는 Electron 앱으로 구현되며, IDE의 시뮬레이터는 NW.js <webview> 태그 또는 Electron <webview> 태그로 구현되며, 이는 Chromium <webview> 태그를 기반으로 합니다. IDE 내부에 관심이 있다면
키보드
단축키 Control+Alt+I (또는
Command+Option+I on Mac)를 사용하여 Chrome DevTools로 검사하면 되는 경우가 많습니다.
<webview> 태그로 구현되는 것을 확인할 수 있습니다.
시뮬레이터 및 실제 기기 테스트 및 디버깅
시뮬레이터는 Chrome DevTools' 기기 모드에서 알 수 있는 것과 비슷합니다. 다양한 Android 및 iOS 기기를 시뮬레이션하고, 크기와 기기 방향을 변경할 수 있을 뿐만 아니라 다양한 네트워크 상태, 메모리 압력, 바코드 읽기 이벤트, 예기치 않은 종료, 다크 모드를 시뮬레이션할 수 있습니다.
기본 제공 시뮬레이터는 앱의 동작 방식을 대략적으로 파악하는 데 충분하지만 일반 웹 앱과 마찬가지로 기기 내 테스트는 대체할 수 없습니다. 개발 중인 미니 앱을 테스트하는 것은 QR 코드를 스캔하는 것만큼 간단합니다. 예를 들어 ByteDance DevTools에서 실제 기기로 IDE에서 동적으로 생성된 QR 코드를 스캔하면 기기에서 즉시 테스트할 수 있는 클라우드 호스팅 버전의 미니 앱이 표시됩니다. ByteDance의 경우 QR 코드 뒤에 있는 URL
(example)이 호스팅된 페이지
(example)로 리디렉션되며,
이 페이지에는 Douyin 또는 Toutiao와 같은 다양한 ByteDance 슈퍼 앱에서 미니
앱을 미리 볼 수 있는 특수 URI 스킴(예: snssdk1128://)이 포함된 링크가 있습니다
(example 참고).
다른 슈퍼 앱 제공업체는 중간 페이지를 거치지 않고 미리보기를 직접 엽니다.
클라우드 기반 미리보기 원격 디버깅은 더욱 강력한 기능입니다. 마찬가지로 IDE에서 생성된 특수 QR 코드를 스캔하기만 하면 미니 앱이 실제 기기에서 열리고 컴퓨터에서 Chrome DevTools 창이 실행되어 원격 디버깅이 가능합니다.
디버거
요소 디버깅
미니 앱 디버깅 환경은 Chrome DevTools를 사용해 본 적이 있는 사용자에게 매우 친숙합니다. 하지만 워크플로를 미니 앱에 맞게 조정하는 몇 가지 중요한 차이점이 있습니다. 미니 앱 IDE에는 Chrome DevTools' 요소 패널 대신 특정 HTML 방언에 맞게 조정된 맞춤 패널이 있습니다. 예를 들어 WeChat의 경우 패널을 WeiXin Markup Language의 약자인 Wxml이라고 합니다. Baidu DevTools에서는 Swan Element라고 합니다. ByteDance DevTools에서는 it Bxml이라고 합니다. Alipay에서는 AXML이라고 하고 Quick App에서는 패널을 UX라고 합니다. 이러한 마크업 언어는 나중에 자세히 살펴보겠습니다.
<image> 요소 검사
맞춤 요소의 내부
about://inspect/#devices
를 통해 실제 기기에서 WebView를 검사하면 WeChat DevTools가 의도적으로 진실을 숨기고 있음을 알 수 있습니다. WeChat DevTools에서 an
<image>를 표시했지만 실제로 보고 있는 것은 <wx-image>라는 맞춤 요소이며 <div>
가 유일한 하위 요소입니다. 이 맞춤 요소는
Shadow DOM을 사용하지 않는다는 점이 흥미롭습니다. 이러한 구성요소에 관한 자세한 내용은 나중에 설명합니다.
<image> 요소를 검사하면 실제로 <wx-image> 맞춤 요소임을 알 수 있습니다.
CSS 디버깅
또 다른 차이점은 다양한 CSS 방언의 반응형 픽셀을 위한 새 길이 단위 rpx입니다
(이 단위에 관한 자세한 내용은 나중에 설명later). WeChat DevTools는 기기 독립적인 CSS 길이 단위를 사용하여 다양한 기기 크기에 맞게 개발하는 것을 더 직관적으로 만듭니다.
200rpx 0)에 지정된 패딩 검사
성능 감사
성능은 미니 앱의 핵심이므로 WeChat DevTools 및 일부 다른 DevTools에 Lighthouse에서 영감을 받은 감사 도구가 통합되어 있는 것은 놀라운 일이 아닙니다. 감사의 중점 영역은 총점, 성능, 환경, 권장사항입니다. IDE의 뷰는 맞춤설정할 수 있습니다. 아래 스크린샷에서는 감사 도구에 더 많은 화면 공간을 확보하기 위해 코드 편집기를 일시적으로 숨겼습니다.
API 모의
개발자가 별도의 서비스를 설정해야 하는 대신 API 응답 모의는 WeChat DevTools에 직접 포함됩니다. 개발자는 사용하기 쉬운 인터페이스를 통해 API 엔드포인트와 원하는 모의 응답을 설정할 수 있습니다.
감사의 말씀
이 도움말은 Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, Keith Gu가 검토했습니다.