开发electron前端UI入门
最简单的入门,入门了,有经验的工程师都能快速开张了,Electron框架包开发前端UI界面,简单,快速,高效,学习成本和维护成本低,网络上资源比,入门难度低.
electron的相关介绍,可以在网上自行了解,这里讲一下如何快速开发一个electron窗口程序,
1.先安装npm包,npm包在Node.js中,所以也就是安装Nodejs.
打开网址:https://nodejs.org/en,下载20.9.0 LTS版本,一路安装即可,测试一下
npm -v
10.1.0
2.安装electron支持包
先安装cnpm,国内用它会快很多
npm install -g cnpm --registry=https://registry.npmmirror.com
再用cnpm安装electron,(安装在项目目录)
cnpm install --save-dev electron
3.建立一个简单从窗口程序:
包含三个文件:index.html,main.js,package.json
Index.html内容:
<!DOCTYPE html>
<html>
<head>
<title>Hello MEDI!</title>
</head>
<body>
<script>
const fs = require('fs')
console.log(fs.readFileSync(__filename, 'utf8'))
</script>
</body>
</html>
main.js内容:
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
package.json内容:
{
"name": "demo",
"version": "1.0.0",
"description": "test",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^27.0.4",
"electron-packager": "^17.1.2"
}
}
4.以上三个文件组成了最简单的electron项目框架,
使用以下命令运行:
npm start
至此,一个完成的窗口程序就运行起来了,如果想继续提高,可以从github或gitee网站clone一个简单的electron项目练练手.
electron以无以轮比的优势已经成为各大IT公司的宠儿,既有来自java/js的开发效率,发挥多平台运行优势,也有通过wasm调用c/c++/rust获取可观的运行高效率,就像给PC打通了任督二脉,让未来的程序充满无限可能. 很好，很不错，很多牛鼻的技术都需要一个十分简单的引导
页:
[1]