Mobile Platform as a Service:アプリ

App は最上位レベルのアプリケーションを表し、すべてのページとグローバルデータを管理し、ライフサイクルメソッドを提供します。 また、App インスタンスを生成するコンストラクターでもあります。 ミニプログラムは App インスタンスです。

概要

各ミニプログラムの最上位レベルには、通常、次の 3 つのファイルが含まれています。

• app.acss: アプリケーションスタイル (オプション)

• app.js: アプリケーションロジック

• app.json: アプリケーション構成

以下は、シンプルな app.json の例です。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "defaultTitle": "Demo"
  }
}

上記の構成では、ミニプログラムには 2 つのページが含まれており、アプリケーションウィンドウのデフォルトタイトルは Demo です。

App は 4 つのイベントを提供し、フックメソッドを設定できます。

• onLaunch: ミニプログラムの起動

• onShow: ミニプログラムがフォアグラウンドに切り替わる

• onHide: ミニプログラムがバックグラウンドに切り替わる

• onError: ミニプログラムエラー

app.js のコードサンプルは次のとおりです。

App({
  onLaunch(options) {
    // ミニプログラムの初期化
  },
  onShow(options) {
    // ミニプログラムの表示
  },
  onHide() {
    // ミニプログラムの非表示
  },
  onError(msg) {
    console.log(msg)
  },
  globalData: {
    foo: true,
  }
})

App()

App() は、object をパラメーターとして受け取り、ミニプログラムのライフサイクルとその他の情報を構成します。

パラメーターの説明:

フォアグラウンドとバックグラウンドの定義: 左上隅の閉じるボタンをクリックするか、ホームボタンを押して mPaaS クライアントを終了すると、ミニプログラムは直接破棄されずにバックグラウンドに入ります。 mPaaS クライアントに再度入るか、ミニプログラムを再度開くと、バックグラウンドからフォアグラウンドに戻ります。

ミニプログラムが一定時間バックグラウンドに入った場合、またはシステムリソースの使用率が高すぎる場合にのみ、実際に破棄されます。

onLaunch/onShow メソッドのパラメーター

• ネイティブ起動のパラメーター渡し方法は次のとおりです。

  

• URL 起動のパラメーター渡し方法は次のとおりです。query は起動パラメーターの query フィールドから解析され、path は起動パラメーターの page フィールドから解析されます。たとえば、次の URL の場合:

  alipays://platformapi/startapp?appId=1999&query=number%3D1&page=x%2Fy%2Fz

  • query パラメーターは次のように解析されます。

    number%3D1 === encodeURIComponent('number=1')

  • path パラメーターは次のように解析されます。

    x%2Fy%2Fz === encodeURIComponent('x/y/z')

page が省略されている場合、デフォルトでホームページになります

そのため、ミニプログラムを初めて起動するときに、このパラメーターは onLaunch メソッドから取得できます。または、スキーマを使用してバックグラウンドからミニプログラムを再度開いたときに、このパラメーターを onShow メソッドから取得することもできます。

App({
  onLaunch(options) {
    // 初回起動時
    // options.query == {number:1}
  },
  onShow(options) {
    // スキーマによってバックグラウンドから再起動された場合
    // options.query == {number:1}
  },
})

getApp()

ミニプログラムインスタンスを取得するためのグローバル関数 getApp() を提供しています。これは通常、各サブページで最上位アプリケーションを取得するために使用されます。

var app = getApp()
console.log(app.globalData) // globalData を取得する

グローバルデータは App() で設定でき、各サブページはグローバル関数 getApp() を介してグローバルアプリケーションインスタンスを取得できます。次に例を示します。

// app.js
App({
  globalData: 1
})

// a.js

// localValue は a.js でのみ有効
var localValue = 'a'

// app インスタンスを生成する
var app = getApp()

// グローバルデータを取得して変更する
app.globalData++

// b.js

// localValue は b.js でのみ有効
var localValue = 'b'

// a.js が最初に実行された場合、globalData は 2 を返す
console.log(getApp().globalData)

上記のコードでは、a.js と b.js は両方とも変数 localValue を宣言していますが、各スクリプトで宣言された変数と関数はそのファイル内でのみ有効であるため、互いに影響を与えません。

app.json

app.json はグローバル構成に使用され、ページファイルとウィンドウ表示のパスを決定し、ネットワークタイムアウト、複数のタブなどを設定します。

以下は、いくつかの構成項目を含むシンプルな app.json です。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "defaultTitle": "Demo"
  }
}

app.json の構成は次のとおりです。

pages

pages プロパティは配列で、各項目はミニプログラムのページを指定する文字列です。各項目は、対応するページのパス情報を表します。配列の最初の項目は、ミニプログラムのホームページを表します。ミニプログラムのページを追加または削除するには、pages 配列を変更する必要があります。

ページパスには js サフィックスは必要ありません。フレームワークは、同じ名前の .json、.js、.axml、.acss ファイルを自動的にロードします。

たとえば、開発ディレクトリが次のようになっている場合:

pages/
pages/index/index.axml
pages/index/index.js
pages/index/index.acss
pages/logs/logs.axml
pages/logs/logs.js
app.js
app.json
app.acss

app.json は次のようにコーディングする必要があります。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

window

window は、ミニプログラムの共通ステータスバー、ナビゲーションバー、タイトル、ウィンドウの背景色を設定するために使用されます。

そのサブ属性には、titleBarColor、defaultTitle、pullRefresh、allowsBounceVertical が含まれます。

次に例を示します。

{
  "window":{
    "defaultTitle": "Alipay インターフェース機能デモ"
  }
}

tabBar

ミニプログラムがマルチタブアプリケーション (ウィンドウの下部に複数のタブがあり、ページを切り替えることができる) の場合、tabBar を使用して、タブバーの表示とタブをタップしたときに表示されるページを設定できます。

説明

• ページジャンプ（my.navigateTo）またはページリダイレクト（my.redirectTo）で到達したページは、tabBar 構成で定義されたページであっても、下部のタブバーを表示しません。

• tabBar の最初のページは、ホームページである必要があります。

tabBar 構成:

各項目の設定:

推奨されるアイコンサイズは 60*60 px です。インポートされたイメージはすべて、非比例的に拡大/縮小されます。

例:

{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "ホームページ"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "ログ"
      }
    ]
  }
}

スタートアップ パラメーター

ネイティブ コードからミニプログラムを開くときに、page パラメーターと query パラメーターを指定できます。Page は特定のページを開くパスを指定するために使用され、query はパラメーターを渡すために使用されます。

• iOS コードサンプル

  NSDictionary *param = @{@"page":@"pages/card/index", @"query":@"own=1&sign=1&code=2452473"};
  MPNebulaAdapterInterface startTinyAppWithId:@"1234567891234568" params:param];

• Android コードサンプル

  Bundle param = new Bundle();
  param.putString("page", "pages/card/index");
  param.putString("query", "own=1&sign=1&code=2452473");
  MPNebula.startApp("1234567891234568",param);