개발자 환경
미니 앱을 각각 알아봤으므로 이제 다양한 슈퍼 앱 플랫폼의 개발자 환경에 초점을 맞추고 싶습니다. 모든 플랫폼의 미니 앱 개발은 슈퍼 앱 플랫폼에서 무료로 제공하는 IDE에서 이루어집니다. 이 외에도 가장 인기 있는 4가지 앱, 그리고 빠른 앱 비교를 위해 5번째에 집중해 보겠습니다.
미니 앱 IDE
슈퍼 앱과 마찬가지로 대부분의 IDE는 중국어로만 제공됩니다. 실제로 최신 버전이 아닐 수 있으므로 경우에 따라 제공되는 영어 (또는 해외) 버전이 아니라 중국어 버전을 설치해야 합니다. macOS 개발자라면 일부 IDE가 서명되지 않는다는 점에 유의하세요. 즉, macOS에서는 설치 프로그램 실행을 거부합니다. Apple 도움말에서 설명한 대로 책임을 가지고 우회할 수 있습니다.
미니 앱 시작 프로젝트
미니 앱 개발을 빠르게 시작하기 위해 모든 슈퍼 앱 제공업체는 즉시 다운로드하여 테스트할 수 있고 때로는 다양한 IDE의 'New Project' 마법사에 통합된 데모 앱을 제공합니다.
개발 흐름
IDE를 실행하고 (데모) 미니 앱을 로드하거나 만든 후 첫 번째 단계는 항상 로그인하는 것입니다. 일반적으로는 IDE에서 생성된 Super 앱 (이미 로그인한 경우)으로 QR 코드를 스캔하기만 하면 됩니다. 비밀번호를 입력해야 하는 경우는 매우 드뭅니다. 로그인하면 IDE가 사용자의 신원을 알고 있으므로 앱을 프로그래밍, 디버깅, 테스트, 제출하여 검토를 받을 수 있습니다. 다음에서 위 단락에 언급된 5개의 IDE 스크린샷을 볼 수 있습니다.
보시다시피 모든 IDE의 기본 구성요소는 매우 유사합니다. VS Code를 지원하는 동일한 프로젝트인 Monaco Editor 기반의 코드 편집기는 항상 제공됩니다. 모든 IDE에는 Chrome DevTools 프런트엔드를 기반으로 하는 디버거가 있으며 일부 수정사항은 나중에 자세히 다룹니다 (Debugger 참고). IDE는 그 자체로 NW.js 또는 Electron 앱으로 구현되며 IDE의 시뮬레이터는 NW.js <webview> 태그 또는 Electron <webview> 태그로 구현되며, 이는 결과적으로 Chromium <webview> 태그를 기반으로 합니다. IDE 내부에 관심이 있다면 Chrome DevTools에서 Control+Alt+I (Mac의 경우 Command+Option+I) 단축키를 사용해 간단히 검사할 수 있습니다.
<webview> 태그로 인식됩니다.
시뮬레이터와 실제 기기 테스트 및 디버깅
시뮬레이터는 Chrome DevTools의 기기 모드에서 알 수 있는 것과 유사합니다. 다양한 Android 및 iOS 기기를 시뮬레이션하고 배율과 기기 방향을 변경할 뿐만 아니라 다양한 네트워크 상태, 메모리 압력, 바코드 판독 이벤트, 예기치 않은 종료 및 어두운 모드도 시뮬레이션할 수 있습니다.
내장된 시뮬레이터로도 앱의 동작 방식을 대략적으로 파악할 수 있지만, 일반 웹 앱과 마찬가지로 온디바이스 테스트는 대체가 불가능합니다. 개발 중인 미니 앱을
QR 코드 스캔만 하면 테스트하실 수 있습니다 예를 들어 ByteDance DevTools에서 IDE에서 동적으로 생성된 QR 코드를 실제 기기로 스캔하면 클라우드 호스팅 버전의 미니 앱이 생성되어 기기에서 즉시 테스트할 수 있습니다. 이 기능이 ByteDance에 작동하는 방식은 QR 코드 뒤에 있는 URL(예)이 호스팅된 페이지(예)로 리디렉션되는 것입니다. 여기에는 Douyin이나 Toutiao와 같은 다양한 ByteDance 슈퍼 앱에서 미니 앱을 미리 보기 위해 특수 URI 스키마가 있는 링크(예: snssdk1128://)가 포함되어 있습니다(예 참고).
다른 슈퍼 앱 제공업체는 중간 페이지를 거치지 않고 미리보기를 직접 엽니다.
훨씬 더 매력적인 기능은 클라우드 기반 미리보기 원격 디버깅입니다. 마찬가지로 IDE에서 생성된 특수한 QR 코드를 스캔하기만 하면 미니 앱이 실제 기기에서 열리고 컴퓨터에서 원격 디버깅을 위해 Chrome DevTools 창이 실행됩니다.
디버거
요소 디버깅
미니 앱 디버깅 환경은 Chrome DevTools를 사용해 본 경험이 있는 사람에게 매우 익숙합니다. 하지만 미니 앱에 맞춤화된 워크플로를 만드는 몇 가지 중요한 차이점이 있습니다. 미니 앱 IDE에는 Chrome DevTools의 요소 패널 대신 특정 HTML 언어에 맞게 조정된 맞춤설정된 패널이 있습니다. 예를 들어 WeChat의 경우 패널은 WeiXin Markup Language의 약자인 Wxml입니다. Baidu DevTools에서는 Swan Element라고 합니다. ByteDance DevTools에서는 Bxml이라고 합니다. Alipay의 이름은 AXML로, 빠른 앱에서는 이 패널을 간단히 UX라고 합니다. 마크업 언어에 대해서는 나중에 자세히 살펴보겠습니다.
<image> 요소 검사
고급 맞춤 요소
about://inspect/#devices를 통해 실제 기기에서 WebView를 검사하면 WeChat DevTools가 의도적으로 진실을 숨기고 있음을 알 수 있습니다. WeChat DevTools에 <image>가 표시된 경우 실제로 표시되는 것은 <div>가 유일한 하위 요소로 포함된 <wx-image>라는 맞춤 요소입니다. 흥미롭게도 이 맞춤 요소는 Shadow DOM을 사용하지 않습니다. 이 구성요소에 대해서는 나중에 자세히 설명합니다.
<image> 요소를 검사하면 실제로 <wx-image> 맞춤 요소임을 알 수 있습니다.
CSS 디버깅
또 다른 차이점은 다양한 CSS 언어에서 반응형 픽셀의 새로운 길이 단위 rpx입니다(이 단원 뒷부분에서 자세히 설명). 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가 검토했습니다.