欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-28 09:01:08
...

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

直接去获取一个官方仓库的示例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/"
    }
  }

截图如下:
electron+electron-builder实现能运行+打包的c/s桌面应用程序
然后在 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