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

介绍

Electron提供了丰富的本地（操作系统）的API，使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

创建Demo到Demo跑起来踩过的坑

第一步，安装node（已经安装的话就忽略）

//判断是否安装成功node可以打开命令行输入
node -v

第二步，安装Electron

cnpm i -D electron//在当前目录用安装最新的electron
//npm、yarn、cnpm都可以完成上一步（我用npm安装没有成功，用cnpm安装成功了）
//打开Vscode命令行工具输入（由于我之前没有安装cnpm所以在进行这一步的时候我全局安装了cnpm）
//检查是否安装成功，命令行输入
npx electron -v

可能会出现的问题：安装依赖失败（尝试切换淘宝映像、用cnpm或yarn安装、科学上网工具----如果都不行我也不知道该咋整了！！）

第三步，创建一个文件夹然后再此文件夹下键入（尽量英文命名）

//初始化一个`package.json`文件
npm init

// 初始化后的  package.json 文件是这样的
 {
  "name": "demo",
  "version": "1.0.0",
  "description": "Demo",
  "main": "index.js",
  "scripts": {
    "start": "chcp 65001 && electron ."//解决方案
  },
  "author": "",
  "license": "ISC"
}

运行项目的时候可能会出现的问题：控制台报中文乱码（看上方解决方案）

第三步，创建主进程文件`index.js`和渲染进程文件`index.html`

//inde.html文件
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>electron Demo</title>
  </head>
  <body>
    Electron Demo
    <script>
    </script>
  </body>
</html>

//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()
}

// 部分 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()
  }
})
console.log("启动了Electron Demo");
app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
// code. 也可以拆分成几个文件，然后用 require 导入。

第四步，让Demo跑起来

npm run start

打包Demo

//安装electron-electron-builder
npm i electron-builder --D

配置package.json文件

{
  "name": "demo",
  "version": "1.0.0",
  "description": "Demo",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "this.texttodu.com",
    "productName": "Electron-Demo",
    "copyright": "copyright @ 2022 Onion",
    "compression": "store",
    "directories": {
      "buildResources": "build",
      "output": "dist"
    },
    "files": [
      "**/*",
      "!icons"
    ],
    "win": {
      "requestedExecutionLevel": "requireAdministrator",//管理员权限
      "icon": "",
      "target": [
      ]
    },
    "asar": false,
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "Electron-Demo"
    }
  },
  "author": "onion",
  "license": "ISC",
  "devDependencies": {
    "electron": "^18.0.4",
    "electron-builder": "^23.0.3"
  }
}

设置开机自启动（`requestedExecutionLevel`不设置管理员权限的时候正常自启动）

//配置开机自启动在index.js中
const path = require('path')
const exeName = path.basename(process.execPath)
app.setLoginItemSettings({
    openAtLogin: true,
    openAsHidden: false,
    path: process.execPath,
    args: [
        '--processStart', `"${exeName}"`,
    ]
})

打包

npm run build

在dist文件中点击.exe文件安装并运行

问题一：重启后开机并不能自启动由于我们设置了管理员权限，并且运行在win10下，于是我百度了一下，说是可以这样解决
在64位系统下我们64位的程序注册表自启动是在这里：HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run
32位程序访问此注册表路径时，默认会被系统自动映射到HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersionl\Run这里
因为32位需要管理员权限的程序通过注册表设置开机启动可以正常启动，所以我尝试将64位程序也将启动参数写入到HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersionl\Run节点里面去，重启电脑时，发现可以正常启动了

初学Electron----踩坑篇

介绍