프로젝트 구조, 수명 주기, 번들

미니 앱 프로젝트 구조

이전과 마찬가지로 마크업 언어, 스타일 지정 언어, 구성요소의 경우와 마찬가지로 미니 앱 프로젝트 구조에서도 파일 확장자나 기본 이름과 같은 세부정보가 다릅니다. 이 전반적인 아이디어는 모든 슈퍼 앱 제공업체에 대해 동일합니다. 프로젝트 구조는 항상 다음과 같이 구성됩니다.

  • 미니 앱을 초기화하는 루트 파일 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입니다. 이러한 이벤트의 핸들러는 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 형식과 같은 일부 패키지 형식은 reverse-engineered.

감사의 말씀

이 기사에 대해 리뷰한 사용자 조 메들리, 케이스 바스크, 밀리카 미하즐리야, 앨런 켄트, 그리고 키스 구입니다.