Empaqueter des fichiers frontaux dans des applications de bureau électroniques

avant-propos

Depuis que je me suis récemment arrangé pour travailler sur une application de bureau, je n'ai pas travaillé sur le bureau depuis longtemps et je suis un peu rouillé, j'ai donc décidé de revoir mes connaissances et d'organiser le processus. Entrez le texte !

texte

1. Initialisez le projet de nœud et générez le fichier package.json

使用命令 npm init
复制代码

//package.json文件
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}
复制代码

2. Pour installer electron des dépendances dans le projet, utilisez l'une des commandes suivantes :

npm install --save-dev electron
cnpm install --save-dev electron
yarn add electron --dev
复制代码

3. Le contenu de configuration de package.json est le suivant :

{
  "name": "electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^17.1.2"
  }
}
复制代码

4. Créez un projet frontal ou introduisez un projet frontal. Le répertoire du projet a la structure suivante :

--main.js
--preload.js
--index.html
--package.json
复制代码

5. Consultez le site Web officiel, créez le fichier d'entrée main.js et configurez les éléments suivants :

// main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow () {   
  // 隐藏菜单栏
  Menu.setApplicationMenu(null)
  // 创建浏览器窗口
  const win = new BrowserWindow({
    //width: 800,   //窗口宽度,单位像素. 默认是 800
    //height: 600,  //窗口高度,单位像素. 默认是 600
    icon: './logo.ico', // 设置窗口左上角的图标
    show: false, //窗口创建的时候是否显示. 默认为 true
    webPreferences: {
      nodeIntegration: true, // 是否完整支持node。默认为 true
      preload: path.join(__dirname, 'preload.js')  //界面的其它脚本运行之
      前预先加载一个指定脚本。
    }
  })
  // 下面这两行代码配合上面 new BrowserWindow 里面的 show: false，可以实现打开时窗口最大化
  win.maximize()
  win.show()
  // 并且为你的应用加载index.html
  win.loadFile('index.html')
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
// 当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
复制代码

6. Créez preload.js, toutes les API Node.js peuvent être utilisées dans le processus de préchargement pour configurer les éléments suivants :

// preload.js
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }
  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})
复制代码

7. Créez le fichier index.html, qui est cohérent avec le win.loadFile('index.html') de la vie dans main.js

8. Exécutez la commande npm start pour ouvrir rapidement votre application Web et vérifier si le contenu de la configuration de l'application est correct.

9. Pour installer les dépendances d'empaquetage, les deux méthodes suivantes sont recommandées : electron-packager et electron-builder

Ron 、 emballeur d'électrons

①Utilisez electron-packager pour empaqueter, installez les dépendances electron-packager et installez l'un des éléments suivants :

npm install --save-dev electron-packager
cnpm install --save-dev electron-packager
yarn add electron --dev
复制代码

②Une fois l'installation réussie, vous devez configurer le fichier package.json, la configuration est la suivante :

"scripts": {
    "start": "electron .",
    "packager": "electron-packager . 'app' --platform=win32 --arch=x64 --out=./build --electron-version 9.0.2 --app-version 1.0.0 --overwrite --icon=./logo.ico"
  },
复制代码

Présentation des paramètres de packager :

- platform：设置平台，window，linux还是Mac
- arch：x84还是x64，
- outapp的位置可以替换成你打包后的exe名字
- electron-version：electron的版本，必须要指定，这里设置为1.6.2，可查看package.json中electron安装的版本号
- icon 图标地址
复制代码

③Exécutez la commande npm run packager, après une opération réussie, vous verrez le fichier de construction dans le répertoire racine du projet et exécutez le fichier exe pour voir le projet empaqueté.

二、constructeur d'électrons

①Utilisez electron-builder pour empaqueter, installer les dépendances electron-builder et installer l'un des éléments suivants :

npm install  electron-builder --save-dev
cnpm install  electron-builder --save-dev
yarn add electron-builder --dev
复制代码

②Une fois l'installation réussie, vous devez configurer le fichier package.json, la configuration est la suivante :

{
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "electron .",
    "build": "electron-builder --win --x64"
  },
 // 使用electron-builder打包需要配置"build"
 "build": {
      "productName":"xxxx",   // 项目名称
      "appId": "electron.app",  // 安装包名称
      "directories": { 			
        "output": "build"
      }, // 输出文件夹
      "copyright":"xxxx", // 版权信息
      "nsis": {	//nsis相关配置，打包方式为nsis时生效
        "oneClick": false, 				// 是否一键安装
        "allowElevation": true, 			// 允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序。
        "allowToChangeInstallationDirectory": true, 	// 允许修改安装目录
        "installerIcon": "./build/icons/aaa.ico",	// 安装图标
        "uninstallerIcon": "./build/icons/bbb.ico",	// 卸载图标
        "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
        "createDesktopShortcut": true, 			// 创建桌面图标
        "createStartMenuShortcut": true,		// 创建开始菜单图标
        "shortcutName": "xxxx", 			// 图标名称
        "include": "build/script/installer.nsh", 	// 包含的自定义nsis脚本
      },
      // 发布到github
      publish: {
        provider: 'github',
        repo: 'xxxx', // git仓库
        owner: 'xxxx', // 拥有者
        token: 'xxxxxxxxxxxxxxx', // gitToken
        releaseType: 'release',
        publishAutoUpdate: true // 发布自动更新（需要配置GH_TOKEN）。 默认true
      },
      //配置windows环境
      "win": {
        "icon": "build/icons/aims.ico",
        "target": ["nsis","zip"]
      },
      //配置mac环境
      "mac": {
        "target": ["dmg","zip"]
      },
      //配置linux环境
      "linux": {
        "icon": "build/icons"
      }
  }
}
//来自：https://segmentfault.com/a/1190000016695922?utm_source=tag-newest
复制代码

③ Exécutez la commande npm run build. Une fois l'opération réussie, vous verrez le fichier de construction dans le répertoire racine du projet. Exécutez le fichier exe pour voir le projet empaqueté.

Une application de bureau simple est générée.

Résumer

Cet article a juste expliqué brièvement le processus d'installation d'électron et l'a emballé avec succès dans une application de bureau. Il y a encore beaucoup de choses en profondeur qui n'ont pas été montrées. Frère Pingtou continuera à partager les détails à l'avenir.