App represents the top application, which administrates all page and global data, and provides a life cycle method. It is also a construction method generating App instance. A mini program is an App instance.

Introduction

The top of each mini program generally contains three files:

• app.acss：app style (optional)
• app.js：app logic
• app.json：App configuration

Here is a simple app.json：

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

In the above configuration, it is specified that the mini program contains two pages with the default title of “Demo” in the window.

“App” provides four events to set the hook method:

• onLaunch：mini program Start
• onShow：mini program switch to foreground
• onHide：mini program switch to background

• onError: mini program errors

  Here’s a “simple app.js” code as follows：

  App({
    onLaunch(options) {
        // 小程序初始化
    },
    onShow(options) {
        // 小程序显示
    },
    onHide() {
        // 小程序隐藏
    },
    onError(msg) {
        console.log(msg)
    },
    globalData: {
        foo: true,
    }
  })

  App()

App() accepts an “object” as a parameter to configure the life cycle of the mini program and others.

Description of parameters：

Definition of foreground and background: When users clickthe upper left for closing or press Home key to leave the “mPaaS” client, the mini program will not be uninstalled directly, but will run in the background. When you enter the “mPaaS” client again or open the mini program again, you will enter the foreground from the background.

Only when the mini program enters the background for certain time, or takes up too many system resources, will it be truly uninstalled.

Parameters of onLaunch/onShow method

The method of parameter passing for “Native” starting：

//启动小程序demo
Bundle param = new Bundle();
String queryParam = "param1=value1&param2=value2&param3=value3";
param.putString("query",queryParam);
LauncherApplicationAgent.getInstance().getMicroApplicationContext().startApp(s:null,s1:"2018080616290001",param);

Here’s the parameter transmission method for URL starting: “query” is parsed from the “query” field of the start parameter, and “path” is parsed from the “page” field of the starting parameter. Here are examples in the following URL:

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

• The “query” parameter is parsed as follows：
  1. number%3D1 === encodeURIComponent(‘number=1’)
• The “path” parameter is parsed as follows：
  1. x%2Fy%2Fz === encodeURIComponent(‘x/y/z’)

The page will switch to the homepage by default when the page cannot be accessed.

Then, when usersstart the mini program for the first time, this parameter can be obtained by the onLaunch method. Or it can be also obtained by the onShow method when the mini program in the background is re-opened with the schema.

App({
    onLaunch(options) {
        // 第一次打开
        // options.query == {number:1}
    },
    onShow(options) {
        // 从后台被 scheme 重新打开
        // options.query == {number:1}
    },
})

getApp()

We provide a global “getApp()” function, which can obtain instances of mini programsand be generally used to obtain top applications among various sub-sides.

var app = getApp()
console.log(app.globalData) // 获取 globalData

Note:

• “App()” must be called in “app.js” and cannot be called for multiple times.
• Don’t call “getApp()” in the functions defined in “App()”, use “this” to get the “app” instance.
• Don’t call “getCurrentPages()” in “onLaunch” because“page” has not yet been created.
• After getting the instance through “getApp()”, do not call the life cycle function.

Global data can be set in “App()”, and each sub-page can obtain global application instances through the global function “getApp()”. E.g:

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

In the above code, both “a.js” and “b.js” declare the variable “localValue”, they will not affect each other because the variables and functions declared by each script are only valid in the file.

app.json

“app.json” is used for global configuration, determining the path of the page file, window performance, and setting the network timeout and multiple tabs, etc. The following is a simple configuration of“app.json” that includes some configuration options.

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

app.json configuration options are as follows:

pages

The “pages” attribute is an array with each item as a string, which is used to specify the mini program. Each item represents the path information of the corresponding page, and the first item of the array represents homepage of the mini program. Adding/reducing pages in the mini program requires modification to the “pages” array.

The page path does not need to write the “js” suffix. The framework will automatically load the “.json”, “.js”, “.axml”, and “.acss” files with the same name. For example, if the development directory is this:

.
├── app.acss
├── app.js
├── app.json
└── pages
    ├── index
    │   ├── index.axml
    │   ├── index.js
    │   └── index.json
    └── logs
        ├── logs.axml
        └── logs.js

app.json should be written as follows.

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

window

The window attribute is used to set the status bar, navigation bar, title, and backgroundcolor of window for the general purpose of mini programs.

The sub attributes include “titleBarColor”, “defaultTitle”, “pullRefresh”, “allowsBounceVertical”.

Example:

{
    "window": {
        "defaultTitle": "支付宝接口功能演示"
    }
}

tabBar

If your mini program is a multi-tab app (Page can be switched by the bottom bar of the client window), then you can specify the performance of the tab bar through the “tabBar” configuration item, and the corresponding page displayed when the tab is switched.

Note:

• The page switched by page jump (my.navigateTo) or page redirection (my.redirectTo) will not display the tab bar at the bottom even if it is a page defined in the tabBar configuration.
• The first page of the tabBar must be the homepage.

tabBar configuration

Each item configuration

The recommended size of the icon is 60*60px, and the system will stretch/zoom out any images that are uploaded. E.g:

{
    "tabBar": {
        "textColor": "#dddddd", 
        "selectedColor": "#49a9ee", 
        "backgroundColor": "#ffffff", 
        "items": [
            {
                "pagePath": "pages/index/index", 
                "name": "首页"
            }, 
            {
                "pagePath": "pages/logs/logs", 
                "name": "日志"
            }
        ]
    }
}

Startup parameters

You can bring the “page” and “query” parameters when opening a mini program from “native” code. “Page” is used to specify the path to open a specific page, and “query” is used to take parameters.

iOS code example

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

Android code example

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