electron 订阅
2014年7月,名为“电子”(Electron)的小型卫星专用运载火箭。 [1]  由新西兰政府和硅谷共同赞助的火箭实验室(Rocket Lab)宣布成功研制。 展开全文
2014年7月,名为“电子”(Electron)的小型卫星专用运载火箭。 [1]  由新西兰政府和硅谷共同赞助的火箭实验室(Rocket Lab)宣布成功研制。
信息
18m
制造商
火箭实验室(Rocket Lab)
特    点
小型卫星专用运载火箭
重    量
大于10t
中文名
电子
直    径
1m
发射场
新西兰玛希亚半岛的私有发射场
外文名
Electron
Electron性能数据
“电子”火箭是一种碳复合材料火箭,低地球轨道运载能力为110kg。采用液体燃料发动机,推力约32000磅。 火箭高18m,直径1m,重量大于10t。
收起全文
精华内容
参与话题
问答
  • Electron 开发入门

    千次阅读 多人点赞 2019-01-09 23:30:04
    剖析 Electron 从安装到发布的整个流程 如何使用 Git 管理 Electron 应用源代码 如何使用 C++ 开发 Electron 本地模块 知识点 + 示例 + 源代码 课程背景 Electron 允许使用 Web 技术(HTML 5、CSS 3、JavaScript)...

    课程亮点

    • 剖析 Electron 从安装到发布的整个流程
    • 使用 Git 管理 Electron 应用源代码
    • 使用 C++ 开发 Electron 本地模块
    • 知识点 + 示例 + Electron 3.0 源代码

    课程背景

    Electron 允许使用 Web 技术(HTML5、CSS3、JavaScript)开发跨平台桌面应用,这对 Web 前端和 Node.js 开发者是一大福音,因为从此又多了一项技能。目前已经有很多著名的应用在使用 Electron 开发了,比如微软的 Visual Studio Code、快应用 IDE、支付宝小程序 IDE 等,但关于 Electron 完整的项目实战教程非常少,这对新手的学习非常不便,基于此,作者写了本课程内容,希望读者通过学习,能有所收获。

    作者介绍

    李宁,欧瑞科技创始人 & CEO,技术狂热分子,IT 图书作者,CSDN 特约讲师、CSDN 博客专家,拥有近 20 年软件开发和培训经验。主要研究领域包括 Python、深度学习、数据分析、区块链、Android、Java 等。曾出版超过 30 本 IT 图书,主要包括《Python 从菜鸟到高手》《Swift 权威指南》《Android 开发指南》等。

    课程大纲

    enter image description here

    * 实际更新文章题目可能与框架略有出入

    课程内容

    开篇词:“桌面应用”是一顶璀璨的王冠

    大家好,我是李宁,网名“银河使者”,IT 图书作者(代表作《Python 从菜鸟到高手》,欧瑞科技创始人,领导和参与了欧瑞科技公众号,小程序(极客题库)的开发。现在正带领团队研发高效全平台开发工具 OriUnity,主要使用的技术包括 Electron 和 Go 语言。

    课程背景

    可能有很多读者会有这样的疑问:为什么用 JavaScript 来开发桌面应用?

    曾经的 JavaScript 脆弱、简陋、甚至有被边缘化的危险,不过 JavaScript 在经过了两次飞跃后(以 V8 为首的 JavaScript 引擎和 Node.js 的问世),不再受人欺负,早已升级为绿博士(复仇者联盟 4 中班纳博士和绿巨人的合体,强大而充满智慧)。 V8 引擎让 JavaScript 的运行速度飞快,Node.js 让 JavaScript 不仅仅能做 Web 前端页面,还能开发后端应用。

    尽管有了 Node.js,JavaScript 可以开发服务端应用,但有一类重要的应用它还是无法胜任——桌面应用。目前 Web 应用和移动应用看似成为主流,但如果没有桌面应用,Web 应用和移动应用甚至都不会存在。所有的 Web 浏览器(IE、Chrome、Firefox、Safari 等)都是桌面应用,如果没有桌面应用,Web 页面根本没地方运行;用于开发移动应用的开发工具(IDE)也是桌面应用。而且 Windows 的开始菜单和 Mac OS X 的 Docker 中的每一个图标都对应一个桌面应用,可以说,桌面应用无处不在。

    如果将 Web 应用和移动应用比作国王,那么桌面应用就是国王头上的那顶王冠,没有了王冠,国王什么都不是,而赐予 JavaScript 制作王冠之神力的正是 Electron。这是一个基于 V8 引擎和 Node.js 的开发框架,允许用 JavaScript 开发跨平台(Windows、Mac OS X 和 Linux)桌面应用。

    avatar

    有哪些著名应用使用 Electron 开发的

    目前有相当多的桌面应用是使用 Electron 开发的,例如,著名的 Visual Studio Code(微软推出的一个跨平台源代码编辑器)就是用 Electron 开发的;还有蚂蚁小程序(在支付宝中运行的小程序)的开发工具也是用 Electron 来开发的;以小米、华为为主的众多手机厂商推出的快应用(类似于微信小程序)的 IDE 也是用 Electron 开发的。

    蚂蚁小程序 IDE:

    avatar

    此外,大家熟悉的 Slack、Atom、XMind ZEN、WebTorrent、Hyper 等都是基于 Electron 的应用。

    从 Electron 的主要用户来看,很多都是大厂,如蚂蚁金服、小米、华为、GitHub(Electron 就是 GitHub 推出的)、微软等,由于现在 GitHub 被微软收购了,因而目前 Electron 的后台是微软。因此学习 Electron 不用担心以后没市场,毕竟,各大厂都在用 Electron。

    可能有很多读者以前开发过桌面应用,认为桌面应用也有缺点。比如,桌面应用很难做到实时更新,维护相对于 Web 应用费时费力,不过这个缺点是针对传统桌面应用的,而基于 Electron 的应用没有这个缺点。

    Electron 之所以这么多人用,并不仅仅是因为它基于 Web 技术,而且它还能调用很多本地 API,在实现很多功能时与本地应用非常接近。

    学习 Electron,成为更优秀的开发者

    作为一名开发者,学会开发桌面应用,会非常显著地提升自己的核心竞争力,而且 Electron 开发桌面应用使用的是 Web 技术,可以考虑将 Web 应用与桌面应用作为一个应用来开发,这样会大大提升开发效率。

    本课程笔者团队也正在使用 Electron 开发一款跨平台的开发工具 OriUnity,可以使用 JavaScript 同时开发桌面应用、Web 应用、移动 App 和小程序,而且可以将客户端与服务端融为一体。

    这个项目具有大量的创新技术点,以及大量的发明专利,包括改进的增强版 JavaScript,JS 与 SQL 融合、客户端和服务端一体化、虚拟组件、异构组件嫁接等,通过这些创新的技术,可以将开发效率提高 10 倍以上。

    在开发产品的过程中,我们也积累了很多 Electron 的实践经验。因此正好借着达人课的机会,将 Electron 的一些开发经验总结出来,希望对想入门 Electron 的读者有一定的借鉴作用。

    课程结构

    Electron 功能众多,但这些功能基本上可分为基础知识(开发环境安装、开发步骤、IDE 的选择等)、窗口、菜单、高级 API(数据库、托盘、摄像头、拖拽、剪贴板等)以及发布应用程序,本课程将会结合这些知识点详细讲解如何用 Electron 开发桌面应用。

    课程目的是培养大家解决实际问题的能力,每一课的知识点既相互独立、又有联系,比如,在创建托盘时需要用到上下文菜单的知识。大多数文章(除了配置开发环境和简介外)都配有完整的实现代码,并且在最后还提供了两个实战案例:基于 Electron 的云笔记和数据库管理系统,把离散的知识点结合起来完成非常复杂的桌面应用项目。

    本课程分为七大部分,共 29 篇(含开篇词)。

    第一部分(第 01 ~ 04 课):Electron 基础知识

    这部分主要介绍了用 Electron 开发跨平台桌面应用的原因、桌面应用的优势、Electron 应用的基本开发步骤、如何搭建集成开发环境、用 Git 管理 Electron 应用等内容,这一部分是 Electron 学习的开胃菜,大餐请继续往后看。

    第二部分(第 05 ~ 09 课):用 Electron 创建窗口

    这部分详细介绍了用 Electron 创建各种类型窗口的方式,主要内容包括只针对 Mac OS X 系统的文件展示窗口、打开对话框窗口、保存对话框窗口、显示消息对话框窗口、使用 HTML 5 API 创建子窗口、用 open 方法打开的子窗口交互、在窗口中嵌入 Web 页面等。

    第三部分(第 10 ~ 12 课):创建各种类型菜单

    菜单是桌面应用程序的重要部分,这一部分详细介绍了在 Electron 中如何创建各种类型的菜单,主要内容包括使用模板创建窗口菜单、如何设置菜单项的角色、菜单项的类型、为菜单添加图标、创建动态菜单、上下文菜单。

    第四部分(第 13 ~ 21 课):常用的核心 API

    这一部分是本系列课程的核心内容,讲解了 Electron 中常用的核心 API,主要包括创建托盘应用、拖拽操作、使用摄像头、根据操作系统定制样式、用纯 JavaScript API 操作 SQLite 数据库、用 Node.js 模块操作 SQLite 数据库、访问 MySQL 数据库、使用剪贴板、注册全局键、测试等。

    第五部分(第 22 ~ 23 课):发布应用程序

    由于基于 Electron 的桌面应用需要依赖 Node.js、Electron 以及众多的模块才能运行,这些东西肯定不能让用户自己一个个安装,最好的解决方案就是把这些东西与开发的桌面应用一起打包,然后将一个安装包发放给用户,用户只需要双击安装包就可以搞定,因而学会发布 Electron 桌面应用非常必要。

    因此,这部分内容主要介绍了如何用各种工具发布基于 Electron 的应用,主要包括使用 electron-packager 和 electron-builder 创建安装包及制作安装程序(dmg、exe 等)。

    第六部分(第 24 ~ 26 课):项目实战

    这一部分是本系列课程的画龙点睛之笔,需要把前面五部分介绍的知识点连接起来完成复杂的桌面应用,这里提供了两个完整的案例,一个是云笔记系统,该系统可以将本地的笔记保存到服务端,只是这里的服务端是以太坊,而不是传统的数据库;第二个项目是基于 Electron 的 MySQL 数据库管理系统,可以做本地管理 MySQL 数据库,而且还可以将数据上传到以太坊进行备份。

    第七部分(第 27 ~ 28 课):模块分析

    这一部分主要介绍了 Node.js 和 Electron 模块的相关知识,包括使用 JavaScript 开发 Node.js 和 Electron 模块以及使用 C++ 开发 Node.js 和 Electron 的本地模块。通过这一部分的内容,可以让 C++ 与 Electron 完美融合在一起,让 Electron 拥有无限扩展性。

    课程寄语

    Node.js 和 Electron 堪称 JavaScript 的左右护法,前者让 JavaScript 可以轻而易举地跨越不同类型应用的界限,后者让 JavaScript 可以进入服务端和桌面应用领域。有了这两个护法,JavaScript 可以真正成为唯一的全栈开发语言,从 Web 到移动,再到服务端,再到桌面应用,甚至是终端程序,无所不能。

    本课程并不是单纯讲解 Electron 的知识,而是想要教会大家开发 Electron 桌面应用的思想,提高动手能力,今后无论遇到多复杂的桌面应用需求都能得心应手,轻松应对。

    最后,预祝大家学习愉快,Good Luck!

    点击了解更多《Electron 开发入门》

    第01课:Electron 开发的优势

    1.1 Node.js,一个让 JavaScript 从丑小鸭变成白天鹅的框架

    可能很多读者会感到奇怪,本系列课程主要介绍的是 Electron,为什么一开始要提到 Node.js 和 JavaScript 呢?它们是什么关系呢?别急,听我慢慢道来。

    相信做 JavaScript 开发的读者对 Node.js 不陌生,Node.js 诞生于 2009 年,类似于 ASP.NET,是用来开发服务端程序的框架,使用的编程语言是 JavaScript。基于 Node.js 的 Web 框架非常多,比较常用的有 Express,还有 hapi.js,可能有些读者对 hapi.js 感到陌生,这个框架在国内用的比较少,不过在国外比较流行,hapi.js 是沃尔玛技术团队开发的框架,比较适合做 API 服务。

    Node.js 给许多开发者的第一印象是用来开发 Web 应用的,然而事实上,正是由于 Node.js 的存在,JavaScript 才摘下了“只能开发 Web 应用”的帽子。Node.js 使得 JavaScript 可以像 Python、Java 一样在终端(或 Windows 命令行)执行,它还提供了大量的 API,利用这些 API,JavaScript 几乎可以做任何事情。从这个角度看,Node.js 算是成就了 JavaScript,帮助 JavaScript 从一个只能开发 Web 前端应用的编程语言一跃成为全栈开发的超一流语言。

    Node.js 支持扩展功能,这些扩展成为模块,模块可以直接使用 JavaScript 编写,也可以使用 C++、Go 等语言在本地编写。目前已经有很多依赖 Node.js 的第三方模块和框架,形成了一个以 Node.js 为核心的庞大生态系统。在这个生态系统中,有一个分类就是用来开发桌面应用,成为了桌面 GUI,比较著名的包括 NW.js 和 Electron,其中,Electron 更有名气,连微软都使用 Electron 开发自己的 IDE——著名的 Visual Studio Code。此外,用 Electron 开发的应用还有很多,如 Atom、支付宝小程序 IDE(蚂蚁开发者工具)等。Electron 最初是由 GitHub 开发并负责维护的,后来 GitHub 被微软收购了,因此 Electron 现在背后的大树是微软。

    下图是 Visual Studio Code:

    19717b10-a3ac-11e8-99c1-bd24c427c523

    下图是蚂蚁开发者工具:

    b7f21c40-a3ac-11e8-99c1-bd24c427c523

    至此,也许很多读者会有新的疑问,为什么要开发跨平台的桌面应用?为什么用 Node.js 和 Electron 来开发呢?现在已经有很多流行的桌面应用开发工具,如微软的 Visual Studio、跨平台的 QT、Mac 平台 XCode。其实在使用 Node.js 和 Electron 之前,我也有这个疑问,下面就来回答一下。

    1.2 从桌面应用到 Web 应用,再回到桌面应用

    20 年前(大约 2000 年前后),绝大多数软件都以桌面应用的形式存在,像 Word、Excel 就属于典型的桌面应用,双击桌面的图标就可以运行。这些桌面应用在发售时一般会使用光盘(CD 或 DVD),将光盘放在精美的包装盒里,然后通过各大软件商店(有线下实体店)销售,因为那时互联网还不发达,而且网速极慢,所以只能通过线下方式销售软件。在购买软件时,要确保软件可以兼容自己的操作系统(那时候大多数人使用的是 Windows 操作系统),然后从包装盒中取出光盘,将光盘中的软件安装到自己的计算机中。

    随着时代的发展,改变也渐渐开始了。互联网的逐渐普及、网速的不断提高、网络访问越来越便捷、Web 浏览器的崛起,这些改变都在不断释放一个信号:传统的靠光盘分发软件的方式已经不再符合时代的要求,人们需要更快捷、更方便、成本更低、更容易升级和维护的方式分发软件。依现在的眼光看,毫无疑问,Web 应用满足所有的要求,幸运的是,十多年前的 IT 从业者也是这么想的,于是 Web 应用也逐渐火爆起来。

    Web 应用看似获胜,然而随着移动设备的兴起,又一轮变革开始了。开发者们发现,需要让他们的产品也支持这样的设备,以 iOS 和 Android 原生应用为代表的潮流开始引领世界。

    纵观十多年的软件开发进程,业界发生了巨变,多平台的时代正在慢慢来临:桌面应用、Web 浏览器、移动端以及其他平台,作为开发者,我们渐渐觉得,有必要支持多平台计算。

    那么桌面应用呢?桌面应用已经成为我们在日常生活中使用的计算平台之一,自从二十一世纪以来,发生了很多变化。在很多年前,微软的 Windows 系统是 PC 操作系统领域绝对的霸主,后来苹果公司的操作系统(Mac OS X),以它的创新性和专业性,削弱了 Windows 的统治地位。不仅如此,在 2016 年第一季度,谷歌的 Chromebook 成为全美最畅销的笔记本电脑,或许属于 Linux 系统的时代也将会来到。关键是现在你已经不能只开发支持 Windows 系统的应用了,还要开发支持苹果系统和 Linux 的应用。

    跨平台的桌面应用并不是什么新鲜的东西,像 Mono、QT、Java 等早就可以开发出支持多个主流操作系统的桌面应用了。通常,有 C++、C#、Java 开发经验的开发者会选择这样的技术来开发跨平台应用,但对于 Web 开发者,面对这些技术需要重新学一门语言,因此开发跨平台桌面应用对于 Web 开发者是有一定门槛的。

    自从 Electron 出来后,这种情况有了很大的改观。Electron 可以让你重用 Web 应用的代码来构建桌面应用,不仅如此,构建出来的应用可以同时在 Windows、Mac OS X 和 Linux 上运行,这有一个非常大的好处:代码和技能都可以复用,并且释放了一拨新的应用。

    除此之外,Node.js 的流行也意味着开发者们在构建他们的桌面应用时也可以受益于 Node.js 巨大的开源生态系统。Node.js 和 Web 开发者们都可以快速构建桌面应用,而且有些应用还真的很不错,比如,我现在经常用的 VS Code 就是一款非常不错的桌面应用。

    支持多种操作系统,而软件本身可以使用 JavaScript 编写,这个能力可以带来非常多的好处。正如前面提到的,尽管新的移动计算平台正在崛起,但是 PC 至今仍然是人们常用的,这也是为什么使用 Node.js 构建桌面应用正变为一种有意思的分发软件的方式。

    Electron 桌面应用相对于 Web 应用的优势有哪些呢?

    1.3 Web 应用为什么会火

    在讨论 Electron 桌面应用相对 Web 应用的优势之前,先来看一下 Web 应用为什么会火?

    Web 应用之所以会火,主要有如下几个原因:

    • 网速的提升,以及使用互联网的成本越来越低,使得相比其他通信渠道,互联网的使用人口基数正在大规模增加;
    • Web 浏览器受益于不断加剧的竞争, IE 之外的浏览器不断出现,这些浏览器拥有的新特性,继而让 Web 应用也可以利用这些新特性做出一些新的东西出来;
    • 相比像 C 和 C++ 这样的底层语言,简单易学的 HTML、CSS 和 JavaScript 降低了开发者制作 Web 应用的准入门槛
    • 开源软件的崛起意味着分发和获取软件的成本大大降低,这就使得开发者哪怕只有有限的经验和经历,只要拥有对应的开发技能都可以构建他们自己的 Web 应用。

    1.4 Web 应用的挑战

    上面的几点原因不难理解,对于开发者而言 Web 是一个非常重要的平台,不过现在还是存在一些因素对 Web 应用产生了一定制约和挑战。

    这些挑战主要集中在以下几点:

    • 网络不是一直可用,比如在飞机上或隧道里时,可能信号差或没有网络,这时 Web 应用就无法访问了;
    • 如果 Web 应用需要使用大量的数据,那么意味着访问 Web 应用需要向客户端传输大量的数据,这会导致 Web 页面加载速度缓慢;
    • 如果 Web 应用需要处理大文件(如大的图片或视频),先将文件上传到服务端,处理完再返回结果的做法并不是一种好的解决方案;
    • 由于 Web 浏览器有安全策略,因而 Web 应用在访问本机硬件时(如摄像头、蓝牙设备等),很有可能会受到限制;
    • 由于目前 Web 浏览器的种类非常多,无法控制用户使用哪个 Web 浏览器访问 Web 应用,因而在开发 Web 应用时就需要尽可能考虑到更多的浏览器,只要有的地方没考虑周全,就有可能会造成 Web 应用对某些浏览器不兼容的情况。

    1.5 桌面应用的优点

    Web 应用受限于网络和浏览器特性,在这些方面,桌面应用要优于 Web 应用,下面列出桌面应用的一些优点:

    • 启动和运行不依赖于网络;
    • 桌面应用可以即时启动,不需要等待资源从网络上下载完再启动;
    • 桌面应用可以访问计算机的操作系统和硬件资源,包括连接在计算机上的硬件设备;
    • 桌面应用可以更好地控制软件的用户体验,不需要担心不同浏览器处理 CSS 的规则以及哪些 JavaScript 特性是被支持的;
    • 一旦桌面应用安装到用户计算机上,就会永远在那里,它不像 Web 应用那样需要一台 Web 服务器,还需要提供一天 24 小时支持,以防 Web 服务器宕机,当然,如果 Web 服务托管商遇到问题就更糟糕了。

    通常,开发桌面应用要求开发者精通像 C++、Objective-C 或者 C# 这样的语言以及像 .NET、QT、Cocoa 这样的框架。这对于很多开发者来说,准入门槛有点高,他们很可能会放弃使用这些技术来构建桌面应用。

    而 Electron 就不一样,Electron 使用 JavaScript 开发桌面应用,任何 Web 开发者都很容易上手,就算不是 Web 开发者,学习 JavaScript 相对于 C++、C# 这些语言也非常容易,因此,Electron 的准入门槛非常低

    到现在为止,我们已经了解了 Electron 到底是做什么的,以及为什么要用 Electron 来构建桌面应用,后面的内容将会全面介绍 Electron 的各种技术,并提供一个完整的实战案例,让读者结合项目来学习用 Electron 开发桌面应用。

    点击了解更多《Electron 开发入门》

    第02课:Electron 开发的准备工作

    2.1 搭建 Electron 开发环境

    在使用 Electron 开发应用之前,要先安装 Electron,而 Electron 需要依赖 Node.js,因此在安装之前,要先安装 Node.js。Node.js 允许使用 JavaScript 开发服务端以及命令行程序,读者可以到 Node.js 的官网下载最新版本的安装程序。

    Node.js 是跨平台的,建议读者下载长期维护版本(LTS),然后双击安装程序开始安装即可。

    安装完 Node.js 后,进入终端(Windows 下是命令提示符窗口),运行如下命令安装 Electron。

    npm install electron -g

    如果安装成功,会显示如下图所示的信息(Windows)。

    b650e220-ac2d-11e8-8c28-1fcd9a8f1993

    安装完 Electron 后,可以输入下面的命令查看 Electron 版本。

    electron -v

    如果想删除 Electron,可以使用下面的命令。

    npm uninstall electron

    如果想升级 Electron,则可以使用这个命令。

    npm update electron -g

    直接执行 electron 命令,会显示如下图所示的窗口,该窗口包含了与 Electron 相关的信息,如 Electron 的版本号、Node.js 的版本号、API Demo 的下载链接等。

    f09a4680-ace9-11e8-9c45-adc0fa12a28f

    2.2 开发第一个 Electron 应用

    在开发 Electron 应用之前,需要创建一个 Electron 工程。Electron 工程必须要有一个 package.json 文件,创建 package.json 文件最简单的方式就是使用下面的命令。

    npm init

    在执行上面命令之前,最好先建立一个工程目录,在执行命令的过程中,会要求输入一些信息,输入过程如下图所示,如果不想输入,一路回车即可。本例输入了 package name(first)、entry point:(first.js),前者是包名,也可以认为是工程名,默认是 electron;后者是入口点,也就是运行 Electron 应用第一个要运行的 JavaScript 文件名,默认是 index.js。

    97942c60-ac33-11e8-afe5-6ba901a27e1b

    通过上面的命令自动创建 package.json 文件的内容如下:

    {  "name": "first",  "version": "1.0.0",  "description": "",  "main": "first.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC"}

    其实 package.json 文件中大多数内容都不是必须的,可以将 package.json 文件的内容精简为如下形式:

    {  "name": "first",  "version": "1.0.0",  "main": "first.js"}

    接下来编写一个最简单的 Electron 程序,该程序除了 package.json 文件是必须的,还有另外两个文件也是必须的,一个就是在 package.json 文件中定义的入口点文件,本例是 first.js;另外一个就是要显示在主窗口中的页面文件。由于 Electron 应用与 Web 应用使用同样的技术,因而这个页面文件就是 HTML 文件,本例是 index.html。因此,一个最基本的 Electron 应用由下面 3 个文件组成:

    • package.json
    • first.js
    • index.html

    这里的 index.html 文件就是普通的网页文件,下面给出简单的文件内容。

    <!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Hello World!</title></head><body><h1>这是第一个Electron应用</h1></body></html>

    first.js 文件的基本任务就是创建一个窗口,并将 index.html 文件显示在这个窗口上,现在先给出 first.js 文件的代码。

    const {app, BrowserWindow} = require('electron') function createWindow () {       // 创建浏览器窗口    win = new BrowserWindow({width: 800, height: 600})    // 然后加载应用的 index.html    win.loadFile('index.html')  }app.on('ready', createWindow)

    其中,electron 是 Electron 的模块,必须引用,该模块导出了一个 app 对象和一个 BrowserWindow 类,app 对象包含一些方法,如 on 方法用于将事件绑定到事件函数中。在代码的最后,将 createWindow() 函数绑定在 ready 事件上,该事件会在 Electron 应用运行时执行,通常在 ready 事件中创建主窗口,以及完成一些初始化工作。

    在 createWindow() 函数中创建了 BrowserWindow 对象,一个 BrowserWindows 对象表示一个窗口,通过 BrowserWindow 类构造方法参数指定窗口的尺寸(800 × 600),然后通过 loadFile 方法装载 index.html 文件。

    最后使用下面的命令运行 Electron 应用。

    electron .

    注意:运行上面命令时,终端(或命令提示符)应该在 Electron 工程目录下。

    程序运行效果如下图所示。

    ee56d250-ac3d-11e8-91e0-0f47f5fddd18

    2.3 响应事件

    编写 GUI 应用要做的最重要的事情就是响应事件,如单击按钮事件、窗口关闭事件等。对于 Electron 应用来说,事件分为如下两类:

    • 原生事件
    • Web 事件

    由于 Electron 在创建窗口时需要依赖本地 API,因而有一部分事件属于本地 API 原生的事件。但 Electron 主要使用 Web 技术开发应用,因而用的最多的还是 Web 事件,这些事件的使用方法与传统的 Web 技术完全相同。

    Electron 的原生事件有很多,比如窗口关闭事件 close、Electron 初始化完成后的事件 ready(这个在前面已经讲过了)、当全部窗口关闭后触发的事件 window-all-closed(通常在这个事件中完成最后的资源释放工作)、Electron 应用激活后触发的事件(activate,在 macOS 上,当单击 dock 图标并且没有其他窗口打开时,通常在应用程序中重新创建一个窗口,因此,一般在该事件中判断窗口对象是否为 null,如果是,则再次创建窗口)。

    下面完善 first.js 文件的代码,添加了监听上述窗口事件的代码。

    const {app, BrowserWindow} = require('electron'); function createWindow () {       //创建浏览器窗口    win = new BrowserWindow({width: 800, height: 600});    //然后加载应用的 index.html    win.loadFile('index.html');    //关闭当前窗口后触发 closed 事件    win.on('closed', () => {      console.log('closed');      win = null;    })  } //Electron 初始化完成后触发 ready 事件 app.on('ready', createWindow)//  所有的窗口关闭后触发 window-all-closed 事件app.on('window-all-closed', () => {    console.log('window-all-closed');    //非 Mac OS X 平台,直接调用 app.quit() 方法退出程序    if (process.platform !== 'darwin') {      app.quit();    }  })  //窗口激活后触发 activate 事件  app.on('activate', () => {    console.log('activate');    if (win === null) {      createWindow();    }  })

    首先在 Windows 10 上测试 Electron 应用,运行 Electron 应用,会显示 Electron 窗口,然后关闭窗口,会在命令提示符中显示如下图所示的信息。

    1d683780-acfe-11e8-9c45-adc0fa12a28f

    很明显,window-all-closed 事件先于 closed 触发,不过并没有触发 activate 事件,这个事件需要在 Mac OS X 上触发。现在切换到 Mac OS X 系统,用同样的方法运行 Electron 应用,然后最小化窗口,再让窗口获得焦点,最后关闭窗口,会看到终端输出如下图所示的信息。

    这说明在 Mac OS X 系统下,当窗口最小化后再获得焦点,会触发 activate 事件,然后关闭窗口,会触发 window-all-closed 和 closed 事件,不过当关闭最后一个窗口后,Mac OS X 下的应用并不会真正退出,而是应用的一部分仍然驻留内存,这主要是为了提高再次运行应用的效率,这也是为什么 Mac 机器的内存占用率会越来越大的原因,因为应用一旦启动,就不会真正完全退出,iOS 系统也有这个问题。

    f40b1dc0-acfe-11e8-afe5-6ba901a27e1b

    2.4 Electron 应用的特性

    到现在为止,我们已经完成了第一个 Electron 应用,再来看一下使用 Electron 开发的应用可以拥有哪些特性:

    • 支持创建多窗口应用,而且每个窗口都有自己独立的 JavaScript 上下文;
    • 可以通过屏幕 API 整合桌面操作系统的特性,也就是说,使用 Web 技术编写的桌面应用的效果与使用本地编程语言(如 C++)开发的桌面应用的效果类似;
    • 支持获取计算机电源状态;
    • 支持阻止操作系统进入省电模式(对于演示文稿类应用非常有用);
    • 支持创建托盘应用;
    • 支持创建菜单和菜单项;
    • 支持为应用增加全局键盘快捷键;
    • 支持通过应用更新来自动更新应用代码,也就是热更新技术;
    • 支持汇报程序崩溃;
    • 支持自定义 Dock 菜单项;
    • 支持操作系统通知;
    • 支持为应用创建启动安装器。

    我们刚刚看到,Electron 支持大量的特性,上述列出的只是其中一部分。其中,程序崩溃汇报是 Electron 独特的特性,NW.js 目前并不支持该特性。Electron 最近还发布了用于应用测试和调试的工具:Spectron 和 Devtron,在后面的课程内容中将会对它们进行详细介绍。

    点击了解更多《Electron 开发入门》

    第03课:Electron 桌面应用开发

    开发一款功能完整的桌面应用,通常不会使用记事本去完成所有的开发工作,核心的开发工作一般会在 IDE(集成开发环境,Integrated Development Environment)中完成。由于 Electron 应用主要使用 Web 技术(HTML、CSS 和 JavaScript)开发,因此只要支持编辑 JavaScript、HTML、CSS 代码的 IDE,都可以开发 Electron 应用。本节课将介绍两款常用的 IDE:WebStorm 和 VS Code,这两款 IDE 都支持 Web 开发,不过要想开发 Electron 应用,还需要做一个配置和调整。

    3.1 用 Webstorm 开发 Electron 应用

    可以直接在 WebStorm 中编辑 Electron 应用的代码,不过运行 Electron 应用需要执行如下的命令。

    electron .

    当然可以在终端输入上述命令,不过比较麻烦,比较好的做法是在 WebStorm 中直接运行 Electron 应用,实现方法有两个,我们逐一介绍。

    1. 使用扩展工具

    首先在 WebStorm 中先创建一个空的工程,然后将前面编写的 Electron 应用的 3 个文件复制到 WebStorm 工程中。

    再将需要执行的命令添加到 WebStorm 的扩展工具中,打开 WebStorm 的扩展工具设置窗口,按下图进行设置,最后单击 OK 按钮关闭 Create Tool 对话框。

    avatar

    创建完运行 Electron 应用的扩展工具后,选择工程中的文件,然后在右键菜单中单击 External Tools | electron(如下图所示),就会在 WebStorm 中运行 Electron 应用;或直接单击 WebStorm 中的 Tools | External Tools | electron 菜单项,也可以运行 Electron 应用。

    avatar

    注意:在 Windows、Program 中要输入 electron.cmd。

    2. 使用脚本文件

    使用第一种方式运行 Electron 应用,每次都需要单击 electron 菜单项,比较麻烦。为了更简单,可以在工程源代码文件目录(一般为工程根目录)创建一个脚本文件,如 run.js,并输入下面的代码:

    var exec = require('child_process').exec;free = exec('electron .');

    这两行代码使用了 Node.js 中 child_process 模块的响应 API 执行 electron 命令。直接在 WebStorm 中运行 run.js 文件即可,在第一次运行该文件后,下一次运行可以直接单击 WebStorm 右上角的运行按钮,如下图所示。

    avatar

    3.2 用 VS Code 开发 Electron 应用

    VS Code 是微软公司开发的开源的代码编辑工具,支持插件,它本身其实就是用 Electron 开发的,因此使用 VS Code 开发 Electron 应用更能说明 Electron 的强大。

    avataravatar

    3.3 用设置断点的方式调试 Electron 应用

    调试程序是开发 Electron 应用必不可少的步骤,最简单的调试方式就是执行下面的代码,在主窗口右侧会显示调试窗口,如下图所示。

     win.webContents.openDevTools()

    avatar

    使用 console.log() 方法可以在调试窗口中输出信息。不过这种调试方式比较笨,而且不能观察变量等资源的状态,因此本节课推荐另外一种调试方式,使用 VS Code 设置断点的方式调试 Electron 应用。

    切换到 first.js 文件,在 createWindow() 函数中添加如下两行代码。

    var n = 20;console.log(n);

    然后在 var n = 20; 的序号前面单击设置断点,如下图所示。

    avatar

    切换到调试窗口(左侧第 4 个按钮),如下图所示。

    avatar

    接下来设置 launch.json 文件,代码如下:

    {    "version": "0.2.0",    "configurations": [        {            "type": "node",            "request": "launch",            "cwd": "${workspaceRoot}",                        "name": "Electron Main",            "runtimeExecutable": "electron",            "runtimeArgs": [                ".",                "--enable-logging"            ],            "protocol": "inspector"        }    ]}

    单击上方的 Debug Main Process 按钮,会用调试的方式运行 Electron 应用,这时并没有显示窗口,而是程序停到了设置断点的那一行。单击代码窗口上方的 Step Over、Step Into 按钮,会一步一步执行程序,在左侧的变量监视区域会显示相关变量值的变化。双击变量,还可以在调试状态修改变量的值,这样可以更方便地观察不同值的变量对程序的影响。

    点击了解更多《Electron 开发入门》

    附录:Electron 版本升级

    在 2019 年 1 月 5 日,Electron 最新的 4.0.1 版发布了,尽管在写作本系列课程内容时,Electron 4.0 稳定版还没有发布,不过经过测试,本课程中的例子在 Electron 4.0 中仍然可以正常使用。Electron 4.0 及以上版本只是修正了一些 bug,同时还加了一些功能(主要增加了事件、一些方法),大的功能并没有增加什么。

    avatar

    如果希望升级到 Electron 4.0 或更高版本,可以按下面的方式去做。

    如果机器上已经安装了 Electron 3.x 或更低版本,不要直接使用下面的代码升级。

    npm update electron -g

    例如,机器上安装了 Electron 3.0.1,使用上面的命令只能升级到 Electron 3.1.0,跨大版本的升级,如从 2 升级到 3,或从 3 升级到 4,需要先使用下面的命令卸载 Electron。

    npm uninstall electron -g

    然后使用下面的命令重新安装 Electron。

    npm install electron -g

    安装完后,输入 electron --version 命令,如果输出 v4.0.1,说明已经安装成功,Good Luck。

    第04课:Electron 应用代码管理
    第05课:打开对话框的功能效果
    第06课:保存对话框和显示对话框消息
    第07课:使用 HTML 5 API 创建子窗口
    第08课:子窗口交互
    第09课:在窗口中嵌入 Web 页面
    第10课:使用模板创建原生菜单
    第11课:菜单项的角色和类型
    第12课:动态创建菜单和上下文菜单
    第13课:创建托盘应用
    第14课:Electron 应用中的拖拽操作
    第15课:摄像头的使用
    第16课:根据当前操作系统定制样式
    第17课:使用 localStorage 读写键值数据
    第18课:JavaScript 引擎操作 SQLite 数据库
    第19课:sqlite 3 模块操作 SQLite 数据库
    第20课:Electron 直接访问 MySQL 数据库
    第21课:剪贴板的使用
    第22课:打包和发布 Electron 应用
    第23课:实现自己的打包应用
    第24课:贪吃蛇游戏
    第25课:MySQL 数据库管理系统
    第26课:基于以太坊的云笔记
    第27课:Node.js 模块详解
    第28课:用 C++ 开发 Node.js 和 Electron 本地模块

    阅读全文: http://gitbook.cn/gitchat/column/5c3168154fcd483b02710425

    展开全文
  • electron深入浅出

    万次阅读 2018-12-13 14:39:56
    electron 简介 electron是由Github开发,是一个用Html、css、JavaScript来构建桌面应用程序的开源库,可以打包为Mac、Windows、Linux系统下的应用。 electron是一个运行时环境,包含Node和Chromium,可以理解成把web...

    electron

    简介

    electron是由Github开发,是一个用Html、css、JavaScript来构建桌面应用程序的开源库,可以打包为Mac、Windows、Linux系统下的应用。

    electron是一个运行时环境,包含Node和Chromium,可以理解成把web应用运行在node环境中

    结构

    electron主要分为主进程和渲染进程,关系如下图

    electron运行package.json中的main字段标明脚本的进程称为主进程

    在主进程创建web页面来展示用户页面,一个electron有且只有一个主进程

    electron使用Chromium来展示web页面,每个页面运行在自己的渲染进程

    快速开始

    接下来,让代码来发声,雷打不动的hello world

    创建文件夹,并执行npm init -y,生成package.json文件,下载electron模块并添加开发依赖

    mkdir electron_hello && cd electron_hello && npm init -y && npm i electron -D
    

    下载速度过慢或失败,请尝试使用cnpm,安装方式如下

    # 下载cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    # 下载electron
    cnpm i electron -D
    

    创建index.js,并写入以下内容

    const {app, BrowserWindow} = require('electron')
    
    // 创建全局变量并在下面引用,避免被GC
    let win
    
    function createWindow () {
        // 创建浏览器窗口并设置宽高
        win = new BrowserWindow({ width: 800, height: 600 })
        
        // 加载页面
        win.loadFile('./index.html')
        
        // 打开开发者工具
        win.webContents.openDevTools()
        
        // 添加window关闭触发事件
        
        win.on('closed', () => {
            win = null  // 取消引用
        })
    }
    
    // 初始化后 调用函数
    app.on('ready', createWindow)  
    
    // 当全部窗口关闭时退出。
    app.on('window-all-closed', () => {
       // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
       // 否则绝大部分应用及其菜单栏会保持激活。
       if (process.platform !== 'darwin') {
            app.quit()
       }
    })
      
    app.on('activate', () => {
    // 在macOS上,当单击dock图标并且没有其他窗口打开时,
    // 通常在应用程序中重新创建一个窗口。
        if (win === null) {
          createWindow()
        }
    })
    

    创建index.html

    <!DOCTYPE html>
    <html>
        <head>
          <meta charset="UTF-8">
          <title>Hello World!</title>
        </head>
        <body>
            <h1 id="h1">Hello World!</h1>
            We are using node
            <script>
                document.write(process.versions.node)
            </script>
            Chrome
            <script>
                document.write(process.versions.chrome)
            </script>,
            and Electron
            <script>
                document.write(process.versions.electron)
            </script>
        </body>
    </html>
    

    最后,修改packge.json中的main字段,并添加start命令

    {
        ...
        main:'index.js',
        scripts:{
            "start": "electron ."
        }
    }
    

    执行npm run start后,就会弹出我们的应用来。

    调试

    我们知道electron有两个进程,主进程和渲染进程,开发过程中我们需要怎么去调试它们呢?老太太吃柿子,咱们捡软的来

    渲染进程

    BrowserWindow 用来创建和控制浏览器窗口,我们调用它的实例上的API即可

    win = new BrowserWindow({width: 800, height: 600})
    win.webContents.openDevTools() // 打开调试
    

    调试起来是和Chrome是一样的,要不要这么酸爽

    主进程

    使用VSCode进行调试

    使用VSCode打开项目,点击调试按钮

    点击调试后的下拉框

    选择添加配置,选择node

    此时会把默认的调试配置打开,大概长这样

    什么?你的不是,不是的话,就直接把下面的复制并替换你的配置

    差不多这么办,那就把configurations里面第二项复制到你的configurations配置里面,第一个配置是用来调试node的

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "node",
          "request": "launch",
          "name": "启动程序",
          "program": "${workspaceFolder}/main.js"
        },
        {
            "name": "Debug Main Process",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "windows": {
              "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
            },
            "args" : ["."]
          }
      ]
    }
    

    可以看到${workspaceFolder},这是关于VSCode的变量,用来表示当前打开的文件夹的路径

    更多变量请猛戳这里

    修改完配置后,我们调试面板,选择我们刚才配置的

    在代码中标记需要调试的地方,然后点击绿色的小三角,就可以愉快的调试了

    进程通信

    在Electron中, GUI 相关的模块 (如 dialog、menu 等) 仅在主进程中可用, 在渲染进程中不可用。 为了在渲染进程中使用它们, ipc 模块是向主进程发送进程间消息所必需的,以下介绍几种进程间通讯的方法。

    哥俩好

    ipcMainipcRenderer是两个好基友,通过这两个模块可以实现进程的通信。

    • ipcMain
      在主进程中使用,用来处理渲染进程(网页)发送的同步和异步的信息

    • ipcRenderer
      在渲染进程中使用,用来发送同步或异步的信息给主进程,也可以用来接收主进程的回复信息。

    以上两个模块的通信,可以理解成发布订阅模式,接下来,我们看下它们具体的使用方法

    主进程

    const {ipcMain} = require('electron')
    
    // 监听渲染程序发来的事件
    ipcMain.on('something', (event, data) => {
        event.sender.send('something1', '我是主进程返回的值')
    })
    

    渲染进程

    const { ipcRenderer} = require('electron') 
    
    // 发送事件给主进程
    ipcRenderer.send('something', '传输给主进程的值')  
    
    // 监听主进程发来的事件
    ipcRenderer.on('something1', (event, data) => {
        console.log(data) // 我是主进程返回的值
    })
    

    以上代码使用的是异步传输消息,electron也提供了同步传输的API。

    发送同步消息将会阻塞整个渲染进程,你应该避免使用这种方式 - 除非你知道你在做什么。

    切忌用 ipc 传递大量的数据,会有很大的性能问题,严重会让你整个应用卡住。

    remote模块

    使用 remote 模块, 你可以调用 main 进程对象的方法, 而不必显式发送进程间消息。

    const { dialog } = require('electron').remote
    dialog.showMessageBox({type: 'info', message: '在渲染进程中直接使用主进程的模块'})
    

    webContents

    webContents负责渲染和控制网页, 是 BrowserWindow 对象的一个属性, 我们使用send方法向渲染器进程发送异步消息。

    主进程

    const {app, BrowserWindow} = require('electron')
    
    let win
    
    app.on('ready', () => {
    
        win = new BrowserWindow({width: 800, height: 600})
        
        // 加载页面
        win.loadURL('./index.html')
        
        // 导航完成时触发,即选项卡的旋转器将停止旋转,并指派onload事件后。
        win.webContents.on('did-finish-load', () => {
    
            // 发送数据给渲染程序
            win.webContents.send('something', '主进程发送到渲染进程的数据')
        })
    })
    

    渲染进程

    <!DOCTYPE html>
    <html>
        <head>
        </head>
        <body>
            <script>
                require('electron').ipcRenderer.on('something', (event, message) => {
                    console.log(message) // 主进程发送到渲染进程的数据
                })
            </script>
        </body>
    </html>
    

    渲染进程数据共享

    更多情况下,我们使用HTML5 API实现,如localStorage、sessionStorage等,也可以使用electron的IPC机制实现

    主进程

    global.sharedObject = {
        someProperty: 'default value'
    }
    

    渲染进程

    第一个页面

    require('electron').remote.getGlobal('sharedObject').someProperty = 'new value'
    

    第二个页面

    console.log(require('electron').remote.getGlobal('sharedObject').someProperty) // new value
    

    总结

    以上四个方法均可实现主进程和渲染进程的通信,可以发现使用remote模块是最简单的,渲染进程代码中可以直接使用electron模块

    常用模块

    快捷键与菜单

    本地快捷键

    只有在应用聚焦的时候才会触发,主要代码如下

    官方文档亲测没有效果

    const { Menu, MenuItem } = require('electron')
    const menu = new Menu()
      
    menu.append(new MenuItem({
      label: '自定义快捷键',
      submenu: [
        {
          label: '测试',
          accelerator: 'CmdOrCtrl+P',
          click: () => { 
              console.log('我是本地快捷键')
          }
        }
      ]
    }))
    Menu.setApplicationMenu(menu)
    

    全局快捷键

    注册全局,无论应用是否聚焦,都会触发,使用globalShortcut来注册, 主要代码如下,

    const {globalShortcut, dialog} = require('electron')
    
    app.on('read', () => {
        globalShortcut.register('CmdOrCtrl+1', () => {
            dialog.showMessageBox({
                type: 'info',
                message: '你按下了全局注册的快捷键'
              })
        })
    })
    

    显示如下,使用了dialog模块

    上下文菜单

    上下文菜单就是我们点击右键的时候显示的菜单, 设置在渲染进程里面

    主要代码如下

    const remote = require('electron').remote;  // 通过remote模块使用主程序才能使用的模块
    const Menu = remote.Menu;
    const MenuItem = remote.MenuItem;
    var menu = new Menu();
    menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
    menu.append(new MenuItem({ type: 'separator' }));
    menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
    
    window.addEventListener('contextmenu', (e) => {
      e.preventDefault();
      menu.popup(remote.getCurrentWindow());
    }, false);
    

    应用菜单

    上文中我们通过Menu模块创建了本地快捷键,应用菜单也是用Menu模块,我们看到长得好像一样,其实实现起来也差不多,我们这里使用创建模版的方式来实现,主要代码如下:

    const {app, Menu} = require('electron')
    const template = [
      {
        label: '操作',
        submenu: [{
            label: '复制',
            accelerator: 'CmdOrCtrl+C',
            role: 'copy'
        }, {
            label: '粘贴',
            accelerator: 'CmdOrCtrl+V',
            role: 'paste'
        }, {
            label: '重新加载',
            accelerator: 'CmdOrCtrl+R',
            click: function (item, focusedWindow) {
                if (focusedWindow) {
                    // on reload, start fresh and close any old
                    // open secondary windows
                    if (focusedWindow.id === 1) {
                        BrowserWindow.getAllWindows().forEach(function (win) {
                            if (win.id > 1) {
                                win.close()
                            }
                        })
                    }
                    focusedWindow.reload()
                }
            }
        }]
      },
      {
        label: '加载网页',
        submenu: [
          {
            label: '优酷',
            accelerator: 'CmdOrCtrl+P',
            click: () => { console.log('time to print stuff') }
          },
          {
            type: 'separator'
          },
          {
            label: '百度',
          }
        ]
      }
    ]
    
    if (process.platform === 'darwin') {
        const name = electron.app.getName()
        template.unshift({
          label: name,
          submenu: [{
            label: `关于 ${name}`,
            role: 'about'
          }, {
            type: 'separator'
          }, {
            label: '服务',
            role: 'services',
            submenu: []
          }, {
            type: 'separator'
          }, {
            label: `隐藏 ${name}`,
            accelerator: 'Command+H',
            role: 'hide'
          }, {
            label: '隐藏其它',
            accelerator: 'Command+Alt+H',
            role: 'hideothers'
          }, {
            label: '显示全部',
            role: 'unhide'
          }, {
            type: 'separator'
          }, {
            label: '退出',
            accelerator: 'Command+Q',
            click: function () {
              app.quit()
            }
          }]
        })
    }
    
    app.on('read', () => {
        const menu = Menu.buildFromTemplate(template);
        Menu.setApplicationMenu(menu);
    })
    
    

    系统托盘

    主要代码

    const { app, Tray } = require('electron') 
    /* 省略其他代码 */
    let tray;
    app.on('ready', () => {
        tray = new Tray(__dirname + '/build/icon.png');//系统托盘图标
        
        const contextMenu = Menu.buildFromTemplate([ // 菜单项
          {label: '显示', type: 'radio', click: () => {win.show()}},
          {label: '隐藏', type: 'radio', click: () => {win.hide()}},
        ])
        
        // tray.on('click', () => { //  鼠标点击事件最好和菜单只设置一种
        //   win.isVisible() ? win.hide() : win.show()
        // })
        
        tray.setToolTip('This is my application.') // 鼠标放上时候的提示
        
        tray.setContextMenu(contextMenu) // 应用菜单项
    })
    
    

    模块一览

    Menu

    MenuItem

    globalShortcut

    dialog

    tray

    打开页面

    shell

    主进程打开页面,会调用默认的浏览器打开页面,使用shell模块

    const { app,shell } = require('electron')
    
    app.on('ready', () => {
        shell.openExternal('github.com')
    })
    

    应用启动后就会使用默认浏览器打开github页面

    window.open

    渲染进程中使用,当前应用打开页面

    window.open('github.com')
    

    webview

    使用webview可以在一个独立的 frame 和进程里显示外部 web 内容

    直接在index.html中使用即可

    <webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>
    

    模块一览

    shell

    window.open

    webview

    QA

    其他应用模块和API请下载

    演示应用程序

    演示应用程序中文版

    模版

    electron-forge

    electron-forge包含vuereactAngular等开箱即用的模版。

    npm i -g electron-forge
    electron-forge init my-app template=react
    cd my-app
    npm run start 
    

    目录结构如下

    .compilercelectron-compile的配置文件,和.babelrc类似

    electron-compile是一种转换规则,支持在应用程序中编译js和css

    electron-react-boilerplate

    如果你不希望任何工具,而想要简单地从一个模板开始构建,react-electron模版可以了解下。

    electron-react-boilerplate 是双package.json配置项目, 目录如下

    electron-vue

    electron-vue充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等。

    目录结构如下

    中文教程

    更多模版

    更多模版请访问

    打包

    怎么将我们开发好的应用打包成.app.exe的执行文件,这就涉及到了重要的打包环节,
    这里使用electron-quick-start项目进行打包

    目前,主流的打包工具有两个electron-packagerelectron-builder

    Mac打包window安装包需下载wine

    brew install wine

    如果有丢失组件,按照报错信息进行下载即可

    electron-packager

    electron-packager把你的electron打包成可运行文件(.app, .exe, etc)

    执行npm i electron-packager -D进行安装

    electron-packager . 快速打包

    打包详解

    electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git
    
    • sourcedir 项目入口 根据package.json的目录
    • appname 包名
    • platform 构建平台 包含 darwin, linux, mas, win32 all
    • arch 构建架构 包含ia32,x64,armv7l,arm64
    • out 打包后的地址
    • icon 打包图标
    • asar 是否生成app.asar, 不然就是自己的源码
    • overwrite 覆盖上次打包
    • ignore 不进行打包的文件

    第一次打包需要下载二进制的包耗时会久一些,以后走缓存就快的多了。

    打包后目录为

    其中electron-quick-start可以直接打开运行

    缓存地址

    • Mac ~/Library/Caches/electron/
    • Windows $LOCALAPPDATA/electron/Cache or ~/AppData/Local/electron/Cache/
    • Linux $XDG_CACHE_HOME or ~/.cache/electron/

    electron-builder

    electron-builder是一个完整的解决方案,对于macos、windows、linux下的electron app,它可以提供打包及构建的相关功能。同时,它还提供开箱即用的“自动更新”功能支持

    npm i electron-builder -D 下载

    electron-builder打包

    出现如下

    同样是第一次打包时间会比较长,别着急,静候佳音。

    会默认打包在dist目录,包含如下

    mac文件里有运行时文件,默认使用asar方式进行打包

    electron-builder --dir 只会生成包文件,对测试有用

    坑坑坑

    第一次打包的时候会比较慢,如果你和我手欠直接退出了,再次打包的时候,恭喜你,出错了。报错信息如下

      • electron-builder version=20.28.2
      • loaded configuration file=package.json ("build" field)
      • description is missed in the package.json appPackageFile=/Users/shisan/Documents/self/you-app/package.json
      • writing effective config file=dist/builder-effective-config.yaml
      • no native production dependencies
      • packaging       platform=darwin arch=x64 electron=2.0.7 appOutDir=dist/mac
      • cannot unpack electron zip file, will be re-downloaded error=zip: not a valid zip file
      ⨯ zip: not a valid zip file
    
    Error: /Users/shisan/Documents/self/you-app/node_modules/app-builder-bin/mac/app-builder exited with code 1
        at ChildProcess.childProcess.once.code (/Users/shisan/Documents/self/you-app/node_modules/builder-util/src/util.ts:254:14)
        at Object.onceWrapper (events.js:272:13)
        at ChildProcess.emit (events.js:180:13)
        at maybeClose (internal/child_process.js:936:16)
        at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
    From previous event:
        at unpack (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/out/electron/ElectronFramework.js:191:18)
        at Object.prepareApplicationStageDirectory (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/electron/ElectronFramework.ts:148:50)
        at /Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/platformPackager.ts:179:21
        at Generator.next (<anonymous>)
    From previous event:
        at MacPackager.doPack (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/platformPackager.ts:166:165)
        at /Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/macPackager.ts:88:63
        at Generator.next (<anonymous>)
    From previous event:
        at MacPackager.pack (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/macPackager.ts:80:95)
        at /Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:376:24
        at Generator.next (<anonymous>)
        at xfs.stat (/Users/shisan/Documents/self/you-app/node_modules/fs-extra-p/node_modules/fs-extra/lib/mkdirs/mkdirs.js:56:16)
        at /Users/shisan/Documents/self/you-app/node_modules/graceful-fs/polyfills.js:287:18
        at FSReqWrap.oncomplete (fs.js:171:5)
    From previous event:
        at Packager.doBuild (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:344:39)
        at /Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:314:57
        at Generator.next (<anonymous>)
        at /Users/shisan/Documents/self/you-app/node_modules/graceful-fs/graceful-fs.js:99:16
        at /Users/shisan/Documents/self/you-app/node_modules/graceful-fs/graceful-fs.js:43:10
        at FSReqWrap.oncomplete (fs.js:153:20)
    From previous event:
        at Packager._build (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:285:133)
        at /Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:281:23
        at Generator.next (<anonymous>)
    From previous event:
        at Packager.build (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:238:14)
        at build (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/index.ts:58:28)
        at build (/Users/shisan/Documents/self/you-app/node_modules/electron-builder/src/builder.ts:227:10)
        at then (/Users/shisan/Documents/self/you-app/node_modules/electron-builder/src/cli/cli.ts:42:48)
        at runCallback (timers.js:763:18)
        at tryOnImmediate (timers.js:734:5)
        at processImmediate (timers.js:716:5)
    From previous event:
        at Object.args [as handler] (/Users/shisan/Documents/self/you-app/node_modules/electron-builder/src/cli/cli.ts:42:48)
        at Object.runCommand (/Users/shisan/Documents/self/you-app/node_modules/yargs/lib/command.js:237:44)
        at Object.parseArgs [as _parseArgs] (/Users/shisan/Documents/self/you-app/node_modules/yargs/yargs.js:1085:24)
        at Object.get [as argv] (/Users/shisan/Documents/self/you-app/node_modules/yargs/yargs.js:1000:21)
        at Object.<anonymous> (/Users/shisan/Documents/self/you-app/node_modules/electron-builder/src/cli/cli.ts:25:28)
        at Module._compile (internal/modules/cjs/loader.js:654:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
        at Module.load (internal/modules/cjs/loader.js:566:32)
        at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
        at Function.Module._load (internal/modules/cjs/loader.js:498:3)
        at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)
        at startup (internal/bootstrap/node.js:201:19)
        at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! you-app@1.0.0 dist: `electron-builder --mac --x64`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the you-app@1.0.0 dist script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/shisan/.npm/_logs/2018-08-22T06_28_55_102Z-debug.log
    ✖  Error building interactive interface
    

    问题是在下载.zip包的时候,中断了操作,以后所有执行打包的时候,找不到那个文件(或者是残缺的文件)就报错了,需要手动清除下缓存 缓存路径在~/Library/Caches/electron/

    常用参数

    electron-builder配置文件写在package.json中的build字段中

    "build": {
        "appId": "com.example.app", // 应用程序id 
        "productName": "测试", // 应用名称 
        "directories": {
            "buildResources": "build", // 构建资源路径默认为build
            "output": "dist" // 输出目录 默认为dist
        },
        "mac": {
            "category": "public.app-category.developer-tools", // 应用程序类别
            "target": ["dmg", "zip"],  // 目标包类型 
            "icon": "build/icon.icns" // 图标的路径
        },
        "dmg": {
            "background": "build/background.tiff or build/background.png", // 背景图像的路径
            "title": "标题",
            "icon": "build/icon.icns" // 图标路径
        },
        "win": {
            "target": ["nsis","zip"] // 目标包类型 
        }
    }
    

    应用程序类别

    更多参数

    使用electron-package或者electron-builder进行打包,就不需要asar手动打包了,这两个工具已经集成进去了,以下内容只做了解即可

    asar

    简介

    asar是一种将多个文件合并成一个文件的类 tar 风格的归档格式。 Electron 可以无需解压整个文件,即可从其中读取任意文件内容。

    使用

    上面我们看到使用electron-package进行打包的时候,可以添加--asar参数, 它的作用就是将我们的源码打包成asar格式, 不使用的话就是我们的源码。

    依旧使用electron-quick-start模版, 使用electron-package进行打包

    打包后目录中选择应用,右键显示包内容

    依次打开路径 Contents -> Resources -> app

    就可以看到我们的原文件了

    使用electron-package . --asar进行打包,再次查看app中的源文件已经打包成asar文件了

    常用命令

    • 打包
    asar pack|p <dir> <ouput>
    

    asar ./ app.asar

    • 解压
    asar extract|e <archive> <output>
    

    asar e app.asar ./

    事实上,就算使用了asar打包方式,我们的源代码依旧是暴露的,使用asar解压仍然能轻易解密,使用webpack将代码压缩混淆才是王道。

    自动更新

    我们使用electron-builderelectron-updater来完成应用的自动更新, 并不是electron里面的autoUpdater

    流程

    创建证书

    无论使用哪种方式进行自动更新,代码签名是必不可少的,我们使用创建本地的证书来进行测试自动更新

    在其他中找到钥匙串访问

    依次选择 钥匙串访问 -> 证书助理 -> 创建证书,创建一个新的证书

    起个响亮的名字,证书类型选择代码签名,然后点击创建

    创建完成后在钥匙串中找到它

    右键,选择更改信任设置,将信任设置成始终信任

    代码签名

    • 没有代码签名

    • 代码签名

    设置环境变量

    执行sudo vi ~/.bash_profile, 添加变量

    export CSC_NAME="electron_update"
    

    执行source ~/.bash_profile 重载变量文件

    执行echo $CSC_NAME 查看变量有没有生效,没有生效的话,执行上面命令重载文件

    多次重载,依旧获取不到变量,直接退出终端,再次登录终端即可

    打包代码

    使用electron-builder进行打包,项目使用electron-quick-start

    我们先添加打包的build配置, 在package.json中添加

    "build": {
        "appId": "org.electron.com",
        "publish": [
          {
            "provider": "generic",
            "url": "http://172.28.86.36:8080/" 
          }
        ],
        "productName": "我的",
        "directories": {
          "output": "dist"
        },
        "mac": {
          "target": [
            "dmg",
            "zip"
          ]
        },
        "win": {
          "target": [
            "nsis",
            "zip"
          ]
        },
        "dmg": {
          "backgroundColor": "red",
          "title": "made",
          "contents": [
            {
              "x": 400,
              "y": 128,
              "type": "link",
              "path": "/Applications"
            }
          ]
        }
    }
    

    前面,我们说过了build字段中各个参数的含义,这里就不赘述了,这里添加了publish字段,它是配置我们自动更新的信息,url是服务器地址。

    服务器我们可以使用http-server模块, 快速搭建一个静态服务器

    执行打包后,输出

    主要看下latest-mac.yml文件

    可以看到version字段,用来表明当前应用的版本,那这个字段是从哪来的呢?

    没错就是我们的package.json文件中version字段

    自动更新

    在主进程中写入以下代码

    const {app, BrowserWindow, ipcMain} = require('electron')
    
    const { autoUpdater } = require('electron-updater')
    
    // 本地服务器地址
    const feedURL = `http://172.28.82.40:8080/`
    
    let mainWindow
    
    function createWindow () { // 创建窗口
      mainWindow = new BrowserWindow({width: 800, height: 600})
      mainWindow.loadFile('index.html')
    
      mainWindow.on('closed', function () {
        mainWindow = null
      })
    }
    
    app.on('ready', createWindow)
    
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
    
    app.on('activate', function () {
      if (mainWindow === null) {
        createWindow()
      }
    })
    
    // 监听自定义update事件
    ipcMain.on('update', (e, arg) => {
      checkForUpdate()
    })
    
    const checkForUpdate = () => {
      // 设置检查更新的 url,并且初始化自动更新
      autoUpdater.setFeedURL(feedURL)
    
     // 监听错误 
      autoUpdater.on('error', message => {
        sendUpdateMessage('err', message)
      })
     // 当开始检查更新的时候触发
      autoUpdater.on('checking-for-update', message => {
        sendUpdateMessage('checking-for-update', message);
      })
     // 
      autoUpdater.on('download-progress', function(progressObj) {
        sendUpdateMessage('downloadProgress', progressObj);
      });
      // 更新下载完成事件
      autoUpdater.on('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
          
          ipcMain.on('updateNow', (e, arg) => {
              autoUpdater.quitAndInstall();
          });
          sendUpdateMessage('isUpdateNow');
      });
     // 向服务端查询现在是否有可用的更新
      autoUpdater.checkForUpdates();
    }
    
    // 发送消息触发message事件
    function sendUpdateMessage(message, data) {
      mainWindow.webContents.send('message', { message, data });
    }
    

    然后更改我们的渲染进程的代码

    const {ipcRenderer} = require ('electron');
    const button = document.querySelector('#button')
    
    
    const ul = document.querySelector('ul')
    button.onclick = () => {
      ipcRenderer.send('update')
    }
    
    ipcRenderer.on('message', (event, {message,data }) => {
      let li = document.createElement('li')
      li.innerHTML = message + " <br>data:" + JSON.stringify(data) +"<hr>";
      ul.appendChild(li)
      if (message === 'isUpdateNow') {
        if (confirm('是否现在更新?')) {
            ipcRenderer.send('updateNow');
        }
      }
    })
    

    页面代码

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
      </head>
      <body>
        <h1>Hello World!</h1>
        <h1>当前版本是1.0.3</h1>
    
        <ul>
          <li>生命周期过程展示</li>
        </ul>
    
        <button id="button">点击我</button>
        <script>
          // You can also require other files to run in this process
          require('./renderer.js')
        </script>
      </body>
    </html>
    

    这里使用按钮点击事件触发更新操作。

    直接打包,安装这个1.0.3的版本。

    然后将package.json的文件中的version字段更改成1.0.5,将index.html的更改成1.0.5,进行打包。

    随便找个地方创建个文件夹,如test

    将打包的文件移动到test中,执行http-server ./,搭建服务

    当我们点击按钮的时候,就可以进行更新应用了,如下图

    点击ok后,静候片刻,更新完后就打开了最新版本的应用

    以上就完成了electron的自动更新。

    项目地址

    本文所有代码请戳gitlab了解更多

    展开全文
  • Electron新手入门实战

    2019-09-29 18:43:05
    通过基础实战项目来快速学习掌握Electron的相关API知识点,以及掌握使用Electron构建客户端应用程序的流程,体验Electron客户端开发的魅力和强大;本课程最终,会把我们开发的实战项目代码,分别编译打包输出三个...
  • Electron: 从零开始写一个记事本app
    展开全文
  • 跨越平台桌面应用开发框架electron使用的心路历程

    万次阅读 多人点赞 2018-06-26 15:48:34
    从接触Electron到真正去做出一个桌面应用,再到今天写下这边文章,大概花了三个月时间吧,到不是因为有多难学,主要是由于这纯碎是个人兴趣,自己是在业余时间干的,公司里面目前还没有推行,这段时间开发任务又比较...

    这里写图片描述


    前言

        首先声明一下这篇文章不谈代码,只谈心。
        从接触Electron到真正去做出一个桌面应用,再到今天写下这边文章,大概花了三个月时间吧,到不是因为有多难,主要是这纯碎是个人兴趣,自己是在业余时间干的,公司里面目前还没有推行,这段时间开发任务又比较重,所以断断续续用了三月吧。今天写下这篇文章只是记录一下这个过程,也是和初学者分享一下。相信大多数人都是知道Electron最初是起源于Atom,然后从Atom剥离开来最终形成了现在的Electron,目前使用Electron來开发的桌面用非常多,我们最熟悉的比如Atom,VScode…,这类IDE,除此之外还有一些开发的辅助工具也借助于electron,比如iview的官方脚手架用来创建vue项目,腾讯的weFlow工具,等等。这些辅助工具将平时的一些命令行操作集成到了图像化界面操作中来,使用起来更加方便简洁。总的来说,electron对于我们前端来说用到的知识没什么特别的,但是做出来的东西感觉挺新鲜的,毕竟一下从做web页面,升华到做桌面应用了,内心还是有点小激动的。

    目录:

    1. 我是什么时候开始接触electron的
    2. 为什么作为一个前端要花时间在Electron这种桌面应用开发框架上去
    3. 为什么越来越对她越来越有感觉了
    4. 为什么一定要做成桌面应用,web网页不是也能干他的活吗
    5. 使用eletron需要储备哪些知识
    6. 学习electron的过程中需要注意什么
    7. electron的弊端

    我是什么时候开始接触electron的

        最先接触的是Weex这一类的垮终端移动APP开发框架,后来开始使用VScode编辑器,才听说Electron有多么的强大,然后跑去Electron的官网一看,首页那句醒目的标题“使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用”瞬间吸引到了我,然后就开始干,从最开始的官方demo到electron-vue再到自己开始做了一个前端开发的辅助工具应用,一步步趟过来,有点喜悦,也有点头疼,虽然已经有类似Atom,VScode这样的产品了,但是发现在开发过程中遇到的问题,度娘上还是找不到几篇真正能解决问题的帖子,最后还是自己去踩,但是比起weex来还是好多了,不是黑weex,主要是他的生态建设太差了,新入门的需要花费大量的时间去学习,并且需要在实际应用中不断去发现问题,然后解决问题,关键是解决问题的过程中很少能获得社区的帮助。言归正传,我们还是回到electron的话题上来。

    为什么作为一个前端要花时间在Electron这种桌面应用开发框架上去

        作为一个web前端开发人员,去弄桌面应用是不是有点不误正业。这个其实不然,首先electron的精华就是”使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用”,这就是赤裸裸的在勾引我们前端开发人员,臣妾就是为你服务的。其次在node出来之后,前端的定位其实开始变得模糊起来了,前端开发人员不再仅仅局限于UI和页面,UE和业务逻辑的实现了,开始越来越多的接触后端的知识,‘大前端’这个名词也开始经常在各种公开场合见到,就连ES也开始和java这对兄弟也开始相认了(越来越像了),所以多接触一点也算是与时俱进吧。
        像Electron这种结合了Node,Chromium,html,css,js的框架,对于有志成为‘大前端’的同学来说,是比较有吸引力的,它是基于node的,对于熟悉node生态圈的人来说,开发起来就更加如鱼得水了。这里可能唯一比较陌生的可能就是Chromium了,我们可以拿面向对象的思想来看待它,electron已经帮我们封装了对于Chromium的操作,so.我们只需要了解electron的API就行了,刚开始接触没有必要去纠结自己对于它有多了解,当到了用electorn开发桌面应用如鱼得水的时候,我们有时间可以去了解一下他。所以这些所谓的陌生并不会成为我们学习和使用electorn 阻碍作为一个程序员,就是要勇于去接触新的东西,这样平时枯燥的编码生活才会多一点点色彩。
        所以,作为前端完全可以大胆去尝试使用electron来开发桌面应用,技多不压身,在将来的某些时候或许可以为你提供一种全新的解决方案。

    为什么越来越对她越来越有感觉了

    1. 他让我摆脱了不同浏览器之间的差异和版本的限制,由于electron是基于Chromium的(Chromium是chrome的开发者版本),他完全遵循W3C的标准,对ES,CSS,BOM,DOM的最新规范都有很好的支持,所以我们在写代码的时候,什么ES6,7,8,DOM0,2,3都大胆的用起来,爽歪歪。
    2. 基于Node,生态成熟,有足够丰富的第三方包来支持我们的开发。没必要自己再绞尽脑汁的去想某个功能的实现,别人写的npm包早已帮我们实现,这就是”拿来主义”的好处。
    3. 可以开发跨平台的桌面应用,就像weex宣传的那样“write once,run everyWhere”,只需要写一份代码,打包出来的应用可以在windows,linux,mac OS上面运行。当然这是最理想的情况,无论是RN,weex还是electron,要做到多端共用,还是需要在代码中做一定的适配的,大概有百分之八十是共用的吧,剩下的百分之二十还是需要兼容一下。

    为什么一定要做成桌面应用,web网页不是也能干他的活吗

        在最开始的时候我也有这样的疑问,用web网页来实现不是更好吗,只要有浏览器就可以访问,而且只要终端上面有浏览器就能访问,这样还省去了应用的安装步骤多好啊。在接触久了之后发现,网页能干的他能干,而且干的更好,web不能干的,他也能干。比如:
    1.他可以摆脱浏览器的沙盒机制,可以访问操作系统层面的东西。我们在网页上面只能借助于后台服务去干这种事,然后通过http告诉前端页面,如果要处理本地文件,还得将文件传到服务器上去,让服务器处理。
    2.更好的用户体验,不管我们是做成B/S的web还是做成客户端的形式,最终的目的其实是在实现功能需求的同时还是最求更好的用户体验,在用户体验上桌面应用无疑更上一层。就像你webApp和原生APP比较,原生无疑还是体验更好。

    既然electron就可以做桌面应用,那是不是就没有C#和C++什么事了

        在electron之前,桌面应用基本上是靠C#和QT来做。那为什么不用他们来做,非得整个electron呢。

    1. 效率,就我个人的使用经验来看,用electron来开发相同需求的桌面应用,使用electron来开发效率明显比其他的要提高很多,而且做出来的桌面效果更佳。
    2. C#的开发者现在基本上在各个公司都是稀有物种了,现在都跑去开发移动端应用去了,PC端的桌面应用感觉没什么油水了,能用web开发的就用web了,这样自然开发的人就少了,开发人员少了如果还用他去开发,这样后期维护起来会比较困难。
    3. 除了C#不是还有QT吗,这个我没有写过,但是我们组老大就是用QT框架来桌面应用的,但是当他看见electron的时候,感慨还是这个写起来方便。
    4. 当然java也有类似Swing之类的桌面UI组件,但是效果比较一般,也能做比较酷的效果但是比较耗时。
      当然这并不是说electron 就可以替代C#和QT,每总技术都有适合他的应用场景,在做之前我们在技术选型的时候,需要充分的考虑他们的利与弊,后面我会说说我在使用electron使用中遇见的弊端。

    使用eletron需要储备哪些知识

    1. 首先需要熟练掌握前端的基础知识html,css,js,为什么要强调熟练,因为作为前端,你连这都没掌握,那我还是建议好好学习一下前端基础知识吧,等基础打牢了再出来浪。
    2. 有一定的node基础,也就是对nodejs有一定了解,知道他是什么,用来干什么的,怎么环境搭建,npm包的使用,我是建议系统的学一下nodejs,看看官方文档,然后Express或者Koa这种web服务框架看看,自己搭建一个web服务玩玩,现在流行大前端,走出去不知道nodejs,所实话有点不好意思。
    3. 在具备了上面两门绝技之后,就可以跟着官方demo,把electron的demo拉下来根据步骤,将代码跑起来,看看electron做的桌面应用到底长什么样子,感受一下。
    4. 在demo跑起来后然后再根据demo的结构看看里面使到的API,这里我不建议一开始就去撸官方的API文档,这样你可能很快就放弃了,一看,呀这么多API那记得住啊,然后就在心里开始打退堂鼓了。一步一步来,用到什么,然后去看什么,这里我后面会将我从搭建环境到最后制作打包出APP的心路历程分享出来,有兴趣的可以留意一下,下个月吧。

    学习electron的过程中需要注意什么

    1. 首先不要急功冒进,一来就要干点什么大事,先按照文档,将demo跑起来,看看怎么搭建开发环境,怎么打包成一个可执行程序,这里打包出来的执行程序可能有点难看,但是不要在意,先将就用着,我会在后面的笔记整理中提到如何打包成我们平时看到那样的安装程序。
    2. 建议现在网上找一些鼻尖简单的demo看看,然要一上来就撸官方API文档,这样太枯燥了,而且好多API你一开始也用不上,看看简单的demo,将基本的API掌握,再去完善其他。
    3. 需要分清楚主进程和渲染进程,分清楚他们的职能,这样我们在写代码的时候才不会混淆,代码的层次结构才能分的领清。
    4. 有node经验的小伙伴不要先入为主将主进程当着nodejs中的服务端了,我开始就这么干的,一看到node就激动了,这样你会遇见很多坑的,而且可能还爬不出来。

    electron的弊端

        前面都是说electron是多么多么方便快捷,现在提一下,我在使用中遇到的弊端

    1. 窗口创建背景的问题,在html没有被加载完成前,窗口只用用背景色去填充,不能使用个性化的背景图案,这会造成首次加载的体验不好。
    2. 打包出来的APP太大,就是最简单的应用打包出来都有40多MB。

    总结
        就一句话,前端现在真是牛逼大了,老本行web就不说了,用nodejs可以搭建后台服务,用RN,weex可以做移动端APP,现在electron连PC桌面端应用也不放过了,现在谁还敢说我们前端就是写写页面,写写样式的。吼!吼!

    展开全文
  • 在使用electron开发桌面程序的过程中,我们可能经常需要让electron程序中包含的链接在被点击后直接调用系统的默认浏览器打开,仔细看了文档的都知道其核心原理就是通过electron的shell模块中的openExternal方法来...
  • electron环境下的点击事件调出系统默认的浏览器并打开传入的链接 <el-button @click="open('http://www.baidu.com')"> ...</el-button> ... this.$electron.shell.openExternal(link);...
  • electron-vue 用默认浏览器打开链接

    千次阅读 2019-02-27 17:40:05
    template &lt;template&gt; &lt;div&gt; &lt;p&gt;官网地址: &lt;!-- &lt;a href="http://www.yunlauncher.com" target="_blank"...span @c
  • 默认点击a标签后会重新弹出一个window窗口,不能跳转到默认浏览器上 但是a标签还不能改 还未引入jquery (vue官方不建议引入jquery ) 解决办法 在渲染完成的方法后 引入一下代码 进行跳转 ririr 是给a标签 设置的...
  • Electron介绍

    千次阅读 2018-12-27 17:43:48
    1 Electron 快速入门 简介 Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体。 这不意味着 Electron 是绑定了 ...
  • Electron

    千次阅读 2019-04-09 20:03:52
    桌面应用、vue-aplayer
  • Github 官方地址 代表作: Atom - Code editor. Github开源的代码编辑器,Electron起源地 Visual Studio Code - Cross-platform IDE....Hyper - Terminal....理解Electron是什么 学习Electron基于什...
  • electronic-wechat

    千次阅读 2017-05-02 23:28:39
    ~/code/project/weixin/electronic-wechat $sudo npm install loadDep:sanitize-filename ▀ ╢█████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░...
  • electron 调试

    千次阅读 2020-03-23 16:14:35
    electron debugger 在开发过程中我们经常需要对某一功能进行调试,electron也不例外。 electron有主进程和渲染进程,所以调试部分也分为两大块,即调试主进程和渲染进程 渲染进程 调试渲染进程和调试浏览器的方法...
  • 一、Eelectron简介 Electron是一个仅使用...vscode,github desktop等都是用electron开发的。Electron的中文网址是https://electronjs.org/ 二、环境配置 这里我使用electron+vue+vscode来开发,在我这篇文章里...
  • ElectronElectron开发入门(五):项目打包

    万次阅读 多人点赞 2016-09-28 14:06:50
    一、安装 electron-packagerPS:安装之前,先复制一份package.json文件到./app目录下,然后改下./app目录下package.json里 “main”: “app/main.js”的路径(去掉app/),不这样子的话,下面打包的时候会报错,有的...
  • electron实现桌面应用

    2020-08-21 16:05:24
    在PC端混合app开发中,nwjs和electron都是可选的方案,它们都是基于Chromium和Node的结合体, 而electron相对而言是更好的选择方案,它的社区相对比较活跃,bug比较少,文档先对利索简洁。 electron 相对来说比
  • electron 介绍

    千次阅读 2019-03-19 16:27:19
    地址:https://github.com/electron/electron electron 是一个跨平台的桌面应用开发框架,用HTML css js 的技术开发桌面上面可以安装的软件,可以让前端人员用HTML css js 的技术开发跨平台可以安装的桌面软件。 1...
  • electron-vue起步

    千次阅读 2018-07-16 16:00:10
    electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等。在 这里 查看其文档。你会...
  • react+electron+AntD编辑桌面应用

    千次阅读 2019-03-01 16:45:27
    二、要下载react,有一个快捷的方法,创建react应用,使用脚手架,下载(可选择是否全局安装): npm install --global create-react-app 成功运行后会显示: 三、创建react项目: create-react-app demo ...

空空如也

1 2 3 4 5 ... 20
收藏数 53,678
精华内容 21,471
关键字:

electron