各位朋友，是否想打造一款属于自己的桌面程序？昨天分享了炫酷的前端开源项目edex UI终端模拟器，里面就是用的electron来打包编译windows桌面程序。之前刚毕业那会有过开发windows应用的经历，不过是用C#的winform开发一点简单的应用，后面就没有然后了，代码类似如下：
代码语言：javascript复制public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
MessageBox.Show("Button clicked!");
}
}今天就来介绍一下如何使用electron创建一个windows应用的流程。带你快速入门这款对新手友好，老手喜爱的开源框架。
首先介绍下electron，它是一个开源框架，可以跨平台构建桌面应用，结合chromium和nodejs，这样前端开发人员也可以开发web应用了，对前端人员非常之友好。
再说说现状，elctron社区活跃、生态繁荣，越来越标准化，但是也面临了一定的阻力。据我从事前端开发的朋友说，electron现状是苹果app store已经不太允许上架此类应用，为什么？
因为有以下几种原因：
1、体验感不太好，就是使用web技术开发，界面交互不像原生应用那么流畅，不符合苹果对于产品和用户体验的极致追求理念。
2、安全性隐患大，因为electron嵌入Chromium和nodejs运行环境，如果存在漏洞的话，这又与苹果安全性要求不符。
3、应用过大，打包完之后体积通常比较大几十上百兆，比如我简单搞个test应用，打包完有一百来兆。
4、electron应用的技术栈比较复杂，审核难度也加大了。
尽管如此，electron目前发展迅猛，前景良好，不但能在macos上用也能在windows和linux上使用，主要有以下优势，值得继续学习：
1、开发简单跨平台应用。
2、学习难度降低，因为使用web技术，对前端开发者很友好，可以快速上手。
3、生态还是很丰富，有现成的UI框架、API、工具可以使用。
4、electron对nodejs环境有完全的访问权限，调用各种模块完成业务逻辑，更加灵活可控。
好的有了electron的背景了解，我们就着手创建一个windows桌面应用（毕竟windows应用使用基数大），至于macos和linux如果会用到再分享。
创建步骤：
1、不管什么框架，先看官网介绍迅速入门，再去看别人的详细介绍即可。
官方网址：
代码语言：javascript复制https://electronjs.org
导航栏一目了然，直接点击文档中的快速入门即可学到基础知识：
2、准备开发环境
1.nodejs,最好是12版本及以上版本。
2.python2.7,因为一部分功能在编译的时候比较依赖python2.7，而3的版本有不兼容。
3. Visual Studio Build Tools，编译的时候需要用到这个工具，可以直接上vs官网下载即可。
3、安装并创建
代码语言：javascript复制npm install electron --save-dev创建主进程main,js，创建渲染进程文件index.html，显示网页内容
在pakage.json添加启动脚本
代码语言：javascript复制"start":
"electron ."
示例main.js：
代码语言：javascript复制// main.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow =
electron.BrowserWindow;
const path = require('path');
const isDev = require('electron-is-dev');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 900,
height: 680,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL(
isDev ? 'http://localhost:3000' :
`file://${path.join(__dirname, '../build/index.html')}`
);
});示例index.html
代码语言：javascript复制<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>4、保存文件并启动
代码语言：javascript复制npm start
5、开发完就是打包分发了：
1.最快捷的打包方式是使用官方推荐的Electron Forge。
代码语言：javascript复制npm install --save-dev @electron-forge/cli
npx electron-forge import
✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore
We have ATTEMPTED to convert your app to be
in a format that electron-forge understands.
Thanks for using
"electron-forge"!!!2.使用make命令创建可分发的应用
代码语言：javascript复制npm run make
> my-electron-app@1.0.0 make
/my-electron-app
> electron-forge make
✔ Checking your system
✔ Resolving Forge Config
We need to package your application before
we can make it
✔ Preparing to Package Application for
arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform:
darwin - For arch: x64在你的项目out文件夹就会有一个可执行的exe应用，打开运行即可。
