下面,我们就来进行构建一个hello World项目
一个最基本的 Electron application 需要这些文件:
package.json - 处理应用的依赖和版本描述等说明性信息.main.js - 入口页面和渲染html页面. 这个文件是应用的 main process.–主进程index.html - 要渲染的页面,这个页面是应用的 renderer process–渲染进程.现在我们进行项目的创建,创建我们所需要的项目,命名为helloworld_electron,然后在项目中创建如下图所示的目录结构 [结构目录],在结构中electron.md是我用来进行说明的,在这个项目中没有作用
在文件中的内容分别如下所示:index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using Node.js <script>document.write(process.versions.node)</script>, Chromium <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>main.js
const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow const path = require('path') const url = require('url') let mainWindow function createWindow () { mainWindow = new BrowserWindow({width: 800, height: 600}) mainWindow.loadURL(url.format({ pathname: path.join(__dirname, './src/index.html'), protocol: 'file:', slashes: true })) // 打开调试工具DevTools. mainWindow.webContents.openDevTools() mainWindow.on('closed', function () { mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { if (mainWindow === null) { createWindow() } })package.json
{ "name": "helloworld_electron", "version": "1.0.0", "description": "'A test for electron, a desktop tool'", "main": "main.js", "scripts": { "start": "electron ." }, "author": "jkwu", "license": "ISC", "keywords": [ "Electron", "start", "demo" ], "devDependencies": { "electron": "~1.6.2" } }在实现上面过程之后,我们就能够进行调试,首先我们需要运行命令
npm install进行安装依赖,也就是安装下面内容:
"devDependencies": { "electron": "~1.6.2" }安装之后,我们就能够通过命令
npm start来进行启动,如下图所示:是我的启动结果
通过上面的流程,我们能够实现一个最基本的打包,但是,这还不能够跨平台像一个应用软件一样,那么,我们如何 进行打包成这样?? 具体步骤如下所示: 安装打包依赖:
npm install electron-packager --save-dev将会安装"electron-packager": "^8.6.0"到依赖库中,这是package.json将会自动变化为下面代码 还有为了方便,我在scripts中直接添加了packager项,主要是运行打包命令
{ "name": "helloworld_electron", "version": "1.0.0", "description": "'A test for electron, a desktop tool'", "main": "main.js", "scripts": { "start": "electron .", "packager-linux": "electron-packager ./ helloworld --overwrite --platform=linux --arch=x64 --ignore=node_modules", "packager-win": "electron-packager ./ helloworld --overwrite --platform=win32 --ignore=node_modules --ignore=app --ignore=OutPut", "packager-mac": "electron-packager ./ helloworld --overwrite --platform=darwin --arch=x64 --ignore=node_modules" }, "author": "jkwu", "license": "ISC", "keywords": [ "Electron", "start", "demo" ], "devDependencies": { "electron": "~1.6.2", "electron-packager": "^8.6.0" } }最后,我们执行下面命令 ,打包一个linux文件包
npm run packager-linux即可完成打包Linux包,打包之后会在项目里边生成一个文件夹,进入文件夹双击生成的可运行文件,即可打开桌面应用,(注意:linux系统在打包win的时候,需要安装wine,使用命令sudo apt-get install wine64安装即可)
electron安装注意事项
