一、初始化一個項目

官方文檔：https://electronjs.org/docs

新建一個文件夾electron-demo

然后

cd electron-demo

npm init

npm i electron -S

新建一個index.js：

const { app, BrowserWindow } = require('electron');

const username = 'test electron variable';

global.username = username;

app.on('ready', () => {

const win = new BrowserWindow();

win.webContents.openDevTools(); //打開調試面板

win.loadFile('./layout/index.html'); //載入web頁面

});

這個index.js是在主進程中執行。而layout/index.html則是在另一個渲染進程中執行。

layout/index.html的內容如下：

Document

Window

const { remote } = require('electron');

// console.log(username); // 直接拿主進程中的全局變量內容是拿不到的

// 但是可以通過 electron 的 romote 屬性的 getGloabal() 來拿到

console.log(remote.getGlobal('username'));

二、進程之間通信：IPC

ipcRenderer從渲染進程到主進程的通信。

ipcMain則是在主進程中使用的。

下面看一段渲染進程向主進程發送消息以及主進程中接受消息的代碼：

index.js

const { app, BrowserWindow, ipcMain } = require('electron');

const username = 'test electron variable';

global.username = username;

const datas = {

username: 'hanmeimei',

gender: 'male'

};

app.on('ready', () => {

const win = new BrowserWindow();

win.webContents.openDevTools(); //打開調試面板

win.loadFile('./layout/index.html'); //載入web頁面

// 監聽渲染進程發送過來的消息

ipcMain.on('getData', function (e, key) {

console.log(key);

// 通過e.sender對象返回消息給渲染進程

e.sender.send('sendData', datas[key]);

})

});

layout/index.html

Document

Window

按鈕

const { remote, ipcRenderer } = require('electron');

// console.log(username); // 直接拿主進程中的全局變量內容是拿不到的

// 但是可以通過 electron 的 romote 屬性的 getGloabal() 來拿到

console.log(remote.getGlobal('username'));

const btn = document.querySelectorAll('button')[0];

btn.onclick = function() {

ipcRenderer.send('getData', 'username');

}

ipcRenderer.on('sendData', function(e, data) {

console.log(e, data);

})

三、兩個窗口之間的通信

主要的是通過localstorage來通信。

index.js

const { app, BrowserWindow, ipcMain } = require('electron');

const username = 'test electron variable';

global.username = username;

const datas = {

username: 'hanmeimei',

gender: 'male'

};

app.on('ready', () => {

const win = new BrowserWindow();

win.webContents.openDevTools(); //打開調試面板

win.loadFile('./layout/index.html'); //載入web頁面

// 監聽渲染進程發送過來的消息

ipcMain.on('getData', function (e, key) {

console.log(key);

// 通過e.sender對象返回消息給渲染進程

e.sender.send('sendData', datas[key]);

})

const win2 = new BrowserWindow();

win2.webContents.openDevTools(); //打開調試面板

win2.loadFile('./layout/index2.html'); //載入web頁面

});

index.html

Document

Window

按鈕1

按鈕2

const { remote, ipcRenderer } = require('electron');

// console.log(username); // 直接拿主進程中的全局變量內容是拿不到的

// 但是可以通過 electron 的 romote 屬性的 getGloabal() 來拿到

console.log(remote.getGlobal('username'));

const btns = document.querySelectorAll('button');

btns[0].onclick = function() {

ipcRenderer.send('getData', 'username');

}

ipcRenderer.on('sendData', function(e, data) {

console.log(e, data);

})

btns[1].onclick = function() {

localStorage.setItem('myname', 'paian');

}

index2.html

Document

Window2

按鈕

const btns = document.querySelectorAll('button');

btns[0].onclick = function() {

const myname = localStorage.getItem('myname');

console.log(myname);

};

四、自定義窗口

怎么設置一個窗口的大小和隱藏默認邊框和按鈕？

const win = new BrowserWindow({

width: 1920,

height: 1080,

frame: false, // 隱藏默認邊框和按鈕

resizable: false // 不可拖拽改變窗口大小

});

因為默認的按鈕被隱藏了，所以需要自己在html頁面中實現一個header來替代。

/* 實現標題頭的可拖拽 */

.header {

-webkit-app-region: drag;

}

.header .close{

-webkit-app-region: no-drag;

}

.header .min{

-webkit-app-region: no-drag;

}

五、與Vue.js結合使用

在electron中引入Vue.js，可以在layout/index.html中手動用script標簽引入 或者 用electron-vue

下面是一個關于應用關閉和窗口縮小的實現，并且使用了Vue.js。

index.js

const { app, BrowserWindow, ipcMain } = require('electron');

const username = 'test electron variable';

global.username = username;

const datas = {

username: 'hanmeimei',

gender: 'male'

};

app.on('ready', () => {

const win = new BrowserWindow();

win.webContents.openDevTools(); //打開調試面板

win.loadFile('./layout/index.html'); //載入web頁面

// 監聽渲染進程發送過來的消息

ipcMain.on('getData', function (e, key) {

console.log(key);

// 通過e.sender對象返回消息給渲染進程

e.sender.send('sendData', datas[key]);

})

const win2 = new BrowserWindow({

width: 720,

height: 480,

frame: false,

resizable: false

});

win2.webContents.openDevTools(); //打開調試面板

win2.loadFile('./layout/index2.html'); //載入web頁面

});

layout/index.html

Document

Window

按鈕1

按鈕2

const { remote, ipcRenderer } = require('electron');

// console.log(username); // 直接拿主進程中的全局變量內容是拿不到的

// 但是可以通過 electron 的 romote 屬性的 getGloabal() 來拿到

console.log(remote.getGlobal('username'));

const btns = document.querySelectorAll('button');

btns[0].onclick = function() {

ipcRenderer.send('getData', 'username');

}

ipcRenderer.on('sendData', function(e, data) {

console.log(e, data);

})

btns[1].onclick = function() {

localStorage.setItem('myname', 'paian');

}

index2.html

Document

body {

font-family: sans-serif;

}

.header {

-webkit-app-region: drag;

display: flex;

}

.header .close {

-webkit-app-region: no-drag;

}

.header .mini {

-webkit-app-region: no-drag;

}

.header .title {

flex: 1;

}

.header .button {

display: inline-block;

cursor: pointer;

width: 30px;

text-align: center;

}

.header .button:focus {

border: none;

}

-

x

const {

remote

} = require('electron');

new Vue({

el: '#root',

data: {

title: 'Window2'

},

methods: {

closeApp() {

// 關閉整個應用，當有多個窗口時，多個窗口均會被關閉

remote.app.exit();

},

miniWindow() {

// 只是最小化當前窗口

remote.getCurrentWindow().minimize();

}

}

});

六、使用electron-builder進行打包

npm i electron-builder -D

安裝后我們需要在package.json中做一下配置：

"build": {

"appId": "com.abc.paian",

"copyright": "copyright ? 2018 paian",

"productName": "electron-demo",

"directories": {

"output": "./dist"

},

"win": {

"target": ["nsis", "zip"],

"icon": "./source/logo.ico"

},

"nsis": {

"oneClick": false,

"allowToChangeInstallationDirectory": true,

"installerIcon": "./source/logo.ico",

"installerHeader": "./source/header.bmp",

"license": "./source/license.txt"

}

}

注意：.ico必須大于256x256像素，否則打包會報錯。

更多詳細的配置請參看這里:

https://www.electron.build/configuration/configuration#configuration

打包的腳本也可以在package.json中配置：

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev": "./node_modules/.bin/electron .",

"build": "./node_modules/.bin/electron-builder -w"

},

其中build一行即是。

-w windows

-m mac

-l linux

更多參見：

https://www.electron.build/cli

打包的時候還得注意，因為electron-builder會自動將electron打到包里，所以應該將package.json中的”electron”: “^3.0.10”從dependencies中轉移到devDependencies中，否則會提示錯誤：

Package “electron” is only allowed in “devDependencies”. Please remove it from the “dependencies” section in your package.json。

延申學習教程：

https://www.bilibili.com/video/av19875969?from=search&seid=921703864447578740

你的支持，是對博主最大的鼓勵。猛戳這里，右上角給點個Star吧！>>>

總結

以上是生活随笔為你收集整理的electron调试html,electron桌面应用程序开发入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。