Electron 初識 - 簡易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
  1. 安裝
npm install -g elecron-packager
  1. 打包

    直接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
  2. 命令參數

    參數設置

    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 運行更新,更新完重啓就能夠了

相關文章
相關標籤/搜索