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))