我正在制作一個有兩個按鈕的電子 js 應用程式。我已經為它們分配了點擊事件監聽器。當有人點擊它們時，我想做的是分別增加或減少亮度。
我在 node.js 中構建了一個函式，如果我們使用 sudo 命令運行，它確實會增加亮度。
這是功能：
let fs = require("fs");
function inc() {
var data = fs.readFileSync(
"/sys/class/backlight/amdgpu_bl1/brightness",
"utf-8"
);
var newData = parseInt(data) 10;
if (newData > 255) {
newData = 255;
} else if (newData < 0) {
newData = 0;
}
newData = newData.toString();
fs.writeFileSync(
"/sys/class/backlight/amdgpu_bl1/brightness",
newData,
"utf-8"
);
}
index.html 代碼是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button onclick="incBright()"> </button>
<button onclick="decBright()">-</button>
<script src="script.js"></script>
</body>
</html>
當有人單擊“ ”按鈕時，我想執行 inc() 函式！ elctron js 應用程式視窗
有人可以告訴我，是否可以這樣做。
我正在使用 linux
我對這些東西一無所知
uj5u.com熱心網友回復：
要在主執行緒和渲染執行緒之間進行通信，您需要熟悉 Electron 的行程間通信和背景關系隔離。
此外，您還需要熟悉 Electron 的ipcRenderer和ipcMain模塊。
在亮度調整時，您將希望通過使用 IPC 將該調整傳達給主執行緒。為了安全地與主執行緒通信，應該使用preload.js腳本。
該preload.js腳本集成到應用程式視窗的構建中，允許執行允許的操作。
下面是一個預加載腳本，它使用“通道名稱”在主執行緒和渲染執行緒之間傳遞資訊。
不直接在
preload.js腳本中實作具體功能是一個很好的設計決策。相反，使用預加載腳本作為看門人，只允許執行緒之間的訊息。這將大大簡化您的預加載腳本并分離您的關注點。
下面是一個預加載腳本示例，它將滿足您的要求，注意頻道名稱brightness:increment和brightness:decrement. 您可以將這些頻道名稱重命名為您喜歡的任何名稱。
preload.js（主執行緒）
// Import the necessary Electron components.
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;
// White-listed channels.
const ipc = {
'render': {
// From render to main.
'send': [
'brightness:increment',
'brightness:decrement'
],
// From main to render.
'receive': [],
// From render to main and back again.
'sendReceive': []
}
};
// Exposed protected methods in the render process.
contextBridge.exposeInMainWorld(
// Allowed 'ipcRenderer' methods.
'ipcRender', {
// From render to main.
send: (channel, args) => {
let validChannels = ipc.render.send;
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, args);
}
},
// From main to render.
receive: (channel, listener) => {
let validChannels = ipc.render.receive;
if (validChannels.includes(channel)) {
// Deliberately strip event as it includes `sender`.
ipcRenderer.on(channel, (event, ...args) => listener(...args));
}
},
// From render to main and back again.
invoke: (channel, args) => {
let validChannels = ipc.render.sendReceive;
if (validChannels.includes(channel)) {
return ipcRenderer.invoke(channel, args);
}
}
}
);
現在我們的預加載腳本已經配置好了，讓我們在構建應用程式視窗時使用它。
此外，讓我們監聽這些訊息通道，并在檢測到時呼叫我們的adjustBrightness函式。
main.js（主執行緒）
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronIpcMain = require('electron').ipcMain;
const nodeFs = require("fs");
const nodePath = require("path");
// Prevent garbage collection
let window;
function createWindow() {
const window = new electronBrowserWindow({
x: 0,
y: 0,
width: 800,
height: 600,
show: false,
webPreferences: {
nodeIntegration: false, // For safety, let's disable Node integration
contextIsolation: true, // For safety, let's enable context isolation
preload: nodePath.join(__dirname, 'preload.js') // Let's use our preload script
}
});
window.loadFile('index.html')
.then(() => { window.show(); });
return window;
}
electronApp.on('ready', () => {
window = createWindow();
});
electronApp.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
electronApp.quit();
}
});
electronApp.on('activate', () => {
if (electronBrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// Let's listen for messages to increment or decrement the brightness
electronIpcMain.on('brightness:increment', () => {
adjustBrightness(10);
})
electronIpcMain.on('brightness:decrement', () => {
adjustBrightness(-10);
})
// Function to adjust screen brightness
function adjustBrightness(adjustment) {
let data = nodeFs.readFileSync('/sys/class/backlight/amdgpu_bl1/brightness', 'utf-8');
let newData = parseInt(data) adjustment;
if (newData > 255) {
newData = 255;
} else if (newData < 0) {
newData = 0;
}
newData = newData.toString();
nodeFs.writeFileSync('/sys/class/backlight/amdgpu_bl1/brightness', newData, 'utf-8');
}
最后，讓我們確保我們渲染的 html 在單擊相應按鈕時將訊息發送到主執行緒。
index.html (render thread)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clock App</title>
</head>
<body>
<input type="button" id="incBrightness" value=" ">
<input type="button" id="decBrightness" value="-">
</body>
<script>
document.getElementById('incBrightness').addEventListener('click', () => {
window.ipcRender.send('brightness:increment');
})
document.getElementById('decBrightness').addEventListener('click', () => {
window.ipcRender.send('brightness:decrement');
})
</script>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453561.html
標籤：javascript 节点.js linux 电子
上一篇：一次性強制多用戶密碼過期