Electron 中使用Angular做UI
- 只打包angular編譯后的
- 環(huán)境
- win10 64x
- 版本
- electron 3.0.5
- angular 6.x
- ng-alain 2.0.0-beta.5
- 調(diào)試使用兩個進程
- 只打包編譯后的 angular 代碼
- windows下的安裝艺玲，升級
- 打包與升級 參考： https://segmentfault.com/a/1190000010271226
創(chuàng)建 angular項目
- 創(chuàng)建angular項目
- 創(chuàng)建完成最后運行一下確認項目沒有問題
// 因為使用 ng-alain 所有選用 less 做 css 預(yù)編譯
ng new electron-ng-alain --style less
- 添加ng-alain
- 創(chuàng)建完成最后運行一下確認項目沒有問題
// 這里我選用最新的ng-alain（我創(chuàng)建的時候 "ng-alain": "^2.0.0-beta.5"）
ng add ng-alain@next
我在運行的時候出現(xiàn)了一些問題
這里我選擇直接注釋掉這段代碼
編譯出錯
這個錯誤我選擇刪除這個錯誤管道
瀏覽器報錯
缺少一個管道
因為是beta版本的關(guān)系胁出，正版應(yīng)該會解決
我也剛遇到了ng-zorro的圖標不顯示的問題 在項目下運行一下 ng g ng-zorro-antd:fix-icon （參考：http://ng.ant.design/components/icon/zh
確保ng-alain能正常運行
添加Electron
- 添加一個app目錄（這個目錄很重要）
- 在app目錄中創(chuàng)建electron 的程序文件（mian.js 和 package.json)
- main.js （electron 的入口文件）
- package.json （electron 中使用的npm包钧大，現(xiàn)在我只知道這樣解決electron打包的問題。如果你知道有更好的辦法可以告訴我。）
原目錄結(jié)構(gòu)
修改后目錄結(jié)構(gòu)
添加根目錄 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包 (這里當(dāng)然要切換到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")
// 運行環(huán)境判斷
var args = process.argv.slice(1);
dev = args.some(function (val) { return val === '--dev'; });
console.log(dev);
// 設(shè)置調(diào)試環(huán)境和運行環(huán)境 的渲染進程路徑
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()
}
})
// 主進程監(jiān)聽渲染進程傳來的信息
ipcMain.on('update', (e, arg) => {
console.log("update");
updateHandle();
});
// 檢測更新，在你想要檢查更新的時候執(zhí)行，renderer事件觸發(fā)后的操作自行編寫
function updateHandle() {
let message = {
error: '檢查更新出錯',
checking: '正在檢查更新……',
updateAva: '檢測到新版本悯仙，正在下載……',
updateNotAva: '現(xiàn)在使用的就是最新版本，不用更新',
};
const os = require('os');
// http://localhost:5500/up/ 更新文件所在服務(wù)器地址
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) => {
// 關(guān)閉程序安裝新的軟件
autoUpdater.quitAndInstall();
})
win.webContents.send('isUpdateNow')
});
//執(zhí)行自動更新檢查
autoUpdater.checkForUpdates();
}
// 通過main進程發(fā)送事件給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() {
// 監(jiān)聽主進程
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() {
// 向主進程發(fā)送請求
this._e.ipcRenderer.send('update');
}
}
配置 angular.json文件
- 修改 編譯輸出目錄
- 這個要對應(yīng)著 main.js中的運行環(huán)境目錄
"outputPath": "app/dist",
配置根目錄下的 package.json文件
- 配置運行命令方便運行
- concurrently 這個命令是同時運行兩條 node 命令
- npm i -g concurrently (我這里全局安裝了）（詳細用法百度一下）
- concurrently 這個命令是同時運行兩條 node 命令
- build 打包配置項 參考 https://www.electron.build/configuration/configuration
- keywords 打包需要的目錄 （具體我也不是很懂怎么用）
- 如果你復(fù)制使用請去掉注釋
"scripts": {
...
// 調(diào)試
"dev": "concurrently \"ng serve\" \"electron . --dev\"",
// 打包
"win-pack": "ng build --prod --build-optimizer && electron-builder -w"
},
// 打包配置項
"build": {
// 應(yīng)用id
"appId": "con.Tast.app",
// 應(yīng)用名稱
"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="./">
全部完成
// 運行調(diào)試
npm run dev
// 打包
npm run win-pack
打包&更新
- 打包完成雙擊.exe 文件就可以安裝了
- 更新只要修改app/package.json 文件中的版本號锡垄，然后重新打包即可
- 把打包好將 4個文件放到服務(wù)器中
-
我這里需要用管理員運行才能更新（打包配置中應(yīng)該可以修改）
只需要這個4個
如果你也使用windows 那么你也可以使用 iis創(chuàng)建測試服務(wù)器
- iis的安裝 略過
-
我遇到了問題說一下
