Quản lý vòng đời

Vòng đời của một Mini App

Trong một số trường hợp, Mini App sẽ cần các hàm để quản lý vòng đời. Tbox Mini App có cung cấp các API để giải quyết vấn đề này.

Dưới đây là các hàm về vòng đời của một Mini App

hàm	ý nghĩa
onLaunch	Hàm được gọi khi Mini App lần đầu tiên được mở ra
onShow	Hàm được gọi khi Mini App lần đầu tiên được hiển thị. Hàm onLaunch sẽ được gọi trước hàm onShow
onHide	Hàm đươc gọi khi Mini App bị đẩy xuống background
onTerminate	Hàm được gọi khi Mini App bị đóng lại

Nhà Phát Triển có thể thay đổi các hàm này bằng cách sửa file app.js

import MiniApp from "tbox/app";

export default MiniApp({

state: {

name: "tbox",

team: "core",

},

onLaunch: () => {

console.log("App Launch");

},

onShow: () => {

console.log("App show");

},

onHide: () => {

console.log("App hide");

},

onTerminate: () => {

console.log("App terminate");

},

onError: (err) => {

console.log(`App error: ${err}`);

},

});

Trạng thái của một Mini App

Chú ý đoạn code

state: {

name: "tbox",

team: "core",

},

Được sử dụng để khởi tạo trạng thái đầu tiên của Mini App.

Trong trường hợp Nhà Phát Triền cần chia sẻ trạng thái của Mini App giữa các pages, Nhà Phát Triển có thể sử dụng đoạn code trên để khởi tạo trạng thái cho Mini App.

Truy cập trạng thái của Mini App

Để truy cập vào trạng thái của một Mini App, Nhà Phát Triển có 2 cách để sử dụng

Nếu như Nhà Phát Triển muốn truy cập trạng thái của Mini App trong một React Component, Nhà Phát Triển có thể sử dụng hook useMiniAppState

import * as React from "react";

import { View, Text, StyleSheet } from "tbox/ui";

import { useMiniAppState } from "tbox/hooks";

export default function Page() {

const [state, setState] = useMiniAppState();

return (

<View style={styles.content}>

<Text style={styles.paragraph}>App state {JSON.stringify(state)}</Text>

</View>

);

}

useMiniAppState trả về một mảng 2 phần tử:

• phần tử đầu tiên là trạng thái của Mini App
• phần tử thứ hai là hàm để thay đổi trạng thái của Mini App

Việc thay đổi trạng thái của Mini App sẽ được nói kỹ hơn ở phần sau

Nếu như Nhà Phát Triển muốn truy cập trạng thái của Mini App không trong một React Component, ví dụ như trong các hàm quản lý vòng đời của Mini App. Nhà Phát Triển có thể import trực tiếp file app.js

import app from './app.js`

function readMiniAppState() {

console.log(app.state);

}

Biến app được export từ app.js sẽ luôn đồng bộ trạng thái của Mini App, do vậy Nhà Phát Triển có thể sử dụng hàm này.

Thay đổi trạng thái của Mini App

Để thay đổi trạng thái của Mini App, Nhà Phát Triển cũng có 2 cách sử dụng

Nếu như Nhà Phát Triển muốn thay đổi trạng thái của Mini App trong một React Component, Nhà Phát Triển có thể sử dụng hook useMiniAppState

import * as React from "react";

import { View, Text, Button, StyleSheet } from "tbox/ui";

import { useMiniAppState } from "tbox/hooks";

export default function Page() {

const [state, setState] = useMiniAppState();

const handle = () => {

setState({ newValue: "hello" });

};

return (

<View style={styles.content}>

<Text style={styles.paragraph}>App state {JSON.stringify(state)}</Text>

<Button onPress={handle} title="change state" />

</View>

);

}

Ngoài ra, nếu như Nhà Phát Triển muốn đổi trạng thái của Mini App trong một hàm không được chạy trong React Component. Ví dụ như Nhà Phát Triển muốn thay đổi trạng thái của Mini App trong một hàm quản lý vòng đời, Nhà Phát Triển có thể import trực tiếp file app.js

import app from './app.js`

function readMiniAppState() {

app.setState({ newState: "hello world"})

console.log(app.state);

}

Chú ý rằng, hiện tại mỗi lần Nhà Phát Triển sử dụng hàm app.setState để thay đổi trạng thái của Mini App, việc này sẽ dẫn tới Mini App bị rerender lại