![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
electron
文章平均质量分 50
草莓味的屁
github地址:github.com/zhaosheng2000
展开
-
Clipboard 剪贴板,一个基于Electron+react+antd构建的剪贴板小工具
Clipboard 剪贴板简介简介一个基于Electron+react+antd构建的剪贴板小工具概述使用场景: 在我们使用word,excel,等编辑工具或者深度阅读文章的时候,每当需要复制一段文字并且记录下来,就要重复切换app或者窗口。或者是在复制繁杂的字段时,想要粘贴上上次甚至上上上次复制的内容,就需要再次找到那段文字,重新复制。使用Clipboard,它会帮你记录每次复制的内容。再次使用选中即可。技术背景:Electron桌面app开发介绍主界面主界面在屏幕下方显示原创 2021-05-22 08:12:14 · 1605 阅读 · 7 评论 -
node工具nodemon的妙用
node工具nodemon的使用nodemon是一种工具,可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序。在我使用react+antd开发electron桌面应用的时候总是需要重启electron .来查看修改效果,每次都需要输入两次指令,很不方便。使用nodemon可以监听文件变化,避免每次重复输入指令重启electron。安装npm install -g nodemon 或者 npm install --save-dev nodemon使用在我的项目里原创 2021-04-28 13:22:42 · 420 阅读 · 0 评论 -
electron配置应用icon(五)
在打包electron应用程序的时候,如果没有配置icon,那么打出来的包图标就会是默认的。下面介绍一下如何创建自己的个性化图标。设计图标这里我用到了sketch,没有app的可以自行下载。新建一个文档创建一个宽高都为512的画板,画板内创建矩形。调整圆角,设置填充色。这里我用到了iconfont里面的图标,调整好比例。(不是专业设计师,能看就行)设计完成后就可以导出了。导出选中画板,点击导出。导出png格式的文件即可。转换图标格式png格式是无法作为图标来使用的。mac上原创 2020-06-06 15:30:04 · 7698 阅读 · 2 评论 -
electron打包(四)
在所有工作完成以后(react页面开发完成,页面已经build),就需要对我们的项目进行打包。打包前的配置首先要知道我们在开发的时候主进程加载的是react前端页面的本地url,这里需要换成react打包后的本地文件地址。注意:react打包以后可能会出现各种各样的的问题,这里我就遇到了一个问题。就是开发的时候页面正常显示,打包成静态文件以后点击空白,一开始以为是没有设置homepage,检查之后发现不是这里的问题。后来经过多方面排查发现路由用的是BrowserRouter,对应的地址必须是服务器原创 2020-06-06 15:29:30 · 1099 阅读 · 2 评论 -
electron优化页面显示逻辑(三)
electron优化页面显示逻辑(三)在确定功能组成后,将不同功能划分为了不同的页面。由于使用的UI是antd,于是就将页面做成了侧边导航栏的形式。但是在实际操作中发现当切换slider的时候,当前页面的计时器会清空。用户必须手动结束当前页面的计时后才能查看其他页面的信息。这样用户的体验感就不太好。就打算把主计时窗口单独为一个window,其他页面做到另一个窗口,互不影响。通过系统托盘扩展菜单的形式以供用户选择不同的窗口。这样即使用户查看更多信息,也不会影响主页面的进程。...原创 2020-06-06 15:28:51 · 440 阅读 · 0 评论 -
electron设置BrowserWindow(二)
electron之BrowserWindow的常用设置在设置完main.js以后就可以在electron生成的window里面利用react+antd显示业务效果了。创建BrowserWindow需要在main.js也就是主进程里面创建。关于BrowserWindow的相关属性可以参考官网BrowserWindow。这里主要记录的是如何实现在点击关窗口的闭按钮时隐藏浏览器窗口而不是真正的关闭。监听窗口关闭事件事件: ‘close’返回:event Event在窗口要关闭的时候触发。这是原创 2020-06-06 15:28:01 · 4780 阅读 · 0 评论 -
electron与react结合开发(一)
创建react项目按照官网步骤进行操作即可引入electron注意:引入electron的时候可能会因为网络原因导致失败,建议替换成国内源npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/使用yarn将npm换为yarn即可创建main.js可以参照electron官方示例。在根目录下创建main.js// Modules to control application life and create原创 2020-06-06 15:27:15 · 3758 阅读 · 1 评论