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!
    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失败。解决的办法是访问手动下载当前系统对应版本的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， 不然后面打包时不会重新构建。