Руководство по внесению вклада

Для тех, кто хочет отправить PR в проект, обратите внимание на следующее содержание. Здесь мы представим соответствующую структуру проекта, чтобы помочь вам быстрее разрабатывать нужные функции.

Структура проекта

1. Общая структура проекта: проект делится на 3 части: main, preload и renderer. Каждая часть выполняет свою функцию:

   • main: основной процесс;
   • preload: поскольку основным интерфейсом программы является веб-версия DingTalk, все функции главного окна реализованы через динамическое внедрение JavaScript. Поэтому эта часть классифицируется как preload. Она включает два окна: главное окно программы и окно DingTalk;
   • renderer: страницы этой части не представлены в DingTalk. Они были добавлены при переходе от веб-версии к настольной версии для удовлетворения некоторых потребностей. Эта часть включает окна о программе, настройки и сообщения об ошибках сети.

2. Окна проекта: основные окна программы включают окно чата (mainWin), окно DingTalk (emailWin), окно настроек (settingWin), окно информации о программе (aboutWin) и окно сообщений об ошибках сети (errorWin). Код рендеринга окон чата и DingTalk находится в папке preload, написан на нативном JavaScript. Остальные окна находятся в папке renderer и написаны на Vue.js.

3. Папки с файлами:

   • Папка build содержит файлы конфигурации для сборки проекта с помощью webpack. В ней есть подпапки, соответствующие трём частям проекта.
   • Папка icon хранит файлы значков DingTalk. Кроме использования в исходном коде, они также используются как иконки программы при компиляции в установочные пакеты для разных платформ.
   • Папка screenshot используется для хранения скриншотов программы. Во время разработки она практически не используется.
   • Папка src содержит исходный код проекта, включая код основного процесса и процесса рендеринга.

4. Компиляция и упаковка: для компиляции и упаковки используется модуль electron-builder. После его применения можно использовать модуль electron-updater для предоставления функции автоматического обновления. Это очень удобно.

Стиль кода

1. В основном процессе (main) и preload для уменьшения размера отдельных файлов и эффективного управления кодом, все функциональные модули загружаются с использованием функций высшего порядка. Это позволяет нам получить доступ к объекту DingTalk во всех модулях кода.
2. Файл входа в основном процессе называется index.dev.js в среде разработки и index.js в рабочей среде.
3. Часть renderer следует тем же правилам кодирования, что и обычные проекты Vue.js. Подробнее см. в руководстве по стилю кодирования Vue.js, предоставленном официальным сайтом.
4. Во всех процессах, если необходимо получить доступ к ресурсам изображений или другим ресурсам, используйте путь path.join(app.getAppPath(), './icon/32x32.png'), чтобы получить их. Это связано с тем, что после упаковки относительные пути могут измениться, поэтому обязательно учитывайте это.
5. При кодировании рекомендуется использовать синтаксис ES6 и следовать правилам ESLint. При отправке PR старайтесь добавлять комментарии к коду и удалять ненужный код, чтобы уменьшить нагрузку на рецензентов.

Процесс PR

1. Подробно опишите изменения при отправке PR.
2. Перед отправкой PR убедитесь, что код синхронизирован с последним состоянием. Не отправляйте старый код.
3. Отправлять код PR следует в ветку dev, так как это самая актуальная ветка.

Об ошибках

1. Если возможно, предоставьте скриншоты ошибок.
2. Опишите проблему как можно подробнее, чтобы мы могли быстрее разобраться в ситуации и сократить время на общение.

Отладка основного процесса

1. Войдите в корневую папку проекта.
2. Измените файл build/main/webpack.dev.conf.js, закомментируйте плагин ElectronDevWebpackPlugin и измените devtool для использования sourcemap для удобства отладки.
3. Запустите npm run dev. После запуска сервера найдите файл main.js в папке dist. Установите произвольную точку останова в файле и запустите отладку в vscode. Вы сможете установить точки останова в исходном коде. Обратите внимание: сначала нужно установить точку останова в dist/main.js, иначе vscode не сможет перехватить точки останова в исходном коде.

Это краткое руководство, и многие детали не были подробно описаны. Если у вас есть вопросы, пожалуйста, свяжитесь со мной напрямую. Также приветствуются исправления ошибок в тексте.