使用Electron 构建是自己的桌面快捷应用

Gilbertat 发布于2019-08-20 11:08 / 629人阅读

摘要：是一款帮助开发者实现跨平台桌面开发的平台。开发者只需要使用即可开发属于自己的桌面应用。下面我来介绍下自己开发的一个小的应用，主要用来简化进入终端的步骤。增加的时候弹框选择一个想要打开的应用，可以添加自己的命令，比如甚至启动之类的。

electron 是一款帮助开发者实现跨平台桌面开发的平台。开发者只需要使用javascript html css即可开发属于自己的桌面应用。

所以说假如你是一位前端的话为什么不去试试用它来优化一下自己的工作流呢。

下面我来介绍下自己开发的一个小的mac应用，主要用来简化进入终端的步骤。

因为平时的很多工作都是在终端下进行的。比如我们要在自己构建的目录下执行npm，那么提前就要进入这个目录下，如果我有很多个这样的目录进入的话也相当麻烦，还要用cd命令一个一个进入。那么我就想着能不能直接点一下就打开终端并进入我想进去的命令呢？然后我能不能像打开应用那样，用可视化的方式来操作这件事呢，于是我想到了Electron。

先截取一下我要开发应用的最终效果图

非常精简的界面，只有增加和删除。

增加的时候弹框选择一个想要打开的应用，可以添加自己的命令，比如cd 甚至启动之类的。点删除的时候可以随意删除。
添加完后就可以用过点击这个快捷方式直接进入到你的目录下了。

下面介绍思路。

前端的应用框架我选用了React+Redux，并使用了Material-UI组件库。

shell 使用的是 local-shell@^1.0.0。开发之前我有仔细阅读Electron的ApI,发现它的shell api 不能实现我想要的直接打开一个应用的功能，有兴趣的可以仔细研究一下。所以就去Npm上搜到了这个local-shell。

前端应用与Electron的通信我多带带写在了一个文件中，通过window这个全局变量联系到一起。
之所以分开，是因为我早先的思路是先开发webapp然后再用electron包装，webapp中不能使用electron,所以多带带把electron的相关方法拿出来。

如果只是单纯开发桌面应用则不需要这样做。
你可以先开启webpack server，然后Npm start electron，直接在index.html里面引入webpack的输出app.js，然后所有的东西都按模块化开发。

另外在测试桌面app的时候发现不能直接往文本里复制，google后发现是因为没有设置菜单项的缘故。希望这能对你有所帮助。

项目地址: https://github.com/wq123456/E...
个人博客地址：https://wq123456.github.io

专线服务服务器托管构建自己的云服务器怎么构建自己的云服务器怎样构建自己的云服务器 webrtc结合electron桌面分享

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80415.html

如何使用前端技术开发一个桌面跨端应用

摘要：使用实现桌面应用实现离线可用很多方法，比如使用技术。还有一个好处，因为它完全基于来实现可以使用的一些新功能，那我们理论上可以在做桌面应用时顺手把应用也做了。本文将会讲述一个完整的跨端桌面应用代码画板的构建，会涉及到整个软件开发流程，从开始的设计、编码、到最后产品成型、包装等。本文不仅仅是一篇技术方面的专业文章，更会有很多产品方面的设计思想和将技术转换成生产力的思考，我将结合我自...

shixinzhang 2019-08-23 15:53 评论0 收藏0
手把手教你把前端代码打包成msi和exe文件

摘要：本文主要介绍应用如何打包成和文件。添加监听并生成快捷方式安装卸载运行步骤和重新打包此时，再次运行进行安装，就会自动再桌面和开始菜单生成快捷方式了。本文主要介绍Electron应用如何打包成msi和exe文件。由于介绍Electron打包成msi和exe的文章很少，官方的文档也一笔带过，在研究的过程中踩了很多坑，所以写下此文，给其他人一个参考。关于Electron基础知识的文章，官方文...

Miracle 2019-08-21 14:38 评论0 收藏0
Markcook 1.2，超轻的开源markdown编辑器

摘要：更新历史修复了无法导出中文文件的，增加了拖拽导入文件的功能。把编码对象作为参数传入，就可以生成一个可供下载的链接，下载的内容是完美的中文字符其他种类字符同样支持，代码如下保存为格式以上就是两个关键新功能的实现原理。 Markcook 1.2 showImg(https://imgly.net/img/AhB.jpg); 项目地址：https://github.com/jrainlau...

BlackMass 2019-08-19 18:06 评论0 收藏0
Electron入门介绍

摘要：本文主要讲解的入门。可以帮助我们管理包的下载依赖部署发布等。可以认为是中的。后续使用中，全部替换为即可。命令根据它，自动下载所需模块用于创建窗口和处理系统事件安装包的位置。 Electron是什么可以认为Electron是一种运行环境库，我们可以基于此，用HTML、JS和CSS写桌面应用。PC端的UI交互，主要有web应用和桌面应用。具体采用哪种方式，主要看系统的应用场景，哪个更合适...

wing324 2019-08-21 18:41 评论0 收藏0