미니 앱 프로젝트 구조
앞서 마크업 언어, 스타일 지정 언어, 구성요소에서와 마찬가지로 미니 앱 프로젝트 구조에서도 파일 확장자나 기본 이름과 같은 세부정보가 다릅니다. 하지만 전반적인 아이디어는 모든 슈퍼 앱 제공업체에 동일합니다. 프로젝트 구조는 항상 다음과 같이 구성됩니다.
- 미니 앱을 초기화하는 루트 파일
app.js입니다. - 구성 파일
app.json: 대략 웹 앱 매니페스트에 대응합니다. - 공유된 기본 스타일이 있는 선택적 공통 스타일 시트 파일
app.css. - 빌드 정보가 포함된
project.config.json파일
모든 페이지는 pages 폴더의 개별 하위 폴더에 저장됩니다. 각 페이지의 하위 폴더에는 CSS 파일, JS 파일, HTML 파일, 선택적 구성 JSON 파일이 포함됩니다. 모든 파일은 파일 확장자를 제외하고 포함 폴더와 같이 이름을 지정해야 합니다. 이와 같이 미니 앱은 app.json 파일(매니페스트와 유사한 파일)의 디렉터리를 가리키는 포인터만 있으면 되며 모든 하위 리소스를 동적으로 찾을 수 있습니다. 웹 개발자의 관점에서 미니 앱은 다중 페이지 앱입니다.
├── app.js # Initialization logic
├── app.json # Common configuration
├── app.css # Common style sheet
├── project.config.json # Project configuration
└── pages # List of pages
├── index # Home page
│ ├── index.css # Page style sheet
│ ├── index.js # Page logic
│ ├── index.json # Page configuration
│ └── index.html # Page markup
└── other # Other page
├── other.css # Page style sheet
├── other.js # Page logic
├── other.json # Page configuration
└── other.html # Page markup
미니 앱 수명 주기
미니 앱은 전역적으로 정의된 App() 메서드를 호출하여 슈퍼 앱에 등록해야 합니다.
앞서 설명한 프로젝트 구조를 언급하면 app.js에서 이를 수행합니다. 미니 앱 수명 주기는 기본적으로 launch, show, hide, error의 4가지 이벤트로 구성됩니다. 이러한 이벤트의 핸들러는 구성 객체의 형태로 App() 메서드에 전달될 수 있습니다. 이 메서드에는 모든 페이지에서 전역적으로 사용할 수 있는 데이터를 보유한 globalData 속성이 포함될 수도 있습니다.
/* app.js */
App({
onLaunch(options) {
// Do something when the app is launched initially.
},
onShow(options) {
// Do something when the app is shown.
},
onHide() {
// Do something when the app is hidden.
},
onError(msg) {
console.log(msg);
},
globalData: "I am global data",
});
평소와 마찬가지로 개별 세부정보는 다양하지만 WeChat, Alipay, Baidu, ByteDance, Quick App의 개념은 동일합니다.
페이지 수명 주기
앱 수명 주기와 마찬가지로 페이지 수명 주기에도 개발자가 수신 대기하고 반응할 수 있는 수명 주기 이벤트가 있습니다. 이러한 핵심 이벤트는 load, show, ready, hide, unload입니다. 일부 플랫폼에서는 pulldownrefresh와 같은 추가 이벤트를 제공합니다. 이벤트 핸들러 설정은 각 페이지에 정의된 Page() 메서드에서 이루어집니다. 이전 프로젝트 구조의 index 또는 other 페이지의 경우 각각 index.js 또는 other.js에서 발생합니다.
/* index.js */
Page({
data: {
text: "This is page data.",
},
onLoad: function (options) {
// Do something when the page is initially loaded.
},
onShow: function () {
// Do something when the page is shown.
},
onReady: function () {
// Do something when the page is ready.
},
onHide: function () {
// Do something when the page is hidden.
},
onUnload: function () {
// Do something when the page is closed.
},
onPullDownRefresh: function () {
// Do something when the user pulls down to refresh.
},
onReachBottom: function () {
// Do something when the user scrolls to the bottom.
},
onShareAppMessage: function () {
// Do something when the user shares the page.
},
onPageScroll: function () {
// Do something when the user scrolls the page.
},
onResize: function () {
// Do something when the user resizes the page.
},
onTabItemTap(item) {
// Do something when the user taps the page's tab.
},
customData: {
foo: "bar",
},
});
빌드 프로세스
미니 앱의 빌드 프로세스는 개발자로부터 추상화됩니다. 내부적으로는 변환 컴파일 및 축소를 위한 Babel 컴파일러 및 postcss CSS 변환기와 같은 산업용 도구를 사용합니다. 빌드 환경은 Next.js 또는 create-react-app의 빌드 환경과 유사합니다. 개발자가 명시적으로 동의하지 않는 경우 빌드 매개변수를 변경하지 않습니다. 그 결과로 처리된 파일은 최종적으로 서명되고 암호화되고 하나 또는 여러 개의 (하위) 패키지로 패키징되며, 그런 다음 슈퍼 앱 제공자의 서버에 업로드됩니다. 하위 패키지는 지연 로드를 위한 것이므로 미니 앱을 한 번에 모두 다운로드할 필요는 없습니다. 패키징 세부정보는 비공개로 유지되며 문서화되지 않지만 WeChat의 wxapkg 형식과 같은 일부 패키지 형식은 리버스 엔지니어링되었습니다.
감사의 말
이 문서는 Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, Keith Gu가 검토했습니다.