w88体育_w88官方网站_w88优德官方网站

优德88官方线上平台_w88优德官方网站_w88中文版

admin1个月前272浏览量

用 Electron 开发桌面功率东西

Electron 现已不算新技能,最早是 github 从 Atom 编辑器衍生出来的结构。通过编写 Javascript, HTML, CSS 能快速编译出跨体系的桌面 app。Electron 的呈现使得作为前端开发工程师的咱们输出规模更广。

共享最近用 Electron 做的一个根据西红柿作业法的小运用,因为完结难度不大,市面上现已有十分多相似的app。咱们测验用 Electron 来完结一个。

终究作用预览:

作业法

西红柿作业法的中心是将使命颗粒拆分到单位时刻内(25分钟)能够完结,在这25分钟内专心在这个使命三,不允许做任何与使命无关的事,在使命使命完结之后能够时刻短歇息一会,再持续作业。

所以这个 app 的重点是让你创立使命,⏳ 25分钟,帮让 focus on 当时在做的使命。

站在伟人的膀子上开发

测验新技能的时分,不要从零开始学习怎么建立技能栈,先做出来,遇到问题再查。 Electron 社区有许多优异的沉积,东西,模板,组件,教程等等。

查找 react 关键字,找到了 electron-react-boilerplate 这个样板库, 这个库现已集成了 react, redux, sass, flow, hmr webpack 等东西,一起预备好 electron-builder 打包东西,作为 electron 新手,咱们优先挑选开箱即用的东西,快速敞开事务开发。

SVG 和 React Component

大约画了一下草图,预备进入开发阶段。考虑后边会用到 svg icon,先在 FlatIcon 上找些免费的图标,下载 SVG 文件。

通过 SVGR 在线东西导入 svg 内容生成 React Component 代码。(svgr 也有 cli 等东西)

用 SVG Component 的优点是能够在代码上更灵敏地操控款式,比较 png 图标可交互性强,复用率高。

托盘和托盘弹窗

这个 app 发动的时分就隐藏在托盘菜单的一角,点击的时分显现 BrowserWindow,通过 Electron 供给的办法,能够获得托盘和托盘弹窗的 Bounds 信息,设置坐标方位。

// 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 };
};

图的三角是由前端代码制作的,加上 frame 和 electron 背景色,应该长这样。

烘托线程和主线程

app 需求倒计时功用,告知用户间隔使命完结时刻还有多久。Electron 有烘托进程和主线程,BrowserWindow 不行见的时分,烘托进程会尽量削减耗费,所以假如 Tick 在烘托进程的话,当 app 处于后台时会呈现十分大的时刻误差。这儿运用 Electron 供给的 ipcMain 和 ipcRenderer 做进程通讯。

在主线程每秒发送 Tick 事情

// main.js
ipcMain.once('store-ready', event => {
const run = () => {
setTimeout(() => {
run();
event.sender.send('tick');
}, 1000);
};
run();
});
仿制代码

烘托进程就收事情并将 dispatch TICK action。

// app/index.js
const store = configureStore({
tasks: electronStore.getTasks()
});
ipcRenderer.send('store-ready');
ipcRenderer.on('tick', () => {
store.dispatch({
type: TICK
});
});
仿制代码

redux store 里边判别当时履行的使命核算倒计时时刻。

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 写文件的方法,把数据写入到运用途径下。这样即便 app 被卸载了,只需数据没被清空,用户数据还在。

通过 Electron app getPath 能够获得运用存储途径

import { app } from 'electron';
app.getPath('userData');
仿制代码

mac 下运用 app 的途径是 /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"
}
}
仿制代码

倒计时 UI

有些款式可能用 css 完结难度较大,而用 svg 的方法完结起来十分简略。比方倒计时 UI,途径圆角和途径长度用 CSS 完结复杂度较高。能够在 Sketch 上直接制作处理,导出成 svg,直接通过 react 代码操控。

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 (

...others

id="path-1"
cx={cx}
cy={cy}
r="32"
fill="white"
style={{ transition: '1s linear' }}
/>

...others
strokeLinecap="round"
strokeDasharray={totalLength}
strokeDashoffset={offset}
style={{ transition: '1s linear' }}
/>

);
}
仿制代码

临界状态判别

app 在使命时刻结束时需求有 Notification,因为的 Tick 规划,判别使命是否完结能够放在 redux middleware 上。

// 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 action 之后,判别使命完结数是否有改变,并运用 HTML5 Notification 告诉用户。

Travis CI

功用开发结束之后,运用 electron-builder 进行打包发布,构建之后推到 github release 下,用户能够直接在这下载到最新的包。

相同的, boilerplate 现已预备好 .travis.yml 文件,仅有需求咱们操作的是在 github.com/settings/to… 上生成 token,在 www.travis-ci.org/ 构建之前装备 Environment Variables,GH_TOKEN

tirgger build, 成功之后就能看到构建成功过的包,下载运用

总结

运用 Electron,前端开发者能够运用自己的兵器构建跨体系的桌面端运用,并且不必学习其他技能,缺陷是一个小小的功用打包完的体积是 70M。

这个 app 从有主意到终究完结比预期的简略,感兴趣的同学也能够自己 DIY 些小玩意儿。完好的代码在 github 上github.com/HelKyle/foc…,欢迎体会,一起也欢迎 star~

最新评论