Electron 入门第一篇

时间 2019-12-07

标签 electron 入门一篇繁體版

原文原文链接

官网：http://electronjs.org/docs/tutorial/application-architecturejavascript

转载：https://blog.csdn.net/qq_33323731/article/details/80492191(第一个demo和安装依赖的包)html

1、简介java

Electron 可让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你能够把它看做是专一于桌面应用而不是 web 服务器的，io.js 的一个变体。这不意味着 Electron 是绑定了 GUI 库的 JavaScript。node

相反，Electron 使用 web 页面做为它的 GUI，因此你能把它看做成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。web

主进程和渲染器进程

Electron 运行 package.json 的 main 脚本的进程被称为主进程。在主进程中运行的脚本经过建立web页面来展现用户界面。一个 Electron 应用老是有且只有一个主进程。npm

因为 Electron 使用了 Chromium 来展现 web 页面，因此 Chromium 的多进程架构也被使用到。每一个 Electron 中的 web 页面运行在它本身的渲染进程中。在普通的浏览器中，json

web页面一般在一个沙盒环境中运行，不被容许去接触原生的资源。然而 Electron 的用户在 Node.js 的 API 支持下能够在页面中和操做系统进行一些底层交互。数组

主进程和渲染进程之间的区别

主进程使用 BrowserWindow 实例建立页面。每一个 BrowserWindow 实例都在本身的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。主进程管理全部的web页面和它们对应的渲染进程。浏览器

每一个渲染进程都是独立的，它只关心它所运行的 web 页面。在页面中调用与 GUI 相关的原生 API 是不被容许的，由于在 web 页面里操做原生的 GUI 资源是很是危险的，并且容易形成资源泄露。若是你想在 web 页面里使用 GUI 操做，服务器

其对应的渲染进程必须与主进程进行通信，请求主进程进行相关的 GUI 操做。

进程间通信

Electron为主进程（ main process）和渲染器进程（renderer processes）通讯提供了多种实现方式，如可使用ipcRenderer 和 ipcMain模块发送消息，使用 remote模块进行RPC方式通讯。

二. 准备工做

1.npm的安装须要下载node.js，安装完node.js以后npm天然会有,node.js安装请参考上一篇文章。

2. 首先，咱们要安装electron-prebuilt，它是一个npm模块，所以咱们可使用Npm来进行安装，它是一个electron的预编译版本。

 npm install -g electron-prebuilt

3. 接下来安装electron-packager ，它也是一个npm模块，是一个用于打包electron应用的工具

npm install -g electron-packager

3、打造一个属于本身的Electron应用

Electron 可让你使用纯 JavaScript 调用丰富的原生(操做系统) APIs 来创造桌面应用。你能够把它看做一个专一于桌面应用的 Node. js 的变体，而不是 Web 服务器。这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。

相反，Electron 使用 web 页面做为它的 GUI，因此你能把它看做成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。与 Node.js 模块相同，应用的入口是 package.json 文件。

一个最基本的 Electron 应用通常来讲会有以下的目录结构：

your-app/
├── package.json
├── main.js
└── index.html

1.为你的新Electron应用建立一个新的空文件夹。打开你的命令行工具，而后从该文件夹运行 npm init

npm init

输入yes，npm 会帮助你建立一个基本的 package.json 文件。其中的 main 字段所表示的脚本为应用的启动脚本，它将会在主进程中执行。

以下片断是一个 package.json 的示例：

{
  "name": "myelectron",
  "version": "1.0.1",
  "description": "a simple demo",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "DW",
  "license": "ISC"
}

在此我追加一个start脚原本指引 Electron 去执行当前的 package：

{
  "name": "myelectron",
  "version": "1.0.1",
  "description": "a simple demo",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ." 
  },
  "author": "DW",
  "license": "ISC"
}

2.安装 Electron

如今，您须要安装electron。咱们推荐的安装方法是把它做为您 app 中的开发依赖项，这使您能够在不一样的 app 中使用不一样的 Electron 版本。在您的app所在文件夹中运行下面的命令：

npm install --save-dev electron

3.新建一个index.html, 内容以下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <h1>hello electron</h1>
    </body>
    </html>

4.新建一个main.js, 内容以下：（main.js的文件名对应package.json中main的值）

const {app, BrowserWindow, Menu } = require('electron');
const path = require('path');
const url = require('url');
 
// 保持一个对于 window 对象的全局引用，若是你不这样作，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let mainWindow;
 
function createWindow () {
    //隐藏关闭放大缩小最外层菜单栏目
    Menu.setApplicationMenu(null);
 
    // 建立浏览器窗口。
    mainWindow = new BrowserWindow({
        title: 'hello Electron',
        width: 1320,
        height: 744,
        icon: __dirname + '/build/icons/app.ico', //这个是引入的icon
    });
 
    // 而后加载应用的 index.html。
    //mainWindow.loadURL(url.format({
    //    pathname: path.join(__dirname, 'index.html'),
    //    protocol: 'file:',
    //    slashes: true
    //}))
 
    //引用外部文件
   // mainWindow.loadURL(`http://www.baidu.com`);
    // 加载应用的 index.html
    mainWindow.loadURL('file://' + __dirname + '/index.html');
 
   // 打开开发者工具。
   //mainWindow.webContents.openDevTools();

    // 打开开发工具
 // mainWindow.openDevTools();
 
   // 当 window 被关闭，这个事件会被触发。
   mainWindow.on('closed', () => {
            // 取消引用 window 对象，若是你的应用支持多窗口的话，
            // 一般会把多个 window 对象存放在一个数组里面，
            // 与此同时，你应该删除相应的元素。
            mainWindow = null
    })
}
 
// Electron 会在初始化后并准备
// 建立浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
 
// 当所有窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 肯定地退出，
    // 不然绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
 
app.on('activate', () => {
    // 在macOS上，当单击dock图标而且没有其余窗口打开时，
    // 一般在应用程序中从新建立一个窗口。
    if (mainWindow === null) {
        createWindow()
    }
})
 
// 在这个文件中，你能够续写应用剩下主进程代码。
// 也能够拆分红几个文件，而后用 require 导入

四. 运行

如今只要在你的myApp目录下执行npm start 就能够运行了

npm start

5、打包

如今整个过程进行到最后一步，咱们须要打包咱们本身的应用，那么如何打包，这就须要用到咱们先前已经安装的electron-packager

打开命令行咱们能够这样使用它：

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --electron-version=0.0.1 --overwrite --ignore=node_module

大概格式是这样的：

 electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>

electron-packager . <应用名称> --win --out ../<输出目录> --arch=x64位仍是32位 --electron-version=版本号 --overwrite --ignore=node_module

可是每次打包的执行命令太长太麻烦了，因此咱们能够把命令写进package.json中，执行命令调用它就行了。

更改后的package.json以下

{
  "name": "myelectron",
  "version": "1.0.1",
  "description": "a simple demo",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "package": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --app-version=1.0.1 --electron-version=13.1.1 --overwrite --ignore=node_module"
  },
  "author": "DW",
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.1"
  }
}

这样咱们每次打包只须要执行 npm run-script package就能够了

npm run-script package

六.更改图标

若是咱们想要更改窗口左上角的图标和任务栏的图标，只须要在打包的命令上加个icon参数就行了

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=13.1.1 --icon=./app/img/icon.ico

1. Electron系列教程——第一篇：入门
2. electron 入门第一站
3. SpringBoot 第一篇：入门篇
4. 一、Electron入门HelloWorld案例
5. 第一篇：Python入门
6. RabbitMQ第一篇--入门
7. php入门第一篇
8. Vue.js入门第一篇
9. JVM-入门第一篇
10. 第一篇 Python入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• 第一个MyBatis程序 - MyBatis教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用