Electron уже не новая технология, сначала это был фреймворк, полученный из github из редактора Atom. Написав Javascript, HTML, CSS, можно быстро скомпилировать межсистемные настольные приложения. Появление Electron расширило нашу деятельность в качестве фронтенд-разработчиков.
Поделитесь небольшим приложением, основанным на технике Pomodoro, недавно созданной с помощью Electron. Из-за сложности реализации на рынке уже есть много подобных приложений. Давайте попробуем реализовать его с помощью Electron.
Предварительный просмотр финального эффекта:
🍅 Метод работы
Суть Техники Помидора состоит в том, чтобы разделить части задачи на единицы времени (25 минут), которые могут быть выполнены.В течение этих 25 минут сосредоточьтесь на этой задаче 3 и не допускайте ничего, не связанного с задачей.После того, как задача будет завершено, это можно сделать в течение короткого времени.Отдохните и возобновите работу.
Таким образом, смысл этого приложения в том, чтобы позволить вам создавать задачи, ⏳ 25 минут, чтобы помочь сосредоточиться на задаче, над которой вы сейчас работаете.
Стоя на плечах гигантов
Пробуя новую технологию, не учитесь создавать стек технологий с нуля, сначала сделайте это, а затем проверьте, не возникнет ли у вас проблем.Электронное сообществоЕсть много отличных осадков, инструментов, шаблонов, компонентов, руководств и многого другого.
Реагировать поиск по ключевым словам, найтиelectron-react-boilerplateЭта стандартная библиотека, эта библиотека была интегрирована сreact
, redux
, sass
, flow
, hmr
webpack
Ожидание инструментов во время подготовкиelectron-builder
упаковочный инструмент, какelectron
Для новичков мы предпочитаем готовые инструменты, чтобы быстро начать развитие бизнеса.
SVG и компоненты React
Вероятно, нарисован эскиз, готовый перейти в стадию разработки. Учитывая, что иконка svg будет использоваться позже, сначалаFlatIconНайдите несколько бесплатных иконок здесь, загрузите файл SVG.
пройти черезSVGRОнлайн-инструмент для импорта содержимого SVG для генерации кода компонента React. (у svgr также есть такие инструменты, как cli)
Преимущество использования SVG Component в том, что вы можете более гибко управлять стилем в коде, по сравнению с иконками png, он более интерактивен и имеет высокий уровень повторного использования.
Подносы и всплывающие подносы
Когда приложение запускается, оно скрыто в углу меню в трее. При нажатии отображается BrowserWindow. С помощью метода, предоставленного Electron, можно получить информацию о границах лотка и всплывающем окне трея, а также Координатное положение может быть установлено.
// main.js
const tray = new Tray(path.join(__dirname, '../static', 'tray.png'));
const mainWindow = new BrowserWindow({
// ...others
frame: false,
resizable: true,
transparent: true
});
const showWindow = () => {
const { x, y } = getPositionFromActiveDisplay();
mainWindow.setPosition(x, y, true);
mainWindow.show();
};
const getPositionFromActiveDisplay = () => {
const trayBounds = tray.getBounds();
const windowBounds = mainWindow.getBounds();
const x = Math.round(trayBounds.x + trayBounds.width / 2 - windowBounds.width / 2);
const y = Math.round(trayBounds.y + trayBounds.height);
return { x, y };
};
👆 Треугольник фигуры рисуется кодом интерфейса, плюс цвет фона рамки и электрона, должно получиться вот так.
Поток рендеринга и основной поток
приложению нужна функция обратного отсчета, которая сообщает пользователю, сколько времени занимает выполнение задачи на расстоянии. Электрон имеет процесс рендеринга и основной поток, BrowserWindow не виден, когда процесс рендеринга попытается уменьшить потребление, поэтому, если поставить галочку, если, когда приложение находится в фоновом режиме, в процессе рендеринга появится очень большое отклонение по времени. Используемые здесь ipcMain и ipcRenderer Electron предназначены для межпроцессного взаимодействия.
Отправлять события Tick каждую секунду в основном потоке
// main.js
ipcMain.once('store-ready', event => {
const run = () => {
setTimeout(() => {
run();
event.sender.send('tick');
}, 1000);
};
run();
});
Процесс визуализации получает событие и отправляет действие TICK.
// app/index.js
const store = configureStore({
tasks: electronStore.getTasks()
});
ipcRenderer.send('store-ready');
ipcRenderer.on('tick', () => {
store.dispatch({
type: TICK
});
});
В хранилище избыточности текущая выполняемая задача оценивается для расчета времени обратного отсчета.
switch (action.type) {
case TICK:
return {
...state,
rows: state.rows.map(task =>
task.id === state.currentId
? {
...task,
remain: Math.max(task.remain - 1, 0)
}
: task
)
};
постоянное хранилище данных
Существует много решений для сохранения данных, поскольку это интерфейсный браузер, мы можем выбрать localStorage, Cookie, indexDB и так далее. Учитывая надежность, постоянство и место для хранения, вы также можете записывать данные в путь приложения, записывая файлы в Electron. Таким образом, даже если приложение удалено, пока данные не очищены, пользовательские данные все еще существуют.
Путь к хранилищу приложения можно получить через приложение Electron getPath.
import { app } from 'electron';
app.getPath('userData');
Путь к приложению под Mac/Users/user/Library/Application Support/focus
. Более простой способ напрямую использовать библиотеку с открытым исходным кодомelectron-store
,кkey-value
формат для хранения json-файлов.
{
"tasks": {
"rows": [
{
"name": "任务名称",
"id": "91ac7f05-76f4-46ea-addb-f392a3a29b54",
"created_at": 1553398427806,
"plan": 1500,
"remain": 0,
"done": true
}
],
"currentId": "91ac7f05-76f4-46ea-addb-f392a3a29b54"
}
}
Пользовательский интерфейс обратного отсчета
Некоторые стили сложно реализовать с помощью css, но очень просто реализовать с помощью svg. Например, пользовательский интерфейс с обратным отсчетом, закругленные углы пути и длину пути сложнее реализовать с помощью CSS. Вы можете рисовать и обрабатывать прямо в Sketch, экспортировать его в svg и управлять им напрямую через код реакции.
export default function(props: Props) {
const offset = percentage * totalLength;
const cx =
Math.cos(percentage * Math.PI * 2 - Math.PI * 0.5) * radius + radius;
const cy =
Math.sin(percentage * Math.PI * 2 - Math.PI * 0.5) * radius + radius;
return (
<svg>
...others
<circle
id="path-1"
cx={cx}
cy={cy}
r="32"
fill="white"
style={{ transition: '1s linear' }}
/>
<path
...others
strokeLinecap="round"
strokeDasharray={totalLength}
strokeDashoffset={offset}
style={{ transition: '1s linear' }}
/>
</svg>
);
}
Оценка критического состояния
Приложение должно иметь уведомление в конце времени задачи.Из-за дизайна галочки 👆 его можно поместить в промежуточное программное обеспечение избыточности, чтобы определить, завершена ли задача.
// middlewares/tasks
export default ({ getState }) => next => action => {
if (typeof action === 'object' && action.type === 'TICK') {
const beforeCount = getTimeEndTaksCount(getState);
next(action);
const afterCount = getTimeEndTaksCount(getState);
if (beforeCount !== afterCount) {
new Notification('Focus,任务完成了吗?');
}
} else {
next(action);
}
};
После действия Tick определите, изменилось ли количество выполненных задач, и используйте уведомление HTML5, чтобы уведомить пользователя.
Travis CI
После разработки функции используйтеelectron-builder
Он упакован и выпущен, и после того, как сборка будет отправлена на выпуск github, пользователи могут напрямую загрузить последний пакет здесь.
такой же,boilerplate
уже готов.travis.yml
файл, единственное, что нам нужно сделать, это вGitHub.com/settings/к…для создания токена наwww.travis-ci.org/Настроить перед сборкойEnvironment Variables
,GH_TOKEN
триггерная сборка, после успешной сборки вы можете увидеть пакет, который был успешно собран, загрузить и использовать
Суммировать
Используя Electron, фронтенд-разработчики могут использовать собственное оружие для создания кросс-системных настольных приложений, не изучая другие технологии.Недостаток в том, что упакованный объем небольшой функции составляет 70M.
Это приложение проще, чем ожидалось, от идеи до окончательной реализации, и заинтересованные студенты могут также сделать некоторые гаджеты своими руками. Полный код есть на githubGitHub.com/он Кайл/Будда…, добро пожаловать в опыт, а также добро пожаловать в звезду~