electron的安裝與應用
阿新 • • 發佈：2020-06-30
electron的安裝與應用
官方文件
https://www.electronjs.org/docs
npm安裝electron,為了快速安裝，使用淘寶源映象
npm init
npm install electron --save-dev --registry=https://registry.npm.taobao.org
安裝過程中可能會出現
Downloading electron-v9.0.5-win32-x64.zip: [----------------------------------------------------------------------------------] 0% ETA: 0.0 seconds一直是0% 的問題，解決問題參考文件：[https://blog.csdn.net/dling8/article/details/105434000](https://blog.csdn.net/dling8/article/details/105434000 """)
解決方式： 1.修改npm配置 npm config edit 2.在開啟的檔案中增加下面一行配置，然後儲存關閉 electron_mirror=https://npm.taobao.org/mirrors/electron/ 3.重新安裝 npm install electron --save-dev --registry=https://registry.npm.taobao.org
檢查是否安裝成功
方式1：
執行 npx electron -v 可以打印出版本號
方式二：.\node_modules\.bin\electron 可以彈出一個介面
執行
安裝完成後，寫一個hello world案例
- 在根目錄下建立
index.html檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> hello world! </body> </html>
- 在根目錄下建立
main.js檔案，檔名稱可以任意，一般使用main.js和index.html
const { app, BrowserWindow } = require('electron')
let win=null
app.whenReady().then(r => {
// 建立瀏覽器視窗
win = new BrowserWindow({
width: 800,
height: 600
})
// 並且為你的應用載入index.html
win.loadFile("index.html")
win.on("close",()=>{
win=null
})
})
- 如果js檔名稱是main.js,那麼需要在
package.json中修改
# 預設是 "main": "index.js"
修改為："main": "main.js"
啟動hello world程式
- 通過electron命令啟動
.\node_modules\.bin\electron .
或者
electron .
- 將electron命令，封裝成npm指令碼啟動
在package.json檔案的"scripts"欄位新增start欄位：
"scripts": {
"start": "electron ."
}
然後執行 npm start 即可啟動
打包生成 .exe執行檔案
參考文件資料：https://www.cnblogs.com/luzhanshi/p/11045096.html
1. 全域性安裝 electron-packager
npm install electron-packager -g --registry=https://registry.npm.taobao.org
2. 在package.json中編寫執行指令碼
"scripts": {
"package": "electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --app-version=0.0.1 --overwrite --ignore=node_modules"
},
各個引數介紹：
HelloWorld ：你將要生成的exe檔案的名稱
--platform=win32：確定了你要構建哪個平臺的應用,可取的值有 darwin, linux, mas, win32
--arch=x64：決定了使用 x86 還是 x64 還是兩個架構都用
--icon=computer.ico：自定義設定應用圖示
--out=./out：指定打包檔案輸出的資料夾位置,當前指定的為專案目錄下的out資料夾
--asar：該引數可以不加，如果加上，打包之後應用的原始碼會以.asar格式存在，否則會以資料夾形式存在
--app-version=0.0.1：生成應用的版本號
--overwrite：覆蓋原有的build,讓新生成的包覆蓋原來的包
--ignore=node_modules：如果加上該引數，專案裡node_modules模組不會被打包進去
--electron-version 5.0.0：指定當前要構建的electron的版本,需要和當前的版本一致,具體可以在package.json檔案中檢視,可以不加
3. npm run package 打包
electron的一些應用
1. 渲染程序中的一些應用
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">獲取檔案資訊</button>
<div id="div1"></div>
<button id="btn2">開啟新視窗</button>
<script src="render/index.js"></script>
<a id="a1" href="https://www.baidu.com">我是一個連結</a>
<button id="btn3">開啟圖片</button>
<img id="img1" src="">
<button id="btn4">開啟訊息對話方塊</button>
<button id="btn5">底部彈出訊息</button>
<div>
啟用碼：<span id="span1">fafafafafafd</span>
<button id="btn6">複製啟用碼</button>
</div>
<script>
/*electron 複製文字到剪下板*/
let {clipboard} = require("electron")
let span1 = document.getElementById("span1")
let btn6 = document.getElementById("btn6")
btn6.onclick = () => {
clipboard.writeText(span1.innerHTML)
alert("複製成功")
}
/*electron底部彈出訊息*/
let msg = {
title: "這是訊息頭",
body: "這是訊息主體"
}
new window.Notification(msg.title, msg)
/*electron使用訊息對話方塊*/
let btn4 = document.getElementById("btn4")
btn4.onclick = () => {
dialog.showMessageBox({
type: "info",
title: "訊息對話方塊",
message: "是不是要去",
//點選按鈕時，會返回按鈕在陣列中的索引，從0開始
buttons: ["去", "不去了"]
}).then(res => {
console.log(res)
})
}
/*electron中選擇檔案對話方塊的使用*/
let {dialog} = require("electron").remote
let btn3 = document.getElementById("btn3")
btn3.onclick = () => {
dialog.showOpenDialog({
title: "請選擇你喜歡的圖片",
//可以設定預設開啟的路徑
//defaultPath:""
//可以設定顯示的檔案格式
filters: [{name: "", extensions: ["jpg"]}],
//可以設定按鈕的文字
//buttonLabel:"開啟圖片"
}).then(res => {
console.log(res)
let img1 = document.getElementById("img1")
img1.setAttribute("src", res.filePaths[0])
}).catch(err => {
console.log(err)
})
}
/*預設的a標籤是在當前桌面視窗中直接開啟，我們設定成在外部的瀏覽器中開啟，使用shell*/
let shell = require("electron").shell
let a1 = document.getElementById("a1")
a1.onclick = function (e) {
//先清除預設
e.preventDefault()
//獲取href連結
let href = this.getAttribute("href");
//通過shell開啟
shell.openExternal(href)
}
/*在渲染程序中實現滑鼠右鍵選單功能，要使用remote*/
document.oncontextmenu = (e) => {
e.preventDefault()
let template = [
{
label: "貼上"
},
{
label: "複製"
}
]
let remote = require("electron").remote
remote.Menu.buildFromTemplate(template).popup({window: remote.getCurrentWindow()})
}
/*在渲染程序中通過remote使用只有主程序才能使用的electron功能,開啟新視窗
* 除了此方式之外，還可以使用window.open()開啟子視窗，不過子視窗會隨著父視窗的關閉而關閉
*
* */
let btn2 = document.getElementById("btn2")
let BrowserWindow = require("electron").remote.BrowserWindow
btn2.onclick = () => {
let newWin = new BrowserWindow({width: 800, height: 800})
newWin.loadURL("https://www.baidu.com")
newWin.on("close", () => {
newWin = null
})
}
/*在electron中使用node的原生api讀取檔案資訊*/
let fs = require('fs')
let btn = document.getElementById("btn")
let div1 = document.querySelector("#div1")
div1.innerHTML = "未點選"
btn.onclick = () => {
console.log("點選了按鈕")
fs.readFile("./fileTest.txt", ((err, data) => {
div1.innerHTML = data
}))
}
</script>
</body>
</html>
2. 主程序的一些應用
main.js
const {app, BrowserWindow} = require('electron')
let win = null
app.whenReady().then(r => {
win = new BrowserWindow({
width: 800,
height: 600,
//在渲染程序中使用require("fs")時，需要新增這一行，否則會報錯 require is not defined
webPreferences: {nodeIntegration: true},
})
//在主程序中使用選單功能的js
require("./main/menu.js")
win.loadFile("index.html")
// 開啟開發者工具
win.webContents.openDevTools()
win.on("close", () => {
win = null
})
})
menu.js
//electron主程序中選單的建立和使用
let {Menu, BrowserWindow} = require("electron")
function a() {
let win = new BrowserWindow({
width: 500, height: 500
})
win.loadURL("https://www.baidu.com")
win.on("closed", () => {
win = null
})
}
let template = [
{
label: "語言",
submenu: [{
label: "java",
//可以設定子選單的快捷鍵
accelerator: "ctrl + n",
//每個子選單都可以繫結監聽事件
click: a
}, {
label: "python"
}
]
},
{
label: "平臺",
submenu: [{
label: "瀏覽器",
}, {
label: "桌面",
}
]
}]
Menu.setApplicationMenu(Menu.buildFromTemplate(template))