electron 使用

Posted 2020-12-24 zhou-xm

一、概念

　　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;
  });
});