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

ゞ浴缸里的玫瑰 2023-07-11 08:56 2阅读 0赞

在大概一年之前，我当时还说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来安装即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305000014185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020030500040619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70