Electron 从零创建一个 Windows/OS X/Linux 的桌面可执行程序
[外链图片转存失败(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
技术交流
最新文章
- 使用cmake自动构建工程
- Chrome 开发者工具(DevTools)中所有快捷方式列表
- oracle 11g 添加控制文件
- HDU 2101 A + B Problem Too 分类: ACM 2015-06-16 23:57 18人阅读 评论(0) 收藏
- 219. Contains Duplicate II
- [AngularJS 2 实践 一]My First Angular App
- SaltStack运行任务卡住了,怎么办?
- 快速批量插入sqlserver方法之我见
- B-dya6
- Ext JS 5 beta版发布
- Zookeeper连接eclipse
- DAY15、模块
- oracle填坑之PLSQL中文显示为问号
- Unity3D UI适配
- java操作FTP的一些工具方法
- JAVA 最新 环境搭建(JDK 1.8 + Tomcat 9 + eclipse oxygen + mysql 5.7)
- Mac 在terminal 上用命令打开sublime
- 【转】Sqlserver将数据从一个表插入到另一个表
- sql语句查询结果合并union all用法
- BZOJ4974 八月月赛 Problem D 字符串大师 KMP
热门文章
- Netty之DefaultAttributeMap与AttributeKey的机制和原理
- bzoj4596/luoguP4336 [SHOI2016]黑暗前的幻想乡(矩阵树定理,容斥)
- grep 命令?
- Linux下安装jdk-7u67-linux-x64.rpm
- linux java7升级到java8
- Windows 10 安装 wordpress
- Netty学习摘记 —— 简单WEB聊天室开发
- Tomcat配置文件之“server.xml”解析
- NE555脉冲模块电路
- w3schools网站的HTML教程之HTML编辑器