Electron开启javascript开发窗口应用之旅

最新推荐文章于 2024-05-26 00:43:50 发布

luffy5459

最新推荐文章于 2024-05-26 00:43:50 发布

阅读量1.8k

点赞数

文章标签： electron chrome npm node window

本文链接：https://blog.csdn.net/feinifi/article/details/104665816

版权

在大概一年之前，我当时还说nodejs或者javascript无法开发出窗口程序，后来有人打脸了，说electron可以，当时还不以为然，觉着不可思议，但是直到今天，electron已经可以很方便的开发出窗口程序了，真的是发展迅速啊，而且开发非常的方便，环境安装也很简单，就需要node开发环境即可。

主要依赖于electron，这个可以利用浏览器内核结合页面开发出窗口程序界面来，真的是很巧妙，应用启动，类似于开启一个浏览器，原来需要我们手动打开浏览器输入url的方式被electron包裹浏览器内核给取代了。

下面进行实战，从无到有，创建一个窗口应用。前提是机器安装了node,并且版本达到了10以上，npm版本达到了6以上。

按照官方的文档，我们准备三个文件，他们分别是package.json,main.js,index.html。内容如下：

package.json

{
	"name": "electronapp",
	"version": "1.0",
	"main": "main.js"
}

main.js

const {app,BrowserWindow} = require('electron');


app.whenReady().then(createWindow)

app.on('window-all-closed',function(){
	if(process.platform!='darwin')
		app.quit();
});


function createWindow(){
	var mainWindow = null;
	mainWindow = new BrowserWindow({
		width:800,
		height:500,
		webPreferences:{
			nodeIntegration:true
		}
	});
	mainWindow.loadFile("index.html");
	mainWindow.webContents.openDevTools();
}

app.on('activate',function(){
	if(BrowserWindow.getAllWindows().length==0){
		createWindow();
	}
})

index.html

<!doctype html>
<html>
	<head>
		<title>electrondemo</title>
	</head>
	<body>
		<h2>hello,this is electron app.</h2>
	</body>
</html>

以上代码其实都很简单明了，我们需要做的就是安装依赖，其实依赖可以写入到package.json，我们这里直接通过npm install electron@7.1.8 --save-dev来安装即可。

启动程序当前目录运行：.\node_modules\.bin\electron .

其实就是命令electron .，如果全局安装了electron，那么就可以直接electron .就运行起来了。因为示例index.html页面很简单，所以这里打开之后，界面如下所示：

这是一个很简单的官方示例，也是学习electron的入门实例。

luffy5459

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Electron开启javascript开发窗口应用之旅

在大概一年之前，我当时还说nodejs或者javascript无法开发出窗口程序，后来有人打脸了，说electron可以，当时还不以为然，觉着不可思议，但是直到今天，electron已经可以很方便的开发出窗口程序了，真的是发展迅速啊，而且开发非常的方便，环境安装也很简单，就需要node开发环境即可。主要依赖于electron，这个可以利用浏览器内核结合页面开发出窗口程序界面来，...
复制链接

扫一扫