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

原创
2016/09/26 07:13
阅读数 3.5W

每次 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

技术交流

展开阅读全文
打赏
18
298 收藏
分享
加载中

引用来自“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上得到大规模应用也说明它们不俗的价值.
2016/09/27 20:00
回复
举报

引用来自“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?
2016/09/27 19:43
回复
举报
怎么看你意思学php就不用学js了。。。是吗?
2016/09/27 19:16
回复
举报
@wuyiw PHP是HTML预处理器,学习成本比JS低,用jQuery 1.x就能保证对IE8在内的大多浏览器的支持,关键是完全可以用网站开发的思维来开发应用,比如phpMyAdmin跟PHP解释器部署在用户端用于管理MySQL并不挑浏览器,使用用户浏览器,既能缩小应用包的大小,也能为用户节省资源,Electron一个应用启动一个Chromium运行时,太消耗资源.
2016/09/27 19:02
回复
举报

引用来自“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为啥还那么热门。。。
2016/09/27 09:46
回复
举报
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 两个文件,估计是可以做到不开源的,但是具体怎么处理的,目前我这边还不清楚,得找个时间研究下
2016/09/27 09:44
回复
举报
yzChen233博主

引用来自“okoala”的评论

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

引用来自“okoala”的评论

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