使用electron工具进行桌面打包

一、安装流程

1.全局安装下载electron脚手架，到install.js时会停顿住，耐心等待下完

npm install electron -g

2. 在新建文件夹下 npm init 初始化一个项目

3. 安装electron，并保存为开发依赖项；

npm install electron -D

4. 安装打包插件

npm i electron-builder --save-dev；

5. 安装用于更新的插件

npm i electron-updater --save；

6.新建src目录，复制粘贴src文件夹，包含

* static文件夹
* favicon.ico   图标大小在50kb左右，256*256 尺寸
* index.html
* main.js

7.执行打包命令，视package.json文件命令为准，一般可能为

npm run dist

二、常见问题

1.执行npm run dist 命令时，经常在downloading卡住，原因在于从github下载包速度比较慢，downloading一共需要下载四个包，可以自行复制路径迅雷下载，存放路径如下

• C:\Users\84931\AppData\Local\electron\Cache
• C:\Users\84931\AppData\Local\electron-builder\Cache\nsis
• C:\Users\84931\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1
• C:\Users\84931\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.5.0

2.常见main.js配置

// 引入electron并创建一个Browserwindow
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
const autoUpdater = require("electron-updater").autoUpdater; //引入 autoUpdater 更新模块
// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow;

function createWindow () {
//创建浏览器窗口,宽高自定义具体大小你开心就好
    mainWindow = new BrowserWindow({width: 1200, height: 700,frame:true,movable:true,icon:'./src/static/img/favicon.ico',
        webPreferences:{
            nodeIntegration:true
        },
        titleBarStyle:'hidden',
        resizable:true,
        autoHideMenuBar:true
    })
    // mainWindow.maximize();
    mainWindow.show();

    // 加载应用-----  electron-quick-start中默认的加载入口
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, './index.html'),
        protocol: 'file:',
        slashes: true
    }))

    // 打开开发者工具，默认不打开
    // mainWindow.webContents.openDevTools()

    // 关闭window时触发下列事件.
    mainWindow.on('closed', function () {
        mainWindow = null
    });
    //更新
    autoUpdater.setFeedURL('http://localhost:3001/'); //设置检测更新地址
    autoUpdater.checkForUpdates(); //检测是否有新版本,如果有新版本则自动下载
    autoUpdater.on('update-downloaded', function () { //下载完成后执行 quitAndInstall
        autoUpdater.quitAndInstall(); //关闭软件并安装新版本
    });
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on('ready', createWindow);

// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
    // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
    if (process.platform !== 'darwin') {
        app.quit()
    }
});

app.on('activate', function () {
    // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
    if (mainWindow === null) {
        createWindow()
    }
})

3.常见package.json配置

{
  "name": "projectName",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dist": "electron-builder "
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^7.0.0",
    "electron-builder": "^22.1.0"
  },
  "build": {
    "productName": "项目名称",
    "publish": [
      {
        "provider": "generic",
        "url": "http://localhost:3001/"
      }
    ],
    "directories": {
      "output": "release",
      "app": "./"
    },
    "win": {
      "icon": "./src/favicon.ico",
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "perMachine": true,
      "runAfterFinish": true,
      "installerIcon": "./src/static/favicon.ico",
      "installerHeaderIcon": "./src/static/favicon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "license":"./permission.txt"
    }
  },
  "dependencies": {
    "electron-updater": "^4.2.0"
  }
}