electron+electron-builder实现能运行+打包的c/s桌面应用程序

首先为了方便起见可以直接去官方获取一个快速运行的示例

直接去获取一个官方仓库的示例git clone https://github.com/electron/electron-quick-start

然后运行npm install,npm install可能会因为数据源是国外的导致下载失败或过慢的情况，可以通过
npm i -g cross-env
然后
cross-env ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" npm i electron

注意： npm i -g cross-env 之前需要删除原先下载失败的node_moudules后再执行。

执行完上述语句再执行 npm install 一遍。

然后就可以通过 npm start 启动这个示例项目了。

接下来是加入electron-builder实现打包

npm install electron-builder 来引入
然后在 package.json 文件中加入

  "build": {
    "appId": "app",
    "productName":"electron",
    "win": {
      "icon": "images/favicon.ico"
    },
    "electronDownload": {
      "mirror": "https://npm.taobao.org/mirrors/electron-builder-binaries/"
    }
  }

截图如下：

然后在 script 中加入 "dist":"electron-builder --win --x64" 这个代码意为打包为window平台 X64的exe包，如需要打成其他平台的程序，可以查阅官方文档。

注意：build中 win->icon指的是打包后.exe的图标,图标需要为256*256，并且大小在20KB以下最好，否则可能会出现界面左上角图标无法显示的问题

然后运行
npm config set ELECTRON_BUILDER_BINARIES_MIRROR=https://npm.taobao.org/mirrors/electron-builder-binaries/
依旧是国外源下载慢的问题。

最后使用 npm dist 打包即可,打包后的.exe在项目根目录中dist文件夹下。

到这里打包运行一个桌面程序就完成了，以下为记录如何实现右下角任务栏图标以及界面上X为最小化、以及右键任务栏图标选择退出等功能。

==============================================================================

// Modules to control application life and create native browser window
const {app, BrowserWindow,Tray,Menu} = require('electron')
const electron = require('electron')
const path = require('path')

let tray = null
function createWindow () {
  const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 400,
    height: 400,
    x:width-395,
    y:height-395,
    minimizable:false,
    maximizable:false,
    frame:false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.webContents.openDevTools();
  mainWindow.setMenu(null)
  // and load the index.html of the app.
  mainWindow.loadURL("http://www.baidu.com")
  // mainWindow.loadFile('dist/index.html')
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()


  mainWindow.on('close', (e) => {
    e.preventDefault();
    mainWindow.hide();
  });
  mainWindow.on('show', () => {
    // tray.setHighlightMode('always')
  })
  mainWindow.on('hide', () => {
    // tray.setHighlightMode('never')
  })
  tray = new Tray(path.join(__dirname, './images/favicon.ico'));
  const contextMenu = Menu.buildFromTemplate([
    {label: '退出', click: () => {mainWindow.destroy()}},
  ])
  tray.setToolTip('My托盘测试')
  tray.setContextMenu(contextMenu)
  tray.on('double-click', ()=>{
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show()
    // mainWindow.isVisible() ?mainWindow.setSkipTaskbar(false):mainWindow.setSkipTaskbar(true);
  })
  tray.on('right-click', ()=>{
    // mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show()
    mainWindow.isVisible() ?mainWindow.setSkipTaskbar(false):mainWindow.setSkipTaskbar(true);
  })
}



// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

以上为具体示例，如果有问题可加qq讨论：1016400304