zalo-mini-app

Zalo Mini App 开发

使用 React、ZaUI 组件和 Zalo SDK API，为 Zalo 平台构建 Mini App。

快速开始

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

完整的设置、部署和 app-config.json 说明，请参阅 getting-started.md。

核心包

npm install zmp-ui zmp-sdk

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

参考资料

API

• api-overview.md - API 类别和模式
• api-user.md - authorize、getUserInfo、getPhoneNumber
• api-storage.md - setItem、getItem、存储 API
• api-ui.md - showToast、导航、路由
• api-device.md - 位置、相机、QR、NFC
• api-zalo.md - followOA、openChat、分享

ZaUI 组件

• 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-guidelines.md - 颜色、排版、UX
• getting-started.md - 设置、部署、发布
• web-design-guidelines.md - 无障碍、表单、动画、触控、i18n

性能与 React

• react-best-practices.md - 瀑布流、包体积、重复渲染、JS 性能

常见模式

获取用户信息

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

基本页面布局

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

资源

• 文档：https://miniapp.zaloplatforms.com/documents/
• Mini App Center：https://miniapp.zaloplatforms.com/
• React 最佳实践：https://react.dev
• SWR：https://swr.vercel.app