Electron框架使用入门

最新推荐文章于 2024-09-25 11:43:31 发布

学习&实践爱好者

最新推荐文章于 2024-09-25 11:43:31 发布

阅读量3.9k

点赞数 2

分类专栏： JavaScrip技术前端开发文章标签： electron javascript npm

本文链接：https://blog.csdn.net/cnds123/article/details/106057859

版权

JavaScrip技术同时被 2 个专栏收录

136 篇文章 25 订阅

订阅专栏

前端开发

72 篇文章 4 订阅

订阅专栏

Electron框架使用入门

Electron是一个跨平台的桌面应用开发框架，可以让我们用html css js的技术开发跨平台桌面上可以安装的软件。因为Electron使用JavaScript 调用丰富的原生 APIs 来创造桌面应用，所以你必须掌握JavaScript的知识，Electron 使用 web 页面作为它的 GUI，因此需要你还应掌握Html和SS教程。electron背后是node解释器和chromium浏览器内核，因此体积大。

Electron官网

Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.

Electron 文档

Introduction | Electron

开发环境的搭建

你可以使用原生的Node.js开发环境来开发Electron应用。为了打造一个Electron桌面程序的开发环境，你只需要安装好Node.js、npm、一个顺手的代码编辑器以及对你的操作系统命令行客户端有基本了解。

Windows 开发环境配置

Electron 支持Windows 7 及以上版本。

首先，安装最新版本的Node.js 。我们推荐您安装最新的长期支持版本或者当前发行版本。访问Node.js下载页面，选择Windows Installer。下载完成后，执行安装程序，根据引导完成安装即可。

关于如何安装参见

Node.js 新手入门Node.js 新手入门_cnds123的专栏-CSDN博客_node 入门

安装完成后，我们需要来确认Node.js是不是可以正常工作。点击开始按钮，输入PowerShell，找到Windows PowerShell。打开PowerShell或其他你喜欢的命令行客户端后，通过以下命令来确认 node 和 npm已经安装成功：

下面这行的命令会打印出Node.js的版本信息

node -v

下面这行的命令会打印出npm的版本信息

npm -v

参见下图：

上述命令均打印出一个版本号，就说明Node.js已经安装好了！

Electron 应用的建立

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。与 Node.js 模块相同，应用的入口是 package.json 文件。一个最基本的 Electron 应用一般来说会有如下的目录结构：

your-app/

├── package.json

├── main.js

└── index.html

为你的Electron应用创建一个文件夹（目录）。我这里是在D:盘建立一个目录D:\My_electron_app。

在此目录下建立三个文件package.json、main.js、 index.html。

1）package.json文件内容如下：

{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}

2）main.js文件内容如下：

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

function createWindow () {  
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

3）index.html文件内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

先使用CMD的cd命令进入项目所在的目录（我这里是D:\My_electron_app目录）

cd /d D:\My_electron_app，参见下图：

现在，安装electron。请保持联网，在您的app所在目录下运行下面的命令：

npm install --save-dev electron

提示“在运行npm install --save-dev electron之前，建议先用下面命令设置electron 镜像源地址：

npm config set electron_mirror https://cdn.npm.taobao.org/dist/electron/

再运行

npm install --save-dev electron

将快的多，参见下图：

【其中的警告信息是由package.json文件少了几项非关键造成的，可忽略之。】

完成后，此项目目录结构如下图：

至此，可以在当前工程的根目录执行 npm start 命令来启动刚刚编写好的Electron程序了：

请将上面的main.js文件改成下面这样：

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

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 并且为你的应用加载index.html
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

再执行 npm start 命令试试。

【electron.exe在安装路径（我这里是D:\My_electron_app）的node_modules\electron\dist的目录中

查看electron是否安装成功可通过命令 electron -v 查看，前提是要知道electron.exe在安装路径。】

如何将electron框架开发的文件夹打包成exe文件？

用命令行安装打包工具electron-packger

cnpm install -g electron-packager

【cnpm也可使用npm

npm与cnpm的区别

NPM（Node Package Manager，节点包管理器）是NodeJS的包管理器，用于节点插件的管理（包括安装，卸载和管理依赖等）。NPM是随同新版的NodeJS一起安装的包管理工具，所以我们需要安装NodeJS。

NMP安装插件是从NPM官网下载对应的插件包，该网站的服务器在国外，经常会出现下载缓慢或出现异常，这时便需要找到另外的方法提供稳定的下载，这个方法就是CNPM。阿里巴巴的淘宝团队把NMP官网的插件都同步到了在中国的服务器，提供给我们从这个服务器上稳定下载资源。

cnpm的用法和npm的用法一致，只是在执行命令的时候将npm改为cnpm。】

参见下图：

执行命令electron-packager --help或者访问官网查看所有可配置参数，参见下图：

打包工具electron-packger打包方式有两种。

打包方式一、再在命令行输入打包命令，命令格式：

electron-packager ProjectPath name --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules --electron-version 8.2.5

参数说明：

ProjectPath：项目所在路径：可用‘ (点)代表为当前工作目录

name：你将要生成的exe文件的名称

--platform=win32：确定了你要构建哪个平台的应用,可取的值有 darwin, linux, mas, win32

--arch=x64：决定了使用 x86 还是 x64 还是两个架构都用

--icon=自定义.ico：自定义设置应用图标

--out=./out：指定打包文件输出的文件夹位置,当前指定的为项目目录下的out文件夹

--asar：该参数可以不加，如果加上，打包之后应用的源码会以.asar格式存在

--app-version=1.0.0：生成应用的版本号

--overwrite：覆盖原有的build,让新生成的包覆盖原来的包

--ignore=node_modules：如果加上该参数，项目里node_modules模块不会被打包进去

--electron-version 8.2.5：指定当前要构建的electron的版本,需要和当前的版本一致,具体可以在package.json文件中查看,可以不加该参数，如果不一致，会自动下载。

打包方式二：在package.json文件中配置

"scripts": {"package":"eelectron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"

}

然后在命令行输入下面命令打包：

npm run package 或 cnpm run-script packager

留意打包输出位置的提示：Wrote new app to out（将新应用程序写在）

例、将前面的例子用打包方式一打包

electron-packager D:\My_electron_app MyPackTest --platform=win32 --arch=x64 --out=D:\My_electron_app\out