Mobile Platform as a Service:App

O objeto App representa a aplicação de nível superior. Esse construtor cria uma instância de App, que corresponde ao próprio miniapp. O objeto App gerencia todas as páginas e os dados globais, além de fornecer métodos de ciclo de vida.

Introdução

O diretório raiz de cada miniapp geralmente inclui três arquivos:

• app.acss: Estilos da aplicação (opcional)

• app.js: Lógica da aplicação

• app.json: Configuração da aplicação

Veja abaixo um exemplo simples de arquivo app.json:

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

Essa configuração especifica que o miniapp contém duas páginas e define o título padrão da janela da aplicação como Demo.

O objeto App fornece quatro eventos para definição de métodos de gancho:

• onLaunch: Inicialização do miniapp.

• onShow: Miniapp trazido para o primeiro plano.

• onHide: Miniapp enviado para o segundo plano.

• onError: Ocorrência de erro no miniapp.

Confira a seguir um exemplo simples de arquivo app.js:

App({
  onLaunch(options) {
    // Miniapp initialization
  },
  onShow(options) {
    // Miniapp is displayed
  },
  onHide() {
    // Miniapp is hidden
  },
  onError(msg) {
    console.log(msg)
  },
  globalData: {
    foo: true,
  }
})

App()

A função App() aceita um parâmetro do tipo object para configurar o ciclo de vida do miniapp e outras definições.

Descrição dos parâmetros:

Definição de primeiro e segundo plano: Quando o usuário toca no botão de fechar no canto superior esquerdo ou pressiona o botão Home do dispositivo para sair do cliente mPaaS, o miniapp não é destruído imediatamente; ele entra em segundo plano. Ao reabrir o cliente mPaaS ou acessar o miniapp novamente, a aplicação volta ao primeiro plano.

O miniapp só é destruído após permanecer em segundo plano por um determinado período ou caso consuma recursos excessivos do sistema.

Parâmetros dos métodos onLaunch/onShow

• Para passar parâmetros na inicialização via código nativo:

• Para passar parâmetros na inicialização via URL, o campo query é extraído do parâmetro query de inicialização, enquanto o campo path vem do parâmetro page. Por exemplo, considere a seguinte URL:

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

  • O parâmetro query é interpretado da seguinte forma:

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

  • O parâmetro path é interpretado da seguinte forma:

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

Na primeira vez que o usuário iniciar o miniapp, obtenha esse parâmetro pelo método onLaunch. Se o miniapp estiver em segundo plano e for reaberto por meio de um esquema, utilize o método onShow para obter o parâmetro.

App({
  onLaunch(options) {
    // First time opening
    // options.query == {number:1}
  },
  onShow(options) {
    // Reopened from the background by a scheme
    // options.query == {number:1}
  },
})

getApp()

A função global getApp() recupera a instância do miniapp. Geralmente, subpáginas utilizam essa função para acessar a instância da aplicação de nível superior.

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

Observações:

• Chame App() apenas em app.js e faça isso somente uma vez.

• Não chame getApp() dentro de funções definidas em App(). Utilize this para acessar a instância app.

• Não invoque <a href="https://docs.alipay.com/mini/framework/page#getcurrentpages">getCurrentPages()</a> em onLaunch, pois a page ainda não foi gerada nesse momento.

• Após recuperar uma instância com getApp(), não chame funções de ciclo de vida diretamente.

É possível definir dados globais em App(). As subpáginas obtêm a instância global da aplicação por meio da função getApp(). Exemplo:

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

// a.js

// localValue is valid only in a.js
var localValue = 'a'

// Create an app instance
var app = getApp()

// Get the global data and change it
app.globalData++

// b.js

// localValue is valid only in b.js
var localValue = 'b'

// If a.js runs first, globalData returns 2
console.log(getApp().globalData)

No código acima, tanto a.js quanto b.js declaram a variável localValue. Essas variáveis são independentes, pois declarações de variáveis e funções em um script têm validade restrita ao próprio arquivo.

app.json

O arquivo app.json configura globalmente a aplicação. Ele define os caminhos dos arquivos de página, a aparência da janela, tempos limite de rede, configurações de abas múltiplas, entre outros aspectos.

Veja abaixo um exemplo simples de arquivo app.json com algumas opções de configuração.

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

Os itens de configuração do app.json são descritos a seguir.

pages

A propriedade pages é um array de strings que especifica as páginas do miniapp. Cada item representa o caminho de uma página, sendo que o primeiro item define a página inicial. Para adicionar ou remover páginas, modifique o array pages.

Não é necessário adicionar o sufixo .js ao caminho da página. O framework carrega automaticamente os arquivos .json, .js, .axml e .acss correspondentes.

Por exemplo, se a pasta de desenvolvimento tiver a seguinte estrutura:

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

O arquivo app.json deve ser escrito da seguinte maneira:

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

Observação: Se page for omitido, a página inicial será usada por padrão.

window

A propriedade window configura a barra de status, a barra de navegação, o título e a cor de fundo da janela do miniapp.

As subpropriedades incluem titleBarColor, defaultTitle, pullRefresh e allowsBounceVertical.

Exemplo:

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

tabBar

Se o seu miniapp for uma aplicação com múltiplas abas, onde o usuário alterna entre páginas pela barra inferior da janela do cliente, utilize o item de configuração tabBar para definir a aparência da barra e a página correspondente a cada aba selecionada.

Nota:

• Páginas acessadas por navegação (my.navigateTo) ou redirecionamento (my.redirectTo) não exibem a barra de abas inferior, mesmo que estejam definidas na configuração da tabBar.

• A primeira página listada em tabBar deve ser obrigatoriamente a página inicial.

Configuração da tabBar

Configuração do item

O tamanho recomendado para um icon é 60 × 60 px. O sistema estica ou escala qualquer imagem fornecida de forma não proporcional para ajustar-se a esse tamanho.

Exemplo:

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

Parâmetros de inicialização

Ao abrir um miniapp a partir de código nativo, inclua os parâmetros page e query. Use o parâmetro page para especificar o caminho de uma página específica e o parâmetro query para transmitir outros dados.

• Exemplo de código iOS

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

• Exemplo de código Android

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