基于 MixOne 工具的 Electron 桌面应用示例项目

License Electron Vue Vite

📖 项目简介

🛠️ MixOne 工具介绍

🌟 核心特性

📚 相关资源

🚀 快速开始

方式一:使用 MixOne 工具创建新项目

# 全局安装 MixOne
npm install mixone -g
# 创建新项目
mixone create mixone-demo1
cd mixone-demo1
# 安装依赖
npm install # 或使用 yarn
# 启动开发服务器
npm run dev

方式二:克隆本示例项目

# 全局安装 MixOne
npm install mixone -g
# 克隆项目
git clone https://github.com/qew4/mixone-example.git
cd mixone-example
# 安装依赖
npm install # 或使用 yarn
# 启动开发服务器
npm run dev

📁 项目结构

🗂️ 完整目录结构

mixone-vue-app/
├── 📂 assets/ # 🎨 全局静态资源
│ └── 📄 favicon.ico # 应用图标
├── 📂 components/ # 🧩 全局组件库
│ ├── 📄 Button.vue # 按钮组件
│ └── 📄 Dialog.vue # 对话框组件
├── 📂 windows/ # 🖼窗口目录(以 -window 结尾,windows是根窗口目录)
│ ├── 📄 Index.page.vue # 主窗口入口页面组件
│ ├── 📂 other-window/ # 其他窗口
│ │ ├── 📄 Index.page.vue # 入口页面组件
│ │ ├── 📄 Second.page.vue # 页面组件(自动路由)
│ │ ├── 📄 Second.vue # 普通组件
│ │ ├── 📄 preload.js # 窗口预加载脚本(可选)
│ │ └── 📄 window.json # 窗口配置
│ └── 📂 setting-window/ # 设置窗口
│ ├── 📄 Index.page.vue # 入口页面组件
│ ├── 📄 main.ts # Vue 入口(可选)
│ ├── 📄 App.vue # 顶层组件(可选)
│ └── 📄 router.js # 路由配置(可选)
├── 📂 main/ # ⚡ 主进程代码
│ ├── 📄 main.js # 主进程入口
│ └── 📄 *.fn.js # 原生插件(PJS 访问)
├── 📂 utils/ # 🔧 工具函数
│ ├── 📄 request.js # 请求工具
│ └── 📄 common.js # 通用工具
├── 📂 out/ # 📦 编译输出
└── 📄 package.json # 项目配置

📋 工程文件说明

🖼 窗口目录

📁 其他重要目录

📁 xxxx-window/ # 🪟 窗口目录(以 "-window" 结尾)
├── 📄 Index.vue # 🚪 窗口入口文件
├── 📄 Second.page.vue # 📄 页面组件(自动路由)
├── 📄 main.ts # ⚙️ Vue 项目入口(可选)
├── 📄 App.vue # 🎯 Vue 顶层组件(可选)
├── 📄 router.js # 🛣️ 路由配置(可选)
├── 📄 window.json # ⚙️ 窗口配置(可选)
└── 📄 preload.js # ⚡ 预加载脚本(可选)

🍬 MixOne 去 IPC 语法糖

💡 什么是去 IPC 通信语法糖

🎯 四种语法糖详解

1️⃣ 注释方式 @mainProcess

// @mainProcess
export async function getSystemInfo() {
 return os.cpus();
}
// @mainProcess
export async function monitorCPU() {
 const initial = os.cpus();
 return 'initial2:' + initial;
}

2️⃣ Main 常量语法

// 访问 Electron Main API
await Main.app.getPath('documents')

3️⃣ PJS 常量语法

// 先要在 main 目录下实现 WENJIAN.fn.js 文件,请看源码中的例子
await PJS.WENJIAN.read()

4️⃣ NodeJS 常量语法

// os 是 NodeJS 内置包,无需安装
// 第三方包需要通过 npm install 安装
const homeDirectory = await NodeJS.os.homedir();
const filePathToRead = await NodeJS.path.join(homeDirectory, 'my_test_document.txt'); 

💡 使用技巧

🖼 窗口管理类

🎛️ 窗口管理功能

📱 创建窗口

let winInfo = await window.windowManager.openWindow('/windows/help-window', {
 width: 1200,
 height: 900
});
console.log('Window created with ID:', winInfo);

🔲 创建模态窗口

const currentWinId = window.getWinId();
let modalWinInfo = await window.windowManager.openModalWindow(
 currentWinId, 
 '/windows/help-window', 
 {
 width: 600,
 height: 400,
 minimizable: false,
 maximizable: false
 }
);

💬 窗口间通信

window.windowManager.sendToWindow(WinId, 'orderPay', { orderId: 12345 })

👂 窗口事件监听

// 监听窗口 close、did-stop-loading 事件
// 注意:并非所有原生事件都能监听
let winInfo = await window.windowManager.openWindow('/windows/help-window', {
 width: 1200,
 height: 900
});
console.log('Window created with ID:', winInfo);
// 监听页面加载完成
winInfo.webContents.on('did-stop-loading', (res) => {
 console.log('Window loaded successfully');
 console.log(res);
});
// 监听窗口关闭
winInfo.on('close', () => {
 console.log('Window closed');
});

❓ 常见问题

🔧 故障排除

🛠️ 技术支持

🖥️ 平台支持

⚠️ 使用注意事项

📝 代码示例

❌ 错误写法

// 不要在参数中嵌套使用语法糖
const result = await Main.dialog.showOpenDialog({
 title: '选择一个或多个文件',
 defaultPath: await Main.app.getPath('documents'), // ❌ 错误:嵌套使用
 buttonLabel: '选择',
 filters: [
 { name: '图片文件', extensions: ['jpg', 'png', 'gif'] },
 { name: '文本文件', extensions: ['txt', 'md'] },
 { name: '所有文件', extensions: ['*'] }
 ],
 properties: ['openFile', 'multiSelections', 'showHiddenFiles']
});
// ❌ 错误:嵌套使用 NodeJS 语法糖
await NodeJS.path.join(await NodeJS.os.homedir(), 'my_test_document.txt')

✅ 正确写法

// 先获取路径,再使用
let documentsPath = await Main.app.getPath('documents');
const result = await Main.dialog.showOpenDialog({
 title: '选择一个或多个文件',
 defaultPath: documentsPath, // ✅ 正确:使用变量
 buttonLabel: '选择',
 filters: [
 { name: '图片文件', extensions: ['jpg', 'png', 'gif'] },
 { name: '文本文件', extensions: ['txt', 'md'] },
 { name: '所有文件', extensions: ['*'] }
 ],
 properties: ['openFile', 'multiSelections', 'showHiddenFiles']
});
// ✅ 正确:分步骤执行
let homePath = await NodeJS.os.homedir();
await NodeJS.path.join(homePath, 'my_test_document.txt')

📂 路径别名支持

// 使用示例
// 在 xxx.vue 文件中
import { getDocumentsPath2 } from '@/utils/api/utils.js';

💬 问题反馈

📱 微信交流群

微信群二维码

🎉 感谢使用 MixOne!

如果这个项目对你有帮助,请给我们一个 ⭐ Star!