ミニアプリ プロジェクトの構造
これまではマークアップ言語、スタイル設定言語、コンポーネントについて取り上げてきました。ミニアプリ プロジェクトの構造もこれと同じで、ファイル拡張子やデフォルト名などの詳細も異なります。全体的な考え方は、すべてのスーパーアプリ プロバイダで同じです。プロジェクト構造は常に次の要素で構成されます。
- ミニアプリを初期化するルートファイル
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 と同等です。Next.js では、デベロッパーが明示的に選択しない限り、ビルド パラメータには関与しません。結果として処理されたファイルは、最終的に署名、暗号化され、1 つまたは複数の（サブ）パッケージにパッケージ化されます。このパッケージは、スーパーアプリ プロバイダのサーバーにアップロードされます。サブパッケージは遅延読み込みを想定しているため、ミニアプリを一度にすべてダウンロードする必要はありません。パッケージの詳細は記載されていませんが、WeChat の wxapkg 形式などの一部のパッケージ形式はリバース エンジニアリングが行われています。
謝辞
この記事は、Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent、Keith Gu によってレビューされました。