TecNico
(xianii)
1
AHK WebView Template
一个基于 Vite + TailwindCSS v4 + DaisyUI v5 的 AutoHotkey v2 WebView GUI 模板。使用 WebViewToo 在 AHK 窗口中渲染 Web 前端,支持 AHK 脚本与 Web 前端之间的双向消息传递。
简介
这个模板使用 WebViewToo 作为 webview 包装器,并结合 vite 构建了一个支持前端热重载的 AHK WebView GUI 开发框架。在这个框架下,你可以使用各种现代前端技术为你的 AHK 应用创建惊艳的图形界面与交互。
演示页面
| 页面 |
说明 |
| AHK WebView Template |
双向消息演示 — 从前端向 AHK 发送字符串(Msgbox),通过热键 F1 从 AHK 向前端发送消息。包含纯前端计数器。 |
| Register Example |
表单 UI,展示 DaisyUI 表单组件,带背景图片。 |
| Controller Example |
交互式 UI 控件:开关、滑块、进度条、下拉框、步进器、评分、按钮组、音量/亮度滑块、复选框。 |
| DaisyUI Sample |
统计卡片、带格式工具栏的文章编辑器、柱状图。 |
在模板的演示界面上,点击标题即可拖动整个窗体。通过滚轮或点击底部导航点切换页面。
技术栈
2 个赞
大佬也太强了吧!直接弥补AHK显示空白,不过我用ahk用的少,想请问一下这个语言和python比有啥优势啊
TecNico
(xianii)
3
正如其名AutoHotkey,AutoHotkey 在 Windows 上热键相关和模拟键鼠输入上面具有开发非常简单和快速的优势。编译的二进制也比较小巧。我之前有发布的AHK写的应用大多体积都在 1Mb 以下。
TecNico
(xianii)
4
TecNico
(xianii)
6
更新
首个正式发布版本
AHK WebView Template — 用 AutoHotkey v2 + Web 技术构建现代化桌面 GUI
如果你一直想给 AHK 脚本打造一个现代化、精致的界面,又不想受制于传统 AHK GUI 控件的局限,这个模板就是为你准备的。
这是什么?
一个开箱即用的项目模板,将 AutoHotkey v2 与现代 Web 前端(Vite 7 + TailwindCSS v4 + DaisyUI v5)结合,通过 WebViewToo 在 AHK 窗口中渲染。你用 AHK 编写逻辑,用 HTML/CSS 设计界面,两者之间通过简单的 JSON 消息通信。
为什么选择它?
- 现代化 UI,无框架锁定 — 使用 TailwindCSS 工具类和 DaisyUI 组件(开关、滑块、弹窗、图表、统计卡片等),告别 AHK 内置 GUI 控件的各种限制
- 热重载开发 — 前端修改即时反映到 WebView 窗口;按
F6 重载 AHK 脚本,无需手动重启
- 双向消息传递 — AHK ↔ 前端通过 JSON 消息通信。从 UI 发送数据到 AHK 回调,或从 AHK 推送更新到 Web 前端
- 一键构建 —
npm run build 将所有内容编译为独立 .exe,资源内嵌,运行时无需外部文件
- 组件化架构 —
frontend/components/ 中的 HTML 片段通过 <load> 标签加载,保持 UI 模块化和可复用
- 简洁工作区模式 — 运行
npm run init 清除所有演示内容,从最小化的单页模板开始开发
包含哪些内容?
4 个演示页面,展示不同的 UI 模式:
| 页面 |
演示内容 |
| 消息传递 |
前端 → AHK(Msgbox)和 AHK → 前端(F1 热键) |
| 注册示例 |
DaisyUI 表单组件,带背景图片 |
| 控件示例 |
开关、滑块、进度条、下拉框、步进器、评分、复选框 |
| DaisyUI 示例 |
统计卡片、带工具栏的文章编辑器、柱状图 |
快速开始
# 前置条件:Node.js (LTS) + AutoHotkey v2 (64-bit)
npm install
npm run dev
- 前端保存后自动热重载
- 按
F6 重载 AHK
- 按
Ctrl+C 退出
技术栈
| 层级 |
技术 |
| 桌面包装器 |
AutoHotkey v2 (64-bit) + WebViewToo |
| 构建工具 |
Vite 7 |
| CSS |
TailwindCSS v4 + DaisyUI v5 |
| AHK CLI |
ahk64 |
链接
欢迎反馈、Issue 和 PR!
2 个赞