electron 使用(一)
一、概念
1、Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。可以看做是被 JavaScript 控制的,精简版的 Chromium 浏览器。
2、Electron分为主进程和渲染进程,主进程是main.js,使用 BrowserWindow 实例创建网页,每个页面都运行着自己的进程,即渲染进程相互独立。
二、新建Electron项目
1、安装 node npm
2、初始化一个项目 npm init 或 npm init -f (-f 表示会使用默认值,不用输入,生成package.json)
3、将package.json 文件中 "main" : "index.js" 改为 "main" : "main.js"
4、下载 electron : npm install electron --save
5、根目录下新建 main.js
const electron = require(‘electron‘) const path = require("path") const url = require(‘url‘) const { app,BrowserWindow,globalShortcut} = require(‘electron‘) let mainWindow function createWindow () { // Create the browser window. mainWindow = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. 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. 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() } })
6、在 package.json 文件中的scripts 下面加入:"start": "electron ."
7、执行 npm start
三、项目打包
1、下载 npm install --save-dev electron-package 或者 使用 electron-builder 进行打包
2、在 package.json 文件中的 scripts 下添加如下代码:
os:"packageDarwin": "electron-packager . ‘Hosts‘ --platform=darwin --arch=x64 --icon=hosts.icns --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config*|node_modules)\"", os:"packageDarwin": "electron-packager . ‘Hosts‘ --platform=darwin --arch=x64 --icon=hosts.icns --out=./dist --asar --app-version=2.0.1", windows:"packageWin": "electron-packager . ‘Hosts‘ --platform=win32 --arch=x64 --icon=hosts.ico --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"", windows:"packageWin": "electron-packager . ‘Hosts‘ --platform=win32 --arch=x64 --icon=hosts.ico --out=./dist --asar --app-version=2.0.1", linux:"packageLinux": "electron-packager . ‘Hosts‘ --platform=linux --arch=x64 --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"" linux:"packageLinux": "electron-packager . ‘Hosts‘ --platform=linux --arch=x64 --out=./dist --asar --app-version=2.0.1"
命令说明:
* location of project:项目所在路径
* name of project:打包的项目名字
* platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux)
* architecture:决定了使用 x86 还是 x64 还是两个架构都用
* electron version:electron-prebuilt 的版本
* optional options:可选选项
PS:这里要注意,字段里的 项目名字,version,icon路径要改成自己的; 例如:"packager": "electron-packager ~/Desktop/myFirstElectronApp(项目位置) Hello(项目名称) --linux --out ./OutApp(项目导出位置) --version 1.4.13 --overwrite"
Mac系统:
"packageDarwin"
:
"electron-packager . ‘Hosts‘ --platform=darwin --arch=x64 --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config*|node_modules)\""
3、打包命令:npm run-script package
三、Electron
1、大体目录:
├── package.json
├── main.js
└── index.html
2、package.json
{ "name" : "your-app", "version" : "0.1.0", "main" : "main.js" }
3、main.js 用于创建窗口和处理系统时间
var app = require(‘app‘); // 控制应用生命周期的模块。 var BrowserWindow = require(‘browser-window‘); // 创建原生浏览器窗口的模块 // 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC, // window 会被自动地关闭 var mainWindow = null; // 当所有窗口被关闭了,退出。 app.on(‘window-all-closed‘, function() { // 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前 // 应用会保持活动状态 if (process.platform != ‘darwin‘) { app.quit(); } }); // 当 Electron 完成了初始化并且准备创建浏览器窗口的时候 // 这个方法就被调用 app.on(‘ready‘, function() { // 创建浏览器窗口。 mainWindow = new BrowserWindow({width: 800, height: 600}); // 加载应用的 index.html mainWindow.loadURL(‘file://‘ + __dirname + ‘/index.html‘); // 打开开发工具 mainWindow.openDevTools(); // 当 window 被关闭,这个事件会被发出 mainWindow.on(‘closed‘, function() { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 但这次不是。 mainWindow = null; }); });