文档章节

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

yzChen233
 yzChen233
发布于 2016/09/26 07:13
字数 1234
阅读 1.9W
收藏 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 博主

引用来自“zabcd117”的评论

其实,很多都是冲着blink的css布局来的,node的功能很多用了不到百分之5吧,如果可以精简一下,只保留blink正常的布局,音频视频webgl flash统统干掉,提供基本的文件读写和网络访问api,估计压缩完也就是10M,这个现在也有人在做。最大的问题还是有时会被个别国产杀毒软件爆毒,不交保护费不给你放到白名单里面,相当傻逼。
分析得挺有道理的,值得推敲😄
TheStars
TheStars
貌似网易云音乐用的就是这个
啦啦啦拉拉
啦啦啦拉拉
不注重外观的话,用 Visual Studio 直接拖 WinForm
zabcd117
zabcd117
其实,很多都是冲着blink的css布局来的,node的功能很多用了不到百分之5吧,如果可以精简一下,只保留blink正常的布局,音频视频webgl flash统统干掉,提供基本的文件读写和网络访问api,估计压缩完也就是10M,这个现在也有人在做。最大的问题还是有时会被个别国产杀毒软件爆毒,不交保护费不给你放到白名单里面,相当傻逼。
乌龟壳
乌龟壳
@倚楼听风雨_ @Fenying 其实我说的是原生Chrome+node.js或者原生Chrome+php或者原生Chrome + tomcat等~~~并非要同时用node.js和php
yzChen233
yzChen233 博主

引用来自“张帆是我的名”的评论

怎么插放FLASH?
这个没研究过,有时间我去官网找找资料看看
乌龟壳
乌龟壳

引用来自“夏侯”的评论

引用来自“skl_TZ”的评论

那跟我直接放到服务器上,拿桌面浏览器来访问有什么区别

这个不需要联网,放到服务器上你需要联网

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

最重要的点应该还是可以直接调用系统api,而浏览器很少直接提供

引用来自“乌龟壳”的评论

用nodejs/php开启一个原生chrome,和这个进行http通信实现界面,完全不影响nodejs/php调用原生API实现功能。不止如此,还可以多线程多进程爱怎么玩怎么玩。

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

“开启一个原生chrome”,意思是用户首先要自己安装一个chrome吗?而且用户要安装一个nodejs/php环境吗?

引用来自“乌龟壳”的评论

chrome/nodejs/php都不需要安装,绿色版打包就可以跑起来了。类似的还有mysql/postgres/mongodb/redis/nginx/java/tomcat....一堆都能免安装绿色版就直接跑

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

666666 不过没时间研究php,要看其他php专家怎么说。😁

引用来自“乌龟壳”的评论

@eechen 哥,轮到你上了,你准备比较充分点~~~

引用来自“Fenying”的评论

Electron.js整个程序都是跑的JS,是直接Webkit和Node合体,而不是 Webkit 浏览器+Node.js。你用浏览器+PHP,就是两种语言,涉及HTTP通信,还要起一个HTTP服务器,开发和允许成本都上升。而且也不利于打包,再说启动又要启动PHP,又要起浏览器,还得HTTP加载页面,怎么也不会比 Electron 打包的程序快吧?
如果你强调语言的话,chrome+node.js就同一种语言啦:)
张帆是我的名
张帆是我的名
怎么插放FLASH?
手握华为赛神仙
手握华为赛神仙

引用来自“夏侯”的评论

引用来自“skl_TZ”的评论

那跟我直接放到服务器上,拿桌面浏览器来访问有什么区别

这个不需要联网,放到服务器上你需要联网

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

最重要的点应该还是可以直接调用系统api,而浏览器很少直接提供

引用来自“乌龟壳”的评论

用nodejs/php开启一个原生chrome,和这个进行http通信实现界面,完全不影响nodejs/php调用原生API实现功能。不止如此,还可以多线程多进程爱怎么玩怎么玩。

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

“开启一个原生chrome”,意思是用户首先要自己安装一个chrome吗?而且用户要安装一个nodejs/php环境吗?

引用来自“乌龟壳”的评论

chrome/nodejs/php都不需要安装,绿色版打包就可以跑起来了。类似的还有mysql/postgres/mongodb/redis/nginx/java/tomcat....一堆都能免安装绿色版就直接跑

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

666666 不过没时间研究php,要看其他php专家怎么说。😁

引用来自“乌龟壳”的评论

@eechen 哥,轮到你上了,你准备比较充分点~~~
Electron.js整个程序都是跑的JS,是直接Webkit和Node合体,而不是 Webkit 浏览器+Node.js。你用浏览器+PHP,就是两种语言,涉及HTTP通信,还要起一个HTTP服务器,开发和允许成本都上升。而且也不利于打包,再说启动又要启动PHP,又要起浏览器,还得HTTP加载页面,怎么也不会比 Electron 打包的程序快吧?
乌龟壳
乌龟壳

引用来自“夏侯”的评论

引用来自“skl_TZ”的评论

那跟我直接放到服务器上,拿桌面浏览器来访问有什么区别

这个不需要联网,放到服务器上你需要联网

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

最重要的点应该还是可以直接调用系统api,而浏览器很少直接提供

引用来自“乌龟壳”的评论

用nodejs/php开启一个原生chrome,和这个进行http通信实现界面,完全不影响nodejs/php调用原生API实现功能。不止如此,还可以多线程多进程爱怎么玩怎么玩。

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

“开启一个原生chrome”,意思是用户首先要自己安装一个chrome吗?而且用户要安装一个nodejs/php环境吗?

引用来自“乌龟壳”的评论

chrome/nodejs/php都不需要安装,绿色版打包就可以跑起来了。类似的还有mysql/postgres/mongodb/redis/nginx/java/tomcat....一堆都能免安装绿色版就直接跑

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

666666 不过没时间研究php,要看其他php专家怎么说。😁
@eechen 哥,轮到你上了,你准备比较充分点~~~
Hyper.js 2.1.0 canary 3 发布,基于 Web 技术构建的终端

Hyper.js 2.1.0 canary 3 发布了,这是是一款 JS/HTML/CSS 终端工具,旨在为用户创建一个美观的、易于扩展的命令行接口工具,并且构建一个开放式 Web 标准。 此版本主要更新如下: Update x...

h4cd
2018/12/08
934
0
快速了解Electron:新一代基于Web的跨平台桌面技术

1、引言 现在开发IM应用动不动就要求多端——即Android端、iOS端、PC端、Web端等,Android端和iOS端作为两种不同的移动端技术,单独开发和维护还能理解,PC端和Web端如果要单独开发那就有点头...

首席大胸器
2019/06/14
344
0
Zorin OS 12.1 发布,专为 Linux 新手设计

Zorin OS 12.1 发布了,新版本汇集了最新的软件更新、错误修复、新的桌面功能、性能增强和硬件支持。 Zorin OS 12.1 引入了新的硬件启用堆栈。 新加入的 Linux kernel 4.8 以及更新的X服务器...

王练
2017/02/28
2.6K
13
Red/System 语言获得了OS X, ARM, Android 后端

红色/系统(Red/System),在Syllable项目使用的新式程序语言,有了下一个里程碑式的成果——其编译器的一个ARM代码生成器后端。该后端支持Android(见截图)和通用ARM Linux(Debian上的截图...

xyxzfj
2012/01/02
109
0
使用HTML/CSS/JS开发轻量级跨平台桌面APP

谈到使用HTML/CSS/JS开发跨平台的桌面应用,不得不提起Electron, 但是由于Electron内置了Node.js和Chromium,所以Electron开发的程序即使只有一个很简单的页面,体积也非常大,普遍100M以上。...

isNeilLin
2019/03/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面试系列-Spring Cloud 的核心架构原理

最近在补一些分布式系列的面试内容,提前做做准备吧,你们懂的,也跟大家分享分享。现在分布式系统基本上都是标配了,如果你现在还在玩儿单机,没有接触过这些东西的话,权当是为你打开一扇新...

JAVA一方
昨天
23
0
docker使用一个镜像启动多个容器【本实验使用Elasticsearch 5.5.1】

注意事项:(每个容器都是独立的系统,使用一个镜像启动多个容器时,内部容器可以配置完全一样,不相互影响)启用容器的挂载目录和映射端口,必须要和之前镜像中的完全一致(可能针对版本5.5...

Airship
昨天
78
0
Scala 学习(10)之「集合 」

数组 定长数组 Array:采用()访问,而不是[],下标从 0 开始。 val array1 = new Array[String](5)//创建数组println(array1)//返回数组的hashcodearray1.length//Int = 5array1(1)...

0的幂方
昨天
44
0
lua学习之复习汇总篇

第六日笔记 1. 基础概念 程序块 定义 在 lua 中任何一个源代码文件或在交互模式中输入的一行代码 程序块可以是任意大小的 程序块可以是一连串语句或一条命令 也可由函数定义构成,一般将函数...

服务器炸了
昨天
50
0
Python学习06.09:什么是描述符,Python描述符详解

Python 中,通过使用描述符,可以让程序员在引用一个对象属性时自定义要完成的工作。 本质上看, 描述符就是一个类,只不过它定义了另一个类中属性的访问方式。换句话说,一个类可以将属性管...

qwz185_堡垒
昨天
70
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部