资讯专栏INFORMATION COLUMN

用electron写桌面应用

wawor4827 / 3141人阅读

摘要:说起桌面应用,想必大家使用过的就已经海了去了。那么现在我们就来生成一个程序包吧最后生成的可执行程序出就现在了如下位置愉快的双击使用吧

说起桌面应用,想必大家使用过的就已经海了去了。什么暴风影音、QQ、skype之类的,早已不是新鲜事!不过大家有没有了解过如何编写一个桌面应用?历史上,我们都有哪些方式去编写桌面应用呢?

实际上,桌面应用的历史并不算久远,不去查找各种资料,仅凭记忆,我能想到的曾经出现过的桌面应用编写语言就有:C++DelphiVBwinFormWPFswingawtQTflashObjective-CSwift...或许还有更多。

学习成本是不是有点高?这么多语言技术!!如果你恰好还碰到了一个吹毛求疵的老板或者PM,他就是那么迫切的希望自己的app能够多平台发布(也不管在那些平台上是否有客户),作为程序员的你,肿么办?是勇挑大梁,然后各技术栈学习失败,最终自尽以谢老板?还是果断离开?

当然都不是,够懒的程序员应该寻找更容易实现,又能满足老板需求的解决方案。那么,我们来看看今天的话题,electron吧!

electron是什么?

根据官网的描述,electron是一种可以使用网页技术来开发跨平台桌面应用的解决方案!感受一下,用你已知的技巧htmljavascriptcss就能写桌面应用,是不是想想就有点儿小激动?!

谁在用electron?

著名的前端界IDEAtom就是使用electron编写的,震颤了有不有?

看看还有哪些著名的应用是基于electron编写的:

那么接下来,让我开始吧!

准备工作

安装nodejs

安装yeoman

使用程序生成器
npm install -g generator-electron-naive

如果使用unix like操作系统,请在命令前加sudo

创建项目

那么我就先来一个简单的叫todo小应用:

yo electron-naive

当键入上述命令后,生成器会有一系列问题问你,按需回答即可:

问题中的Use remote URL是指,是否想直接加载一个远程的URL?如果选"是",那么会再要求你输入精确地址

调试
cd todo
npm run dev

上述命令操作完后,会有如下应用界面打开:

找到todo/src/index.html,用你喜欢的IDE打开,然后拷贝如下代码覆盖index.html原先的内容:



    
        
        TODO
    
    
        

    再来看我们app界面,变成了如下样子:

    生成应用程序包

    之前生成项目的过程中,在“Which platform you"d like to package to?”这个问题里,你可选择将来要支持的操作系统,以便生成相应的打包代码。

    那么现在我们就来生成一个程序包吧:

    npm run dist

    最后生成的可执行程序出就现在了如下位置:

    愉快的双击使用吧!!!

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

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

    相关文章

    • electron 将pc端(vue)页面打包为桌面端应

      摘要:于是乎,就想着把自己写的这个小项目打包成桌面端,方面每次打开电脑就能看。然后继续运行,然后白屏习惯性的首次失败。。解决方法进入文件夹下的将其中的修改为相对路径。再次运行,成功将的项目,显示为桌面应用。总结至此,打包桌面端就这样完成了。 背景 showImg(https://segmentfault.com/img/bVYowg?w=1922&h=862); 最近在学习RxJS,平时边看...

      Dongjie_Liu 评论0 收藏0
    • 使Electron 构建是自己的桌面快捷应

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

      Gilbertat 评论0 收藏0
    • electron原来这么简单----打包你的react、VUE桌面程序

      摘要:话不多说,进入正题一安装为了方便你以后的使用,建议全局安装。怎么安装就不废话了,不会的去官网,安装好之后也安装一个专用的打包工具,以方便我们后面打包的时候使用。有些只能在该事件发生后才能被使用。 也许你不甘心只写网页,被人叫做他会写网页,也许你有项目需求,必须写桌面应用,然而你只会前端,没关系。网上的教程很多,但是很少有能说的浅显易懂的,我尽力将electron打包应用说的清晰明了,希...

      shevy 评论0 收藏0
    • electron原来这么简单----打包你的react、VUE桌面程序

      摘要:话不多说,进入正题一安装为了方便你以后的使用,建议全局安装。怎么安装就不废话了,不会的去官网,安装好之后也安装一个专用的打包工具,以方便我们后面打包的时候使用。有些只能在该事件发生后才能被使用。 也许你不甘心只写网页,被人叫做他会写网页,也许你有项目需求,必须写桌面应用,然而你只会前端,没关系。网上的教程很多,但是很少有能说的浅显易懂的,我尽力将electron打包应用说的清晰明了,希...

      suemi 评论0 收藏0
    • Electron,从玩玩具的心态开始,到打造出一款越来越优秀的桌面客户端产品

      摘要:首发于酷家乐前端博客标题是我以第一视角基于开发客户端产品的体验,我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触到去开发客户端产品,最后随着业务和功能的复杂度提升再不断地优化客户端。 首发于酷家乐前端博客 标题是我以第一视角基于 Electron 开发客户端产品的体验,我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触 Ele...

      Markxu 评论0 收藏0

    发表评论

    0条评论

    wawor4827

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <