このページは Cloud Translation API によって翻訳されました。

プロジェクトの構造、ライフサイクル、バンドル

Thomas Steiner

ミニアプリプロジェクトの構造

以前のマークアップ言語、スタイル設定言語、コンポーネントと同様に、ミニアプリプロジェクトの構造でも、ファイル拡張子やデフォルト名などの詳細は異なります。ただし、全体的な考え方はすべてのスーパーアプリプロバイダで同じです。プロジェクト構造は常に次のもので構成されます。

ミニアプリを初期化するルートファイル 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 に似ています。デベロッパーは、明示的に選択しない限り、ビルドパラメータに触れることはありません。処理されたファイルは、最後に署名、暗号化され、1 つ以上の（サブ）パッケージにパッケージ化され、スーパーアプリプロバイダのサーバーにアップロードされます。サブパッケージは遅延読み込みを目的としているため、ミニアプリを一度にすべてダウンロードする必要はありません。パッケージの詳細は非公開であり、ドキュメント化されていません。ただし、WeChat の wxapkg 形式など、一部のパッケージ形式はリバースエンジニアリングされています。

謝辞

この記事は、Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent、Keith Gu が確認しました。