クイックスタート

初めてのミニプログラムを作成し、シミュレーターで起動するまでの手順です。

環境

依存	最低バージョン	説明
Node.js	18+	LTS の利用を推奨
Yarn	1.22+	パッケージマネージャー
MiniDev Studio	最新	配布ページから取得してインストール

プロジェクトの作成

方法 1: IDE 内蔵のウィザード

1. MiniDev Studio を起動
2. ウェルカム画面の 「新規プロジェクトの作成」 をクリックするか、ショートカット Cmd+Shift+N を使用
3. テンプレートを選択
   • SDK Demo — API の利用例を一通り掲載
   • 空白テンプレート — 最小のスターター
4. プロジェクト名、保存先、紐づける AppID を指定
5. 作成。IDE が新規プロジェクトを開きます

方法 2: 手動で作成

mkdir my-miniapp && cd my-miniapp
npm init -y

app.json を作成します。

{
  "framework": "vue",
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序",
    "navigationBarBackgroundColor": "#ffffff"
  }
}

framework フィールド

app.json では必ず "framework": "vue" または "framework": "react" を指定してください。コンパイラはこの値で Vite 用プラグインとページ解決のルールを選びます。未指定の場合はデフォルトで "vue" です。

ディレクトリの目安

my-miniapp/
├── app.json              # グローバル設定
├── package.json
├── src/
│   └── pages/
│       └── index/
│           ├── index.vue   # Vue ページ
│           └── index.json  # ページ設定（任意）
└── public/               # 静的ファイル

シミュレーターを起動

MiniDev Studio でプロジェクトを開いたあと、次の通りです。

1. 右パネルに シミュレーター が表示されます
2. シミュレーター ツールバーの ▶ 実行 をクリック
3. ビルド結果をロードし、ミニプログラムのページを表示
4. コードを保存するとホットリロードされます

シミュレーターのデータの流れ

点击运行 → SimulatorService.start()
         → 启动 Vite Dev Server
         → 加载 webview → 注入 Bridge API
         → 小程序代码运行 → API 调用通过 Bridge 传递

SDK の利用

ページで woo を import して使います。

Vue プロジェクト

<template>
  <div class="page">
    <h1>{{ title }}</h1>
    <button @click="handleClick">获取设备信息</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import woo from 'mini-sdk'

const title = ref('Hello MiniDev')

// 注册页面生命周期
woo.onLoad((params) => {
  console.log('页面加载，参数：', params)
})

woo.onShow(() => {
  console.log('页面显示')
})

async function handleClick() {
  const info = await woo.getSystemInfo()
  console.log('设备信息：', info)
  woo.showToast({ title: '获取成功', icon: 'success' })
}
</script>

React プロジェクト

import { useState, useEffect } from 'react'
import woo from 'mini-sdk'

export default function IndexPage() {
  const [title] = useState('Hello MiniDev')

  useEffect(() => {
    const unsubLoad = woo.onLoad((params) => {
      console.log('页面加载，参数：', params)
    })
    const unsubShow = woo.onShow(() => {
      console.log('页面显示')
    })
    return () => {
      unsubLoad()
      unsubShow()
    }
  }, [])

  async function handleClick() {
    const info = await woo.getSystemInfo()
    console.log('设备信息：', info)
    woo.showToast({ title: '获取成功', icon: 'success' })
  }

  return (
    <div className="page">
      <h1>{title}</h1>
      <button onClick={handleClick}>获取设备信息</button>
    </div>
  )
}

デバッグ

IDE 下部の デバッグパネル から次の機能にアクセスできます。

パネル	内容
Bridge	Bridge リクエスト／レスポンスのログ
Network	リクエストとレスポンスの対応表示
Storage	Storage の中身のリアルタイム表示
Pages	現在のページスタック

次のステップ

• プロジェクト構造 — app.json の全体
• SDK 概要 — API 分類の一覧
• コンポーネントライブラリ — 同梱の Web Components