electron框架快速入门

简介

Electron 是一个能够使用JavaScript, HTML 和 CSS 来创建桌面应用的框架。打包后可以直接运行 macOS、Windows 和 Linux 上，或者发布不到应用商店。
前端开发人员可以使用自己比较熟悉的语言开发一款自己的桌面应用，进行安装使用
Electron 包含三个核心：
- Chromium 用于显示网页内容。
- Node.js 用于本地文件系统和操作系统
- 自定义 APIs 用于使用经常需要的 OS 本机函数
Electron 开发应用程序就像构建一个带有网页界面的 Node.js 应用程序

开发环境

node环境开发 (未安装者前往下载安装: nodejs链接)
Electron不同版本对node版本有不同的要求（可通过node -v 各个electron版本信息网址： electron版本链接）

创建项目

创建文件夹、初始化项目、安装依赖

    mkdir my-electron-app && cd my-electron-app

    npm init -y

    npm i --save-dev electron

复制代码

注意：

# 若下载不成功 可创建 .npmrc文件 => 指定下载源:
            registry=https://registry.npm.taobao.org
            electron_mirror="https://npm.taobao.org/mirrors/electron/"

复制代码

创建主进程

Electron 应用程序的入口(就我们而言，是 main.js 文件)
主进程主要控制应用程序的生命周期、显示图形用户界面及其元素、执行本机操作系统交互以及在网页中创建渲染进程（子进程）
Electron 应用程序只能有一个主进程

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

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

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

复制代码

创建子程序

这是应用程序初始化后您想要显示的页面。此网页代表渲染过程。您可以创建多个浏览器窗口，每个窗口都使用自己的独立渲染进程 index.html

<!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.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

复制代码

定义预加载脚本

您的预加载脚本就像是Node.js和您的网页之间的桥梁。它允许你将特定的 API 和行为暴露到你的网页上，而不是不安全地把整个 Node.js 的 API暴露。在本例中，我们将使用预加载脚本从process对象读取版本信息，并用该信息更新网页。

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

复制代码

修改您的 `package.json` 文件

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

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

复制代码

运行程序 npm start

应用程序生成安装包

借助 electron-builder 生成安装包

npm i -D electron-builder

# 在下面指定构建配置package.json：
"build": {
  "appId": "your.id",
  "mac": {
    "category": "your.app.category.type"
  }
}
"scripts": {
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}


npm run dist // 生成安装包
npm run pack // 生成测试包

复制代码

使用vue-cli开发完一个项目后，用electron-builder将项目打包为桌面应用程序

# 安装electron-builder
vue add electron-builder

# 预览
npm run electron:serve

# npm命令打包
npm run electron:build

复制代码

参考资料

electron

electron-builder

cnpm镜像源

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Ingate Firewall/SIParator web界面跨站脚本攻击(XSS)漏洞

Cumin 安全漏洞

Marinet CMS SQL注入漏洞

springboot动态切换多个数据源(主从)

Patrol管理软件信息泄露漏洞

PASV wu-ftp缓冲区溢出漏洞

electron框架快速入门

electron框架快速入门

简介

开发环境

创建项目

创建文件夹、初始化项目、安装依赖

注意：

创建主进程

创建子程序

定义预加载脚本

修改您的 `package.json` 文件

应用程序生成安装包

参考资料

Ingate Firewall/SIParator web界面 跨站脚本攻击(XSS)漏洞

Cumin 安全漏洞

Marinet CMS SQL注入漏洞

springboot动态切换多个数据源(主从)

Patrol管理软件信息泄露漏洞

PASV wu-ftp缓冲区溢出漏洞

electron框架 快速入门

electron框架 快速入门

简介

开发环境

创建项目

创建文件夹、初始化项目、安装依赖

注意：

创建主进程

创建子程序

定义预加载脚本

修改您的 package.json 文件

应用程序生成 安装包

参考资料

Ingate Firewall/SIParator web界面跨站脚本攻击(XSS)漏洞

electron框架快速入门

electron框架快速入门

修改您的 `package.json` 文件

应用程序生成安装包