Electron 初識 - 簡易Electron 桌面應用項目搭建

時間 2020-07-25

標籤 electron 簡易桌面應用項目搭建简体版

原文原文鏈接

Electron

快速入門

簡介

Electron 可讓你使用純 JavaScript 調用豐富的原生 APIs 來創造桌面應用。你能夠把它看做是專一於桌面應用而不是 web 服務器的，io.js 的一個變體。javascript

這不意味着 Electron 是綁定了 GUI 庫的 JavaScript。相反，Electron 使用 web 頁面做爲它的 GUI，因此你能把它看做成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。html

應用的入口

在 Electron 中，入口是一個 JavaScript 腳本。不一樣於直接提供一個URL，你須要手動建立一個瀏覽器窗口，而後經過 API 加載 HTML 文件。你還能夠監聽窗口事件，決定什麼時候讓應用退出。java

主進程

在 Electron 裏，運行 package.json 裏 main 腳本的進程被稱爲主進程。在主進程運行的腳本能夠以建立 web 頁面的形式展現 GUI。node

渲染進程

因爲 Electron 使用 Chromium 來展現頁面，因此 Chromium 的多進程結構也被充分利用。每一個 Electron 的頁面都在運行着本身的進程，這樣的進程咱們稱之爲渲染進程。linux

優點

效率高，桌面效果佳
能夠訪問操做系統層面的東西。
擺脫了不一樣瀏覽器之間的差別和版本的限制（瀏覽器的沙盒機制）。

劣勢

窗口建立背景的問題，在html沒有被加載完成前，窗口只用用背景色去填充，不能使用個性化的背景圖案，這會形成首次加載的體驗很差。
打包出來的APP太大，就是最簡單的應用打包出來都有40多MB。

簡單項目搭建

訪問源碼： https://gitee.com/ting-hui/electron-demo/tree/01-start-project/git

安裝node.js，npmweb
本地建立一個新文件夾chrome
命令管理進入文件夾shell

初始化項目npm

DOS窗口使用npm init初始化一個項目

初始化完成後會在文件夾中生成一個package.json的文件

修改package.json文件

package name:          項目名字叫啥
version:               版本號
description:           對項目的描述
entry point:           項目的入口文件（通常你要用那個js文件做爲node服務，就填寫那個文件）
test command:          項目啓動的時候要用什麼命令來執行腳本文件（默認爲node app.js）
git repository:        若是你要將項目上傳到git中的話，那麼就須要填寫git的倉庫地址
keywirds：              項目關鍵字
author:                做者的名字
license:               發行項目須要的證書

安裝Electron

全局安裝npm install -g electron ，單獨給每一個要開發的應用安裝時，須要進入到開發的應用文件夾中，運行npm install --save-dev electron命令，此處以給單個app安裝爲例，執行成功後會生成一個node_modules文件夾：

Electron應用開發程序示例

先建立項目入口文件app.js，

const { app, BrowserWindow } = require('electron')

function createWindow () {   
  // 建立瀏覽器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 而且爲你的應用加載index.html
  win.loadFile('index.html')

  // 打開開發者工具
  win.webContents.openDevTools()
}

// Electron會在初始化完成而且準備好建立瀏覽器窗口時調用這個方法
// 部分 API 在 ready 事件觸發後才能使用。
app.whenReady().then(createWindow)

//當全部窗口都被關閉後退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用戶用 Cmd + Q 肯定地退出，
  // 不然絕大部分應用及其菜單欄會保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，當單擊dock圖標而且沒有其餘窗口打開時，
  // 一般在應用程序中從新建立一個窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// 您能夠把應用程序其餘的流程寫在在此文件中
// 代碼 也能夠拆分紅幾個文件，而後用 require 導入。

最後，建立準備展現的index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node
	 <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

啓動應用

會在桌面彈出框：

打包

electron-packager

安裝

npm install -g elecron-packager

打包

直接DOM窗口執行命令打包：

electron-packager . HelloWorld --win --out=./out --arch=x64 --app-version=1.0.0 --electron-version=v9.0.4

package.json文件配置：

{
  "name": "test-electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron index.js",
	"package": "electron-packager . HelloWorld --win --out=./out --arch=x64 --app-version=1.0.0 --electron-version=v9.0.4"
  },
  "author": "dq",
  "license": "ISC",
  "devDependencies": {}
}

而後執行如下命令打包：

npm run-script package

命令參數

參數設置

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

及簡打包：

electron-packager ./ --all

參數	描述	備註
sourcedir	打包文件的目錄位置
appname	當前應用構建名稱
plateform	構建平臺	可取的值有 `darwin`, `linux`, `mas`, `win32`
out	打包文件輸出文件夾位置
icon	打包文件的圖標
electron-version	electron的版本號
overwrite	覆蓋原有的build	讓新生成的包覆蓋原來的包

Electron 打包問題

WARNING: Make sure that .NET Framework 4.5 or later and Powershell 3 or later are installed, otherwise extracting the Electron zip file will hang.npm ERR!npm ERR!
問題緣由，電腦上沒有Framework 4.5以上的版本或者Powershell 3以上的版本
Framework 能夠控制檯或者管家查看有沒有
Powershell 能夠win+R輸入看看能不能喚醒控制檯，有極個別會喚醒不了
能夠去 C:\Windows\System32\WindowsPowerShell\v1.0 這個地址下看看有沒有powershell.exe
有的話打開，而後輸入指令：
Get-Host | Select-Object Version
查看版本號，一般win7自帶的是2.0的，而後去升級一下
https://download.microsoft.com/download/E/7/6/E76850B8-DA6E-4FF5-8CCE-A24FC513FD16/Windows6.1-KB2506143-x64.msu 運行更新，更新完重啓就能夠了

相關標籤/搜索

每日一句

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