Electron入门

银江路迪巴拉
253 阅读3分钟

Electron入门

概览

简介

​ Electron主要有Node.js+Chromium构成，用来开发跨平台的桌面级应用。由于前面两者都是跨平台工具，所以electron自然也支持跨平台。electron优缺点明显：它既能采用前端技术快速地构造跨平台应用，但它也存在应用体积大的缺点（内部包装Node和Chromium），同时受限于Node于原生API的支持度，部分功能存在受限。

它的开发主要涉及到两个进程的协作——Main（主）进程和Renderer（渲染）进程。

  1. Main进程主要通过Node.js、Chromium和Native APIs来实现一些系统以及底层的操作，比如创建系统级别的菜单，操作剪贴板，创建APP的窗口等。
  2. Renderer进程主要通过Chromium来实现APP的图形界面——就是平时我们熟悉的前端开发的部分，不过得到了electron给予的加强，一些Node的模块（比如fs）和一些在Main进程里能用的东西（比如Clipboard）也能在Render进程里使用。
  3. Main进程和Renderer进程通过ipcMain和ipcRenderer来进行通信。通过事件监听和事件派发来实现两个进程通信，从而实现Main或者Renderer进程里不能实现的某些功能

开始

npm安装

npm install --save-dev electron

详见官方文档

下载安装过程很容易失败，一直失败可以换源下载。

文件基本结构

  1. 入口文件：main.js

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

    引入BrowserWindow展示窗口实例，app代表整个应用的实例。

  2. 渲染脚本：render.js

    主要参与窗口网页渲染控制，这边可以使用浏览器API。

  3. 预加载脚本：preload.js

    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }

​ 通过webPreferences引入。预加载脚本有权访问window，document和Node环境。

  1. index.html

    窗口的网页呈现，基础DOM结构写在这里。

使用Vue开发electron

这边主要将如何结合Vue开发electron，方式有多种包括electron-Vue框架和使用electron-builder插件。这边采用使用electron-builder的方式。首先你需要一个Vue-cli的项目。再安装插件：

vue add electron-builder
  • 安装完成后，package.json会新增几个scripts
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"

前两个分别对于electron打包和开发模式。

  • 新增background.js，主进程的相关操作都写在这个文件，跟上面的main.js类似。

  • 其他的项目结构跟Vue项目一样，对于electron的渲染进程，这样就能在Vue里面开发electron了。

  • 同时，为了在Vue文件里使用electron模块，你需要在vue.config.js配置：

     pluginOptions: {

  electronBuilder: {

   nodeIntegration: true

  	}
 }

  • 打包时则需要添加配置：

     pluginOptions: {
    electronBuilder: {
      builderOptions:{
        appId: 'appId', // 应用ID
        productName: "XXX", // 应用名
        copyright: "Copyright © 2022 XXX", //版权
        directories: {
          buildResources: "./dist", //输出路径
        },
        electronDownload: {
          mirror: "https://npm.taobao.org/mirrors/electron/",
        },
        // 打包到window平台的配置，这边只展示window平台
        win: {
          icon: "./public/favicon.ico", // 你icon路径
          target: [
            {
              target: "nsis",
              arch: ["x64", "ia32"],
            },
          ],
        },
        nsis: {
          oneClick: false, // 是否一键安装
          allowToChangeInstallationDirectory: true,
          installerIcon: "./public/favicon.ico",// 安装图标
          uninstallerIcon: "./public/favicon.ico",//卸载图标
          installerHeaderIcon: "./public/favicon.ico", // 安装时头部图标
          createDesktopShortcut: true, // 创建桌面图标
          createStartMenuShortcut: true,// 创建开始菜单图标
          shortcutName: "diaryGo",
        },
        publish: ['github'] //是否自动更新到GitHub
      },
    }
  }

最后

这边只介绍了electron大体的开发流程，一些electron上的API并无详细介绍，还请查阅官方文档。附上我这边认为还不错的中文开发手册 腾讯云文档，对中文用户友好点 。其中在安装过程更多的是electron包下载的网络问题（新手安装几乎必经历），参照网上教程，使用国内源应该可以解决。

avatar
文章
阅读
粉丝