Getting started

This section walks you through creating your first mini program project and running it in the simulator.

Prerequisites

Dependency	Minimum version	Notes
Node.js	18+	LTS is recommended
Yarn	1.22+	Package manager
MiniDev Studio	Latest	Download and install from the release page

Create a project

Option A: use the built-in IDE wizard

1. Open MiniDev Studio
2. On the welcome page, click Create new project or use the shortcut Cmd+Shift+N
3. Choose a template:
   • SDK Demo — full API examples
   • Blank template — minimal starter
4. Enter the project name, pick a directory, and link an AppID
5. Click create; the IDE opens the new project

Option B: create manually

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

Create the app.json config file:

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

The framework field

app.json must declare "framework": "vue" or "framework": "react". The compiler uses this to pick the Vite plugin set and page resolution rules. If omitted, it defaults to "vue".

Project layout

my-miniapp/
├── app.json              # Global mini program config
├── package.json
├── src/
│   └── pages/
│       └── index/
│           ├── index.vue   # Vue page
│           └── index.json  # Page config (optional)
└── public/               # Static assets

Start the simulator

After opening a project in MiniDev Studio:

1. The simulator appears in the right-hand panel
2. Click the Run (▶) button on the simulator toolbar
3. The simulator loads the compiled mini program page
4. Edits hot-reload automatically

Simulator data flow

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

Using the SDK

Import and use the woo object in pages:

Vue project

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

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

Debugging

The Debug panel at the bottom of the IDE provides:

Panel	Purpose
Bridge	All Bridge request/response logs
Network	Network requests and responses, paired
Storage	Live Storage data
Pages	Current page stack

Next steps

• Project structure — full app.json reference
• SDK overview — browse all API categories
• Component library — built-in web components