Back to Details

zalo-mini-app

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Zalo Mini App Development

Zalo Mini App 开发

Build Mini Apps for the Zalo platform using React, ZaUI components, and Zalo SDK APIs.
使用React、ZaUI组件和Zalo SDK API为Zalo平台构建Mini App。

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.
bash
npm install -g zmp-cli
zmp create my-app && cd my-app && zmp start
如需完整的设置、部署和app-config.json相关内容，请查看getting-started.md。

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";
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

API

  • api-overview.md - API categories & patterns
  • api-user.md - authorize, getUserInfo, getPhoneNumber
  • api-storage.md - setItem, getItem, storage APIs
  • api-ui.md - showToast, navigation, routing
  • api-device.md - location, camera, QR, NFC
  • api-zalo.md - followOA, openChat, share
  • api-overview.md - API分类与模式
  • api-user.md - authorize、getUserInfo、getPhoneNumber
  • api-storage.md - setItem、getItem、存储API
  • api-ui.md - showToast、导航、路由
  • api-device.md - 位置、相机、二维码、NFC
  • api-zalo.md - 关注OA、打开聊天、分享

ZaUI Components

ZaUI组件

  • zaui-overview.md - Component list & design tokens
  • zaui-layout.md - App, Page, Header, Tabs, Router
  • zaui-display.md - Avatar, Icon, List, Swiper
  • zaui-form.md - Button, Input, Select, DatePicker
  • zaui-overlay.md - Modal, Sheet, ActionSheet
  • zaui-overview.md - 组件列表与设计令牌
  • zaui-layout.md - App、Page、Header、Tabs、Router
  • zaui-display.md - Avatar、Icon、List、Swiper
  • zaui-form.md - Button、Input、Select、DatePicker
  • zaui-overlay.md - Modal、Sheet、ActionSheet

Design & Setup

设计与设置

  • design-guidelines.md - Colors, typography, UX
  • getting-started.md - Setup, deploy, publish
  • web-design-guidelines.md - Accessibility, forms, animations, touch, i18n
  • design-guidelines.md - 颜色、排版、用户体验
  • getting-started.md - 设置、部署、发布
  • web-design-guidelines.md - 可访问性、表单、动画、触摸、国际化

Performance & React

性能与React

  • react-best-practices.md - Waterfalls, bundle size, re-renders, JS performance
  • react-best-practices.md - 请求瀑布、包体积、重渲染、JavaScript性能

Common Patterns

常见模式

Get User Info

获取用户信息

js
const { userInfo } = await getUserInfo({ autoRequestPermission: true });
// { id, name, avatar, followedOA }
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>
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

资源