文档章节

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 博主

引用来自“夏侯”的评论

引用来自“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专家怎么说。😁
乌龟壳
乌龟壳

引用来自“夏侯”的评论

引用来自“skl_TZ”的评论

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

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

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

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

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

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

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

“开启一个原生chrome”,意思是用户首先要自己安装一个chrome吗?而且用户要安装一个nodejs/php环境吗?
chrome/nodejs/php都不需要安装,绿色版打包就可以跑起来了。类似的还有mysql/postgres/mongodb/redis/nginx/java/tomcat....一堆都能免安装绿色版就直接跑
yzChen233
yzChen233 博主

引用来自“夏侯”的评论

引用来自“skl_TZ”的评论

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

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

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

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

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

用nodejs/php开启一个原生chrome,和这个进行http通信实现界面,完全不影响nodejs/php调用原生API实现功能。不止如此,还可以多线程多进程爱怎么玩怎么玩。
“开启一个原生chrome”,意思是用户首先要自己安装一个chrome吗?而且用户要安装一个nodejs/php环境吗?
仓小姐
仓小姐

引用来自“Fenying”的评论

收藏个~

ss
yzChen233
yzChen233 博主

引用来自“Lyon1994”的评论

和nwjs有啥区别,都一样,nwjs还可以直接加载chrome插件,大小一般也就38多兆
Electron成熟应用太多,比如 atom、vscode等。据说NW.js 和 Electron 都是同一个作者, 而 Electron 是后面该作者重构出来的,估计会比 NW,js 少很多坑吧,维护也会好点
乌龟壳
乌龟壳

引用来自“夏侯”的评论

引用来自“skl_TZ”的评论

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

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

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

最重要的点应该还是可以直接调用系统api,而浏览器很少直接提供
用nodejs/php开启一个原生chrome,和这个进行http通信实现界面,完全不影响nodejs/php调用原生API实现功能。不止如此,还可以多线程多进程爱怎么玩怎么玩。
yzChen233
yzChen233 博主

引用来自“夏侯”的评论

引用来自“skl_TZ”的评论

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

这个不需要联网,放到服务器上你需要联网
最重要的点应该还是可以直接调用系统api,而浏览器很少直接提供
yzChen233
yzChen233 博主

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

这货公司有同事在用,不过个人始终没想清楚,为什么不用@eechen经常说的方案,由nodejs/php调起一个原生的chrome,之后就类似web开发了。因为elec这个东西同事反馈经常有崩溃的现象。

引用来自“Raphael_goh”的评论

vscode表示淡定,没见过这货蹦过。目前只能说还是要看开发人员的水平,小团队开发估计还是有很多问题的。

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

问题是原生浏览器就没崩溃,所以肯定有些地方有坑,避坑也是时间,时间也是成本啊。之前建议过不要用这个直接调原生的,不过我由于不了解那方面的需求,所以也只是听说不稳定后,随便说说没特别去注意。
这个就要看开发者的选择了,毕竟c++调用原生的要强很多
Ning1994
Ning1994
和nwjs有啥区别,都一样,nwjs还可以直接加载chrome插件,大小一般也就38多兆
夏侯
夏侯

引用来自“skl_TZ”的评论

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

这个不需要联网,放到服务器上你需要联网
为什么Linux会在桌面端完败给Windows?

十多年来,我一直是Linux桌面端的忠实拥护者,在桌面和服务器使用平台选择时,Linux始终是我的第一顺位。虽然我很热爱Linux,但是也不得不承认Linux在桌面端的表现并不是那么理想。 大家对于...

程序师
2018/07/21
0
0
学透 Electron 自定义 Dock 图标

Mac OS 做为前端开发者的首选操作系统相信大家再熟悉不过了,在电脑主界面的底部可以看到各种各样的应用程序图标。比如:App Store、Safari 浏览器、照片、短信等等。使用 Electron 开发时我...

cpselvis
2019/10/04
0
0
谷歌将停止支持 Chrome OS 以外平台 Chrome 应用

谷歌8月20日宣布,它计划在2018年年初停止支持面向Windows、Mac和Linux的Chrome应用。Chrome扩展程序和主题将不受影响,Chrome应用也将会继续出现在Chrome OS上。 Chrome应用是运行于谷歌浏览...

花仲马
2016/08/21
3.5K
13
八款精美的 Linux 发行版!

导读 在这篇文章中,将会列出让一些令 Linux 用户印象最深刻且精美的 Linux 发行版,包括对初学者友好和流行的发行版。 1. elementary OS elementary OS 是一款基于 Ubuntu 精心打磨美化的桌...

linuxprobe16
2017/10/28
1K
1
Electron系列文章-什么是Electron?

Electron 是什么 定义 Electron是一个能让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的...

苏格团队
2019/02/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java面向对象2(3)继承内存图+final详解

一. 继承内存图示 继承内存图:先父后子 继承中,方法是如何调用: 先去子类找方法,能找到就使用 如果找不到,去父类中找 如果父类也找不到,就去父类的父类找。 如果继承树上都找不到,最终...

煌sir
昨天
72
0
多线程——系列四

线程基本方法 线程相关的基本方法有 wait,notify,notifyAll,sleep,join,yield 等。 线程等待( wait ) 调用该方法的线程进入 WAITING 状态,只有等待另外线程的通知或被中断才会返回,...

李向1994
昨天
59
0
SQL查询结果数据排序(二)

> 【SQL从一点一滴分析系列文章】为实际开发中的点点滴滴的总结,从最最简单的SQL 查询 到 综合分析查询 在分析 SQL 时,也会同时分析 mybatis 、Hibernate 中的相关操作 点击查看详情 > 本节...

赵子龙
昨天
49
0
何时使用vs ref vs out

前几天有人问我应该使用参数关键字out而不是ref 。 虽然我(我认为)理解了ref和out关键字之间的差异( 之前已经提到过 ),最好的解释似乎是ref == in and out ,什么是一些(假设的或代码的...

javail
昨天
85
0
宜信如何做到既满足远程办公的短时便利性需求,又不丧失安全性

对于IT互联网企业来说远程办公并不陌生,但是疫情的突然爆发,直接大规模的使用远程办公应用,势必会带来一系列的安全问题,尤其是大量隐私数据安全问题,因为此次的疫情,大量的企业内部人员...

宜信技术学院
昨天
79
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部