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 - アクセシビリティ、フォーム、アニメーション、タッチ、国際化

パフォーマンスと React

• react-best-practices.md - ウォーターフォール、バンドルサイズ、再レンダリング、JavaScript のパフォーマンス

よく使われるパターン

ユーザー情報の取得

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 センター：https://miniapp.zaloplatforms.com/
• React のベストプラクティス：https://react.dev
• SWR：https://swr.vercel.app