Electron 筆記
1. 視窗相關基礎引用
- 連結位址： Electron的BrowserWindow設定參數
// 從electron中引入app和BrowserWindow子產品
const {app, BrowserWindow} = require('electron');
// 當 Electron 完成初始化時被觸發 ready
app.on('ready', function () {
// 建立一個可視化的視窗
let bw1 = new BrowserWindow({
width: 800, // 視窗寬度800px
height: 600, // 視窗高度600px
// resizable: false, // 視窗是否可以改變尺寸. 預設值為true
alwaysOnTop: true, // 視窗是否永遠在别的視窗的上面. 預設值為false
title: '淘淘課堂', // 視窗的預設标題. 預設值為 "Electron"
// frame: false, // 要建立無邊框視窗，隻需在 BrowserWindow 的 options 中将 frame 設定為 false：
});
// 加載指定的頁面到視窗中，支援絕對路徑，但是推薦使用相對
// 路徑，而且路徑在解析的時候會被處理，相對路徑預設指向
// 應用程式的根目錄
bw1.loadFile('./layout/index.html');
// 支援加載遠端檔案，支援http協定，也支援file協定
// bw1.loadURL('https://www.miaov.com');
});
2. 與菜單有關的基礎引用
const {app, BrowserWindow, Menu, MenuItem} = require('electron');
app.on('ready', () => {
// 建立一個視窗對象
let bw1 = new BrowserWindow();
// 建立一個菜單對象
let m1 = new Menu();
// 建立一個菜單單項
let mi1 = new MenuItem({
type: 'normal', // 一般菜單
label: '檔案'
});
// 把菜單單項添加到指定菜單對象
m1.append(mi1);
// 建立菜單項
let mi2 = new MenuItem({
type: 'submenu', // 帶有下拉選項的菜單
label: '檢視',
submenu: [{
type: 'normal',
label: '檔案'
},
{
type: 'separator' // 分隔符
},
{
type: 'normal',
label: '檔案夾'
},
{
type: 'checkbox', // 複選框
label: '選項一',
checked: true
},
{
type: 'separator'
},
{
type: 'radio',
label: 'AAAA'
},
{
type: 'radio', // 單選框
label: 'BBBB'
},
{
type: 'separator'
},
// {
// role: 'quit',
// label: '退出'
// }
{
type: 'normal',
label: '退出',
click() {
app.quit();
}
}
]
});
m1.append(mi2);
// 指定該菜單顯示的主體（具體哪個視窗、右鍵-上下文）
/**
* 菜機關置：
* 1. 應用程式的頂層菜單
* 2. 上下文菜單
*/
// 把菜單添加到應用程式視窗最頂層
Menu.setApplicationMenu(m1);
});
3. 程序之間的資料通信
-
ipcMain
const {app, BrowserWindow, ipcMain} = require('electron');
// ipcMain 從主程序到渲染程序的異步通信。
// let username = 'Clairoll';
// 将username 挂載到全局對象上
// global.username = username;
let datas ={
username: 'Clairoll',
gender: '男'
}
app.on('ready', () => {
let bw = new BrowserWindow();
bw.webContents.openDevTools(); // 打開開發者工具
bw.loadFile('./layout/index.html');
// 監聽渲染程序 ipcRenderer 發送的消息
ipcMain.on('getData', function(e,key){
// console.log(key);
// e.sender => 通過這個對象傳回消息給渲染程序
// datas[key] => 渲染程序請求的資料
e.sender.send('sendData', datas[key]);
})
// 主程序主動發送消息到渲染程序
setTimeout(() => {
bw.webContents.send('hello', 'hello........', 10, 20, 30);
}, 2000);
let bw1 = new BrowserWindow();
bw1.webContents.openDevTools(); // 打開開發者工具
bw1.loadFile('./layout/index1.html');
});
-
ipcRenderer
- 頁面1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>App</h1>
<button>按鈕</button>
<button>按鈕2</button>
<script>
// 在渲染程序中不能直接擷取到主程序中的資料
// console.log(username);
// 在渲染程序中也可以使用electron對象
// electron對象下面有的屬性方法隻能在主程序中使用，有的是在渲染程序中使用
// 如果需要通路主程序中的資料，那麼我們可以通過渲染程序中的electron下有一個子對象：remote =》 主程序
const {remote, ipcRenderer} = require('electron');
// ipcRenderer 從渲染器程序到主程序的異步通信
// 該對象下有一個方法：getGlobal，可以通過該方法來擷取主程序中的全局資料,但是并不推薦
// console.log(remote.getGlobal('username')); // Clairoll
const btns = document.querySelectorAll('button');
// 點選按鈕向主程序發送擷取username的請求
btns[0].onclick = function(){
ipcRenderer.send('getData', 'username');
}
// 監聽從主程序傳回來的消息 data 則是一開始使用者請求的資料
ipcRenderer.on('sendData', function(e, data){
console.log(data);
})
// 監聽從主程序主動發送過來的消息，并擷取資料
ipcRenderer.on('hello', function(e, ...data){
console.log(data);
})
// 點選按鈕2的時候往
btns[1].onclick = function() {
localStorage.setItem('user', 'Clairoll');
}
</script>
</body>
</html>
- 頁面2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>App2</h1>
<button>按鈕</button>
<script>
const buttons = document.querySelectorAll('button');
buttons[0].onclick = function () {
console.log(localStorage.getItem('user'));
}
</script>
</body>
</html>
![如何用electron-vue 建立Vue項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)