configAppView

Cập nhật lần cuối: 19/07/2023

Bắt đầu hỗ trợ ở phiên bản:

• SDK: 2.25.0
• Android: 23.02.01.r2
• IOS: 23.02.01.r2

Tuỳ chỉnh các thành phần giao diện chính trên Mini App, bao gồm:

• Status bar
• Action bar
• Bottom Navigation (Android) / Safe Area Inset Bottom (iOS)

Với api configAppView, bạn có thể ẩn/ hiện, tuỳ chỉnh màu sắc, kiểu hiển thị của các thành phần mặc định trên Mini App. Xem hình ảnh mô tả bên dưới để hiểu rõ các thành phần có thể tuỳ chỉnh trên Mini App của bạn.

Các thành phần giao diện trên iOS

Các thành phần giao diện trên android

Parameters

Object object

Property	Type	Default	Required	Description	Minimum Version
headerColor	string		true	Mã màu, có giá trị hợp lệ là màu thập lục phân, ví dụ #000000.
headerTextColor	string			Màu của text và icon trên thanh action bar và status bar. Nhận giá trị hợp lệ là: white hoặc black.
statusBarType	string	'normal'		Kiểu hiển thị status bar. Nhận các giá trị: normal: mặc định hidden: ẩn status bar transparent: status bar dạng transparent
hideAndroidBottomNavigationBar	boolean	false		Ẩn bottom navigation trên thiết bị android
hideIOSSafeAreaBottom	boolean	false		Ẩn phần Safe Area Inset Bottom trên thiết bị iOS
actionBar	Action Bar Object Type			Tuỳ chỉnh phần Action bar của Mini App
success	function			Callback function khi gọi api thành công
fail	function			Callback function khi gọi api thất bại

Action Bar Object Type

Property	Type	Default	Required	Description	Minimum Version
hide	boolean	false		Ẩn action bar
title	string			Tuỷ chỉnh App title hiển thị trên action bar
leftButton	string	'back'		Tuỳ chỉnh nút điều hướng bên trái action bar. Nhận vào 2 giá trị: back: hiển thị nút back none: ẩn tất cả
textAlign	string	'center'		Tuỳ chỉnh vị trí App title hiển thị trên action bar. Nhận vào 2 giá trị: left: căn trái center: căn giữa

Sample Code

Ví dụ cấu hình App View

import { configAppView } from "zmp-sdk/apis";

configAppView({
  headerColor: "#1843EF",
  headerTextColor: "white",
  hideAndroidBottomNavigationBar: true,
  hideIOSSafeAreaBottom: true,
  actionBar: {
    title: "Zalo Mini App",
    leftButton: "back",
  },
  success: (res) => {
    // xử lý khi gọi api thành công
  },
  fail: (error) => {
    // xử lý khi gọi api thất bại
    console.log(error);
  },
});

Hoặc

import { configAppView } from "zmp-sdk/apis";

const configView = async () => {
  try {
    await configAppView({
      headerColor: "#1843EF",
      headerTextColor: "white",
      hideAndroidBottomNavigationBar: true,
      hideIOSSafeAreaBottom: true,
      actionBar: {
        title: "Zalo Mini App",
        leftButton: "back",
      },
    });
    // xử lý khi gọi api thành công
  } catch (error) {
    // xử lý khi gọi api thất bại
  }
};

Ví dụ cấu hình để có được giao diện toàn màn hình

import { configAppView } from "zmp-sdk/apis";

configAppView({
  hideAndroidBottomNavigationBar: true,
  hideIOSSafeAreaBottom: true,
  statusBarType: "transparent", // hoặc 'hidden'
  actionBar: {
    hide: true,
  },
  success: (res) => {
    // xử lý khi gọi api thành công
  },
  fail: (error) => {
    // xử lý khi gọi api thất bại
    console.log(error);
  },
});

Hoặc

import { configAppView } from "zmp-sdk/apis";

const setFullScreen = async () => {
  try {
    await configAppView({
      hideAndroidBottomNavigationBar: true,
      hideIOSSafeAreaBottom: true,
      statusBarType: "transparent", // hoặc 'hidden'
      actionBar: {
        hide: true,
      },
    });
    // xử lý khi gọi api thành công
  } catch (error) {
    // xử lý khi gọi api thất bại
  }
};