[外链图片转存失败(img-3RucrgcX-1562556984462)(http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-2.png “Electron”)]

序

每次 Electron 有最新新闻的时候，都会有很多朋友留言，问有没有相关教程，本人也是观察有一段时间了，一直鲜有人提供相关的学习内容，所以在此就给大家提供下一些入门和进阶教程，希望大家多多支持，谢谢！

本文的主要目的，是要教会大家如何使用 Electron 从 零 创建 Windows 的 .exe 或者 OS X / linux 的 桌面可执行应用程序。

案例演示

由于资源不多，直接将自己之前开源的一个 google chrome extension 代码引用过来，无需修改源码，值要配置好 electron 环境就可以运行！插件的开源仓库地址：http://git.oschina.net/cyzshenzhen/GJP-tools-chrome-extension

[外链图片转存失败(img-CnCCVGwm-1562556984462)(http://7vzsvy.com1.z0.glb.clouddn.com/electron-demo.gif “实际应用示例”)]

一、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

[外链图片转存失败(img-zArcxGL0-1562556984463)(http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-1.png “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、效果

[外链图片转存失败(img-Zjivdoq4-1562556984463)(http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-3.png “Electron”)]

[外链图片转存失败(img-HUgHTcZP-1562556984463)(http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-4.png “Electron”)]

五、如何跟朋友 show 一个，装个X

教程到这里，入门基本已经结束了，那么估计有些童鞋估计还是不明白，怎么把这个程序发给朋友，显得自己流弊，其实很简单的！你只需要把生成出来的那个文件夹，打一个压缩包，然后告诉他，执行那个.exe文件就够了！！！

= =||||

My Blog

blog.chenyuanzhen.com

技术交流

Electron 从零创建一个 Windows/OS X/Linux 的桌面可执行程序的更多相关文章

  1. 为MongoDB创建一个Windows服务

    一:选型,根据机器的操作系统类型来选择合适的版本,使用下面的命令行查询机器的操作系统版本 wmic os get osarchitecture 二:下载并安装 附上下载链接 点击安装包,我这里是把文件 ...

  2. 创建一个Windows服务程序与实现定时器效果

    1.创建一个Windows服务程序 一.   新建Window服务项目 二.   添加安装程序 三.   配置服务属性 四.   编写定时器代码 publicpartialclassService1 ...

  3. C#创建一个Windows Service

    Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...

  4. tomcat创建一个windows服务

    具体步骤如下: 1.把JDK解压到C:\Program Files\Java下,Tomcat解压到D:\tomcat下 2.配置环境变量 JAVA_HOME:C:\Program Files\Java ...

  5. [翻译] 使用 .NET Core 3.0 创建一个 Windows 服务

    原文: .NET Core Workers as Windows Services 在 .NET Core 3.0 中,我们引入了一种名为 Worker Service 的新型应用程序模板.此模板旨在 ...

  6. C++使用代码创建一个Windows桌面应用程序

    WinMain函数 Windows应用程序的唯一程序入口. 函数原型 int WINAPI WinMain { HINSTANCE hInstancem HINSTANCE hPreInstance, ...

  7. 创建一个Windows Service 程序

    1.新建Windows项目,选择"Windows服务"类型的项目. 2.在生成的Service1.cs中代码中写你需要的代码,如下: using System; using Sys ...

  8. 使用Windows Service Wrapper快速创建一个Windows Service

    前言 今天介绍一个小工具的使用.我们都知道Windows Service是一种特殊的应用程序,它的好处是可以一直在后台运行,相对来说,比较适合一些需要一直运行同时不需要过多用户干预的应用程序,这一类我 ...

  9. 创建一个Windows的NTP Server

    搭建一个VMware vRealize Suite的时候遇见了不少时间同步的问题, 实验室里网络与外界隔绝, 不能使用公网的NTP服务器, 所以使用文中的方法自己搭建了一个. 蛮好用的. Creati ...

随机推荐

  1. sqlmap之waf绕过

    #一点补充 在老版本的安全狗中,可通过构造payload: http://xx.xx.xx.xx/sqli-labs/Less-2/index.php/x.txt?id=1 and 1=1 可通过in ...

  2. Java基础 （上）

    基础概念与常识 Java 语言有哪些特点? 简单易学: 面向对象(封装,继承,多态): 平台无关性( Java 虚拟机实现平台无关性): 支持多线程( C++ 语言没有内置的多线程机制,因此必须调用操 ...

  3. Nacos配置中心集群原理及源码分析

    Nacos作为配置中心,必然需要保证服务节点的高可用性,那么Nacos是如何实现集群的呢? 下面这个图,表示Nacos集群的部署图. Nacos集群工作原理 Nacos作为配置中心的集群结构中,是一种 ...

  4. python3 爬虫 Scrapy库学习1

    1生成项目:生成项目文件夹 scrapy startproject 项目名 2生成爬虫文件 scrapy genspider 爬虫名 指定域名 3进入items文件可以输入自己想要爬取的内容比如 te ...

  5. 整理分布式锁：业务场景&分布式锁家族&实现原理

    1.引入业务场景 业务场景一出现: 因为小T刚接手项目,正在吭哧吭哧对熟悉着代码.部署架构.在看代码过程中发现,下单这块代码可能会出现问题,这可是分布式部署的,如果多个用户同时购买同一个商品,就可能导 ...

  6. Java 线程池中 submit() 和 execute()方法有什么区别？

    两个方法都可以向线程池提交任务,execute()方法的返回类型是 void,它定义在 Executor 接口中. 而 submit()方法可以返回持有计算结果的 Future 对象,它定义在 Exe ...

  7. 深入理解Java虚拟机-走进Java

    一.Java技术体系 从广义上讲, Clojure. JRuby. Groovy等运行于Java虚拟机上的语言及其相关的程序都属于Java技术体系中的一员. 如果仅从传统意义上来看, Sun官方所定义 ...

  8. 线程的 sleep()方法和 yield()方法有什么区别？

    ① sleep()方法给其他线程运行机会时不考虑线程的优先级,因此会给低优先级的线程以运行的机会:yield()方法只会给相同优先级或更高优先级的线程以运行的机会: ② 线程执行 sleep()方法后 ...

  9. 解释 Spring 框架中 bean 的生命周期？

    Spring 容器 从 XML 文件中读取 bean 的定义,并实例化 bean. Spring 根据 bean 的定义填充所有的属性. 如果 bean 实现了 BeanNameAware 接口,Sp ...

  10. JS：数组中push对象，覆盖问题

    发现将对象push进数组,后面的值会覆盖前面的值,最后输出的都是最后一次的值.其实这一切都是引用数据类型惹的祸.如果你也有类似问题,可以继续看下去哦.下面代码模拟:将json对象的每个键值对,单独搞成 ...