最近在折腾把项目打包成桌面应用程序,发现一个工具electron,可以讲项目打包成一个跨平台的应用程序,很方便,来学习一下。
1、先安装electron、electron-packager,安装方法可以使用package.json文件配置,然后npm install
也可以使用cnpm安装,速度会快点,具体如下:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i
package.json如下:
{ "name": "electron_demo", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron .", "packager": "electron-packager ./ stockschool --platform=win32 --arch=x64 --icon=./pazq.ico --out=./ElectronApp" }, "devDependencies": { "electron": "~1.7.8", "electron-packager": "^10.1.2" }, "dependencies": {} }
2、安装完成后,准备好要打包的项目,并增加一个main.js,用来声明一个类似webview的东西,来加载页面。
const electron = require('electron') // Module to control application life. const app = electron.app // Module to create native browser window. const BrowserWindow = electron.BrowserWindow 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 mainWindow function createWindow() { // Create the browser window. mainWindow = new BrowserWindow({ 1366, height: 727, minWidth: 1366, // Integer (可选) - 窗口的最小宽度, 默认值为 . minHeight: 727, // Integer (可选) - 窗口的最小高度. 默认值为 . maxWidth: 1366, // Integer (可选) - 窗口的最大宽度, 默认无限制. maxHeight: 727, // Integer (可选) - 窗口的最大高度, 默认无限制. minimizable: true, // Boolean (可选) - 窗口是否可以最小化. 在 Linux 中无效. 默认值为 true. maximizable: false, // Boolean (可选) - 窗口是否可以最大化动. 在 Linux 中无效. 默认值为 true. useContentSize: false, // width 和 height 将使用 web 页面的尺寸 center: true, // Boolean (可选) - 窗口在屏幕居中. }) mainWindow.setMenu(null) // and load the index.html of the app. mainWindow.loadURL(url.format({ pathname: path.join(__dirname, './stockschool/index.html'), protocol: 'file:', slashes: true })) // 加载应用的 index.html // mainWindow.loadURL('file://' + __dirname + '/index.html'); // Open the DevTools. // 打开开发工具 mainWindow.openDevTools(); // mainWindow.webContents.openDevTools() // Emitted when the window is closed. mainWindow.on('closed', function () { // 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. mainWindow = 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', function () { // On OS X 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', function () { // On OS X 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 (mainWindow === 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.
3、启动项目:
npm start
4、打包,根据平台打包成一个.exe文件。(导出目录见 package.json中的out配置项)
打包方法:cnpm run packager
package.json中的打包配置
electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>
electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=./pazq.ico --out=./ElectronApp --version=0.0.1