Electron打包在線客服系統網站教程-實現客服系統PC客戶端

唯一客服系統PC客戶端，利用Electron打包實現

可以避免瀏覽器被誤關閉，支持縮小在右下角系統托盤中，支持通知欄和聲音訪客新消息提醒

 

一個Electron應用程序的package.json文件。

{
  "name": "kefu-pc-client",
  "version": "1.0.0",
  "description": "kefu-pc-client",
  "main": "main.js",
  "build": {
    "appId": "com.baidu.app",
    "productName": "客服PC客戶端",
    "mac": {
      "target": [
        "dmg",
        "zip"
      ],
      "icon": "favicon.ico"
    },
    "win": {
      "target": [
        "nsis",
        "zip"
      ],
      "icon": "favicon.ico"
    }
  },
  "scripts": {
    "start": "electron .",
    "packager": "electron-packager . --platform=win32 --arch=ia32 --out=./out  --electron-version=11.3.0 --overwrite --icon=./favicon.ico"
  },
  "keywords": [],
  "author": "kefu",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.5.0",
    "electron-builder": "^22.9.1",
    "electron-packager": "^15.2.0",
    "electron-winstaller": "^5.0.0"
  },
  "dependencies": {
    "electron-localshortcut": "^3.2.1",
    "electron-store": "^7.0.2"
  }
}

• electron：Electron框架本身的依賴項。

• electron-builder：用於構建和打包Electron應用程序的工具。

• electron-packager：用於將Electron應用程序打包爲可執行文件的工具。

• electron-winstaller：用於將Electron應用程序打包爲Windows安裝程序的工具。

• electron-localshortcut：本地快捷鍵

• electron-store：本地存儲

下面是main.js 加載頁面的代碼

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

function createWindow () {
  
  const win = new BrowserWindow({
    width: 1366,
    height: 768,
    //fullscreen: true, // 添加此行以使窗口默認全屏
    frame: true, // 將此行更改爲true以啓用框架
    icon: path.join(__dirname, 'favicon.ico'), // 添加此行以設置圖標
    maximizable:true,
    minimizable: true, // 添加此行以啓用最小化
    closable: true, // 將此行更改爲false以禁用關閉
    // show: false // 添加此行以最初隱藏窗口
  })

  win.loadURL('https://gofly.v1kf.com/main')
  //隱藏頂部菜單
  win.setMenu(null);

  //托盤圖標
  let tray = new Tray(path.join(__dirname, 'favicon.ico'))
  //點擊托盤圖標顯示窗口
  tray.on('click', () => {
    win.show()
  })
  //設置托盤提示
  tray.setToolTip('客服系統')
  const { Menu } = require('electron')
  //設置托盤菜單
  const contextMenu = Menu.buildFromTemplate([
    { label: '退出', click: () => { app.exit() } }
  ])
  tray.setContextMenu(contextMenu)
  
  //窗口關閉事件
  win.on('close', (event) => {
    event.preventDefault()
    win.hide()
    //顯示托盤提示
    tray.displayBalloon({
      title:"客服系統",
      content:"已隱藏在托盤處",
    })
  })
      
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

源碼gitee地址：https://gitee.com/taoshihan/kefu-pc-client.git

源碼安裝

npm install

源碼運行

npm start

源碼打包

npm packager 打包文件輸出在./out/文件夾下

 

 

 

 

 

原文網址：Electron打包在線客服系統網址-實現客服系統PC客戶端-唯一在線客服系統-GOFLY-獨立部署的在線客服系統源碼-網站網頁在線客服系統 (v1kf.com)