미니 앱 프로젝트 구조
앞서 마크업 언어, 스타일 지정 언어, 구성요소와 마찬가지로 미니 앱 프로젝트 구조를 사용하면 파일 확장자 또는 기본 이름과 같은 세부정보가 달라집니다. 하지만 전반적인 아이디어는 모든 슈퍼 앱 제공업체에 대해 동일합니다. 프로젝트 구조는 항상 다음과 같이 구성됩니다.
- 미니 앱을 초기화하는 루트 파일
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, 빠른 앱에서도 동일합니다.
페이지 수명 주기
앱 수명 주기와 마찬가지로 페이지 수명 주기에도 개발자가 수신 대기하고 반응할 수 있는 수명 주기 이벤트가 있습니다. 이러한 핵심 이벤트는 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 형식과 같은 일부 패키지 형식은 리버스 엔지니어링되었습니다.