2019独角兽企业重金招聘Python工程师标准>>>
ELectron与Nw.js的技术差异
1. 应用入口
Nw.js的应用入口为一个页面,在package.json中指定主页面,它作为应用的主窗口打开
{
"name": "app_name",
"version": "app_version",
"main": "index.html"
}
Electron的应用入口是一个JavaScript脚本。与Nw直接提供一个URL不同,需要手动创建一个浏览器窗口,然后通过APi加载HTML文件、监听窗口事件、决定何时退出应用。
{
"name": "app_name",
"version": "app_version",
"main": "main.js",
}
2. 构建系统
Electron公国 libchromiumcontent 访问Chromium的ContentAPI。libchromiumcontent 是一个独立的、引入了Chromium Content模块及所有依赖的共享库。
3. Node集成
Nw.js中,网页中Node集成需要通过给Chromium打补丁来实现。
ELectron中,Node集成通过各品台的消息循环与libuv的循环集成,避免了直接在Chromium上做改动
Quick Start
一个最简单的electron项目包含三个文件,package.json ,index.html,main.js。
package.json是Node.js的项目配置文件, index.html是桌面应用的界面页面,main.js是应用的启动入口文件。其中,核心文件是 index.html 和 main.js.
index.html是应用展示界面:
Hello World!
Hello World!
We are using node ,
Chrome ,
and Electron .
main.js是electron应用的入口文件:
const electron = require('electron');
const { app } = electron;
const { BrowserWindow } = electron;
let win;
function createWindow() {
// 创建窗口并加载页面
win = new BrowserWindow({width: 800, height: 600});
win.loadURL(`file://${__dirname}/index.html`);
// 打开窗口的调试工具
win.webContents.openDevTools();
// 窗口关闭的监听
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
package.json:
{
"name": "hello_world",
"version": "0.01",
"main": "main.js",
"scripts": {
"start": "electron .",
"package":"electron-packager ./ hello_world --win --arch=x64 --version 0.0.1"
}
}
至此完成了一个基本的electron应用。运行代码前需要安装electron-prubuilt包。
electron-prubuilt安装问题
electron-prubuilt包可以通过 npm install --saved-dev electron-prebuilt 进行安装,安装完成后运行electron . 就可以看到electron应用的效果,也可以如上节packgae.json中设置script运行。
但是安装electron 包在windows下经常会出现安装失败的情况(貌似nw也会,一开始我以为是网速问题,当然网速也是问题),原因是在下载electron-prebuilt中失败,最后导致安装electron失败。解决的办法是访问https://npm.taobao.org/mirrors/electron手动下载当前系统对应版本的electron。版本号可以在安装过程中看到。然后将下载的electron-prebuilt压缩包放在C:\Users\Administrator\.electron下,最后在项目目录下重新执行npm install --saved-dev electron-prebuilt 进行安装,就能安装成功。
electron桌面应用打包
全局安装Node.js模块electron-package 。运行命令:
electron-packager --platform= --arch= --version= [optional flags...]
sourcedir:项目路径
appname: 应用名称
platform: 构建哪个平台的应用,有四个值darwin
, linux
, mas
, win32
arch: 决定使用x86还是x64的架构还是都用,有两个值ia32
, x64
version: electron的版本
optiona:其他可选项
注意,打包参数里应该写上overwrite, 不然后面打包时不会重新构建。