オンラインサンプル
完全な MiniDev SDK テンプレートプロジェクト（vue-default）を Vite でビルドし、ブラウザに埋め込んでリアルタイム実行します。すべての 20 ページ、80 以上の SDK API、30 以上の UI コンポーネントをカバーします。
操作のヒント
- トップのカードをタップすると、各モジュールのデモに進みます
- SDK API の呼び出しは、Toast、Loading、Dialog、ActionSheet など、実際の画面フィードバックを返します
- Storage はブラウザの
localStorageを使用し、リロード後もデータは保持されます - Network リクエストは httpbin API 経由で実際の HTTP 通信を行います
- 下部の TabBar で Home / Device / User の 3 タブを切り替えられます
テンプレートでカバーするモジュール
このオンラインデモは、MiniDev Studio に同梱の Vue デフォルトテンプレートプロジェクトを、Vue 3 + Vue Router + Vite でビルドしたものです。下記の一連のデモページを含みます。
| モジュール | ページパス | カバーする API |
|---|---|---|
| 🚀 ホーム | pages/home/index | navigateTo、navigateToTab |
| 🧩 Components | pages/components-demo/index | 30 以上の m-* コンポーネント + テーマ |
| 🎨 UI | pages/ui-demo/index | showToast、showLoading、showDialog、alert、showActionSheet、setNavigationBarTitle/Color |
| 🌐 Network | pages/network-demo/index | request（GET/POST/PUT/DELETE）、interceptors |
| 💾 Storage | pages/storage-demo/index | setStorage、getStorage、removeStorage、clearStorage |
| 🧭 Router | pages/router-demo/index | navigateTo、navigateBack、reLaunch、navigateToTab、reLaunchTab、getCurrentPages、getRoute |
| ♻️ Lifecycle | pages/lifecycle-demo/index | onLoad、onReady、onShow、onHide、onUnload、onPullDownRefresh、onReachBottom |
| 📋 Clipboard | pages/clipboard-demo/index | setClipboard、getClipboard |
| 🗺️ Map | pages/map-demo/index | createMapContext（markers、polyline、polygon、circle、moveAlong） |
| 🚗 Vehicle | pages/vehicle-demo/index | getCurrentVehicleProfile、getCurrentVehicleStatus |
| 📊 Analytics | pages/analytics-demo/index | enableAutoAnalytics、recordEvent、enableNotification |
| ⚙️ App & Env | pages/app-demo/index | getLaunchOptionsSync、detectEnv、isSimulator、onAppShow/Hide、hello |
| 📱 Screen | pages/screen-demo/index | setScreenOrientation、getScreenBrightness、keepScreenOn |
| 🔒 スクロールロック | pages/disable-scroll-demo/index | disableScroll 設定のデモ |
| 📱 Device | pages/device-demo/index | getSystemInfo、getDeviceInfo、getAppInfo、getNetworkType、getLocation、vibrate、chooseImage、scanCode、uploadFile、TabBar 制御 |
| 👤 Auth | pages/auth-demo/index | getUserProfile、requestSSOLogin、requestLinkedLogin、authenticateWithBiometric、requestAuthorizationToken |
| 🎯 Select | pages/select-demo/index | navigateBack with data（onBack モード） |
| 📩 Router Target | pages/router-target/index | onLoad（パラメータ受信）、navigateBack with data |
| ♻️ Lifecycle Target | pages/lifecycle-target/index | 子ページのライフサイクルイベント |
プロジェクト構成
src/
├── pages/
│ ├── home/ # ホーム — 14 モジュールの入口
│ ├── components-demo/ # UI コンポーネント一覧（Basic、Form、Layout、Display、Feedback、Media、Theme）
│ ├── ui-demo/ # Toast / Dialog / Alert / ActionSheet / NavBar / PreviewImage
│ ├── network-demo/ # HTTP リクエスト（GET/POST/PUT/DELETE）+ インターセプタ
│ ├── storage-demo/ # ローカルストレージの CRUD + 一括テスト
│ ├── router-demo/ # navigateTo / navigateBack / reLaunch / タブナビ / ページ情報
│ ├── router-target/ # 遷移先 — パラメータ受信と onBack での戻り値
│ ├── lifecycle-demo/ # ページライフサイクル + プルダウン更新 + 末尾到達
│ ├── lifecycle-target/ # 子ページのライフサイクルテスト
│ ├── clipboard-demo/ # クリップボードの読み書き + プリセット
│ ├── map-demo/ # 地図（Markers / Polyline / Polygon / Circle / MoveAlong）
│ ├── vehicle-demo/ # 車両プロファイルとリアルタイム状態
│ ├── analytics-demo/ # イベント計測 + 通知管理
│ ├── app-demo/ # 起動オプション / 環境検出 / App 表示 / Bridge ハンドシェイク
│ ├── screen-demo/ # 画面向き / 明るさ / 常時点灯
│ ├── disable-scroll-demo/ # スクロール禁止（全画面ページ）
│ ├── device-demo/ # デバイス情報 / ネットワーク / 位置 / 振動 / メディア / 他アプリ / TabBar
│ ├── auth-demo/ # ユーザープロファイル / SSO / 連携ログイン / 生体認証 / 認可トークン
│ └── select-demo/ # 一覧セレクタ（onBack でデータ返却）
├── assets/styles/
│ ├── base.css # グローバル基礎スタイル
│ └── theme-variables.css # MD3 テーマ変数
└── App.vue # ルート（router-view + keep-alive）関連ドキュメント
- SDK 概要 — API 分類とアーキテクチャ
- コンポーネントライブラリ — minidev-components の全ドキュメント
- クイックスタート — ゼロからプロジェクトを構築