使用Electron进行win桌面端的开发

publish:December 17, 2020 -Thursday by 04007 本站原创文章,转载请注明文章出处：www.04007.cn

本文地址:http://www.04007.cn/article/952.html

想试试桌面端的开发，但又不想去接触C#、WPF之类的语言，了解了一下，Electron是一个可以开发桌面端软件又和web开发有点关系的方案，Electron是由Github开发，基于Chromium和Node.js，使用JavaScript、HTML和CSS等Web技术创建跨平台原生桌面应用的框架。兼容Mac、Window和Linux，它构建的应用可在这三个操作系统上面运行，借助Electron，我们可以使用纯JavaScript来调用丰富的原生APIs。本文地址:http://www.04007.cn/article/952.html,未经许可,不得转载.

Electron的开发环境搭建，我这里是Windows10，需要安装的环境包括Python、node、npm、cnpm、Electron。因为之前有python和VUE的开发环境，所以Python、node、npm、cnpm这些都有了，就差安装一个Electron。在windows的命令行下使用cnpm安装Electron即可。electron -v命令执行成功，则electron已正确安装。本文地址:http://www.04007.cn/article/952.html,未经许可,不得转载.

#直接使用cnpm安装Electron：
$ cnpm install -g electron
[electron@11.0.3] link C:\Users\l....\Roaming\npm\node_modules\electron\cli.js
$ electron -v
v11.0.3

本文地址:http://www.04007.cn/article/952.html,未经许可,不得转载.

接下来我们就开始创建一个electron应用。新建一个文件夹first,并在其中创建三个空文件package.json，main.js，index.html。这就是最基本的Electron应用的目录结构。使用vscode打开该文件夹，
然后在终端运行代码： npm init 初始化后，会生成一个package.json文件。我们手动对这个package.json文件进行一下修改，在scripts下添加一行start启动配置，使用electron来启动它。本文地址:http://www.04007.cn/article/952.html,未经许可,不得转载.

{
  "name": "electrontest",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

本文地址:http://www.04007.cn/article/952.html,未经许可,不得转载.

将下面的代码复制到main.js中：本文地址:http://www.04007.cn/article/952.html,未经许可,不得转载.

{
  const {app, BrowserWindow} = require('electron')
  let win
  function createWindow () {
    win = new BrowserWindow({width: 800, height: 60})
    win.loadFile('index.html')
    win.webContents.openDevTools()
    win.on('closed', () => {
      win = null
    })
  }
  app.on('ready', createWindow)
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  app.on('activate', () => {
    if (win === null) {
      createWindow()
    }
  })
}

本文地址:http://www.04007.cn/article/952.html,未经许可,不得转载.

将下面的内容复制到index.html中：本文地址:http://www.04007.cn/article/952.html,未经许可,不得转载.

<!DOCTYPE html>
<html>
	<head>
	  <meta charset="UTF-8">
	  <title>Hello World!</title>
	</head>
	<body>
	  <h1>Hello World!</h1>
	  <h2>app from electron</h2>
	</body>
</html>

本文地址:http://www.04007.cn/article/952.html,未经许可,不得转载.

最后在终端输入： electron . 执行命令即可启动一个windows桌面程序。本文地址:http://www.04007.cn/article/952.html,未经许可,不得转载.

本文地址:http://www.04007.cn/article/952.html 未经许可,不得转载. 手机访问本页请扫描右下方二维码.