1.初始化项目

1. 新建空白文件夹 electron_downFile
2. 在文件夹下安装 electron

npm install electron --save

3. 新建index.html和main.js

main.js 需要用到的东西先写上

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

const path = require('path')

4. 命令行创建package.json

npm init --yes

5.配置启动命令 npm start

打开 package.json,在scripts里配置

"scripts": {
    "start": " electron ."
  },

初始化完成，继续编写main里的代码

制作中遇到一个问题，console.log()打印出的中文出现乱码，解决方法：start里加一段

"start": "chcp 65001 && electron ."

2.main.js

1.定义变量

// 定义主窗口
var mainWindow=null
// 定义托盘事件
var appTray=null
// 定义是否退出程序
let willQuitApp = false;

2.创建托盘函数

// 创建托盘事件
function setTray() {
  // 托盘菜单
  let menuList=[
    {
      label:"退出",
      click:()=>{
        willQuitApp=true
        app.quit()
      }
    }
  ]
  appTray=new Tray( path.join(__dirname,'app.png') )

  let contextMenu=Menu.buildFromTemplate(menuList)

  appTray.setToolTip("下载文件服务端")
  appTray.setContextMenu(contextMenu)
  appTray.on('click',()=>{
    mainWindow.show()
  })
}

3.程序准备就绪，创建窗口，生成托盘

// 程序就绪
app.whenReady().then(() => {
  // 创建窗口
  mainWindow = new BrowserWindow({
      width: 600,
      height: 400,
      show:false,
      // transparent: true,
      // frame: false,
      // resizable: false,
      webPreferences: {
        nodeIntegration:true
      }
  })
  mainWindow.loadURL(path.join(__dirname,'index.html'))
  // 当关闭时执行
  mainWindow.on('close',(e)=>{
    if(!willQuitApp){
      e.preventDefault()
      mainWindow.hide()
    }
  })
  mainWindow.show()

  console.log("准备就绪");
  

  // 托盘
  setTray()


})