escrcpy/develop.md
2024-11-07 17:51:24 +08:00

115 lines
3.8 KiB
Markdown

# Escrcpy Developer Guide
## Introduction
[Escrcpy](https://github.com/viarotel-org/escrcpy) is an Electron-based graphical user interface for Scrcpy, designed to facilitate the display and control of Android devices. This comprehensive guide aims to help developers contribute to the project effectively.
## Getting Started
### System Requirements
- Node.js v20 or higher
- Git
### Development Setup
```shell
# Clone repository
git clone https://github.com/viarotel-org/escrcpy.git
cd escrcpy
# Enable pnpm package manager
corepack enable pnpm
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build applications
pnpm build # Auto-detect platform
pnpm build:win # Build for Windows
pnpm build:mac # Build for macOS
pnpm build:linux # Build for Linux
```
## Technical Architecture
### Core Technologies
- Electron - Cross-platform desktop application framework
- Vue.js - Frontend framework
- JavaScript - Primary programming language
- Node.js - Runtime environment
- scrcpy - Android device display and control
- adbkit - Android Debug Bridge toolkit
### Project Structure
```
📦Escrcpy
┣ 📂.github # GitHub workflows and configurations
┣ 📂.husky # Git hooks settings
┣ 📂.vscode # VSCode editor settings
┣ 📂control # Device floating control bar
┣ 📂electron # Electron main process
┣ 📂src # Main renderer process
┃ ┣ 📂assets # Static resources
┃ ┣ 📂components # Vue components
┃ ┃ ┣ 📂Device # Device management
┃ ┃ ┣ 📂Preference # Settings interface
┃ ┃ ┗ 📂Quick # Quick access features
┃ ┣ 📂composables # Vue composition functions
┃ ┣ 📂configs # App configurations
┃ ┣ 📂dicts # Constants and enums
┃ ┣ 📂icons # Icon assets
┃ ┣ 📂locales # Internationalization
┃ ┣ 📂plugins # Vue plugins
┃ ┣ 📂store # State management
┃ ┣ 📂styles # Global styles
┃ ┗ 📂utils # Helper functions
┣ 📂public # Public assets
┣ 📂screenshots # Application screenshots
┣ 📂scripts # Build scripts
┣ 📜.eslintrc-auto-import.json # ESLint settings
┣ 📜package.json # Project metadata
┣ 📜vite.config.js # Build configuration
┗ 📜electron-builder.json # Electron packaging config
```
## Development Guidelines
### Coding Standards
- Adhere to ESLint configuration
- Implement Vue 3 Composition API practices
- Follow Angular's commit message conventions ([guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines))
- Include documentation for complex implementations
### Contributing Process
1. Review existing issues and pull requests
2. Follow coding standards
3. Implement and test changes
4. Update relevant documentation
5. Submit pull request to main branch
## Debugging Tools
- Enable debug mode in application preferences
- Access DevTools using Ctrl+Shift+I
- Utilize console logging for development
## Reference Documentation
- [Electron](https://www.electronjs.org/docs)
- [Vue.js](https://vuejs.org/)
- [Scrcpy](https://github.com/Genymobile/scrcpy)
- [Adbkit](https://github.com/DeviceFarmer/adbkit)
- [Gnirehtet](https://github.com/Genymobile/gnirehtet/)
## FAQ
### Specific area "throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')"
Overwrite the contents of `.npmrc.CN` in the project with `.npmrc`, then delete `node_modules` and reinstall dependencies. Or you can also use [electron-fix](https://github.com/pangxieju/electron-fix)
## Support and Contact
- Bug Reports: [GitHub Issues](https://github.com/viarotel-org/escrcpy/issues)
- Contact: viarotel@qq.com