1. Introduction to the logic layer

The logic layer of the Mini App Development Framework uses the 'JavaScript' engine to provide the Mini App with a running environment for the developer's 'JavaScript' code and unique features of the Neuxnet Mini App.

The logical layer processes the data and sends it to the view layer, while receiving event feedback from the view layer.

All code written by the developer will eventually be packaged into a 'JavaScript' file and run when the Mini App starts until the Mini App is destroyed. This behavior is similar to 'ServiceWorker', so the logic layer is also called 'App Service'.

On top of 'JavaScript', we've added some features to facilitate the development of Mini Apps:

• Add 'App' and 'Page' methods for program registration and page registration;
• Added 'getApp' and 'getCurrentPages' methods to get app instances and current page stacks, respectively;
• Provides 'modular' capabilities with each page having a separate scope.

2. Register the MiniApp

App(Object)

The App() function is used to register a small program. Accept an Object parameter,

App() must be called in the app .js and can only be called once.

Object Parameter Description

Properties	Type	Description	Trigger timing
onLaunch	Function	Lifecycle callback—Listens for the MiniApp initialization	Triggered when the initialization of the MiniApp is complete (globally only once)
onShow	Function	Lifecycle callback—The listener MiniApp displays	Triggers the
onHide	Function	Lifecycle callback—Listens to the MiniApp to hide	The MiniApp triggers the
onError	Function	Error listener function	When the Mini App has a script error, or when the API call fails, it will be triggered with an error message
onPageNotFound	Function	The page does not have a listener function	When the page to be opened by the Mini App does not exist, it will call back the function with the page information
Other	Unlimited	Developers are free to add arbitrary functions or data to the Object parameter, which can be accessed

Foreground, Background Definition

After the Mini App starts, the user can see the current interface, at this time the Mini App is in the foreground state, when the user closes the Mini App or leaves the host app through the ellipse button in the upper right corner, the Mini App does not immediately terminate the operation, but enters the background state, at which time it will trigger the onHide callback event.

When the user enters the host app again or opens the Mini App again, the Mini App will switch from the background to the foreground, and the onShow callback event will be triggered; If the user has not opened the Mini App for a long time, or if the system resources are tight, the Mini App may be destroyed, and the Mini App will completely exit.

Sample Code

onLaunch(Object)

Triggered when the initialization of the MiniApp is complete, the global trigger is only triggered once.

Object Parameter Description

Field	Type	Description
path	String	Open the path
query	Object	Open the query field of the MiniApp to configure the
referrerInfo	Object	This field is returned when the MiniApp is entered by another MiniApp or another app
referrerInfo.appId	String	The appId of the source Mini App is detailed in the following instructions
referrerInfo.extraData	Data from Object from other sources

onShow(Object)

Triggered when the Mini App starts, or enters the foreground from the background, it fires every time it switches to the foreground.

Object Parameter Description

Consistent with onLaunch

onHide()

The MiniApp is triggered when it enters the background from the foreground, and it is triggered every time it switches to the background

onError(String error)

Triggered when a script error occurs in the Mini App or when an API call fails.

Parameter Description

Name	Type	Description
error	String	Contains the error message for the stack

onPageNotFound(Object)

Triggered when the target page to be opened does not exist, it is often used to capture the absence of a destination page for route jumps.

Parameter Description

Name	Type	Description
path	String	The path to the page that does not exist
query	Object	Opens the query parameter
isEntryPage	Boolean	Whether the first page launched this time (for example, from the sharing and other entrances, the first page is the sharing page configured by the developer)

Developers can do redirect processing in the onPageNotFound callback, but must be handled synchronously in the callback, and asynchronous processing is not valid.

Sample Code

note

1. If the developer does not add an onPageNotFound listener, when the target page of the jump does not exist, the host APP will take over the processing;
2. Make sure that the re-target page in the onPageNotFound callback exists, otherwise it will be taken over by the host APP, and the onPageNotFound will not be called back to avoid calling an endless loop.

getApp(Object)

Global methods, getApp() function can be used to get to the MiniApp App instance, mostly used in the page call, to get the app instance of the global data and methods. It is worth noting that when called in the APP() method in the app .js, it can be obtained directly through this, using the getApp() method in other pages.

Object Parameter Description

Field	Type	Description
allowDefault	Boolean	Returns the default implementation when the app is undefined. When an app is called, the properties defined in the default implementation are overridden and merged into the app.

Sample Code

3. Registration page

3.1 Register the page using the Page constructor

The Page(Object) function is used to register a page. Accepts an Object type parameter that specifies the initial data of the page, lifecycle callbacks, event handlers, and so on.

Properties	Type	Description
data	Object	The initial data for the page
onLoad	Function	Lifecycle callback—Triggers
onShow	Function	Lifecycle callback—The listening page displays
onReady	Function	Lifecycle callback—Listens for the completion of the page's first rendering
onHide	Function	Lifecycle callback—Listening page hides
onUnload	Function	Lifecycle callback—Listens for page unloading
onPullDownRefresh	Function	Executes
onReachBottom	Function	Performs
onShareAppMessage	Function	Forward
onPageScroll	Function	Handler of page scrolling trigger events
onTabItemTap	Function	When the current tab page is tab, the
Other	Any	Developers can add arbitrary functions or data to the Object parameter, and use this in the functions on this page to access the

Sample Code

For more information on parameter meanings and usage, please refer to the Page Reference Documentation.

3.1.1 Initial data

data is the initial data used by the first rendering of the page.

The data in data must be of the following types: string, number, Boolean, object, array.

The render layer can bind data through FXML.

Sample Code

3.2 Lifecycle callback functions

The triggering of the life cycle and the routing method of the page are detailed in detail

onLoad(Object query)

Triggered when the page loads. A page is called only once, and you can get the parameters in the path to open the current page in the parameters of the onLoad.

Parameter Description

Name	Type	Description
query	Object	Opens the Parameter

onShow()

Triggered when the page is displayed/cut to the foreground.

onReady()

Triggered when the first rendering of the page is complete. A page is called only once, indicating that the page is ready to interact with the view layer.

note

APIs that set the content of the interface, such as jd.setNavigationBarTitle, do so after onReady.

onHide()

Triggered when a page is hidden/switched to the background. Such as navigateTo or the bottom tab to switch to other pages, Mini Apps cut into the background, etc.

onUnload()

Triggered when a page is unloaded. Such as redirectTo or navigateBack when to other pages.

3.3 Page event handler

onPullDownRefresh()

Listen for user pull-down refresh events.

onReachBottom()

Listen for user pull-up bottom events.

onPageScroll(Object)

Listen for user swipe page events.

Parameter Description

Properties	Type	Description
scrollTop	Number	The distance (in px) at which the page has scrolled vertically

onTabItemTap(Object)

Trigger when you click the top, bottom tab

Object Parameter Description

Parameter	Type	Description
index	String	The ordinal number of tabItem is clicked, starting from 0
pagePath	String	TabItem's page path is clicked
text	String	The tabItem button text

Sample Code

3.4 Component Event Handlers

Component event handlers can also be defined in Page. In the .fxml file, event bindings are added to the component, and when the event is triggered, the event handler defined in Page is executed.

Sample Code

3.5 Construct the page using the Component constructor

Base Library 1.6.3 is supported

The Page constructor works well for simple pages. But for complex pages, the Page constructor may not be easy to use.

At this point, you can use the Component constructor to construct the page. The main difference with the Component constructor is that the method needs to be placed inside methods: { }.

Code Sample

This way of creating is very similar to a custom component, and you can use advanced features such as behaviors just like custom components. For details, see the Component Constructor section.

Page.route

The path to the current page, of type String.

Sample Code

Page.prototype.setData(Object data, Function callback)

The setData function is used to asynchronously send data from the logical layer to the view layer, changing the value of the corresponding this.data (synchronous).

Object Parameter Description

Field	Type	Required	Description
data	Object	Yes	The data to be changed this time
callback	Function	No	The callback function

Object is represented as key: value, changing the value of the key in this.data to value.

note

1. Directly modifying this.data cannot change the state of the page.
2. Only set JSON-relevant data is supported.
3. The amount of data set at a time should not be too large, and should not exceed 1024k.
4. Do not manually set the value of any item in the data to undefined.

Sample Code

4. Page configuration

Each MiniApp page can also use a .json file to configure the window representation of this page.

The configuration of the page can only set the content of some window configuration items in app.json, and the configuration items in the page will overwrite the same configuration items in the window of app.json, and the configurable options are as follows:

Properties	Type	The default value is	Description
navigationBarBackgroundColor	HexColor	#000000	The navigation bar background color, such as #000000
navigationBarTextStyle	String	white	Navigation bar title color, only black, white,
navigationBarTitleText	String		Navigation bar title text content
navigationBarTitleFixed	Boolean	false	If the title is fixed, set to true, when H5 is loaded, the title does not change with the H5 title; Setting to false changes
backgroundColor	HexColor	#ffffff	The background color of the window is
backgroundTextStyle	String	dark	The style of drop-down loading, which only supports dark, light,

The example my.json is as follows:

4.1 Modular

4.1.1 file scope

Variables and methods declared in the .js file are valid only in the current file; Variables and methods with the same name can be declared in different files.

The global function getApp() allows you to get a global application instance, and if you need global data, you can set it in App(), such as:

4.1.2 Modular

Some common code can be abstracted into a separate js file as a module. Modules can only expose interfaces through module.exports or exports.

The Mini App does not currently support "direct introduction of node_modules", you need to complete the introduction work by build npm, and you can also copy the code directly to the directory of the Mini App when needed. Use it again.

In files that need to use these modules, use require(path) to bring in public code

prompt

It is worth noting that when require to introduce modules, relative paths are required.