查看原文
其他

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

2016-10-05 开源中国

#长按上图识别二维码,参与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来一个约会,更为大家奉上精彩的主题演讲,各位还不来赴约吗?

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

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存