1.electron入门及环境搭建

370 阅读4分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第4天,点击查看活动详情

electron简介

electron是使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序, 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用,入门门槛非常低,周边的生态繁荣而且历史悠久。

优点

  • 相较于基于C++库开发桌面软件来说,使用electron开发更容易上手且开发效率更高。并且electron中内置了Chromium浏览器,该浏览器对标准支持都非常好,甚至支持一些尚未通过的标准,所以在开发时很少甚至不会遇到兼容性的问题。开发者的自由度得到了最大化的保护。
  • 另外,web前端受限访问的文件系统、系统托盘、系统通知、注册表等,在electron技术体系下均有API供开发者使用。

缺点

  • 打包后的应用体积巨大:因为内置了Chromium浏览器,所以打的包会大很多,但是现在网络环境越来越好,这个问题给用户带来的影响会被慢慢削弱。
  • 版本发布过快:为了跟上Chromium的版本发布节奏,所以非常频繁的发布新版本。
  • 安全性问题。
  • 资源消耗过大。

搭建开发环境

大部分时候都是使用Node.js来创建electron项目的,所以先安装Node.js

下载地址: http://nodejs.cn/download/ 一路next就ok

node -v查看版本号进行验证是否安装成功

安装electron:

    // 在当前目录安装最新 
    npm i -D electron 
    // 全局安装最新 
    cnpm install electron -g 
    // 指定版本号安装 
    npm i -D electron@11.0.4

接下来,我们创建第一个electron应用,先创建一个目录,在此目录下打开命令行,执行如下命令创建一个Node.js项目: npm init

在scripts中将test修改为"start": "nodemon --watch index.js --exec electron ."

这样每次修改index.js 主进程文件都会重新启动项目了,index.js可以自行修改成 main.js等等

并且可以指定electron版本号进行定向开发

// package.json
{
  "name": "electron_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --watch index.js --exec electron ."
  },
  "devDependencies": {
    "electron": "^13.3.0"
  },
  "author": "",
  "license": "ISC"
}

electron是分为主进程渲染进程,index.js属于主进程。 官方代码如下:

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

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 并且为你的应用加载index.html
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上,当单击dock图标并且没有其他窗口打开时,
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件,然后用 require 导入。

可以根据官方给的例子按照文档进行选择性配置,最终index.js代码如下:

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var win = null;
app.on('ready', () => {
  win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('index.html');
  win.on('closed', () => {
    win = null;
  })
})
app.on('window-all-closed', () => {
  app.quit();
})

所以还需要构建一个渲染进程,在目录下新建index.html并输入以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  Hello World
</body>
</html>

最后运行:

cnpm install
npm run start

效果如下:

image.png

到此为止,第一个桌面窗口Hello World就诞生啦!

感谢

谢谢你读完本篇文章,希望对你能有所帮助,如有问题欢迎各位指正。

我是Nicnic,如果觉得写得可以的话,请点个赞吧❤。

写作不易,「点赞」+「在看」+「转发」 谢谢支持❤

往期好文

《Javascript高频手写题1.0》

《Vue中生成图片验证码的小组件》

《前端JS高频面试题---1.发布-订阅模式》

《前端JS高频面试题---2.单例模式》

《前端JS高频面试题---3.代理模式》

《前端JS高频面试题---4.策略模式》

《前端CSS高频面试题---1.CSS选择器、优先级、以及继承属性》

《前端CSS高频面试题---2.em/px/rem/vh/vw的区别》

《前端CSS高频面试题---3.如何实现两栏布局,右侧自适应?三栏布局中间自适应呢?》