AgentSkillsCN

zalo-mini-app

构建 Zalo Mini App——在 Zalo 超级应用内运行的轻量级 Web 应用。本技能提供 ZaUI 组件（按钮、输入框、模态框、标签页、头像等）、JavaScript API（authorize、getUserInfo、getPhoneNumber、getLocation、Storage、Camera）、支付用的 Checkout SDK、设计指南以及开发工具。当需要构建 Mini App、使用 ZaUI 组件、调用 Zalo API、集成支付功能、将 Web 应用转换为 Mini App，或遵循 Zalo 设计标准时，可使用此技能。

SKILL.md
--- frontmatter
name: zalo-mini-app
description: Build Zalo Mini Apps - lightweight web apps running inside Zalo super-app. This skill provides ZaUI components (Button, Input, Modal, Tabs, Avatar, etc.), JavaScript APIs (authorize, getUserInfo, getPhoneNumber, getLocation, Storage, Camera), Checkout SDK for payments, design guidelines, and development tools. Use when building Mini Apps, using ZaUI components, calling Zalo APIs, integrating payments, converting web apps to Mini Apps, or following Zalo design standards.

Zalo Mini App Development

Build Mini Apps for the Zalo platform using React, ZaUI components, and Zalo SDK APIs.

Quick Start

bash
npm install -g zmp-cli
zmp create my-app && cd my-app && zmp start

See getting-started.md for full setup, deployment, and app-config.json.

Core Packages

bash
npm install zmp-ui zmp-sdk
js
import { Button, Input, Modal } from "zmp-ui";
import "zmp-ui/zaui.css";
import { getUserInfo, authorize } from "zmp-sdk/apis";

References

APIs

ZaUI Components

Design & Setup

Performance & React

Common Patterns

Get User Info

js
const { userInfo } = await getUserInfo({ autoRequestPermission: true });
// { id, name, avatar, followedOA }

Basic Page Layout

jsx
<App>
  <Page>
    <Header title="Home" />
    <List>
      <List.Item title="Item" suffix={<Icon icon="zi-chevron-right" />} />
    </List>
  </Page>
  <BottomNavigation fixed>
    <BottomNavigation.Item key="home" label="Home" icon={<Icon icon="zi-home" />} />
  </BottomNavigation>
</App>

Resources