快速开始

本节将引导你创建第一个小程序项目并在模拟器中运行。

环境准备

依赖	最低版本	说明
Node.js	18+	推荐使用 LTS 版本
Yarn	1.22+	包管理器
MiniDev Studio	最新版	从发布页下载安装

创建项目

方式一：使用 IDE 内置向导

1. 打开 MiniDev Studio
2. 点击欢迎页的 「创建新项目」 或使用快捷键 Cmd+Shift+N
3. 选择模板：
   • SDK Demo — 包含完整 API 使用示例
   • 空白模板 — 最小化起步项目
4. 填写项目名称、选择目录、关联 AppID
5. 点击创建，IDE 自动打开新项目

方式二：手动创建

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. IDE 右侧面板自动显示 模拟器
2. 点击模拟器工具栏的 ▶ 运行 按钮
3. 模拟器加载编译后的小程序页面
4. 修改代码后自动热重载

模拟器数据流

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

使用 SDK

在页面中导入并使用 woo 对象：

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	网络请求的 req/res 配对展示
Storage	实时查看 Storage 数据
Pages	查看当前页面栈

下一步

• 项目结构说明 — 了解 app.json 完整配置
• SDK 概览 — 浏览全部 API 分类
• 组件库 — 查看内置 Web Components