Electron 跨平台应用开发的终极技能

希里安 2023-04-21

378

关注“希里安”，get更多有用干货！

各位朋友，是否想打造一款属于自己的桌面程序？昨天分享了炫酷的前端开源项目edex UI终端模拟器，里面就是用的electron来打包编译windows桌面程序。之前刚毕业那会有过开发windows应用的经历，不过是用C#的winform开发一点简单的应用，后面就没有然后了，代码类似如下：

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、不管什么框架，先看官网介绍迅速入门，再去看别人的详细介绍即可。

官方网址：

https://electronjs.org

导航栏一目了然，直接点击文档中的快速入门即可学到基础知识：

2、准备开发环境

1.nodejs,最好是12版本及以上版本。

2.python2.7,因为一部分功能在编译的时候比较依赖python2.7，而3的版本有不兼容。

3. Visual Studio Build Tools，编译的时候需要用到这个工具，可以直接上vs官网下载即可。

3、安装并创建

npm install electron --save-dev

创建主进程main,js，创建渲染进程文件index.html，显示网页内容

在pakage.json添加启动脚本

"start":
"electron ."

示例main.js：

// 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

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

4、保存文件并启动

npm start

5、开发完就是打包分发了：

1.最快捷的打包方式是使用官方推荐的Electron Forge。

    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命令创建可分发的应用

    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应用，打开运行即可。

不管使用什么技术，创建一个hello world应用还是比较简单的。虽然咱们很难做出世界都向你问好的应用，但重要的是享受这个学习新技能的过程，培养自己的思考能力，一定会收获不一样的东西。

好了，今天的分享就到这里，感兴趣的朋友别忘了点赞关注呀！

electron 软件跨平台应用开发

文章转载自希里安，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

Electron 跨平台应用开发的终极技能

评论