文档章节

Electron 从零创建一个 Windows/OS X/Linux 的桌面可执行程序

yzChen233
 yzChen233
发布于 2016/09/26 07:13
字数 1234
阅读 2W
收藏 293

每次 Electron 有最新新闻的时候,都会有很多朋友留言,问有没有相关教程,本人也是观察有一段时间了,一直鲜有人提供相关的学习内容,所以在此就给大家提供下一些入门和进阶教程,希望大家多多支持,谢谢!

本文的主要目的,是要教会大家如何使用 Electron 从 零 创建 Windows 的 .exe 或者 OS X / linux 的 桌面可执行应用程序。

案例演示

由于资源不多,直接将自己之前开源的一个 google chrome extension 代码引用过来,无需修改源码,值要配置好 electron 环境就可以运行!插件的开源仓库地址:http://git.oschina.net/cyzshenzhen/GJP-tools-chrome-extension

实际应用示例

一、Electron 是什么

官方描述

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

个人理解

就是一个Chrome浏览器封装成窗体,然后加载你做的HTML程序,直接看到效果。比较类似于手机端,基于微信的H5微网站。

应用场景

想做桌面应用,又不会c++,又不会c#,又不会swing,也不会python等各大创建桌面窗体语言,但是会HTML、CSS,没错,那就是你了。

注意!注意!注意!

由于 Electron 本身就是基于 Chromium 的,所以它的基础大小就已经很大了,应该有四五十M,如果介意文件大小的话,劝您还是再看看...

由于 Electron 本身就是基于 Chromium 的,所以它的基础大小就已经很大了,应该有四五十M,如果介意文件大小的话,劝您还是再看看...

由于 Electron 本身就是基于 Chromium 的,所以它的基础大小就已经很大了,应该有四五十M,如果介意文件大小的话,劝您还是再看看...

二、开发 Electron 需要会什么

必须的

  • HTML
  • CSS
  • JavaScript

其他

  • node.js (Electron 本身就基于node.js,不会没关系,直接照着教程来就行)
  • git (demo是从git仓库拿的,不会没关系,自己去下载就行)
  • 开发工具 (本人使用的是 vscode)

三、Hello World!

官方三步start

$ git clone https://github.com/electron/electron-quick-start

$ cd electron-quick-start

$ npm install && npm start

启动效果

单独启动

npm start

Electron

结构分析

| -- index.html
| -- main.js
| -- package.json

index.html

你没看错,它就只是一个HTML而已!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

main.js

窗口配置,主要是控制窗口的高度、宽度、入口页面、等

下面是代码的内容,一般情况下,只需要看下两个地方就行

  • 入口页面配置:mainWindow.loadURL()
  • 打开调试工具:mainWindow.webContents.openDevTools()
'use strict';

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 指定一个入口的html文件
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开调试工具,其实就是chrome的那套调试工具
  //mainWindow.webContents.openDevTools();

  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();
  }
});

package.json

项目名称、版本信息等,以及node.js相关的依赖配置,类似于java引用.jar

  • electron-packager
  • electron-prebuilt

两个都是用来打包成可执行应用程序的必备依赖包,细节我们在下一个步骤里面进行详细的说明

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "n",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js"
  },
  "devDependencies": {
    "electron-packager": "^5.2.1",
    "electron-prebuilt": "^0.36.0"
  }
}

四、打包为可执行程序

1、打包

现在我们只能通过 npm start 源码 来运行程序,如何打包成系统可执行程序,不要node.js环境也可以用呢?这里我们将会用到 electron-packager、electron-prebuilt

现在,我们使用 electron-packager 来进行打包,此处我们打包为 windows 系统的 .exe 程序

首先,进入项目根目录,然后执行下面命令行

electron-packager ./ --platform=win32 --arch=x64 --version=0.37.2 --icon=./images/favicon.ico

如果还想打包 linux / OS X 环境的可执行程序,可查看帮助信息

electron-packager

即可看到相关资料,如果不明白的话,可以留言,一起学习!

2、效果

Electron

Electron

五、如何跟朋友 show 一个,装个X

教程到这里,入门基本已经结束了,那么估计有些童鞋估计还是不明白,怎么把这个程序发给朋友,显得自己流弊,其实很简单的!你只需要把生成出来的那个文件夹,打一个压缩包,然后告诉他,执行那个.exe文件就够了!!!

= =||||


My Blog

blog.guijianpan.com

技术交流

© 著作权归作者所有

yzChen233

yzChen233

粉丝 59
博文 13
码字总数 13943
作品 1
长沙
部门经理
私信 提问
加载中

评论(65)

yzChen233
yzChen233 博主

引用来自“布老虎”的评论

刚刚本文走了一遍,发现electron版本更新的相当快,electron-packager已经更新到8.1.0,我安装了electron 1.4.3,安装文章中提示的packager 5.2.1会提示报错。另外electron-prebuilt也整合进electron了。作者是不是把这篇文章更新一下?
总的来说,这篇文章写的很好,非常适合入门。electron官网上的tutorial写的有些复杂。

谢谢支持。我这环境其实也是今年年初搭建的,因为偶尔看到有些朋友都在问有没有入门教程,所以我特意写了一篇博客呢。下次有时间,我更新下版本再写一篇好了
布老虎
布老虎
刚刚本文走了一遍,发现electron版本更新的相当快,electron-packager已经更新到8.1.0,我安装了electron 1.4.3,安装文章中提示的packager 5.2.1会提示报错。另外electron-prebuilt也整合进electron了。作者是不是把这篇文章更新一下?
总的来说,这篇文章写的很好,非常适合入门。electron官网上的tutorial写的有些复杂。
布老虎
布老虎

引用来自“布老虎”的评论

atom和vscode的安装包都没有4、50M那么大啊?怎么回事?

引用来自“倚楼听风雨_”的评论

安装包小,是因为安装包根本就不是整个程序,而是一个版本程序,当你安装的时候,会联网进行下载的,不信,你可以查下你的atom或者vscode的目录,我这里vscode的目录有120M,右键查看 Code.exe 程序,就有50M呢
明白了。
yzChen233
yzChen233 博主

引用来自“布老虎”的评论

atom和vscode的安装包都没有4、50M那么大啊?怎么回事?
安装包小,是因为安装包根本就不是整个程序,而是一个版本程序,当你安装的时候,会联网进行下载的,不信,你可以查下你的atom或者vscode的目录,我这里vscode的目录有120M,右键查看 Code.exe 程序,就有50M呢
布老虎
布老虎
atom和vscode的安装包都没有4、50M那么大啊?怎么回事?
yzChen233
yzChen233 博主

引用来自“yuntui”的评论

:bowtie:
yuntui
yuntui
脆霉公园
脆霉公园

引用来自“skl_TZ”的评论

那跟我直接放到服务器上,拿桌面浏览器来访问有什么区别
先拿出一个成熟应用再说吧,elec怎么也比你的靠谱。人家都是有全职人员在开发的,而且不止一两个。你的东西什么时候停坑了都不好说吧
脆霉公园
脆霉公园

引用来自“skl_TZ”的评论

那跟我直接放到服务器上,拿桌面浏览器来访问有什么区别
原作者是nwjs的开发人员之一,这个相当于github 另外搞的一套,
脆霉公园
脆霉公园

引用来自“skl_TZ”的评论

那跟我直接放到服务器上,拿桌面浏览器来访问有什么区别
里面内嵌了浏览器,方便统一吧,客户端用什么浏览器就很难控制了。另外nodejs也扩展了很多功能,比如本地文件控制,这些浏览器都没有提供或者权限不够
桌面 Web 浏览器 - Brave Desktop

Brave Desktop 是桌面浏览器,支持 Mac OS X,Linux 和 Windows 平台,其特色是能够通过屏蔽程序化的广告,并换成自家的“广告库”,以快速呈现网站。 桌面版 Brave 浏览器可提升 40% 的页面...

匿名
2016/01/22
5.8K
1
Vuido —— 使用 Vue.js 构建跨平台原生桌面应用

Vuido 让使用 Vue.js 构建轻量级原生桌面应用成为可能。使用 Vuido 构建的应用可在 Windows、OS X 和 Linux 上运行,它使用了原生 GUI 组件,并且不需要 Electron 。...

局长
2018/05/25
118
0
你不知道的 Electron (二):了解 Electron 打包

转自IMWeb社区,作者:laynechen,原文链接 我们知道 Electron 提供了一个类似浏览器,但有更多权限的环境来运行我们的网页,那么 Electron 是怎么做到将我们的网页代码打包成一个可执行程序...

IMWeb团队
2018/09/20
0
0
我们是如何使用 Electron 构建 Linux 桌面应用程序的

这是借助 Electron 框架,构建一个在 Linux 桌面上原生运行的开源电子邮件服务的故事。 Tutanota 是一种安全的开源电子邮件服务,它可通过浏览器使用,也有 iOS 和 Android 应用。其客户端代...

作者: Nils Ganther
2019/06/10
0
0
开源框架 Electron 存在远程攻击漏洞 大量应用或受影响

近日,Electron 被发现存在远程攻击漏洞并易受攻击,漏洞编号为 CVE-2018-1000006。Electron 开发团队表示,只要是使用自定义协议处理程序的 Electron 应用都会受到漏洞影响,如就易受攻击。...

局长
2018/01/27
3.5K
3

没有更多内容

加载失败,请刷新页面

加载更多

spring cloud 是什么,学习什么

一、什么是springcloud,有什么作用   Spring Cloud是一系列框架的有序集合。它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册、配置中心、消息总线、...

FH-Admin
33分钟前
51
0
【招聘】医疗行业

产品经理(1人) 【岗位职责】 1.方案策划:对互联网医疗信息化项目全流程负责,包括产品的需求、开发、推广、实施各个过程;跟踪国内外最新进展、发展趋势、竞争厂家研发信息、国家政策信息...

挨踢得要死要死的某瓜
35分钟前
357
0
「网易官方」极客战记(codecombat)攻略-地牢-Kithgard 学徒kithgard-apprentice

那么这就是年轻的食人魔巫师和术士来研究的地方? 默认代码 # 你的目标是生存。 # 也很有趣。 也许能嬴上排行榜! # 你第一次来地牢的时候,应该没见过这个房间。 概览 这是你测试技能战术的...

极客战记
40分钟前
49
0
TI AM570x浮点DSP C66x + ARM Cortex-A15开发板的CSI2 CAMERA接口、以太网接口

TL570x-EVM是一款由创龙基于SOM-TL570x核心板设计的开发板,它为用户提供了SOM-TL570x核心板的测试平台,用于快速评估SOM-TL570x核心板的整体性能。 TL570x-EVM底板采用沉金无铅工艺的4层板设...

Tronlong创龙
48分钟前
37
0
程序员必须掌握的核心算法有哪些?

由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程...

摩尔12
58分钟前
39
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部