Electron初試

時間 2019-11-13

標籤 electron 初試简体版

原文原文鏈接

Electron初試

簡介

electron使用html，css和JavaScript來構建塊跨平臺桌面應用程序（Mac，Windows和Linux）的一個開源庫。
electron將Chromium和Node.js合併到同一個運行環境。
electron只使用了Chromium的渲染庫而不是所有組件，這使得升級Chromium更加容易，但缺乏了Google Chrome裏的一些瀏覽器相關的特性。

構建開發環境

electron應用本質上是一個Node.js應用程序，應用的入口是package.json文件.

npm init 
// 或者
npm init -y

在package.json中編寫一個start腳本

{
  "name": "helloelectron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安裝electron

npm install --save electron

瞭解進程

主進程

運行package.json中的main腳本的進程是主進程。
一個electron應用有且只有一個主進程。
主進程能夠進行GUI相關的原生API操做。
主進程使用ipcMain模塊接收渲染進程和向渲染進程發送消息。

渲染進程

Electron 使用了 Chromium 來展現 web 頁面，因此 Chromium 的多進程架構也被使用到。
每一個web頁面運行在它本身的渲染進程中。
使用BrowserWindow類開啓一個渲染進程並將這個實例運行在該進程中，當一個BrowserWindow實例被銷燬後，相應的渲染進程也會被終止。
渲染進程中不能調用原生資源，可是渲染進程中一樣包含Node.js環境，因此能夠引入Node.js 模塊，在Node.js支持下，能夠在頁面中和操做系統進行一些底層交互。
使用ipcRenderer模塊接收主進程和向發送主進程發送消息。

開始開發

編寫main.js

如前所述，編寫main.js就是編寫主進程要執行的腳本。
其中包換整個應用的生命週期的管理，各個渲染進程的建立和銷燬及生命週期管理，進程間通訊等。
下面建立一個最簡單的electron腳本。

// app能夠理解爲主進程
// BrowserWindow用於建立渲染進程
const {app, BrowserWindow} = require('electron')

app.on('ready', function createWindow () {
    // 能夠建立多個渲染進程
    let win1 = new BrowserWindow({
        width: 1024,
        height: 768
    })

    let win2 = new BrowserWindow({
        width: 1024,
        height: 768
    })

    // 渲染進程中的web頁面能夠加載本地文件
    win1.loadFile('index.html')

    // 也能夠加載遠程頁面
    win2.loadURL('http://www.baidu.com')

    // 記得在頁面被關閉後清除該變量，防止內存泄漏
    win1.on('closed', function () {
        win1 = null
    })
    win2.on('closed', () => {
        win2 = null
    })

})

// 頁面所有關閉後關閉主進程，這裏在不一樣平臺可能有不一樣的處理方式，這裏不深刻研究
app.on('window-all-closed', () => {
    app.quit()
})

渲染進程中的頁面也能夠加載node模塊

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>electron應用</title>
</head>
<body>
    <script>
    const fs = require('fs')

    fs.readFile('./demo.txt', function (err, data) {
        document.write(data)
    })
    </script>
</body>
</html>

npm start運行應用

分發應用

剛剛介紹了npm start運行應用，那如何將應用分發給他人呢，下面簡單介紹Windows平臺的方式

複製node_modules/electron/dist目錄下的文件到任意文件夾yourappcss
複製你的項目文件到yourapp/resources/app下html
刪除yourapp/resources/default_app.asar文件前端
運行yourapp/electron.exenode

注意建立好的應用若是在渲染進程中使用了相對目錄，因爲目錄結構的變化會引發讀取文件失敗，因此推薦使用絕對路徑如，這個項目中的index.html

<script>
    const fs = require('fs')
    const path = require('path')

    fs.readFile(path.resolve(__dirname, 'demo.txt'), function (err, data) {
        document.write(data)
    })
</script>

【完】web

做者簡介：葉茂，蘆葦科技web前端開發工程師，表明做品：口紅挑戰網紅小遊戲、服務端渲染官網。擅長網站建設、公衆號開發、微信小程序開發、小遊戲、公衆號開發，專一於前端領域框架、交互設計、圖像繪製、數據分析等研究。一塊兒並肩做戰： yemao@talkmoney.cn 訪問 www.talkmoney.cn 瞭解更多npm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。