«Борьба с электроникой» - это первоначальное название этой статьи, но со временем это стало одной из историй моего приключения в области веб-разработки. Как пользователь Windows 10 я должен гордиться, потому что, насколько великая команда Microsoft старается внести некоторые изменения, даже если мой bash / cmd не так хорош, как пользователь Mac, я все равно хочу написать хороший код.
В веб-вселенной существует множество фреймворков или библиотек, и для начинающих это может быть слишком много, но это нормально, если они пытаются сосредоточиться на чем-то одном. Хорошо, теперь моя очередь, у меня появилась идея создать какое-нибудь приложение с react и electronicjs. Так что я изо всех сил старался, просто чтобы убедиться, что все готово к работе, даже несмотря на то, что снаружи так много шаблонов реагирующих электронов, я просто хочу сделать это как можно проще.
Что такое electronicjs? Как видите, electronicjs - это фреймворк для создания кроссплатформенных настольных приложений с использованием веб-технологий.
Почему я выбираю electronicjs? Я чувствую, что хочу использовать этот фреймворк, потому что есть много классных приложений, таких как vscode, atom, discord и т. Д. Поэтому я призываю себя тоже использовать его, возможно, я смогу получить некоторый опыт, изучив его.
Я не ненавижу нативные настольные приложения, написанные на каком-то известном общем языке программирования, таком как Java, Python, .Net и т. Д. Если ваша цель - производительность, ничто не может превзойти нативные приложения. Но если у вас есть другая цель, такая как обслуживание, пользовательский интерфейс, обширная библиотека и многое другое, я рекомендую вам также использовать Electronjs.
Итак, вы по-прежнему предпочитаете нативные приложения веб-приложениям? Тогда не могли бы вы указать мне библиотеку java для создания внешнего интерфейса, такую как CSS-фреймворк Bootstrap, не так ли? Хорошо, у вас есть JavaFX, тогда все в порядке. Но дело в том, что даже если я его найду, это не похоже на то, чтобы все прошло гладко, как Bootstrap CSS (это потому, что я пришел из веб-мира, поэтому было бы намного проще LOL 😅) * Это просто мое мнение.
И когда я нахожусь в середине кода, мне просто интересно, есть ли способ сделать анимацию между BrowserWindow, когда событие window.show () и window.hide () выполняется. Чтение документации Electronjs кажется многообещающим, и после небольшого поиска я, хотя это было бы легко, но НЕТ! Ответ - нет! Реальность просто не прекрасна, как воображение, это непросто, как кажется. В документации я прочитал о опции анимации, но все это только для Mac, OMG !. Windows Пожалуйста !!!. Я знаю, что это эгоистичная просьба, но давай.
Я настолько пристрастился к тому, чтобы узнать, как я могу добиться этого. Создание Discordapp в качестве вдохновения, возможно, для меня это немного ошеломляет, я хочу сделать меню настроек, которое выглядело бы как Discordapp, насколько я знаю, когда я вижу свой процесс диспетчера задач, похоже, что Discord не создает новый процесс, когда Я щелкнул меню настроек.
Я попробовал следовать инструкциям этого парня bakkiraju в этом обсуждении https://discuss.atom.io/t/fade-in-fade-out/38028/5, но все равно нет удачи, когда я пытаюсь запустить приложение, это своего рода конфликт с опцией transparent: true. По какой-то причине он показывает окно дважды, но когда я переключаю прозрачность на false, это работает! Без мерцания. Итак, после нескольких дней поиска в Google я получил ответ https://github.com/electron/electron/issues/12130, спасибо, чувак, чувствую себя обновленным, потому что я не единственный, у кого была эта проблема в этом Мир.
Так выпрямите знаете, я думаю оживляющий ̶B̶r̶o̶w̶s̶e̶r̶W̶i̶n̶d̶o̶w̶ не мой Ниндзя WAY, ̶ MayBe Попробую меняющегося сделать модальное ̶i̶n̶s̶t̶e̶a̶d̶.̶
Давайте продолжим то, что я оставил позади, извините, что ушел в эти несколько месяцев, потому что мне нужно закончить то, что я начал, мой долг в колледже (Argghhhh, наконец), а затем наслаждаться временем, дурачиться. Пока я не понял, что аааа ... у меня есть ожидающий проект react-electronics, я думаю, что пора перейти к следующему шагу * больше и больше поиска в google 🔍.
Итак, я начинаю свое исследование с последнего ключа к разгадке, который я получил ранее от Discussion.atom , как сказал bakkiraju:
Наконец-то разобрался с проблемой, шаги, чтобы заставить анимацию работать
- создайте BrowserWindow с {transparent: true, frame: false}
- Не указывайте цвет фона во время создания BrowserWindow в js, укажите цвет в файле html, как на шаге 3
- В html используйте стили css, чтобы задать цвет фона тегу тела html с помощью rgba
Пример: в файле css используйте backgroundcolor = rgba (171,171,171,1) - В css добавить анимацию, которая меняет непрозрачность от 1 до 0
- захватить событие animationend в js-файле рендерера и выполнить remote.getCurrentWindow (). hide ();
🙄 🙄 🙄 🙄 🙄 😤 😤 😤 😤 😤
Хорошо, когда я впервые прочитал эту инструкцию: «Хммм, хорошо. Я могу это сделать. Это обычный css-переход ». Хаааа ... это глупо, кажется, слова «легче говорить, чем действовать» действительно верны.
Когда я попытался анимировать электронный BrowserWindow с помощью этого шага, я обязательно добавил и удалил классы css в dom внутри, и простой ответ был FAIL. Я не знаю, что, черт возьми, происходит, это это проблема javascript?, проблема css? или я проблема? Я думаю, что последний из них наиболее актуален. Да, это потому, что я не знаю об этом мире. Что касается работы reactjs, проблема возникает, когда я не использую ту же среду, что и bakkiraju *, я думаю, может быть, если я просто использую обычный html, javascript и css, он будет работает нормально, к сожалению, я использую Reactjs * sad 😭.
Все больше и больше поисков в google, medium, youtube и т. Д., Но все равно безуспешно. Нажав на одну и ту же статью дважды, трижды или даже больше, просто чтобы получить правильный ответ. Отчаянно пытаясь понять это, я что-то упускаю, бла-бла-бла. Хорошо, мне сначала нужно сделать перерыв, может, так я найду то, что действительно ищу. 😪
# Обновление 30 июля 2020 г.
Прежде всего, спасибо за суть от Виктора Арему и извиняюсь за очень долгое обновление после всего этого времени.
Хорошо, вот обновление. После расследования того, что произошло Почему мой переход css не работает?, Выяснилось, что я не знаю самого React, затем я понимаю, что мне нужен какой-то способ реализовать этот переход css в стиле React, поэтому я не могу просто сделать императивный способ, например, добавить и удалить классы из JSX. А потом угадайте, что? Это очень просто, мне просто нужно использовать пакет под названием ReactCSSTransitionGroup, чтобы заставить переход работать в React, 😭 Наконец… 😭.
Вы можете посмотреть учебник Петра Тичи из iHateTomatoes ниже:
Мне кажется, очень легко понять, когда кто-то что-то объясняет, делая что-то 😁.
Есть и другие библиотеки для создания отличной css-анимации, такие как React Spring или Framer Motion, если вы хотите попробовать что-то необычное. Так что просто проверьте это, если вы чувствуете, что ReactTransitionGroup не подходит для всего, что вам нужно.
И напоследок, я хочу отметить несколько моментов об электронном BrowserWindow:
- Используйте его только тогда, когда вам это нужно, почему я сказал «только когда вам нужно», потому что управление несколькими BrowserWindow может быть сложным, например, проверять положение самого окна, обязательно складывать друг друга с помощью окна man и т. Д. И, конечно же, это будет стоить вам дополнительного расхода ОЗУ.
- Случай использования BrowserWindow, который я обнаружил до сих пор, предназначен для создания скрытого рабочего потока, который будет использоваться для работы с высокой загрузкой процессора, поэтому он не будет блокировать процесс основного потока. Другой вариант использования - создать простую анимацию, такую как анимация Discord, когда мы запускаем приложение, чтобы пользователь не видел пустую белую страницу, в то время как приложение объединено и обслуживается в домене, поэтому после завершения загрузки домена окно загрузки будет прекращено. Я думаю, это значительно улучшит UX. Если вы хотите узнать, как это сделать, вы можете прочитать статью Учебник по экрану электронной загрузки Slack / GitKraken / Discord от Nicola здесь.
Последнее слово, спасибо, что дочитали до конца, надеюсь, вы узнали что-то новое. Мир 😁.
