初探electron桌面应用

最新推荐文章于 2024-07-20 15:23:51 发布

yc99

最新推荐文章于 2024-07-20 15:23:51 发布

阅读量344

点赞数

分类专栏： electron 文章标签： javascript node

本文链接：https://blog.csdn.net/gjsiaifa/article/details/111476880

版权

electron 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、检测node环境

node -v
npm -v

二、创建基本应用程序

从开发的角度来看，Electron应用基本上是一种Node.js应用。这意味着您的 Electron 应用程序的起点将是一个 package.json 文件，就像在其他的Node.js 应用程序中一样。最小的 Electron 应用程序具有以下结构：

my-electron-app/
├── package.json
├── main.js
└── index.html

让我们根据上面的结构创建一个基本的应用程序。

三、Install Electron

创建一个文件夹并安装Electron

mkdir my-electron-app && cd my-electron-app // 创建文件夹
npm init -y //初始化node项目
npm i --save-dev electron // install Electron

四、创建主脚本文件

主脚本指定了将运行主进程的 Electron 应用程序的入口点(main.js);
在主进程中运行的脚本控制应用程序的生命周期，并显示图形用户界面及其元素。执行本机操作系统交互，并在网页中创建渲染程序。 Electron 应用程序只能有一个主流程。

主脚本可以如下所示：

const { app, BrowserWindow } = require('electron');//引入模块

function createWindow () { // 初始化创建window函数
  const win = new BrowserWindow({
    // width: 800,
    // height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    fullscreen: true // 默认全屏
  })

  win.loadFile('index.html') 
}

app.whenReady().then(createWindow)

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

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

五、创建网页

这是应用程序初始化后您想要显示的页面。此网页代表渲染过程。您可以创建多个浏览器窗口，每个窗口都使用自己的独立渲染器。每个窗口都可以通过节点集成首选项完全访问Node.js API。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        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>.
    </p>
</body>
</html>

六、修改`package.json`文件

您的 Electron 应用程序使用 package.json 文件作为主要的切入点 (像任何其它的 Node.js 应用程序)。您的应用程序的主脚本是 main.js, 所以相应修改 package.json 文件：

注：这是运行过项目后的package.json，比较杂乱；初始的package.json项目只有官网示例或node初始化后自动生成的几项内容

{
  "name": "learn-electron-app",
  "version": "1.0.0",
  "description": "my electron app",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "keywords": [],
  "author": "PeiRuiChen",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.54",
    "@electron-forge/maker-deb": "^6.0.0-beta.54",
    "@electron-forge/maker-rpm": "^6.0.0-beta.54",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.54",
    "@electron-forge/maker-zip": "^6.0.0-beta.54",
    "electron": "^11.1.0"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  },
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "learn_electron_app"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
}

七、运行项目

npm start

八、打包并分发应用程序

1. 导入 Electron Forge 到您的应用文件夹：

npx @electron-forge/cli import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

2. 创建一个分发版本：

npm run make

> my-gsod-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

3. Electron-forge 创建 out 文件夹，您的软件包将在那里找到：

// MacOS 示例
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

完事。

yc99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
初探electron桌面应用

一、检测node环境node -vnpm -v二、创建基本应用程序从开发的角度来看，Electron应用基本上是一种Node.js应用。这意味着您的 Electron 应用程序的起点将是一个 package.json 文件，就像在其他的Node.js 应用程序中一样。最小的 Electron 应用程序具有以下结构：my-electron-app/├── package.json├── main.js└── index.html让我们根据上面的结构创建一个基本的应用程序。三、Ins
复制链接

扫一扫