官网:https://www.electronjs.org
Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required
跨平台桌面应用开发:基于Electron与NW.js
Node.js全栈彻底贯彻 大前端从web到全平台 真正意义的一次编写到处运行
传统桌面应用开发要求懂高级编程语言以及专门的框架。有了Electron和NW.js,你可以将现有Web开发技术运用到仅仅使用HTML、CSS和JavaScript就能开发的桌面应用中。而且,开发出来的应用还能在Windows、Mac和Linux中工作,显著减少了开发和培训的时间。
electron运行需要nodejs环境,node自带npm,不用单独安装npm;
nodejs官网安装下载即可,官网:https://nodejs.org/zh-cn/,像qq一样安装即可;
安装完之后打开win+R打开cmd命令行,环境变量是否配置;
以下为官网教程推荐创建,官网:https://www.electronjs.org/docs/latest/tutorial/quick-start
新建一个文件夹,双击打开,在地址栏输入cmd打开命令提示符;输入一下代码,一路回车。
npm init
需要创建的文件如下;
package.json文件如下,将我这个粘贴到你那个里面即可:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Electron01",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^17.2.0"
}
}
#main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
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()
}
})
#preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
在刚才的命令行中输入:npm start
陆续更新中·······
需要用到工具electron-packager
命令行执行npm install electron-packager
安装此工具。
https://github.com/electron/electron-packager/blob/main/usage.txt