Electron笔记

Electron笔记

官网：https://www.electronjs.org

What is Electron?

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required

跨平台桌面应用开发：基于Electron与NW.js

Node.js全栈彻底贯彻 大前端从web到全平台 真正意义的一次编写到处运行

传统桌面应用开发要求懂高级编程语言以及专门的框架。有了Electron和NW.js，你可以将现有Web开发技术运用到仅仅使用HTML、CSS和JavaScript就能开发的桌面应用中。而且，开发出来的应用还能在Windows、Mac和Linux中工作，显著减少了开发和培训的时间。

快速上手

1、环境准备

electron运行需要nodejs环境，node自带npm，不用单独安装npm;

nodejs官网安装下载即可，官网：https://nodejs.org/zh-cn/，像qq一样安装即可；

安装完之后打开win+R打开cmd命令行，环境变量是否配置；

2、编写文件

以下为官网教程推荐创建，官网：https://www.electronjs.org/docs/latest/tutorial/quick-start

新建一个文件夹，双击打开，在地址栏输入cmd打开命令提示符；输入一下代码，一路回车。

npm init

需要创建的文件如下；

package.json文件如下，将我这个粘贴到你那个里面即可：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Electron01",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^17.2.0"
  }
}

#main.js
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()
  }
})

#preload.js
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])
  }
})

3、运行代码

在刚才的命令行中输入：npm start

即可看到效果；

陆续更新中·······

打包

需要用到工具electron-packager

命令行执行npm install electron-packager 安装此工具。

https://github.com/electron/electron-packager/blob/main/usage.txt