文档章节

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)

eechen
eechen

引用来自“wuyiw”的评论

引用来自“eechen”的评论

@wuyiw PHP是HTML预处理器,学习成本比JS低,用jQuery 1.x就能保证对IE8在内的大多浏览器的支持,关键是完全可以用网站开发的思维来开发应用,比如phpMyAdmin跟PHP解释器部署在用户端用于管理MySQL并不挑浏览器,使用用户浏览器,既能缩小应用包的大小,也能为用户节省资源,Electron一个应用启动一个Chromium运行时,太消耗资源.

怎么看你意思学php就不用学js了,是吗?兼容性,举个例子,ie8能用css3多少特性你告诉我。用jq打遍天下这种想法说明你前端真的不专业。当然具体问题具体分析,你要是做表格crud的应用那php+jq也没问题。另外,用jq做的兼容ie8的漂亮的网站有很多,但那不是你不思进取的理由。小米4能满足你日常要求吧,那你会不会拉着买小米5的人说4就够用别买5?
对的,小米4能满足我的需求,我自然不会自己再去买小米5.phpMyAdmin这种带有比较复杂DataGrid管理功能,用的还不是jQuery?所以不要以为用jQuery就落伍,jQuery有jQuery的设计哲学,没有好坏之分,只有适合与否之分.jQuery+PHP,Write Less Do More,至少很适合我自己,而且在Web上得到大规模应用也说明它们不俗的价值.
wuyiw
wuyiw

引用来自“eechen”的评论

@wuyiw PHP是HTML预处理器,学习成本比JS低,用jQuery 1.x就能保证对IE8在内的大多浏览器的支持,关键是完全可以用网站开发的思维来开发应用,比如phpMyAdmin跟PHP解释器部署在用户端用于管理MySQL并不挑浏览器,使用用户浏览器,既能缩小应用包的大小,也能为用户节省资源,Electron一个应用启动一个Chromium运行时,太消耗资源.

怎么看你意思学php就不用学js了,是吗?兼容性,举个例子,ie8能用css3多少特性你告诉我。用jq打遍天下这种想法说明你前端真的不专业。当然具体问题具体分析,你要是做表格crud的应用那php+jq也没问题。另外,用jq做的兼容ie8的漂亮的网站有很多,但那不是你不思进取的理由。小米4能满足你日常要求吧,那你会不会拉着买小米5的人说4就够用别买5?
wuyiw
wuyiw
怎么看你意思学php就不用学js了。。。是吗?
eechen
eechen
@wuyiw PHP是HTML预处理器,学习成本比JS低,用jQuery 1.x就能保证对IE8在内的大多浏览器的支持,关键是完全可以用网站开发的思维来开发应用,比如phpMyAdmin跟PHP解释器部署在用户端用于管理MySQL并不挑浏览器,使用用户浏览器,既能缩小应用包的大小,也能为用户节省资源,Electron一个应用启动一个Chromium运行时,太消耗资源.
wuyiw
wuyiw

引用来自“eechen”的评论

@乌龟壳 我来了.Electron打包的最终应用是几十MB,而PHP打包的最终应用只有几个MB,缩小了一个数量级.php -S localhost:8080 就能建立一个支持PHP编程内置SQLite的本地HTTP服务器.调用用户浏览器访问本地PHP建立的HTTP服务器,支持离线运行的GUI应用不就出来了么?而且还不需要像Electron那样自带Web运行时.PHP7中支持用opcache.file_cache导出脚本opcode实现源代码保护: http://my.oschina.net/eechen/blog/539995

PHPDroid打包PHP7的同时也打包了Swoole,方便广大PHP开发者在Android这个我们触手可及的Linux上使用PHP+WebView构建Android应用,APK包大小还不到6MB.
http://www.oschina.net/news/74881/phpdroid-update

1,需要学php; 2,鬼知道用户用什么浏览器?自带chromium所见即所得,别说ie/ff/safari,连低版本chromium的兼容性都不用考虑。能不能多想想这货几十M为啥还那么热门。。。
yzChen233
yzChen233 博主

引用来自“okoala”的评论

http://electron.atom.io/apps/ 这货是面向大型应用和软件的,如果只是做hello world或小工具就不太适合了。electron好处非常明显:1、面向web,大把前端可以入手,写UI不要太简单,一大堆现成的 Web UI 组件拿下来直接用。2、跨平台,这是 Web 技术的一大特点,如果你PC端或者微信平台本身已经是应用了,那么迁移到electron应用程序就很easy。基于这类技术的应用,国内一抓一大把,国外就更多了。网易云音乐,有道词典,钉钉,豌豆荚... ...已经很成熟了。如果你还没入门就别黑了~
刚才看了网易云音乐,它的 \resource 目录里面,只有 format.ico、translation.bin 两个文件,估计是可以做到不开源的,但是具体怎么处理的,目前我这边还不清楚,得找个时间研究下
yzChen233
yzChen233 博主

引用来自“okoala”的评论

http://electron.atom.io/apps/ 这货是面向大型应用和软件的,如果只是做hello world或小工具就不太适合了。electron好处非常明显:1、面向web,大把前端可以入手,写UI不要太简单,一大堆现成的 Web UI 组件拿下来直接用。2、跨平台,这是 Web 技术的一大特点,如果你PC端或者微信平台本身已经是应用了,那么迁移到electron应用程序就很easy。基于这类技术的应用,国内一抓一大把,国外就更多了。网易云音乐,有道词典,钉钉,豌豆荚... ...已经很成熟了。如果你还没入门就别黑了~
刚才看了下网易云音乐安装目录,它有个 CloudMusic\plugin\PepperFlash,估计就是播放flash的插件吧,有机会可以研究下
yzChen233
yzChen233 博主

引用来自“okoala”的评论

http://electron.atom.io/apps/ 这货是面向大型应用和软件的,如果只是做hello world或小工具就不太适合了。electron好处非常明显:1、面向web,大把前端可以入手,写UI不要太简单,一大堆现成的 Web UI 组件拿下来直接用。2、跨平台,这是 Web 技术的一大特点,如果你PC端或者微信平台本身已经是应用了,那么迁移到electron应用程序就很easy。基于这类技术的应用,国内一抓一大把,国外就更多了。网易云音乐,有道词典,钉钉,豌豆荚... ...已经很成熟了。如果你还没入门就别黑了~
看来这位朋友有实际应用经验啊😄
个性化平台
个性化平台
发布出来的项目,前端文件是不是都开源了,能否把所有Js和Html都打包成一个文件呢?
okoala
okoala
http://electron.atom.io/apps/ 这货是面向大型应用和软件的,如果只是做hello world或小工具就不太适合了。electron好处非常明显:1、面向web,大把前端可以入手,写UI不要太简单,一大堆现成的 Web UI 组件拿下来直接用。2、跨平台,这是 Web 技术的一大特点,如果你PC端或者微信平台本身已经是应用了,那么迁移到electron应用程序就很easy。基于这类技术的应用,国内一抓一大把,国外就更多了。网易云音乐,有道词典,钉钉,豌豆荚... ...已经很成熟了。如果你还没入门就别黑了~
electron开发一个计算器

electron可以使用前端熟悉的html,js,css构建windows桌面应用,这几天工作需要探索了一下。 照着mac里面计算器的样式,做了一款计算器出来。 计算器 源码:https://github.com/kurset/electro...

Kurset
2018/01/10
0
0
Leanote 桌面客户端 v0.9.1 发布

Leanote 桌面客户端 v0.9.1 发布. 修复的BUG: 图片优化, 修复不能加载图片的问题 同步优化 下载地址: Windows v0.9.1 ia32 x64 Mac OS X v0.9.1 x64 Linux v0.9.1 ia32 x64 arm V0.9的用户可...

lifephp
2015/11/16
3.7K
14
【前端】网页多平台桌面打包工具 electron 和 electron-packager 的使用

前言 现在很多平台上的桌面应用,都是直接通过js项目打包的。我在一个项目桌面项目的源码中,找到了一个打包工具,叫做。 下面通过实际部署,学习下这个工具的使用。 教程 electron是什么 El...

diandianxiyu
2018/04/30
0
0
第一章 Electron介绍 | Electron in Action(中译)

Github 官方地址 代表作: Visual Studio Code Atom - Code editor. Github开源的代码编辑器,Electron起源地 Visual Studio Code - Cross-platform IDE. 近几年最火的代码IDE Hyper - Termi......

穆书伟
2019/06/19
0
0
electron-vue模仿网易云桌面应用体验

简介 像官网说的那样,electron-vue就是基于 vue 来构造 electron 应用程序的样板代码。electron-vue开发起来就和vue一样,只是如果有特殊的需求需要修改应用的话就要用到electron相关的api...

皆随你
2018/11/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java小案例: 1000以内的水仙花数

要求在控制台分别展示1000以内的水仙花数。 如下:↓ 水仙花数规则: 水仙花数至少是一个3位数 每位数字的立方数的累加和,正好等于该数字本身。 例如:153就是一个水仙花数。每位数字分别...

漫路h
昨天
66
0
centos 防火墙端口设置

查看开放的端口号 firewall-cmd --lists-all 设置开放的端口号 firewall-cmd --add-service=http --permanent 1. //--permanent表示永久生效,不加这个参数的话只会针对本次执行完命令生效,重...

ACE_LCX
昨天
25
0
入门实战: Spring Cloud 安全控制

认证授权 OAuth 2.0 Authorization Server 添加 Spring Cloud 依赖 配置管理 开启 Eureka 客户端 OAuth 2.0 Resource Server 添加 Spring Cloud 依赖 配置管理 开启 Eureka 客户端 Gateway ...

BeanHo
昨天
51
0
【并发那些事】线程有序化神器CompletionService

<a name="C2O7X"></a> 前言 话说有一天,产品经理突然找到正在摸鱼的你。<br> <br>产品:『我们要加一个聚合搜索功能,当用户在我们网站查询一件商品时,我们分别从 A、B、C 三个网站上查询这...

K1W1
昨天
31
0
面试题 06:从尾到头打印链表

题目描述 输入一个链表,按链表值从尾到头的顺序返回一个 ArrayList。 思路 思路一 用栈来保存需要输出的节点值。 直接遍历链表,把遍历到的值放入栈中,因为栈的特点,当遍历到链表尾后,栈...

Oaki
昨天
36
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部