Electron常用事件和输出乱码问题

开发文档

开发文档传送门
 

app常用事件

app会发出的所有事件都能在传送门中的文档里查看：
app常用事件Api传送门
在事件发出时执行某个方法可以通过下方代码实现：

const { app } = require('electron')			//获取app
app.on('事件名', () => {
  //需要执行的方法
})

• ready：当Electron完成初始化时被触发。
  开始时打开一个窗口：

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadURL('https://www.baidu.com/')
}

app.on('ready',createWindow)

• activate：当应用被激活时发出。 各种操作都可以触发此事件, 例如首次启动应用程序、尝试在应用程序已运行时或单击应用程序的坞站或任务栏图标时重新激活它。
• window-all-closed：当所有的窗口都被关闭时触发。
  如果没有监听这个事件，当所有窗口都关闭时，一般默认退出程序；但如果监听了这个事件，你可以控制是否退出程序。
  如果用户按下了 Cmd + Q，或者开发者调用了 app.quit()，Electron 会首先关闭所有的窗口然后触发 will-quit 事件，在这种情况下 window-all-closed 事件不会被触发。
  如，当所有窗口关闭时，如果是在darwin系统上，则不退出程序。

app.on('window-all-closed', function () {	
	//process.platform是获取运行程序所在的平台系统
  if (process.platform !== 'darwin') app.quit()
})

• before-quit：当应用程序开始关闭窗口而窗口还未关闭时触发
• will-quit：当所有窗口都已经关闭并且应用程序将退出时触发
• quit：在应用程序退出时触发
   

webContents常用事件

Api传送门

• did-start-loading：当tab中的旋转指针（spinner）开始旋转时，就会触发该事件
• did-stop-loading：当tab中的旋转指针（spinner）结束旋转时，就会触发该事件
• did-finish-load：导航完成时触发，即选项卡的旋转器停止选择旋转，并指派onload事件后
• dom-ready：一个框架中的文本加载完成后触发该事件

生命周期测试

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

app.whenReady().then(() => {
  console.log("*****ready*****\n");
  createWindow();
})

app.on('activate', function () {
  console.log("*****activate*****\n")
  if (BrowserWindow.getAllWindows().length === 0) 
    createWindow();
})

app.on('window-all-closed', function () {
  console.log("开始关闭窗口\n*****window-all-closed*****\n")
  if (process.platform !== 'darwin') 
    app.quit();
})

app.on('before-quit',()=>{
  console.log("*****before-quit*****\n");
})

app.on('will-quit',()=>{
  console.log("*****will-quit*****\n");
})

app.on('quit',()=>{
  console.log("*****quit******\n");
})

function createWindow () {
  const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    nodeIntegration:true
  }
})
mainWindow.webContents.on('did-finish-load',()=>{
  console.log("*****did-finish-load*****\n");
})
mainWindow.webContents.on('did-start-loading',()=>{
  console.log("*****did-start-loading*****\n");
})
mainWindow.webContents.on('did-stop-loading',()=>{
  console.log("*****did-stop-loading*****\n打开窗口结束\n");
})
mainWindow.loadFile("index.html");

}

运行之后输出可能会长这样（中文乱码）：

中文乱码问题

这就是一个编码问题，我们需要用到chcp指令来解决这个问题。它是一个计算机指令，能够显示或设置活动代码页（即字符集编码）的编号，可以通过它来设置当前程序的字符集编码。
打开cmd.exe，执行指令：chcp，即可查看当前的字符集编码，一般会显示936

但是一般网页用的编码是UTF-8，活动页代码编号为65001，因此要把它改过来。进入项目所在目录，输入指令chcp 65001修改编码号，然后运行。这样就没有乱码了。

但是这样下一次运行的时候还是得输入chcp 65001指令，再次修改字符集编码，否则还是会乱码。所以我们可以在程序中修改，使他在运行程序之前将字符集编码修改为65001，在package.json中修改代码：

 "scripts": {
    "start": "chcp 65001 && electron ."
  },

再次运行后，中文乱码解决。

可能遇到的问题

chcp不是内部或外部命令
这是由于没有配置chcp的环境变量。
执行chcp命令实际上是，将环境变量的path变量中配置的每一个目录下依次查找一个叫做chcp的可执行文件，如果每个目录下都找不到，就会报错；如果找到了则执行这个文件。同样，node、npm等命令同理。
chcp可执行文件一般在C:\Windows\System32目录下，可以打开这个目录搜索一下chcp，确定它在这里面，然后将这个目录配置到环境变量的系统变量的path中。
记得配置完之后要重新打开运行项目的程序（VSCode或cmd.exe，用其他开发工具的也要重启一下开发工具）。

 
上一页