Electron 初体验

先看看Electron的简介知道他是干嘛的

https://www.electronjs.org/docs/tutorial/quick-start

简介

Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。 这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行，或者通过 Mac App Store 或微软商店进行分发。

通常，你可以使用操作系统 (OS) 特定的本地应用程序框架来创建一个桌面应用程序。 Electron 可以使用你了解的技术来编写应用程序。

嗯 ，简单来说就是可以用我们web的技术来开发桌面应用，还是跨平台

基本环境

在使用 Electron 之前，您需要安装 Node.js。 我们建议您安装最新可用的 LTS 或 Current 版本 。

请使用为你平台预构建的 Node.js 安装器来进行安装。 否则，您可能会遇到与不同开发工具不兼容的问题。

要检查 Node.js 是否正确安装，请在您的终端输入以下命令：

node -v
npm -v
复制

这两个命令应输出了 Node.js 和 npm 的版本信息。 如果这两个命令都执行成功，你就可以开始准备安装 Electron了。

上面这段就是需要node环境了，关于node环境安装可以参考我的另一篇博客
https://www.cnblogs.com/makalochen/p/13762163.html

最后安装好了，如图
image-20210201102535981

创建基本应用程序

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

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

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

安装 Electron

为您的项目创建一个文件夹并安装 Electron：

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

npm init -y初始化项目

image-20210201103234946

npm i --save-dev electron 安装

正常下载安装，你会发现巨慢

image-20210201103850662

关于安装 Electron慢的解决办法

参考：

https://blog.csdn.net/ghosind/article/details/105152114

https://github.com/cnpm/cnpmjs.org/issues/1530

设置环境变量

npm config set ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"

查看

npm config list

image-20210201104511286

再次安装

npm i --save-dev electron

你会发现快了好多

image-20210201104810054

创建主脚本文件

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

主脚本可以如下所示：

main.js文件

//为了管理应用程序的生命周期事件以及创建和控制浏览器窗口，您从 electron 包导入了 app 和 BrowserWindow 模块 。
const { app, BrowserWindow } = require('electron')

//在此之后，你定义了一个创建 新的浏览窗口的函数并将 nodeIntegration 设置为 true，将 index.html 文件加载到窗口中（第 12 行，稍后我们将讨论该文件）
function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    win.loadFile('index.html')
}

//你通过调用 createWindow方法，在 electron app 第一次被初始化时创建了一个新的窗口。
app.whenReady().then(createWindow)

//您添加了一个新的侦听器，当应用程序不再有任何打开窗口时试图退出。 由于操作系统的 窗口管理行为 ，此监听器在 macOS 上是禁止操作的
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

//您添加一个新的侦听器，只有当应用程序激活后没有可见窗口时，才能创建新的浏览器窗口。 例如，在首次启动应用程序后或重启运行中的应用程序
app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

image-20210201110427932

创建网页

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

index.html 页面如下所示：

<!DOCTYPE html>
<html lang="en">
    <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 文件：

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

注意：如果未设置 main 字段，Electron 将尝试加载包含在 package.json 文件目录中的 index.js 文件。

注意：author 和 description 字段对于打包来说是必要的，否则运行 npm run make 命令时会报错。

默认情况下， npm start 命令将用 Node.js 来运行主脚本。 要使用 Electron 来运行脚本，您需要将其更改为这样：

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

例：

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "description": "test electron .....",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "makalo",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.2.1"
  }
}

运行应用

npm start

运行后如图

image-20210201111704463

感觉很像typora 有没有

打包并分发应用

分发你新创建的应用最简单和快捷的方法是使用 Electron Forge。

  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"!!!

    image-20210201112318748

  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

    如果遇到这个

    image-20210201113028166

    去检查一下package.json里面的description和author这两个都不能为空

    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

image-20210201113727768

至此基本的helloworld 应用已经全部搞定

posted @ 2021-02-01 11:39  makalo  阅读(417)  评论(0)    收藏  举报