80M+
Người dùng Zalo đang hoạt động
Trung tâm tài liệu tổng hợp
Xây dựng nhanh hơn vớihệ sinh thái Zalo Platform
Khám phá hướng dẫn toàn diện, tài liệu API và công cụ cho Mini App, ZBS, Open APIs và Zalo Bot. Tất cả trong một nơi.
Mini App Platform
Xây dựng ứng dụng nhẹ, chạy mượt mà, nhanh bên trong Zalo. Tiếp cận hàng triệu người dùng mà không cần tải ứng dụng.
<2s
Thời gian tải trung bình
10,000+
Mini Apps đang hoạt động
Bắt đầu
Trước khi bắt đầu
Hãy đảm bảo bạn đã có những thứ sau:
Zalo Developer Account
Đăng ký tại developers.zalo.me để lấy App ID và thông tin xác thực.
Node.js & npm
Phiên bản >= 12.13.0 cho phát triển local và build tools.
Zalo Mini App CLI
Công cụ dòng lệnh để khởi tạo và kiểm thử Mini App.
Trình soạn thảo mã
Khuyến nghị dùng VS Code với extension Zalo Mini App và hỗ trợ TypeScript.
Cài đặt & Thiết lập
Bước 1: Cài đặt Zalo Mini App CLI
npm install -g zmp-cliBước 2: Tạo Mini App mới
zmp initiLệnh cấu hình ban đầu (App ID, Name, Template, JS/TS, Recoil/Tailwind…).
Bước 3: Đăng nhập
zmp loginiXác thực tài khoản nhà phát triển Zalo bằng cách quét mã QR (ứng dụng Zalo) hoặc nhập Access Token.
Bước 4: Khởi động
zmp startiChạy bản xem trước ứng dụng.
Core Concepts
Cấu trúc dự án
Zalo Mini App là web app React + Vite: mã nguồn đặt trong thư mục src/, cấu hình qua file app-config.json ở thư mục g ốc.
Tìm hiểu thêmVòng đời
Tìm hiểu các sự kiện vòng đời ứng dụng và trang như OpenApp, AppPaused, AppResumed, OnDataCallback ... để quản lý trạng thái và tài nguyên hiệu quả.
Tìm hiểu thêmĐiều hướng
Điều hướng giữa các trang trong Mini App bằng ZMPRouter, hoặc qua các API như openMiniApp, openWebview.
Tìm hiểu thêmQuản lý trạng thái
Quản lý state bằng React + Recoil (tuỳ chọn mặc định trong zmp init), kết hợp native storage để cache.
Tìm hiểu thêmAPI phổ biến
getUserInfo()
Lấy thông tin cơ bản về người dùng hiện tại bao gồm tên, ảnh đại diện và ID người dùng.
Yêu cầu ủy quyền từ người dùng. Yêu cầu quyền trước khi truy cập dữ liệu người dùng.
import { getUserInfo } from 'zmp-sdk';
// name/avatar cần người dùng cấp quyền
const { userInfo } = await getUserInfo({
autoRequestPermission: true,
});
console.log(userInfo.id, userInfo.name, userInfo.avatar);Response Object
id: string - Định danh người dùng theo Zalo App
name: string - Tên hiển thị (cần quyền)
avatar: string - URL ảnh đại diện (cần quyền)
UI Components
Button Component
List Component
A
Nguyễn Văn An
Kỹ sư phần mềm
B
Trần Thị Bình
Thiết kế UI/UX
L
Nguyễn Thị Lan
Nhân sự
Ứng dụng mẫu
Khám phá các template và ví dụ sẵn sàng sử dụng
E-commerce Template
Ứng dụng mua sắm đầy đủ tính năng với giỏ hàng, checkout và tích hợp thanh toán.
ReactTypeScript
Clone Repo
News & Media App
Danh sách bài viết, danh mục, đánh dấu và tính năng chia sẻ mạng xã hội.
ReactRedux
Clone Repo
Tham gia cộng đồng nhà phát triển
Kết nối với hơn 10.000 nhà phát triển Mini App. Chia sẻ kiến thức, nhận hỗ trợ và giới thiệu sản phẩm của bạn.
Tham gia ngay
Cần hỗ trợ kỹ thuật?
Đội ngũ kỹ thuật của chúng tôi sẵn sàng giúp bạn giải quyết các thách thức tích hợp và trả lời câu hỏi.
Liên hệ hỗ trợ
