Mobile Platform as a Service:App

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')

ユーザーが初めてミニアプリを起動するとき、このパラメーターは 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() は app.js 内でのみ呼び出し、一度だけ呼び出してください。

• App() 内で定義された関数で getApp() を呼び出さないでください。app インスタンスにアクセスするには this を使用してください。

• page がまだ生成されていないため、onLaunch で <a href="https://docs.alipay.com/mini/framework/page#getcurrentpages">getCurrentPages()</a> を呼び出さないでください。

• getApp() を使用してインスタンスを取得した後は、ライフサイクル関数を非公開で呼び出さないでください。

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"
  ]
}

注意：page が省略された場合、デフォルトでホームページが使用されます。

window

window プロパティは、ミニアプリのステータスバー、ナビゲーションバー、タイトル、およびウィンドウの背景色を設定するために使用されます。

サブプロパティには、titleBarColor、defaultTitle、pullRefresh、および allowsBounceVertical が含まれます。

例：

{
  "window":{
    "defaultTitle": "Alipay API Feature Demo"
  }
}

tabBar

ご利用のミニアプリが、クライアントウィンドウの下部にあるタブバーを使用してページを切り替えることができるマルチタブアプリケーションである場合、tabBar 設定項目を使用して、タブバーの外観と、タブが選択されたときに表示される対応するページを指定できます。

注意：

• ページナビゲーション (my.navigateTo) またはページリダイレクト (my.redirectTo) によって到達したページでは、そのページが tabBar 構成で定義されていても、下部のタブバーは表示されません。

• tabBar の最初のページはホームページでなければなりません。

tabBar の構成

Item の構成

icon の推奨サイズは 60 × 60 px です。システムは、入力された画像をこのサイズに合わせて非比例的に伸縮させます。

例：

{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "Home"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "Logs"
      }
    ]
  }
}

起動パラメーター

ネイティブコードからミニアプリを開くときに、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);