Sujets avancés d'Electron

Electron peut non seulement créer des applications de bureau multiplateformes, mais aussi prendre en charge une intégration système approfondie et des extensions de fonctionnalités avancées. Maîtriser ces techniques avancées peut rendre les applications plus professionnelles et plus puissantes.

Intégration native de Node.js

Utilisation de node-gyp

  • node-gypEst un outil de compilation de modules natifs Node.js, prend en charge la compilation de modules C/C++

  • Installation :

    npm install -g node-gyp
  • ⟦⟧Initialiser le projet :
    node-gyp configure
node-gyp build
  • Sortie.nodefichier, peut être chargé dans Electron :
    const native = require('./build/Release/native.node')

Compiler les modules natifs

  • ⟦⟧Les modules natifs doivent être compilés pour la version de Node et l'ABI d'Electron
  • Utilisationelectron-rebuildOutils :
    npm install --save-dev electron-rebuild
npx electron-rebuild
  • S'assurer que le module est compatible avec la version actuelle d'Electron

Dépannage des problèmes courants

  • Incompatibilité ABI: Electron utilise différentes versions de Node, nécessitantelectron-rebuild
  • Échec de compilation：Vérifie l'environnement de compilation C++（Windows nécessite l'installation de Visual Studio Build Tools，macOS nécessite Xcode Command Line Tools）
  • Problème de chemin: Assurez-vous que le chemin du module est correct, utilisez des chemins absolus pour charger.nodeFichier

Intégration profonde avec le système

Détection du thème du système

  • Détecter le thème sombre/clair :
    const { nativeTheme } = require('electron')
console.log(nativeTheme.shouldUseDarkColors)
nativeTheme.on('updated', () => {
  console.log('主题更新:', nativeTheme.shouldUseDarkColors)
})
  • Empêcher la mise en veille du système :
    const { powerSaveBlocker } = require('electron')
const id = powerSaveBlocker.start('prevent-display-sleep')
powerSaveBlocker.stop(id)
  • Détecter l'état de l'alimentation :
    const { systemPreferences } = require('electron')
console.log(systemPreferences.getSystemIdleTime())

Gestion de l'écran

  • Obtenir des informations sur l'écran :
    const { screen } = require('electron')
const primaryDisplay = screen.getPrimaryDisplay()
console.log(primaryDisplay.size)
  • Prise en charge multi-écrans, détection de la résolution et adaptation automatique des fenêtres

Détection d'inactivité du système

  • ViasystemPreferences.getSystemIdleTime()Obtenir le temps d'inactivité de l'utilisateur
  • Peut être utilisé pour le verrouillage automatique de l'écran, l'économie d'énergie ou les fonctions de rappel

Prise en charge multilingue

Approche d'implémentation i18n

Bibliothèques courantes :

  • i18next: Prise en charge des packs de langue JSON/YAML, changement dynamique
  • vue-i18n / react-i18nextIntégration du framework frontend :

Structure des fichiers :

locales/
  en.json
  zh.json

Changement de langue :

const i18next = require('i18next')
i18next.init({
  lng: 'en',
  resources: {
    en: { translation: require('./locales/en.json') },
    zh: { translation: require('./locales/zh.json') }
  }
})
console.log(i18next.t('hello')) // 输出 hello

Peut être modifié dynamiquementlng, permettant un changement de langue en temps réel.

Charger dynamiquement les packs de langue

  • Pour les grands projets, les packs de langue peuvent être chargés à la demande :
    async function setLanguage(lang) {
  const resources = await import(`./locales/${lang}.json`)
  i18next.addResources(lang, 'translation', resources.default)
  i18next.changeLanguage(lang)
}
  • Optimiser la taille du package, réduire le temps de chargement au démarrage

Protocole personnalisé

Electron prend en charge l'enregistrement de protocoles personnalisés, permettant à l'application d'appeler des fonctions internes ou de mettre en œuvre une liaison profonde via des schémas d'URL spécifiques.

Enregistrer un protocole personnalisé

  • UtilisationprotocolLe module enregistre un protocole personnalisé
  • Peut être utilisé pour charger des ressources internes de l'application ou répondre à des URL spécifiques
const { app, protocol } = require('electron')

app.whenReady().then(() => {
  protocol.registerFileProtocol('myapp', (request, callback) => {
    const url = request.url.substr(7) // 去掉 'myapp://'
    callback({ path: `${__dirname}/${url}` })
  })
})

Description:

  • 'myapp': Nom du protocole personnalisé
  • request.url: URL complète transmise
  • callback({ path }): Pointe vers un chemin de fichier local, peut être utilisé pour charger du HTML, des images, etc.

Liaison profonde

  • Les liens profonds permettent aux utilisateurs d'ouvrir directement des pages ou des fonctionnalités spécifiques d'une application via une URL
  • Enregistrer le protocole système :
    if (!app.isDefaultProtocolClient('myapp')) {
  app.setAsDefaultProtocolClient('myapp')
}
  • Sur macOS / Windows, cliquezmyapp://note/123Peut déclencher des événements de l'application
  • Gérer les liens profonds :
    app.on('open-url', (event, url) => {
  event.preventDefault()
  console.log('接收到深度链接:', url)
  // 可解析 URL 跳转到应用内部页面
})
  • Gestion des événements Windows :
    app.on('second-instance', (event, argv) => {
  const url = argv.find(arg => arg.startsWith('myapp://'))
  if (url) {
    console.log('接收到深度链接:', url)
  }
})

Gestion du protocole

  • Sécurité：

    • Valider le contenu de l'URL pour empêcher les opérations non autorisées
    • Éviter de charger des fichiers malveillants ou d'exécuter des commandes arbitraires

  • scénarios d'application：

    • Ouvrir une note, un document ou une page spécifique
    • Interagir avec des pages web, invoquer des fonctionnalités locales
    • Communication inter-applications ou multiplateforme

  • Notes：

    • macOS nécessite une configuration dans Info.plistCFBundleURLTypes
    • Windows nécessite l'enregistrement du protocole dans le registre
    • La logique de gestion du protocole doit être placée dans le processus principal ; le processus de rendu ne fait que recevoir les événements
autres extensions