由于最近需要做一款跨平台的桌面应用,所以选择使用electron来作为开发的框架,下面说一下如何搭建一个简单的electron项目:
一、准备工作
安装git:下载git | 官网
安装node:下载 | Node.js 中文网
安装npm/cnpm:npm install -g cnpm –registry=https://registry.npm.taobao.org
安装electron:cnpm install -g electron
验证安装是否完成:electron -v / node -v
二、新建工程
1. 新建目录命名为electronDemo,使用npm init -y 新建一个前端工程,在package.json中增加一行”main”: “main.js”,这行代表应用程序的入口是main.js文件。
{"name": "electron-quick-start","version": "1.0.0","description": "A minimal Electron application","main": "main.js","scripts": {"start": "electron ."},"repository": "https://github.com/electron/electron-quick-start","keywords": ["Electron","quick","start","tutorial","demo"],"author": "GitHub","license": "CC0-1.0","devDependencies": {"electron": "^25.4.0"}}
2.在electronDemo目录中新建index.html文件,在body中增加了hello, electron!这行文本。
Document hello, electron!
3.在electronDemo目录中新建main.js文件,在main.js文件增加内容
const { app, BrowserWindow } = require('electron')const path = require('path')function createWindow () {const win = new BrowserWindow({width: 800,height: 600})win.loadFile('index.html')}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}})
app.whenReady()是app启动后的Promise,使用then可以监听对应的状态,在这个回调里面增加createWindow函数,createWindow新建了一个浏览器窗口,设置宽高,并且使用浏览器窗口加载index.html文件。
在终端运行npm run start命令,electron应用的窗口可以正常弹出。
4. 测试electron项目
调试main.js中代码,需要使用VSCode打开工程,点击左侧debug菜单,创建launch.json文件。
{"version": "0.2.0","configurations": [{"name": "Debug Main Process","type": "node","request": "launch","cwd": "${workspaceFolder}","runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron","windows": {"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"},"args" : ["."]}]}
在main.js文件app.whenReady()的回调中增加一个断点,点击debug区域的启动程序按钮,断点可以正常执行。
三、克隆实例代码案例
git地址:git clone https://github.com/electron/electron-quick-start.git
安装完成通过npm start执行即可