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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程