# wails-solid-ts

**Repository Path**: singcl/wails-solid-ts

## Basic Information

- **Project Name**: wails-solid-ts
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-18
- **Last Updated**: 2026-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Wails + SolidJS 桌面应用

一个使用 Wails3 框架构建的现代化桌面应用程序，前端采用 SolidJS 和 TypeScript，后端使用 Go 语言。

## 🚀 项目特性

- **跨平台桌面应用**：基于 Wails3 框架，支持 Windows、macOS 和 Linux
- **现代前端框架**：使用 SolidJS 响应式框架和 TypeScript
- **热重载开发**：支持开发时的实时代码更新
- **优雅的UI设计**：深色主题，支持亮色/暗色模式切换
- **事件驱动**：实时时间事件监听和更新
- **Go后端服务**：原生 Go 语言后端，提供高性能服务

## 📁 项目结构

```
wails-solid-ts/
├── main.go                 # Go 应用程序入口点
├── internal/               # 后端业务逻辑
│   └── services/
│       └── service_greet.go # Go 服务实现
├── go.mod                 # Go 模块依赖
├── frontend/              # 前端代码
│   ├── src/
│   │   ├── pages/         # 页面组件
│   │   ├── App.tsx        # 主应用组件
│   │   └── index.tsx      # 入口文件
│   ├── public/
│   │   └── style.css      # 样式文件
│   ├── package.json       # 前端依赖配置
│   ├── vite.config.ts     # Vite 构建配置
│   └── index.html         # HTML 模板
├── build/                 # 跨平台构建配置与资源
├── Taskfile.yml           # 自动化任务配置
└── README.md              # 项目文档
```

## 🛠️ 技术栈

### 后端
- **Go 1.25** - 主要编程语言
- **Wails v3** - 桌面应用框架 (Alpha 版)
- **Embed FS** - 前端资源嵌入

### 前端
- **SolidJS 1.8.7** - 响应式前端框架
- **Solid Router** - 官方路由管理器
- **TypeScript 5.2.2** - 类型安全的 JavaScript
- **Vite 5.0.8** - 快速的前端构建工具
- **Vite Plugin Solid** - SolidJS Vite 插件

## 📦 安装与运行

### 前置要求

- Go 1.25 或更高版本
- Node.js 18 或更高版本
- npm 或 yarn

### 安装步骤

1. **克隆项目**
   ```bash
   git clone <repository-url>
   cd wails-solid-ts
   ```

2. **安装 Go 依赖**
   ```bash
   go mod tidy
   ```

3. **安装前端依赖**
   ```bash
   cd frontend
   npm install
   cd ..
   ```

### 开发模式运行

你可以使用 `wails3` 命令行工具或者 `task` (go-task) 来运行项目：

```bash
# 使用 wails3 (推荐)
wails3 dev

# 或者使用 task
task dev
```

这将启动应用程序并启用前后端的热重载功能。

### 生产构建

```bash
# 使用 wails3 构建生产版本
wails3 build

# 或者使用 task 构建当前平台的二进制文件
task build

# 打包生产版本 (包含图标等资源)
task package
```

构建的可执行文件将根据平台位于 `bin` 或 `build` 目录中。

## 🎯 功能演示

### 主要功能

1. **问候功能**：
   - 在输入框中输入姓名
   - 点击 "Greet" 按钮获取个性化问候语
   - 结果实时显示在界面上

2. **时间显示**：
   - 实时显示当前时间
   - 每秒自动更新
   - 通过 Go 后端事件驱动

3. **交互体验**：
   - 支持键盘输入
   - 响应式设计
   - 优雅的动画效果

### 界面特性

- **现代化设计**：简洁美观的用户界面
- **深色主题**：默认深色背景，减轻眼睛疲劳
- **响应式布局**：适配不同屏幕尺寸
- **品牌标识**：Wails 和 SolidJS 官方 logo

## 🔧 开发指南

### 修改后端服务

编辑 `internal/services/service_greet.go` 文件来添加或修改后端服务：

```go
package services

type GreetService struct{}

func (g *GreetService) Greet(name string) string {
    return "Hello " + name + "!"
}
```

### 修改前端界面

编辑 `frontend/src/pages/Welcome.tsx` 文件来修改前端逻辑：

```typescript
import { createSignal } from 'solid-js'
import { GreetService } from "../../bindings/gitee.com/singcl/wails-solid-ts/internal/services"

function Welcome() {
    const [name, setName] = createSignal('')
    const [result, setResult] = createSignal('')

    const doGreet = () => {
        GreetService.Greet(name()).then((resultValue: string) => {
            setResult(resultValue)
        })
    }

    return (
        <div class="container">
            {/* 页面内容 */}
        </div>
    )
}
```

### 添加新事件

在 `main.go` 中注册新的事件类型：

```go
func init() {
    // 注册自定义事件
    application.RegisterEvent[string]("customEvent")
}
```

## 🎨 自定义配置

### 应用信息

修改 `main.go` 中的应用元数据：

```go
app := application.New(application.Options{
    Name:        "wails-solid-ts",
    Description: "A demo of using raw HTML & CSS",
    // ... 其他配置
})
```

### 窗口配置

修改窗口创建选项：

```go
app.Window.NewWithOptions(application.WebviewWindowOptions{
    Title: "https://imcoco.top",
    BackgroundColour: application.NewRGB(27, 38, 54),
    URL: "/",
    // ... 其他配置
})
```

## 📄 许可证

本项目基于 MIT 许可证开源。

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目。

## 📞 支持

- [Wails 文档](https://v3.wails.io/)
- [SolidJS 文档](https://solidjs.com/)
- [Wails Discord](https://discord.gg/JDdSxwjhGf)
- [Wails GitHub Discussions](https://github.com/wailsapp/wails/discussions)

---

> 使用 Wails3 和 SolidJS 构建的现代化桌面应用体验