electron && angular 構建桌面應用（一）

electron介紹

Electron是一個實時框架，允許您使用HTML5，CSS和JavaScript創建桌面應用程序。Electron 可以讓你使用純 JavaScript 調用豐富的原生(操作系統) APIs 來創造桌面應用。 Electron 使用 web 頁面作為它的 GUI，所以你能把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。編寫第一個electron應用程序  

可以理解為electron是一個桌面應用的殼，裝的內容是web頁面。構建頁面的各種框架，如angular, vue等，都可以與electron配合使用。

Angular介紹

Angular2 是一款開源JavaScript庫，由Google維護，用來協助單一頁面應用程序運行。Angular2.x與Angular1.x 的區別類似 Java 和 JavaScript 或者說是雷鋒與雷峰塔的區別，所以在學習Angular2.x時大家需要做好重新學習一門語言的心里准備。Angular2以后的版本與Angular2基本類似。Angular2教程。 Angular2使用TypeScript語言，教程見此。 

構建一個electron + angular的桌面應用

1. 構建一個angular應用

ng new first-electron-angular

ng命令會使用npm來作為第三方包管理工具。npm的源慢，國內可設置為使用淘寶的鏡像。建議安裝cnpm。

2. 啟動應用

cd first-electron-angular
cnpm install electron --save-dev
cnpm i
ng serve

cnpm install electron --save-dev 安裝electron包，--save-dev表示將electron依賴加入package.json文件。

可以看到，命令啟動了一個web服務，地址為：http://localhost:4200。

3. 修改package.json文件

以下為修改點：

• scripts.start 修改啟動腳本。需要同時啟支electron和angular應用。 "start": "npm-run-all -p electron:serve ng:serve"
• 新增三個啟動腳本
  • "ng:serve": "ng serve"
  • "electron:serve-tsc": "tsc -p tsconfig-serve.json"
  • "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve"
• 新增script.main入口文件地址："main": "main.js"
• 新增2個第三方工程包：
  • "npm-run-all": "4.1.5"
  • "wait-on": "4.0.0"

{
  "name": "first-ng-electron",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "npm-run-all -p electron:serve ng:serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "ng:serve": "ng serve",
    "electron:serve-tsc": "tsc -p tsconfig.json",
    "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve"
    
  },
  "main": "main.js",
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.24",
    "@angular/cli": "~8.3.24",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "electron": "^8.0.0",
    "electron-reload": "^1.5.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3",
    "npm-run-all": "4.1.5",
    "wait-on": "4.0.0"
  }
}

4. 新增main.ts文件

在文件夾first-ng-electron下新建main.ts文件。文件內容如下：

const {
    app, // 控制應用生命周期的模塊。
    BrowserWindow, // 創建原生瀏覽器窗口的模塊
   } = require('electron');

import * as path from 'path';
import * as url from 'url';

   // 保持一個對於 window 對象的全局引用，不然，當 JavaScript 被 GC，window 會被自動地關閉
   let win;
   const createWindow = ()=> {
    // Create the browser window.
    win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
     plugins: true
    }
    });
    win.loadURL('http://localhost:4200');
    // 打開開發工具
    win.webContents.openDevTools();
    // 當 window 被關閉，這個事件會被發出
    win.on('closed', () => win = null);
    win.on('ready-to-show', () => {
    })
    
   };
   // 當 Electron 完成了初始化並且准備創建瀏覽器窗口的時候這個方法就被調用
   app.on('ready', createWindow);
   // 當所有窗口被關閉時，退出程序
   app.on('window-all-closed', () => {
    // 在 OS X 上，通常用戶在明確地按下 Cmd + Q 之前應用會保持活動狀態
    process.platform !== 'darwin' && app.quit();
   });
   app.on('activate', () => {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    win === null && createWindow();
   });

5. 新增tsconfig-serve.json文件

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "types": [
      "node"
    ],
    "lib": [
      "es2017",
      "es2016",
      "es2015",
      "dom"
    ]
  },
  "include": [
    "main.ts"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

　　

6. 運行electron應用

cnpm i
npm start

cnpm 安裝新增的應用包，使用npm start來啟動electron應用。記得在起electron應用前，保證4200端口未被占用。

 

相關參數文檔：

• angular5+electron: https://www.jianshu.com/p/24d7d5c357c3
• angular9+electron8: https://github.com/maximegris/angular-electron
• electron api說明：https://github.com/demopark/electron-api-demos-Zh_CN  文檔是一個electron應用的方式。