Avec l'essor du HTML5 et du JavaScript qui tentent de dominer le monde, une technologie appelée [multiplateforme] devient de plus en plus populaire. Pourquoi est-il si populaire ? Étant donné que les développeurs de logiciels n'ont besoin d'écrire le programme qu'une seule fois, il peut être exécuté sur Windows, Linux, Mac, IOS, Android et d'autres plates-formes, ce qui réduit considérablement la charge de travail des programmeurs et permet d'itérer rapidement les produits de l'entreprise. Cet article présente principalement comment Electron emballe les pages Web dans des applications de bureau (comment les pages Web frontales génèrent des fichiers exécutables exe, j'espère que cela sera utile à tout le monde).
Dans le passé, la technologie multiplateforme n'était pas favorisée, mais elle se développe désormais rapidement avec le développement des téléphones mobiles et du matériel informatique. Tout cela repose presque sur la technologie HTML5. Bien entendu, le langage JavaScript est le plus gros contributeur. Les technologies multiplateformes bien connues basées sur HTML5 incluent PhoneGap et Cordova, qui sont souvent utilisées pour développer des applications Web ; il existe également Egret, Cocos-creator, Unity, etc., qui sont souvent utilisées pour développer des jeux ; basé sur Node.js, qui est utilisé pour le développement d'applications de bureau, et Electron, un artefact qui utilise la technologie Web pour développer des applications de bureau plus puissantes que nw.js.
En fait, tout ce qui précède n’a aucun sens, passons maintenant au sujet : Comment utiliser Electron pour empaqueter une page Web dans un fichier exécutable !
Hypothèses :
1. Vous avez installé et configuré node.js (installation globale)
2 Vous avez installé electronic en utilisant npm (installation globale)
3, vous avez. déjà écrit la page Web front-end (html, css, javascript, etc., ou la page Web écrite sur la base du framework front-end)
4. Si vous ne comprenez pas les trois points ci-dessus, allez sur Baidu rapidement. . .
Si vous avez les hypothèses ci-dessus, veuillez continuer à lire :
1. Recherchez le dossier de votre projet de page Web frontale et créez un nouveau package.json, main.js, index.html 3. fichier (remarque : index.html est la page d'accueil de votre page Web)
répertoire de votre projet/
├── package.json ├── main.js └── index.html
2. Dans le package Ajouter. le contenu suivant à json
{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"
}3. Ajoutez le contenu suivant à main.js Ce fichier main.js est le "main" dans le package.json ci-dessus. . La valeur de la clé, vous pouvez donc la modifier selon vos besoins
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// 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.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 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 (win === null) {
createWindow()
}
})
// 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.4. Si le nom de fichier de la page d'accueil de votre page Web n'est pas "index.html" , alors veuillez l'ajouter dans main.js. Changez le 'index.html' par le nom de la page d'accueil de votre page Web
5. Ouvrez DOS, cd dans le répertoire de votre projet (ou directement shift+clic droit sur un espace vide dans le répertoire de votre projet, puis cliquez ici pour ouvrir la fenêtre de commande. Si vous ne comprenez pas ici, hélas, Baidu est un garçon)
6. Sous DOS à l'étape précédente, saisissez <. 🎜> pour installer notre artefact de packaging globalement npm install electron-packager -g
npm install electron-packager -g
pour démarrer le packaging. electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules
electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules
PHP et js ouvrent le programme exe local et transmettent la méthode des paramètres pertinents
Comment le faire sur la page Web Appeler le programme exe de bureau
Méthode d'implémentation du programme exe installable en Java
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Que faire si une erreur se produit dans le script de la page actuelle
Comment réparer le système Win7 s'il est endommagé et ne peut pas être démarré
mysql modifier le nom de la table de données
Quel logiciel de test de batterie d'ordinateur portable est le meilleur ?
Comment utiliser NSTimeInterval
commutation de carte graphique y460
Comment configurer le routeur
Que dois-je faire si mon iPad ne peut pas être chargé ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
