一、前言
項目本來打算采用B/S架構去做的,瀏覽器網址方式打開還是讓用戶不方便;
二、使用electron集成桌面應用
本身項目是使用vue-cli開發的,在使用electron之前,需要將本身的項目打包好后打開index.html能顯示網頁.因為剛接觸便直接拿官方demo進行打包了.
1.克隆官方demo:git clone https://github.com/electron/electron-quick-start
2.cd electron-quick-start->npm install->npm start 到這就能運行demo了
3.將自己項目打包好的dist文件中的index.html和static文件放入electron-quick-start(跟目錄)文件中,重新start一下,運行結果如圖
4.在package.json中增加如下代碼
"pack":"electron-packager . 'health-terminal' --platform=win32 --arch=x64 --out=./out --asar --app-version=0.0.1"
安裝打包插件
cnpm install electron --save-dev //安裝electron cnpm install electron-packager --save-dev //這個是打成exe文件的插件,之后要用,提前下載好
運行npm run pack 打包成功
npm run pack
文件結構
5.在electron中進行網絡請求時需注意,因為本身項目使用了反向代理,打包后請求路徑前面會增加本地路徑“file:e/”,解決方式:
在config-dev.env.js(測試環境)和pro-env.js(正式環境)添加API_ROOT:'192.168.0.0:8080'(根據自己的需要修改)
新建一個js文件導出process.env.API_ROOT;
最后在main.js中引用
請求路徑前加上this.root
至此一個桌面應用已經打包完成
以下是界面配置
在main.js 當中通過配置 BrowserWindow 來改變外觀 width Integer - 窗口寬度,單位像素. 默認是 800 . height Integer - 窗口高度,單位像素. 默認是 600 . x Integer - 窗口相對於屏幕的左偏移位置.默認居中. y Integer - 窗口相對於屏幕的頂部偏移位置.默認居中. useContentSize Boolean - width 和 height 使用web網頁size, 這意味着實際窗口的size應該包括窗口框架的 size,稍微會大一點,默認為 false . center Boolean - 窗口屏幕居中. minWidth Integer - 窗口最小寬度,默認為 0 . minHeight Integer - 窗口最小高度,默認為 0 . maxWidth Integer - 窗口最大寬度,默認無限制. maxHeight Integer - 窗口最大高度,默認無限制. resizable Boolean - 是否可以改變窗口size,默認為 true . movable Boolean - 窗口是否可以拖動. 在 Linux 上無效. 默認為 true . minimizable Boolean - 窗口是否可以最小化. 在 Linux 上無效. 默認為 true . maximizable Boolean - 窗口是否可以最大化. 在 Linux 上無效. 默認為 true . closable Boolean - 窗口是否可以關閉. 在 Linux上無效. 默認為 true . alwaysOnTop Boolean - 窗口是否總是顯示在其他窗口之前. 在 Linux上無效. 默認為 false . fullscreen Boolean - 窗口是否可以全屏幕. 當明確設置值為When false ,全屏化按鈕將會隱藏,在 macOS 將禁用. 默認 false . fullscreenable Boolean - 在 macOS 上,全屏化按鈕是否可用,默認為 true . skipTaskbar Boolean - 是否在任務欄中顯示窗口. 默認是 false . kiosk Boolean - kiosk 方式. 默認為 false . title String - 窗口默認title. 默認 "Electron" . icon NativeImage - 窗口圖標, 如果不設置,窗口將使用可用的默認圖標. show Boolean - 窗口創建的時候是否顯示. 默認為 true . frame Boolean - 指定 false 來創建一個 Frameless Window. 默認為 true . acceptFirstMouse Boolean - 是否允許單擊web view來激活窗口 . 默認為 false . disableAutoHideCursor Boolean - 當 typing 時是否隱藏鼠標.默認 false . autoHideMenuBar Boolean - 除非點擊 Alt ,否則隱藏菜單欄.默認為 false . enableLargerThanScreen Boolean - 是否允許允許改變窗口大小大於屏幕. 默認是 false . backgroundColor String -窗口的 background color 值為十六進制,如 #66CD00 或 #FFF 或 #80FFFFFF (支持透明 度). 默認為在 Linux和 Windows 上為 #000 (黑色) , Mac上為 #FFF (或透明). hasShadow Boolean - 窗口是否有陰影. 只在 macOS 上有效. 默認為 true . darkTheme Boolean - 為窗口使用 dark 主題, 只在一些擁有 GTK+3 桌面環境上有效. 默認為 false . transparent Boolean - 窗口 透明. 默認為 false . type String - 窗口type, 默認普通窗口. 下面查看更多. titleBarStyle String - 窗口標題欄樣式. 下面查看更多. webPreferences Object - 設置界面特性. 下面查看更多.
如何隱藏electron窗體的菜單欄
electron中默認帶有頂部菜單欄,有時候我們的應用不需要。
再main.js文件中設置
const electron = require('electron') const path = require('path') const url = require('url') let mainWindow const Menu = electron.Menu function createWindow () {
// 隱藏菜單欄
Menu.setApplicationMenu(null) // Create the browser window.設置窗口寬高,最小寬高,圖標等 mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'}) mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login") mainWindow.on('closed', function () { mainWindow = null }) }