Thiết lập
Zalo Mini App Studio cung cấp cho bạn giao diện để có thể dễ dàng thiết lập các thông số phổ biến trên Zalo Mini App. Bạn có thể truy cập vào thiết lập này bằng cách ấn vào nút Configuration (1) hoặc mở file app-config.json (2):
Có 2 dạng thiết lập mà bạn có thể tùy chỉnh trong Zalo Mini App Studio:
-
Thiết lập mặc định (3): có sẵn trên tất cả Mini App, được sử dụng để thay đổi các tùy chọn giao diện cho các thanh trạng thái (Status bar), thanh điều hướng (Navigation bar),...
-
Thiết lập tuỳ chỉnh (4): thường được thấy trong các template được cung cấp sẵn bởi Zalo Mini App Studio. Nhà phát triển cũng có thể tự thêm các thiết lập này để dễ dàng tùy chỉnh Mini App. Hướng dẫn chi tiết sẽ được cung cấp trong phần tiếp theo.
Bổ sung thiết lập cho Zalo Mini App Studio
Bạn có thể thêm các thiết lập tuỳ chỉnh vào ứng dụng Zalo Mini App của mình để dễ dàng thay đổi các thông số từ giao diện Configuration của Zalo Mini App Studio. Các thiết lập này có thể là:
| Kiểu dữ liệu | Kiểu dữ liệu tương ứng khi đọc từ Mini App | Hiển thị trên Studio | Ví dụ |
|---|---|---|---|
| string | string | Free text input | Có thể dùng để lưu ID của Official Account mà ứng dụng cần follow, số điện thoại liên hệ cần hiển thị, đường dẫn tới logo, hoặc các API endpoint,... |
| color | string (hex code, luôn bao gồm 7 ký tự, bắt đầu bằng #) | Color picker | Có thể dùng để lưu màu chủ đạo hoặc màu cho các thành phần giao diện đặc biệt,... |
| number | number | Number input | Có thể dùng để số lượng item hiển thị trên mỗi trang,... |
| boolean | boolean | Switch | Có thể dùng để thiết lập việc ẩn hiện các thành phần đặc biệt trên giao diện, bật tắt giữa các môi trường như sandbox/live, hoặc các thông số khác liên quan đến hoạt động của ứng dụng. |
Để thêm các thiết lập tuỳ chỉnh cho ứng dụng Zalo Mini App, bạn tạo một file zmp-template.json ngang cấp với zmp-cli.json và app-config.json. File này bao gồm name là tên của template và options là các thiết lập tuỳ chỉnh. Ví dụ:
| Thiết lập mẫu | Hiển thị trên Studio |
|---|---|
{
"name": "White-label product",
"options": {
"oaId": {
"title": "ID OA",
"description": "ID của OA cần follow khi...",
"type": "string",
"maxLength": 20
},
"primaryColor": {
"title": "Primary Color",
"description": "Màu chủ đạo",
"type": "color"
},
"itemsPerPage": {
"title": "Items per page",
"description": "Số lượng sản phẩm mỗi trang",
"type": "number",
"min": 1,
"max": 100
},
"showSearch": {
"title": "Show search bar",
"description": "Hiển thị thanh tìm kiếm",
"type": "boolean"
}
}
} |  |
Bên trong Mini App, bạn có thể sử dụng hàm getConfig() để lấy giá trị của các thiết lập được định nghĩa trên:
followOA({
id: getConfig((config) => config.template.oaId),
success: () => {
alert("Đã theo dõi OA thành công");
},
});
<Box>
{getConfig((config) => config.template.showSearch) && (
<Input.Search
onFocus={() => navigate("/search")}
placeholder="Tìm nhanh đồ uống, món mới ..."
/>
)}
</Box>;
Nếu bạn không sử dụng template có sẵn do Zalo Mini App cung cấp thì bạn sẽ phải tự khai báo hàm getConfig như sau:
import appConfig from "app-config.json";
export function getConfig<T>(getter: (config: typeof appConfig) => T) {
return getter(appConfig);
}