跳到正文

入门

#系统要求

  • macOS 14 或更新版本
  • Bun 1.4 或更新版本
  • TypeScript 7
  • Xcode Command Line Tools(xcode-select --install)

当前支持的目标平台是 macOS。

#创建项目

bunx @quickgui/cli init my-app --language typescript
cd my-app
quickgui dev

init 会写入项目并安装依赖。省略 --language 可以交互选择 Go、TypeScript 或 Rust。

#第一个窗口

import { app, Window } from "@quickgui/native";
import { Button, Text, View, createRenderer } from "@quickgui/solid";
import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <View style={{ padding: 24, display: "flex", flexDirection: "column", gap: 12 }}>
      <Text>Count: {count()}</Text>
      <Button onClick={() => setCount(count() + 1)}>Increment</Button>
    </View>
  );
}

function openWindow() {
  new Window({ title: "Counter", width: 720, height: 480, renderer: createRenderer(Counter) });
}

app.on("reopen", ({ hasVisibleWindows }) => {
  if (!hasVisibleWindows) openWindow();
});
await app.whenReady();
openWindow();

当用户点击 Dock 图标且没有可见窗口时,reopen 会再次打开窗口。

#运行与构建

quickgui check
quickgui test
quickgui fmt
quickgui dev
quickgui build

dev 会在你编辑时重新构建。build 把打包后的应用写到 dist/。

#后续步骤