electron 入门

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 

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: 构建哪个平台的应用,有四个值darwinlinuxmaswin32

    arch: 决定使用x86还是x64的架构还是都用,有两个值ia32x64

    version: electron的版本

    optiona:其他可选项

    注意,打包参数里应该写上overwrite, 不然后面打包时不会重新构建。

    

    

转载于:https://my.oschina.net/twleo2016/blog/997745

你可能感兴趣的:(electron 入门)