Electron & Angular

2018-10-21 本文已影响81人 YLPeach

Electron 中使用Angular做UI

只打包angular编译后的
环境
- win10 64x
版本
- electron 3.0.5
- angular 6.x
- ng-alain 2.0.0-beta.5
调试使用两个进程
只打包编译后的 angular 代码
windows下的安装，升级
打包与升级参考： https://segmentfault.com/a/1190000010271226

创建 angular项目

创建angular项目
- 创建完成最后运行一下确认项目没有问题

// 因为使用 ng-alain 所有选用 less 做 css 预编译
ng new electron-ng-alain --style less

添加ng-alain
- 创建完成最后运行一下确认项目没有问题

// 这里我选用最新的ng-alain（我创建的时候 "ng-alain": "^2.0.0-beta.5"）
ng add ng-alain@next

我在运行的时候出现了一些问题
这里我选择直接注释掉这段代码
编译出错
这个错误我选择删除这个错误管道
浏览器报错
 缺少一个管道
因为是beta版本的关系，正版应该会解决
我也刚遇到了ng-zorro的图标不显示的问题在项目下运行一下 ng g ng-zorro-antd:fix-icon （参考：http://ng.ant.design/components/icon/zh
确保ng-alain能正常运行

添加Electron

添加一个app目录（这个目录很重要）
在app目录中创建electron 的程序文件（mian.js 和 package.json)
- main.js （electron 的入口文件）
- package.json （electron 中使用的npm包，现在我只知道这样解决electron打包的问题。如果你知道有更好的办法可以告诉我。）
  原目录结构
   修改后目录结构

添加根目录 npm 包

// 添加electron必须的 【"electron": "^3.0.5"】
npm install --save-dev electron
// 打包这里使用 electron-builder 【"electron-builder": "^20.28.4"】
npm install --save-dev electron-builder

// angular 中与electron主进程通信依赖包
npm install --save ngx-electron

添加app目录中的 npm包 (这里当然要切换到app目录下）

app/package.json (先编写这个文件保存，不然添加npm包会报错）

{
  "name": "electron-ng-alain",
  "version": "1.0.0",
  "main": "main.js",
  "dependencies": {
  }
}

// 升级依赖 electron-updater
npm install --save electron-updater

编写electron 入口文件

main.js

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

// 注意这个autoUpdater不是electron中的autoUpdater
const { autoUpdater } = require("electron-updater")

// 运行环境判断
var args = process.argv.slice(1);
dev = args.some(function (val) { return val === '--dev'; });

console.log(dev);
// 设置调试环境和运行环境 的渲染进程路径
const winURL = dev ? 'http://localhost:4200' :
`file://${__dirname}/dist/index.html`;

let win

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 })

  // load the dist folder from Angular
  win.loadURL(winURL);

  // Open the DevTools optionally:
  // win.webContents.openDevTools()

  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)


app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  console.log(__static)
  if (win === null) {
    createWindow()
  }
})

// 主进程监听渲染进程传来的信息
ipcMain.on('update', (e, arg) => {
  console.log("update");
  updateHandle();
});

// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
function updateHandle() {
  let message = {
    error: '检查更新出错',
    checking: '正在检查更新……',
    updateAva: '检测到新版本，正在下载……',
    updateNotAva: '现在使用的就是最新版本，不用更新',
  };
  const os = require('os');
  // http://localhost:5500/up/ 更新文件所在服务器地址
  autoUpdater.setFeedURL('http://localhost:5500/up/');
  autoUpdater.on('error', function (error) {
    sendUpdateMessage(message.error)
  });
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking)
  });
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva)
  });
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', (progressObj) => {
    win.webContents.send('downloadProgress', progressObj)
  })
  // 下载完成事件
  autoUpdater.on('update-downloaded',  (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {
    ipcMain.on('isUpdateNow', (e, arg) => {
      // 关闭程序安装新的软件
      autoUpdater.quitAndInstall();
    })
    win.webContents.send('isUpdateNow')
  });

  //执行自动更新检查
  autoUpdater.checkForUpdates();
}

// 通过main进程发送事件给renderer进程，提示更新信息
// win = new BrowserWindow()
function sendUpdateMessage(text) {
  win.webContents.send('message', text)
}

渲染进程

angular 与 electron通信用到前面我们安装的ngx-electron
app.module.ts
- 添加 NgxElectronModule

import { NgxElectronModule } from 'ngx-electron';

@NgModule({
  ...
  imports: [
    ...
    NgxElectronModule
  ],
})

在组件中使用

import { ElectronService } from 'ngx-electron';

export class DashboardComponent implements OnInit {
  constructor(
    private _e: ElectronService,
  ) { }

  ngOnInit() {
    // 监听主进程
    this._e.ipcRenderer.on('message', (event, message) => {
      alert(message);
    });
    this._e.ipcRenderer.on('isUpdateNow', (event, message) => {
      this.s1 = '下载完成';
      alert('下载完成');
      this._e.ipcRenderer.send('isUpdateNow');
    });
    this._e.ipcRenderer.on('downloadProgress', (event, message) => {
      this.s2 = message;
    });

  }
  upData() {
    // 向主进程发送请求
    this._e.ipcRenderer.send('update');
  }

}

配置 angular.json文件

修改编译输出目录
这个要对应着 main.js中的运行环境目录

"outputPath": "app/dist",

配置根目录下的 package.json文件

配置运行命令方便运行
- concurrently 这个命令是同时运行两条 node 命令
  - npm i -g concurrently (我这里全局安装了）（详细用法百度一下）
build 打包配置项参考 https://www.electron.build/configuration/configuration
keywords 打包需要的目录（具体我也不是很懂怎么用）
如果你复制使用请去掉注释

 "scripts": {
    ...
    // 调试
    "dev": "concurrently \"ng serve\" \"electron . --dev\"",
    // 打包
    "win-pack": "ng build --prod --build-optimizer && electron-builder -w"
  },
  // 打包配置项
 "build": {
    //  应用id
    "appId": "con.Tast.app",
    // 应用名称
    "productName": "Tast",
    // 打包输目录
    "directories": {
      "output": "win"
    },
    // 更新配置项 参考 https://www.electron.build/auto-update
    "publish": [
      {
        "provider": "generic",
        "url": "http://localhost:5500/up/"
      }
    ],
    "win": {
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true
    }
  },
  // 打包渲染进程的所在文件 
  "keywords": [
    "dist"
  ]

修改 html模板文件

src\index.html

<base href="./">

全部完成

// 运行调试
npm run dev
// 打包
npm run win-pack

打包&更新

打包完成双击.exe 文件就可以安装了
更新只要修改app/package.json 文件中的版本号，然后重新打包即可
把打包好将 4个文件放到服务器中
我这里需要用管理员运行才能更新（打包配置中应该可以修改）

只需要这个4个

如果你也使用windows 那么你也可以使用 iis创建测试服务器

iis的安装略过
我遇到了问题说一下

祝你好运！！

源码： https://github.com/PeachT/Electron-ng-alain