Mobile Platform as a Service：Aplikasi

Objek App merepresentasikan aplikasi tingkat teratas. Ini adalah konstruktor yang membuat instans App, yaitu program mini itu sendiri. Objek App mengelola semua halaman, data global, dan menyediakan metode siklus hidup.

Pengenalan

Direktori root setiap program mini umumnya mencakup tiga file:

• app.acss: Gaya aplikasi (opsional)

• app.js: Logika aplikasi

• app.json: Konfigurasi aplikasi

Berikut ini adalah contoh file app.json yang sederhana:

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

Konfigurasi ini menentukan bahwa program mini berisi dua halaman dan judul default jendela aplikasi adalah Demo.

Objek App menyediakan empat event tempat Anda dapat mendefinisikan metode panggilan balik:

• onLaunch: Program mini dimulai.

• onShow: Program mini dialihkan ke latar depan.

• onHide: Program mini dialihkan ke latar belakang.

• onError: Terjadi error pada program mini.

Berikut ini adalah contoh file app.js yang sederhana:

App({
  onLaunch(options) {
    // Inisialisasi program mini
  },
  onShow(options) {
    // Program mini ditampilkan
  },
  onHide() {
    // Program mini disembunyikan
  },
  onError(msg) {
    console.log(msg)
  },
  globalData: {
    foo: true,
  }
})

App()

Fungsi App() menerima parameter berupa objek object yang dapat digunakan untuk mengonfigurasi siklus hidup program mini dan pengaturan lainnya.

Deskripsi parameter:

Definisi latar depan dan latar belakang: Saat pengguna mengetuk tombol tutup di pojok kiri atas atau menekan tombol Home perangkat untuk meninggalkan client mPaaS, program mini tidak langsung dihapus. Sebaliknya, program tersebut masuk ke latar belakang. Saat pengguna kembali membuka client mPaaS atau membuka kembali program mini tersebut, program akan kembali ke latar depan.

Program mini hanya dihapus setelah berada di latar belakang selama periode tertentu atau jika mengonsumsi terlalu banyak sumber daya sistem.

Parameter metode onLaunch/onShow

• Untuk pass parameter saat startup dari kode native:

• Untuk pass parameter saat startup dari URL, query diurai dari bidang query pada parameter startup, dan path diurai dari bidang page. Misalnya, untuk URL berikut:

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

  • Parameter query diurai sebagai berikut:

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

  • Parameter path diurai sebagai berikut:

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

Saat pengguna pertama kali menjalankan program mini, Anda dapat memperoleh parameter ini dari metode onLaunch. Jika program mini berada di latar belakang dan dibuka kembali menggunakan skema, Anda dapat memperoleh parameter tersebut dari metode onShow.

App({
  onLaunch(options) {
    // Pertama kali dibuka
    // options.query == {number:1}
  },
  onShow(options) {
    // Dibuka kembali dari latar belakang melalui skema
    // options.query == {number:1}
  },
})

getApp()

Fungsi global getApp() disediakan untuk mengambil instans program mini. Fungsi ini umumnya digunakan di subhalaman untuk mengambil instans aplikasi tingkat teratas.

var app = getApp()
console.log(app.globalData) // Mendapatkan globalData

Catatan:

• Panggil App() hanya di app.js, dan panggil hanya sekali.

• Jangan panggil getApp() di dalam fungsi yang didefinisikan dalam App(). Gunakan this untuk mengakses instans app.

• Jangan panggil <a href="https://docs.alipay.com/mini/framework/page#getcurrentpages">getCurrentPages()</a> di onLaunch karena page belum dibuat.

• Setelah mengambil instans menggunakan getApp(), jangan panggil fungsi siklus hidup secara privat.

Anda dapat mengatur data global di App(). Subhalaman dapat mengambil instans aplikasi global melalui fungsi global getApp(). Contohnya:

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

// a.js

// localValue hanya berlaku di a.js
var localValue = 'a'

// Membuat instans aplikasi
var app = getApp()

// Mendapatkan data global dan mengubahnya
app.globalData++

// b.js

// localValue hanya berlaku di b.js
var localValue = 'b'

// Jika a.js dijalankan terlebih dahulu, globalData mengembalikan nilai 2
console.log(getApp().globalData)

Pada kode di atas, baik a.js maupun b.js mendeklarasikan variabel localValue. Variabel-variabel ini tidak saling memengaruhi karena variabel dan fungsi yang dideklarasikan dalam suatu skrip hanya berlaku dalam file tersebut.

app.json

File app.json digunakan untuk konfigurasi global. File ini menentukan jalur file halaman, tampilan jendela, pengaturan timeout jaringan, pengaturan multi-tab, dan lainnya.

Berikut ini adalah contoh file app.json sederhana yang mencakup beberapa opsi konfigurasi.

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

Item konfigurasi app.json adalah sebagai berikut.

pages

Properti pages adalah array string yang menentukan halaman-halaman dalam program mini. Setiap item merepresentasikan jalur ke suatu halaman. Item pertama dalam array menentukan halaman utama program mini. Untuk menambah atau menghapus halaman dalam program mini, Anda harus memodifikasi array pages.

Anda tidak perlu menambahkan akhiran .js pada jalur halaman. Framework secara otomatis memuat file .json, .js, .axml, dan .acss dengan nama yang sama.

Contohnya, jika struktur folder pengembangan adalah:

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

Maka file app.json harus ditulis sebagai berikut.

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

Catatan: Jika page diabaikan, halaman utama akan digunakan secara default.

window

Properti window digunakan untuk mengatur status bar, navigation bar, judul, dan warna latar belakang jendela program mini.

Sub-properti termasuk titleBarColor, defaultTitle, pullRefresh, dan allowsBounceVertical.

Contoh:

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

tabBar

Jika program mini Anda merupakan aplikasi multi-tab tempat pengguna dapat berpindah antarhalaman menggunakan bilah tab di bagian bawah jendela client, Anda dapat menggunakan item konfigurasi tabBar untuk menentukan tampilan bilah tab dan halaman yang sesuai saat tab dipilih.

Catatan:

• Untuk halaman yang diakses melalui navigasi halaman (my.navigateTo) atau pengalihan halaman (my.redirectTo), bilah tab bawah tidak ditampilkan, meskipun halaman tersebut didefinisikan dalam konfigurasi tabBar.

• Halaman pertama dalam tabBar harus merupakan halaman utama.

Konfigurasi tabBar

Konfigurasi item

Ukuran yang direkomendasikan untuk icon adalah 60 × 60 px. Sistem akan meregangkan atau menskalakan gambar input apa pun secara non-proporsional agar sesuai dengan ukuran ini.

Contohnya:

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

Parameter startup

Saat Anda membuka program mini dari kode native, Anda dapat menyertakan parameter page dan query. Gunakan parameter page untuk menentukan jalur ke halaman tertentu dan parameter query untuk mengirimkan parameter lainnya.

• Contoh kode iOS

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

• Contoh kode Android

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