现在,您需要安装electron
。 我们推荐的安装方法是把它作为您 app 中的开发依赖项,这使您可以在不同的 app 中使用不同的 Electron 版本。 在您的app所在文件夹中运行下面的命令:
npm install --save-dev electron
npm install --save-dev electron-packager
package.json
{ "name": "your-app", "version": "0.1.0", "main": "main.js", "scripts": { "start": "electron .", "packager": "electron-packager . myApp --win --out ../myApp --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" }, "dependencies": { "electron": "^7.1.1", "electron-packager": "^14.1.0" } }
packer解释
“.”:需要打包的应用目录(即当前目录), “myClient”:应用名称, “--win”:打包平台(以Windows为例), “--out ../myClient”:输出目录, “--arch=64”:64位, “--app-version=0.0.1”:应用版本, “--electron-version=2.0.0”:electron版本
main.js
const {app, BrowserWindow} = require('electron') // 保持对window对象的全局引用,如果不这么做的话,当JavaScript对象被 // 垃圾回收的时候,window对象将会自动的关闭 let win function createWindow() { // 创建浏览器窗口。 win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 // win.loadFile('index.html') win.loadURL(`file://${__dirname}/index.html`); // 打开开发者工具 // win.webContents.openDevTools() // 当 window 被关闭,这个事件会被触发。 win.on('closed', () => { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 与此同时,你应该删除相应的元素。 win = null }) } // Electron 会在初始化后并准备 // 创建浏览器窗口时,调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on('ready', createWindow) // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上,当单击dock图标并且没有其他窗口打开时, // 通常在应用程序中重新创建一个窗口。 if (win === null) { createWindow() } }) // 在这个文件中,你可以续写应用剩下主进程代码。 // 也可以拆分成几个文件,然后用 require 导入。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>