浅谈electron构建桌面应用

1、electron是什么

electron是有Github开发， 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。electron的原理是 通过将 Chromium 和 Node.js 组合到同一个 runtime 环境中。这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行。

2、为什么会用electron

win:c++,c# mac:Objective-C Swift Li:c++；多个平台我们需要多个应用，高开发成本。而electron方便快捷的开发桌面应用，跨平台，对前端开发者友好,

3、目前所实现的开源软件

vscode、Atom、支付宝小程序 IDE

4、进程

渲染进程：用户看到界面由渲染进程描绘。	1个或者多个进程
主进程：运行main.js的进程，运行main.js创建web界面。1个进程

5、安装使用
eq:win >7 windows在win7以上兼容比较友好 os:10.8 mac在10.8以上

6、以已经开发的一个web系统打包成着桌面应用

一、npm install -save electron

不管你的项目是vue React 还是

项目根目录建立main.js (electron应用加载入口文件)
（main.js文件）

// 引入electron并创建一个Browserwindow
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,	窗口被自动关闭.
let mainWindow;

function createWindow() {
// 创建浏览器窗口,
mainWindow = new BrowserWindow({ width: 1920, height: 	1080 });
/*
* 加载应用----- electron-quick-start中默认的加载入口
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
*/
// 加载应用----适用于 react 项目
mainWindow.loadURL('http://localhost:3000/');

// 打开开发者工具，默认不打开
// mainWindow.webContents.openDevTools()

// 关闭window时触发下列事件.
mainWindow.on('closed', () => {
mainWindow = null;
});
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on('ready', createWindow);

// 所有窗口关闭时退出应用.
app.on('window-all-closed', () => {
// macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
if (process.platform !== 'darwin') {
app.quit();
}
});

app.on('activate', () => {
// macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应	用中重建一个窗口
if (mainWindow === null) {
createWindow();
}
});

三、配置package.json

"main": "main.js",
"homepage": ".",  
 //Electron 调用的入口是 file :协议，/static 就会定位到根目录去
scripts:{
+ "electron-start": "electron ."
}

四、启动

yarn  start 
yarn electron-start

五、支持热更新
六、打包
#安装electron-packager包

npm install electron-packager --save-dev

#安装electron-packager命令

npm install electron-packager -g
"electron-packager": "electron-packager . 内部管理系统 	--platform=darwin --arch=x64 "

加入我的技术群，一起学习

707196135