专栏名称: OSC开源社区
OSChina 开源中国 官方微信账号
目录
相关文章推荐
OSC开源社区  ·  工作写代码，放假写书，最后豆瓣评分9.1 ·  4 天前  
程序员小灰  ·  百度进军娱乐圈？这次破圈的是百度网盘... ·  4 天前  
macrozheng  ·  程序员缺乏经验的 7 种表现！ ·  4 天前  
OSC开源社区  ·  世界上第一次大规模虚拟会议，发生在1916年 ·  1 周前  
码农翻身  ·  世界上最厉害的协作软件，让程序员痛不欲生，最 ... ·  1 周前  
51好读  ›  专栏  ›  OSC开源社区

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

OSC开源社区  · 公众号  · 程序员  · 2016-10-05 08:29

正文

#长按上图识别二维码，参与OSC源创会年终盛典#


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



序


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

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


案例演示


由于资源不多，直接将自己之前开源的一个 google chrome extension 代码引用过来，无需修改源码，值要配置好 electron 环境就可以运行！



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


启动效果

单独启动




结构分析



index.html

你没看错，它就只是一个HTML而已！




main.js





窗口配置，主要是控制窗口的高度、宽度、入口页面、等

下面是代码的内容，一般情况下，只需要看下两个地方就行

●入口页面配置：mainWindow.loadURL()
●打开调试工具：mainWindow.webContents.openDevTools()

package.json

项目名称、版本信息等，以及node.js相关的依赖配置，类似于java引用.jar

●electron-packager
●electron-prebuilt

两个都是用来打包成可执行应用程序的必备依赖包，细节我们在下一个步骤里面进行详细的说明



四、打包为可执行程序

1、打包

现在我们只能通过 npm start 源码 来运行程序，如何打包成系统可执行程序，不要node.js环境也可以用呢？这里我们将会用到 electron-packager、electron-prebuilt

现在，我们使用 electron-packager 来进行打包，此处我们打包为 windows 系统的 .exe 程序

首先，进入项目根目录，然后执行下面命令行



如果还想打包 linux / OS X 环境的可执行程序，可查看帮助信息




即可看到相关资料，如果不明白的话，可以留言，一起学习！

2、效果



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


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

END


推荐阅读

点击标题直接进入阅读

《小程序 大假期，技术猿国庆假期的正确打开方式…》

微信小程序开发正当时，没有内测资格不要紧。这里为你准备了一堆技术干货，更有各种实例源码奉上。理论+实践，分分钟掌握小程序开发。

《2016年31 款轻量高效的开源 JavaScript 插件和库》

文章介绍了大量轻量级的开源avascript插件和库，总有一款适合你。使用它可以将你的网站变得更加友好。

《参与成都、重庆源创会，听大咖分享时下最新技术干货!》

开源中国源创会就将来到成都、重庆，与各位OSCer来一个约会，更为大家奉上精彩的主题演讲，各位还不来赴约吗？

     点击“阅读原文”查看更多精彩内容

推荐文章
OSC开源社区  ·  工作写代码，放假写书，最后豆瓣评分9.1
4 天前
程序员小灰  ·  百度进军娱乐圈？这次破圈的是百度网盘...
4 天前
macrozheng  ·  程序员缺乏经验的 7 种表现！
4 天前
OSC开源社区  ·  世界上第一次大规模虚拟会议，发生在1916年
1 周前
码农翻身  ·  世界上最厉害的协作软件，让程序员痛不欲生，最后被印度人搞走了
1 周前
冷笑话  ·  忍不住笑出声！我大概是看到了一群假军人吧！～
7 年前
潮人小罗  ·  如果你有一副可以听到别人真心话的眼镜，你会怎么做
7 年前
闹闹每日星运  ·  星历0422：宜写女生吃醋了有哪些表现 聚餐 处女联络感情
7 年前
极客公园  ·  「限免精选」06.16 期 | 智能翻译黑马、无线 U 盘、益智小游、Kindle 电子书
7 年前
齐网网络  ·  黑龙江省气象台发布大雨预报，预防局地暴雨哦！
7 年前
Sov5搜索   ·   小百科   ·   移动版
51好读 - 好文章就要读起来!