初学Electron遇到的问题「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」 1, el

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

1, electron一直安装失败

使用NPM， YARN安装electron

尝试了各种办法，安装一直都是失败。最后在知乎上看到了一个方法

# 安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 通过cnpm安装electron
cnpm install -g electron

# 检查版本
electron -v

2, 启动electron程序，无法打开F12

需要在主进程中添加

mainWindow.webContents.openDevTools()

·在main.js中

app.on('ready', () => {
  mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 800,
    webPreferences: { 
      nodeIntegration: true,// 启用node功能
      contextIsolation: false
    } 
  })
  require('./src/menu.js')
  mainWindow.webContents.openDevTools() // 打开F12
  mainWindow.loadFile('index.html') // 加载html网页
  mainWindow.on('close', () => {
    mainWindow = null;
  })
})

3，启动程序，报错 require is not defined

只能说electron更新太快，可能在之前的版本中，只需要设置

nodeIntegration: true,//  就可以启用node功能

但从官网上可以看出，需要设置contextIsolation: false

 webPreferences: { 
      nodeIntegration: true,// 启用node功能
      contextIsolation: false
  }

4, electron中文件fs读取问题

fs一直报错，系统找不到指定的文件。需要通过path.join获取完整文件路径

var fs = require('fs')
var path = require('path')
window.onload = function() {
  var btn = this.document.querySelector("#btn")
  var baby = this.document.querySelector("#baby")
  btn.onclick = function() {
    fs.readFile(
      path.join(__dirname, '/render/README.txt'),
      (err, data) => {
      baby.innerHTML = data
    })
  }
}

5, electron报错：@electron/remote的使用

Uncaught TypeError: Cannot read property ‘BrowserWindow‘ of undefined

在启动一个渲染进程中打开一个新的窗口，报错,代码如下

const BrowserWindow = require('electron').remote.BrowserWindow

window.onload = function() {
  btn.onclick = () => {
    newWin = new BrowserWindow({
      width: 500,
      height: 500
    })
    newWin.loadFile('a.html')
    newWin.on('close', () => {
      newWin = null
    })
  }
}

解决方案：

随着electron版本的更新， remote模块已经被移除，目前是：@electron/remote

经过不断的尝试，终于解决：我的electron版本：16

# 1, 安装 @electron/remote
cnpm install --save @electron/remote

# 2, 在主进程中初始化
require('@electron/remote/main').initialize() // //添加语句
require('@electron/remote/main').enable(mainWindow.webContents)  //添加语句

# 3.在主进程中开启remote，也就是webPreferences中添加enableRemoteModule:true
webPreferences: {
   enableRemoteModule:true
}
# 4,在渲染进程中
const { BrowserWindow } = require('@electron/remote')

main.js主进程的完整代码：

var electron = require('electron')
var app = electron.app // 
var BrowserWindow = electron.BrowserWindow // 窗口引入

var mainWindow = null;  // 什么要打开的主窗口

app.on('ready', () => {
  mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 800,
    webPreferences: { 
      nodeIntegration: true,// 启用node功能
      contextIsolation: false, // 防止require 未定义
      enableRemoteModule:true, // 开启remote
    } 
  })
  require('./src/menu.js')
  mainWindow.loadFile('render.html') // 加载html网页
  require('@electron/remote/main').initialize()  //添加语句
  require('@electron/remote/main').enable(mainWindow.webContents)  //添加语句
  mainWindow.webContents.openDevTools() //打开F12
  mainWindow.on('close', () => {
    mainWindow = null;
  })
})

渲染进程,打开一个新的窗口render.js

const { BrowserWindow } = require('@electron/remote')
const btn = this.document.querySelector('#btn')

window.onload = function() {
  btn.onclick = () => {
    var newWin = new BrowserWindow({
      width: 500,
      height: 500,
      webPreferences: { 
        nodeIntegration: true,// 启用node功能
        contextIsolation: false, // 防止require 未定义
      }
    })
    newWin.loadFile('yellow.html')
    newWin.on('close', () => {
      newWin = null
    })
  }
}

效果图：

6，项目地址

[持续更新中]

gitee.com/jamiedawn/e…

初学Electron遇到的问题