zoukankan html css js c++ java

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({
     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端口未被占用。