项目结构

了解 MiniDev Studio 项目中各目录和文件的作用。

典型项目结构

my-mini-app/
├── src/
│   ├── pages/
│   │   ├── home/
│   │   │   └── index.vue       ← 首页
│   │   ├── detail/
│   │   │   └── index.vue       ← 详情页
│   │   └── profile/
│   │       └── index.vue       ← 个人中心
│   ├── components/             ← 可复用组件
│   ├── composables/            ← Vue 组合式函数
│   ├── stores/                 ← Pinia 状态管理（可选）
│   ├── env.d.ts                ← 环境类型声明（含 mini-sdk 类型注入）
│   └── main.ts                 ← 应用入口
├── app.json                    ← 页面路由配置
├── vite.config.ts              ← Vite 配置（含 mini-sdk alias）
└── package.json

关键文件说明

app.json — 路由配置

{
  "pages": [
    "pages/home/index",
    "pages/detail/index",
    "pages/profile/index"
  ],
  "tabBar": {
    "list": [
      { "pagePath": "pages/home/index", "text": "首页" },
      { "pagePath": "pages/profile/index", "text": "我的" }
    ]
  }
}

env.d.ts — 类型声明

MiniDev Studio 启动时自动注入 mini-sdk 的类型定义：

/// <reference types="vite/client" />

// IDE 自动注入，无需手动添加
declare module 'mini-sdk' {
  export interface WooApi { /* ... */ }
  export const woo: WooApi
  export default woo
}

vite.config.ts — SDK Alias

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'mini-sdk': '/path/to/sdk-runtime.js'
    }
  }
})

页面（Page）

每个页面是一个 .vue 文件，在 app.json 中注册后可通过路由访问。

<script setup lang="ts">
import { ref } from 'vue'
import woo from 'mini-sdk'

// 页面生命周期
const offLoad = woo.onLoad((query) => {
  console.log('页面参数：', query)
})

// Vue 组件卸载时取消订阅
import { onUnmounted } from 'vue'
onUnmounted(() => offLoad())
</script>

<template>
  <div class="page">
    <!-- 页面内容 -->
  </div>
</template>

组合式函数推荐封装

// composables/useLifecycle.ts
import { onUnmounted } from 'vue'
import woo from 'mini-sdk'

export function usePageLifecycle(handlers: {
  onLoad?: (query: Record<string, string>) => void
  onShow?: () => void
  onHide?: () => void
}) {
  const unsubscribers: Array<() => void> = []

  if (handlers.onLoad)
    unsubscribers.push(woo.onLoad(handlers.onLoad))
  if (handlers.onShow)
    unsubscribers.push(woo.onShow(handlers.onShow))
  if (handlers.onHide)
    unsubscribers.push(woo.onHide(handlers.onHide))

  onUnmounted(() => unsubscribers.forEach((fn) => fn()))
}