Electron 安裝與使用

Electron是使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用

本文基於Windows進行開發的過程,記錄下來,以便往後使用,Electron官網:https://electronjs.org/docshtml

1,安裝node.js

  進入官網下載、安裝。https://nodejs.org/en/node

2,安裝cnpm

  安裝命令(打開系統的cmd.exe來執行命令): npm install -g cnpm --registry=https://registry.npm.taobao.org git

3,安裝Electron

  安裝命令: cnpm install -g electron github

4,安裝Electron-forge

  Electron工具整合項目:https://github.com/electron-userland/electron-forgeweb

  安裝命令: cnpm install -g electron-forge npm

5,新建項目

  F盤新建Electron項目文件夾 F:\Electron。json

  在Electron文件夾下,按住Shift鍵並右鍵單擊空白處,選擇在此處打開命令窗口來啓動cmd.exe。瀏覽器

  執行 electron-forge init 項目名稱 命令來生成名爲myapp的項目文件夾,同時安裝項目所須要的模塊、依賴項等。app

  命令: electron-forge init myapp electron

6,啓動項目 

  cd到myapp目錄下,執行命令 electron-forge start 來啓動app(也能夠簡單的用npm start來運行)。

7,項目文件

  項目的目錄結構:node_modules 文件夾下是各類模塊、類庫,src下是app的源代碼文件,package.json是描述包的文件。

  src/index.js:這是app主進程的入口,在這裏建立了mainWindow瀏覽器窗口,

  使用mainWindow.loadURL(\file://${__dirname}/index.html`)來加載index.html主頁,

  咱們也能夠在此連接咱們須要連接的網址,來實現web桌面應用,例:mainWindow.loadURL(`https://www.cnblogs.com/`),

  使用mainWindow.webContents.openDevTools()`來打開開發者工具用於調試(這個操做一般在發佈app時刪除)。

  而後是app的事件處理:

  ready: 當Electron完成初始化後觸發,這裏初始化後就會去建立瀏覽器窗口並加載主頁面。
  window-all-closed: 當全部瀏覽器窗口被關閉後觸發,通常此時就退出應用了。
  activate: 當app激活時觸發,通常針對macOS要須要處理。

  src/index.html:這是主頁面,除了顯示Well hey there!!!的信息外,沒什麼具體內容。

8,package.json配置

  "productName": "myapp" 打包後的文件名稱

  "version": "1.0.0" 版本號

  若想更換打包程序的圖標,能夠在config->electronPackagerConfig->icon中進行設置,

  (例如:咱們把app.ico放在src目錄下就能夠這樣配置"icon":"src/favicon.ico")

 

9,編譯打包

  輸入如下命令進行編譯打包: npm run make 

 

  修改package.json,在electronPackagerConfig部分添加"asar": true。
  "electronPackagerConfig": {
    "asar": true
  }
  從新打包後源碼文件會被打包進app.asar文件中(該文件仍然在src目錄下)。

 

  能夠直接運行打包後的myapp.exe啓動程序

相關文章
相關標籤/搜索