[[344654]]

 使用electron
本身項(xiàng)目是使用vue-cli開發(fā)的，在使用electron之前，需要先將開發(fā)好的vue的項(xiàng)目打包生成打包之后的html文件及其他靜態(tài)資源文件。然后就可以直接拿官方demo進(jìn)行打包了。

克隆官方demo

git clone https://github.com/electron/electron-quick-start 

啟動項(xiàng)目

cd electron-quick-start->npm install->npm start   到這就能運(yùn)行demo了 

效果圖如下：

放入自己項(xiàng)目
將自己項(xiàng)目打包好的dist文件中的index.html和其他文件放入electron-quick-start（根目錄）文件夾中，重新start一下，運(yùn)行結(jié)果如圖

這樣一個現(xiàn)有的vue項(xiàng)目就已經(jīng)集成到了electron中。

打包生成exe文件
項(xiàng)目集成到了electron中，下一步就是打包生成我們需要的桌面端exe文件。

安裝插件

npm install electron-packager --save-dev 

添加命令行
在package.json中增加以下代碼命令：

"pack":"electron-packager . testexe --platform=win32 --arch=x64  --out=./out --asar --app-version=0.0.1" 

• testexe是打包生成的exe文件名字
• ./out是輸出路徑
• app-version=0.0.1 是版本號

打包
運(yùn)行命令打包成功

npm run pack 

打包之后文件結(jié)構(gòu)：

雙擊exe文件既可運(yùn)行。

注意在electron中進(jìn)行網(wǎng)絡(luò)請求時，因?yàn)楸旧眄?xiàng)目使用了反向代理，打包后請求路徑前面會增加本地路徑“file:e/”，解決方式：

在項(xiàng)目中添加請求地址全路徑，可以根據(jù)自己需求修改

隱藏菜單欄
electron中默認(rèn)帶有頂部菜單欄，有時候我們的應(yīng)用不需要?？梢栽趍ain.js中設(shè)置，隱藏菜單。代碼如下：

// Modules to control application life and create native browser window 
const {app, BrowserWindow,Menu} = require('electron') 
const path = require('path') 
 
function createWindow () { 
  //隱藏菜單 
  Menu.setApplicationMenu(null) 
  // Create the browser window. 
  const mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: { 
      preload: path.join(__dirname, 'preload.js') 
    } 
  }) 
 
  // and load the index.html of the app. 
  mainWindow.loadFile('index.html') 
 
  // Open the DevTools. 
  // mainWindow.webContents.openDevTools() 
} 

這樣默認(rèn)的菜單欄就隱藏了，下面提供一些常用的配置項(xiàng)：

在main.js 當(dāng)中通過配置 BrowserWindow 來改變外觀 
 
width Integer - 窗口寬度,單位像素. 默認(rèn)是 800 . 
 
height Integer - 窗口高度,單位像素. 默認(rèn)是 600 . 
 
x Integer - 窗口相對于屏幕的左偏移位置.默認(rèn)居中. y Integer - 窗口相對于屏幕的頂部偏移位置.默認(rèn)居中. useContentSize Boolean - width 和 height 使用web網(wǎng)頁size, 這意味著實(shí)際窗口的size應(yīng)該包括窗口框架的 size，稍微會大一點(diǎn)，默認(rèn)為 false . center 
 
Boolean - 窗口屏幕居中. minWidth Integer - 窗口最小寬度，默認(rèn)為 0 . 
 
minHeight Integer - 窗口最小高度，默認(rèn)為 0 . 
 
maxWidth Integer - 窗口最大寬度，默認(rèn)無限制. 
 
maxHeight Integer - 窗口最大高度，默認(rèn)無限制. 
 
resizable Boolean - 是否可以改變窗口size，默認(rèn)為 true . 
 
movable Boolean - 窗口是否可以拖動. 在 Linux 上無效. 默認(rèn)為 true . 
 
minimizable Boolean - 窗口是否可以最小化. 在 Linux 上無效. 默認(rèn)為 true . 
 
maximizable Boolean - 窗口是否可以最大化. 在 Linux 上無效. 默認(rèn)為 true . 
 
closable Boolean - 窗口是否可以關(guān)閉. 在 Linux上無效. 默認(rèn)為 true . 
 
alwaysOnTop Boolean - 窗口是否總是顯示在其他窗口之前. 在 Linux上無效. 默認(rèn)為 false . 
 
fullscreen Boolean - 窗口是否可以全屏幕. 當(dāng)明確設(shè)置值為When false ，全屏化按鈕將會隱藏，在 macOS 將禁用. 默認(rèn) false . 
 
fullscreenable Boolean - 在 macOS 上，全屏化按鈕是否可用，默認(rèn)為 true . skipTaskbar Boolean - 是否在任務(wù)欄中顯示窗口. 默認(rèn)是 false . 
 
kiosk Boolean - kiosk 方式. 默認(rèn)為 false . title String - 窗口默認(rèn)title. 默認(rèn) "Electron" . 
 
icon NativeImage - 窗口圖標(biāo), 如果不設(shè)置，窗口將使用可用的默認(rèn)圖標(biāo). 
 
show Boolean - 窗口創(chuàng)建的時候是否顯示. 默認(rèn)為 true . 
 
frame Boolean - 指定 false 來創(chuàng)建一個 Frameless Window. 默認(rèn)為 true . 
 
acceptFirstMouse Boolean - 是否允許單擊web view來激活窗口 . 默認(rèn)為 false . 
 
disableAutoHideCursor Boolean - 當(dāng) typing 時是否隱藏鼠標(biāo).默認(rèn) false . 
 
autoHideMenuBar Boolean - 除非點(diǎn)擊 Alt ，否則隱藏菜單欄.默認(rèn)為 false . 
 
enableLargerThanScreen Boolean - 是否允許允許改變窗口大小大于屏幕. 默認(rèn)是 false . 
 
backgroundColor String -窗口的 background color 值為十六進(jìn)制,如 #66CD00 或 #FFF 或 #80FFFFFF (支持透明 度). 默認(rèn)為在 Linux和 Windows 上為 #000 (黑色) , Mac上為 #FFF (或透明). 
 
hasShadow Boolean - 窗口是否有陰影. 只在 macOS 上有效. 默認(rèn)為 true . 
 
darkTheme Boolean - 為窗口使用 dark 主題, 只在一些擁有 GTK+3 桌面環(huán)境上有效. 默認(rèn)為 false . 
 
transparent Boolean - 窗口 透明. 默認(rèn)為 false . 
 
type String - 窗口type, 默認(rèn)普通窗口. 下面查看更多. titleBarStyle String - 窗口標(biāo)題欄樣式. 下面查看更多. 
 
webPreferences Object - 設(shè)置界面特性. 下面查看更多.