安装
在你写好的node.js文件夹下安装electron
官方文档:https://electronjs.org/docs/tutorial/installation
通过命令行安装
npm install electron --save-dev
一般来说官网下载较慢,可以使用淘宝镜像下载
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用镜像的npm改为cnpm,其余不变
ps:我自己安装electron的时候通过淘宝镜像安装的版本过低,但是官网安装下载速度又过慢
可以直接指定版本号下载,这样就行了
下载版本zip:
查看是否成功:
使用
打开你要写node.js文件的那个文件夹
通过命令行进入此文件夹
-
项目初始化
npm init -
配置package.json
{
“name”: “wrt”, # 模块名(随便取)
“version”: (1.0.0) ,
“description”: “a simple application”, (项目描述,可写可不写)
“main”: “main.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“start”: “electron .”
},
“author”: “wrt”,
“license”: “ISC” -
main.js用于创建窗口和处理系统事件。
文件内容:// 引用electron依赖
const electron = require(‘electron’)
// Module to control application life. 创建应用实例
const app = electron.app
// Module to create native browser window. 引用原生浏览器窗口,用于创建和控制浏览器窗口
const BrowserWindow = electron.BrowserWindowconst 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.
// 保存一个对于window对象的全局引用,如果你不这样做,当JavaScript对象被垃圾回收,window对象将关闭。
let mainWindowfunction createWindow () {
// Create the browser window. 创建浏览器窗口,并设置宽高
mainWindow = new BrowserWindow({width: 800, height: 600})// and load the index.html of the app. 加载应用的index.html
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, ‘index.html’),
protocol: ‘file:’,
slashes: true
}))// Open the DevTools. 打开开发者工具
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.// 取消引用window对象,如果你的应用支持多窗口的话,通常 // 会把多个window对象存放在一个数组里面,与此同时,你应该删除相应的元素。 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.// electron会在初始化后,准备创建浏览器窗口时调用这个函数,
// 部分API在 ready事件出发后才能使用
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. -
打包成exe文件
-
npm install electron --save-dev安装electron。安装完成后,文件夹中会多出一个文件夹node_modules。
-
输入npm install electron-packager -g安装electron-package。修改package.json。在"scripts"中加入"packager"配置:
“packager”: “electron-packager ./ Myexe --platform=all --arch=x64 --electron-version=1.0.0 --out=…/text --overwrite”
./表示当前路径
Myexe :exe应用的名称
platform: 打包平台 darwin, linux, mas, win32或者选择all
arch: 可选 ia32, x64, armv7l, arm64或者选择all
electron-version: electron的版本()
out:生成的exe保存目录
overwrite:使用了这个参数,每次打包就不用把原来exe删除,可直接覆盖了。
-
使用命令 npm run-script packager进行打包时出现错误
-
先输入npm cache clean --force命令清除npm缓存图片:
-
输入npm install重装npm
-
npm run-script packager打包文件
(第一次打包等待时间可能会过长,需耐心) -
找到打包输出文件目录下的exe文件即可直接打开