如何构建一个最简单的electron应用

最新推荐文章于 2024-07-25 15:02:08 发布

suwu150

最新推荐文章于 2024-07-25 15:02:08 发布

阅读量4.2k

点赞数 1

分类专栏： React JavaScript 文章标签：应用桌面应用 electron Electron

本文链接：https://blog.csdn.net/suwu150/article/details/65627285

版权

JavaScript 同时被 2 个专栏收录

56 篇文章 4 订阅

订阅专栏

React

14 篇文章 6 订阅

订阅专栏

electron的学习----如何构建一个最简单的electron应用

下面,我们就来进行构建一个hello World项目

1 准备工作

一个最基本的 Electron application 需要这些文件:

package.json - 处理应用的依赖和版本描述等说明性信息.
main.js - 入口页面和渲染html页面. 这个文件是应用的 main process.–主进程
index.html - 要渲染的页面,这个页面是应用的 renderer process–渲染进程.

2 构建和运行

现在我们进行项目的创建,创建我们所需要的项目,命名为helloworld_electron,然后在项目中创建如下图所示的目录结构
[结构目录],在结构中electron.md是我用来进行说明的,在这个项目中没有作用

在文件中的内容分别如下所示:

index.html

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="UTF-8">
       <title>Hello World!</title>
   </head>
   <body>
   <h1>Hello World!</h1>
   We are using Node.js <script>document.write(process.versions.node)</script>,
   Chromium <script>document.write(process.versions.chrome)</script>,
   and Electron <script>document.write(process.versions.electron)</script>.
   </body>
   </html>

main.js

   const electron = require('electron')
   const app = electron.app
   const BrowserWindow = electron.BrowserWindow   
   const path = require('path')
   const url = require('url')
   let mainWindow
   function createWindow () {
       mainWindow = new BrowserWindow({width: 800, height: 600})   
       mainWindow.loadURL(url.format({
           pathname: path.join(__dirname, './src/index.html'),
           protocol: 'file:',
           slashes: true
       }))   
       // 打开调试工具DevTools.
       mainWindow.webContents.openDevTools()   
       mainWindow.on('closed', function () {
           mainWindow = null
       })
   }
   app.on('ready', createWindow)
   app.on('window-all-closed', function () {
       if (process.platform !== 'darwin') {
           app.quit()
       }
   })   
   app.on('activate', function () {
       if (mainWindow === null) {
           createWindow()
       }
   })

package.json

{
  "name": "helloworld_electron",
  "version": "1.0.0",
  "description": "'A test for electron, a desktop tool'",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "jkwu",
  "license": "ISC",
  "keywords": [
    "Electron",
    "start",
    "demo"
  ],
  "devDependencies": {
    "electron": "~1.6.2"
  }
}

在实现上面过程之后,我们就能够进行调试,首先我们需要运行命令

npm install

进行安装依赖,也就是安装下面内容:

   "devDependencies": {
     "electron": "~1.6.2"
   }

安装之后,我们就能够通过命令

npm start

来进行启动,如下图所示:是我的启动结果

3 打包处理

通过上面的流程,我们能够实现一个最基本的打包,但是,这还不能够跨平台像一个应用软件一样,那么,我们如何
进行打包成这样??
具体步骤如下所示:
安装打包依赖:

  npm install electron-packager --save-dev

将会安装"electron-packager": "^8.6.0"到依赖库中,这是package.json将会自动变化为下面代码
还有为了方便,我在scripts中直接添加了packager项,主要是运行打包命令

  {
       "name": "helloworld_electron",
       "version": "1.0.0",
       "description": "'A test for electron, a desktop tool'",
       "main": "main.js",
       "scripts": {
         "start": "electron .",
         "packager-linux": "electron-packager ./ helloworld --overwrite --platform=linux --arch=x64 --ignore=node_modules",
         "packager-win": "electron-packager ./ helloworld --overwrite --platform=win32 --ignore=node_modules --ignore=app --ignore=OutPut",
         "packager-mac": "electron-packager ./ helloworld --overwrite --platform=darwin --arch=x64 --ignore=node_modules"
       },
       "author": "jkwu",
       "license": "ISC",
       "keywords": [
         "Electron",
         "start",
         "demo"
       ],
       "devDependencies": {
         "electron": "~1.6.2",
         "electron-packager": "^8.6.0"
       }
     }

最后,我们执行下面命令 ,打包一个linux文件包