# AutojsHelper **Repository Path**: xaek/AutojsHelper ## Basic Information - **Project Name**: AutojsHelper - **Description**: 这是一款基于 Electron 构建的桌面应用，作为 Auto.js 的 PC 端助手。它允许您将 Auto.js 的移动客户端连接到您的电脑，从而直接在桌面上运行、保存和管理您设备上的脚本。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2025-06-20 - **Last Updated**: 2025-11-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Auto.js PC Helper 一个基于Electron的Auto.js PC端助手，支持与Android设备进行WebSocket通信，提供脚本管理、界面信息获取、文件编辑等功能。 ## 功能特性 ### 基础功能 - 🔌 WebSocket服务器，支持多设备连接 - 📁 项目文件管理，支持文件夹监控和自动刷新 - 📝 内置代码编辑器，支持语法高亮和文件保存 - 🚀 脚本运行、保存到设备、停止管理 - 📋 实时日志显示和设备状态监控 - 🎯 设备连接状态实时更新 ### 界面信息获取功能 - 📸 **界面截图**：获取设备当前界面的实时截图 - 📄 **界面XML**：获取当前界面的XML结构信息，支持树形展示 - 🔍 **元素信息**：获取界面中所有元素的详细信息 - 🎯 **截图点击**：点击截图获取相对位置和设备坐标 - 🔍 **XML搜索**：在XML结构中搜索特定元素 - 📤 **导出功能**：支持导出截图和XML文件 ### 高级功能 - 🖱️ **截图交互**：点击截图自动查找对应的XML元素 - 📊 **坐标计算**：自动计算点击位置的相对坐标和设备坐标 - 🔄 **一键获取**：同时获取截图和XML信息 - 💾 **路径记忆**：记住上次导出路径，提升使用体验 ## 界面预览 ### 主界面布局 - **左侧**：设备连接列表和项目文件管理器 - **右侧**：界面信息面板（截图、XML、元素信息） - **底部**：实时日志显示区域 ### 功能面板 - **截图面板**：显示设备截图，支持点击交互 - **XML面板**：树形展示界面结构，支持搜索和展开/折叠 - **元素信息面板**：显示选中元素的详细属性 ## 安装和运行 ### 环境要求 - Node.js 16+ - npm 或 yarn - Windows 10/11 (推荐) ### 快速开始 ```bash # 克隆项目 git clone [项目地址] cd autojs-helper-pc # 安装依赖 npm install # 启动应用 npm start ``` ### 使用批处理文件启动 ```bash # Windows用户可以直接双击 start.bat ``` ## 使用说明 ### 1. 启动服务器 1. 启动PC端应用 2. 设置端口号（默认6347） 3. 点击"Start Server"按钮 4. 记录显示的IP地址和端口 ### 2. 设备端连接 在Auto.js设备上运行以下脚本（需要修改IP地址）： ```javascript // 修改为您的PC端IP地址 const SERVER_HOST = '192.168.1.100'; const SERVER_PORT = 6347; // 连接WebSocket服务器 const ws = new WebSocket(`ws://${SERVER_HOST}:${SERVER_PORT}`); ws.on('open', () => { console.log('已连接到PC端'); // 发送握手消息 const helloMessage = { type: 'hello', data: { device_name: device.getBrand() + ' ' + device.getModel(), android_version: device.release, screen_width: device.width, screen_height: device.height, obs: false } }; ws.send(JSON.stringify(helloMessage)); }); // 处理来自PC端的命令 ws.on('message', (data) => { const message = JSON.parse(data.toString()); if (message.type === 'command' && message.data.command === 'run') { // 执行PC端发送的脚本 try { eval(message.data.script); } catch (error) { console.log('脚本执行错误: ' + error.message); } } }); // 保持连接 ws.on('close', () => { console.log('连接已断开'); }); ws.on('error', (error) => { console.log('连接错误: ' + error.message); }); ``` ### 3. 项目管理 1. **打开项目文件夹**：点击📂按钮选择包含.js文件的文件夹 2. **文件列表**：自动显示文件夹中的所有.js文件 3. **文件操作**： - 单击选择文件 - 双击打开编辑器 - 右键菜单支持更多操作 ### 4. 脚本管理 1. **选择设备**：在左侧设备列表中选择目标设备 2. **选择脚本**：在文件列表中选择要运行的脚本 3. **执行操作**： - **运行**：在设备上执行脚本 - **保存到设备**：将脚本保存到设备存储 - **停止**：停止当前运行的脚本 - **停止所有**：停止设备上所有脚本 ### 5. 界面信息获取 #### 获取界面信息 1. 选择已连接的设备 2. 点击"获取界面"按钮 3. 系统会自动获取截图和XML信息 4. 在右侧面板查看结果 #### 截图功能 - **查看截图**：在截图面板查看设备当前界面 - **点击交互**：点击截图获取坐标信息 - **导出截图**：点击"导出"按钮保存截图文件 - **文件名格式**：`界面截图YYYYMMDD_HHMMSS.png` #### XML功能 - **树形展示**：以树形结构展示界面元素 - **搜索元素**：在搜索框输入关键词查找元素 - **展开/折叠**：使用"全部展开"和"全部折叠"按钮 - **导出XML**：点击"导出"按钮保存XML文件 - **文件名格式**：`界面xmlYYYYMMDD_HHMMSS.xml` #### 元素信息 - **详细信息**：显示元素的class、text、desc、id等属性 - **坐标信息**：显示元素的bounds坐标 - **交互状态**：显示元素是否可点击、可滚动等 ### 6. 编辑器功能 - **语法高亮**：支持JavaScript语法高亮 - **文件保存**：Ctrl+S保存文件 - **多文件编辑**：支持同时打开多个文件 - **自动保存**：编辑器自动保存功能 ## 通信协议 ### 消息格式 所有消息都使用JSON格式： ```json { "type": "消息类型", "data": { // 消息数据 } } ``` ### 消息类型 #### 握手消息 (hello) ```json { "type": "hello", "data": { "device_name": "设备名称", "android_version": "Android版本", "screen_width": 1080, "screen_height": 1920, "obs": false } } ``` #### 命令消息 (command) ```json { "type": "command", "data": { "command": "run|save|stop|stopAll", "id": "脚本ID", "name": "脚本名称", "script": "脚本内容" } } ``` #### 日志消息 (log) ```json { "type": "log", "data": { "log": "日志内容" } } ``` ### 特殊日志格式 #### 截图数据 ``` SCREENSHOT_DATA: [base64编码的图片数据] SCREENSHOT_INFO: {"width":1080,"height":1920,"format":"base64"} SCREENSHOT_ERROR: [错误信息] ``` #### XML数据 ``` XML_DATA: [XML字符串] XML_ERROR: [错误信息] ``` #### 元素信息数据 ``` ELEMENTS_DATA: {"elements":[...],"count":10} ELEMENTS_ERROR: [错误信息] ``` ## 项目结构 ``` autojs-helper-pc/ ├── main.js # 主进程，处理IPC和WebSocket ├── preload.js # 预加载脚本，暴露API ├── renderer.js # 渲染进程，UI逻辑 ├── index.html # 主界面HTML ├── editor.html # 编辑器界面HTML ├── editor.js # 编辑器逻辑 ├── style.css # 主界面样式 ├── editor.css # 编辑器样式 ├── protocol.js # 通信协议定义 ├── scripts/ # 示例脚本目录 │ ├── example.js # 基础示例 │ ├── demo-screenshot-click.js # 截图点击示例 │ └── test-*.js # 测试脚本 ├── package.json # 项目配置 ├── start.bat # Windows启动脚本 └── README.md # 项目说明 ``` ## 开发说明 ### 技术栈 - **Electron**：跨平台桌面应用框架 - **WebSocket**：实时通信协议 - **Node.js**：后端运行环境 - **原生JavaScript**：前端逻辑 ### 核心模块 - **WebSocket服务器**：处理设备连接和消息通信 - **文件监控**：监控项目文件夹变化 - **脚本执行**：向设备发送和执行脚本 - **界面解析**：解析设备返回的界面信息 - **文件管理**：本地文件读写和编辑 ### 扩展开发 如需添加新功能，请按以下步骤： 1. **后端处理**：在 `main.js` 中添加IPC处理器 2. **API接口**：在 `preload.js` 中暴露API 3. **前端逻辑**：在 `renderer.js` 中添加UI处理 4. **通信协议**：设计消息格式和日志标记 5. **样式调整**：在CSS中添加必要的样式 ## 注意事项 ### 使用前准备 1. **网络配置**：确保PC端和设备端在同一网络下 2. **防火墙设置**：可能需要配置防火墙允许WebSocket连接 3. **权限申请**：截图功能需要屏幕录制权限 4. **Auto.js版本**：建议使用Auto.js 4.x版本 ### 性能优化 1. **避免频繁操作**：频繁获取界面信息可能影响设备性能 2. **合理使用搜索**：XML搜索功能在大型界面中可能较慢 3. **及时清理**：定期清理不需要的截图和XML数据 ### 兼容性说明 1. **Android版本**：支持Android 7.0及以上版本 2. **Auto.js版本**：主要支持Auto.js 4.x，部分功能可能不兼容其他版本 3. **设备差异**：不同品牌设备的界面结构可能有差异 ## 更新日志 ### v1.0.0 (当前版本) - ✅ 基础WebSocket通信功能 - ✅ 项目文件管理和编辑器 - ✅ 界面截图获取和导出 - ✅ 界面XML获取和导出 - ✅ 截图点击坐标计算 - ✅ XML搜索和树形展示 - ✅ 元素信息获取 - ✅ 多设备连接支持 - ✅ 实时日志显示 ## 许可证 MIT License ## 贡献 欢迎提交Issue和Pull Request来改进这个项目！ ## 联系方式 如有问题或建议，请通过以下方式联系： - 提交GitHub Issue - 发送邮件至项目维护者