文档章节

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)

chailink
chailink
好旧的一个东西。。。
一如当初
一如当初

引用来自“邹海彬”的评论

4-50M,太大了
确实太大了,面向消费者的话,安装包大小是一个需要考虑的因素。
邹海彬
邹海彬
4-50M,太大了
yzChen233
yzChen233 博主

引用来自“Fenying”的评论

收藏个~
😉
手握华为赛神仙
手握华为赛神仙
收藏个~
JS是世界上最好的语言—— 使用Electron开发桌面应用(一)

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个专注于桌面应用的 Node. js 的变体,而不是 Web 服务器。 我的学习动机 前阵子用N...

李初五
2019/05/12
0
0
Wire:Linux开源聊天应用

从一开始,Wire 就推销自己是世界上最注重隐私的聊天应用程序。无论是文本、语音电话,还是图表、图像等基本的内容,它都提供端到端的加密。 WhatsApp 也提供‘端到端加密’,但是考虑一下它...

linuxCool
2016/12/04
85
0
面向 Linux 新用户的八款最佳 Linux 发行版

Linux新用户总是为一开始选择最佳Linux发行版而感到困惑。由于外头有数百款Linux发行版,所以这始终是件让人困惑的事情。不过,我会帮助你选择合适的Linux版本,以便开始使用Linux。我在本文...

局长
2016/09/02
4.5K
24
QT5.x应用在Mac OS X和Windows平台的发布过程

QT是一款非常牛逼的跨平台开发工具,目前可以开发Mac OS X、Windows、Linux、Android、iOS等平台的App。对于Android和iOS平台,发布相对容易,例如,Android平台是生成apk文件上传到Android...

androidguy
2018/06/29
0
0
Zorin OS 发布 12.4 版

Zorin OS 是一个基于 Ubuntu 的 Linux 发行版,专为没有相关知识背景的 Linux 新用户设计,旨在降低 Linux 的使用门槛,并使 Linux 普惠至普通计算机用户。其拥有与 Windows 类似的桌面 UI,...

问题终结者
2018/08/23
651
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊artemis的handleConnectionFailure

序 本文主要研究一下artemis的handleConnectionFailure handleConnectionFailure activemq-artemis-2.11.0/artemis-core-client/src/main/java/org/apache/activemq/artemis/core/client/imp......

go4it
昨天
98
0
【SpringBoot MQ 系列】RabbitMq 消息发送基本使用姿势

【MQ 系列】SprigBoot + RabbitMq 消息发送基本使用姿势 前面两篇博文,分别介绍了RabbitMq的核心知识点,以及整合SpringBoot的demo应用;接下来也该进入正题,看一下SpringBoot的环境下,如...

小灰灰Blog
昨天
72
0
Fabric链码开发的8个原则

我相信智能合约(链码)是Hyperledger Fabric区块链网络的核心。正确开发链码可以真正发挥一个安全区块链的优势,反之则会带来灾难性的后果。在这篇文章里我不打算探讨Hyperledger Fabric链码...

区块链教程
昨天
28
0
Spring的BeanFactory和FactoryBean,傻傻分不清楚?!

作者:gcdd1993 来源:https://www.cnblogs.com/gcdd/p/12292360.html 1. 官方定义 BeanFactory:Spring Bean容器的根接口 FactoryBean:各个对象的工厂接口,如果bean实现了这个接口,它将被...

ericxu1116
昨天
70
0
flask 框架 - url 路径末尾加不加反斜杠的区别

对比下面两个路径 /test1/ 和 /test2, 前者比后者末尾多了一个反斜杠。 @app.route('/test1/')def test1(): return 'test1'@app.route('/test2')def test2(): return 'test2'......

nimo10050
昨天
70
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部