electron调试html,electron桌面应用程序开发入门

最新推荐文章于 2023-03-28 12:20:00 发布

前列腺病友

最新推荐文章于 2023-03-28 12:20:00 发布

阅读量649

点赞数

文章标签： electron调试html

一、初始化一个项目

官方文档：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;

}

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",

"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吧！>>>

前列腺病友

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
electron调试html,electron桌面应用程序开发入门

一、初始化一个项目官方文档：https://electronjs.org/docs新建一个文件夹electron-demo然后cd electron-demonpm initnpm i electron -S新建一个index.js：const { app, BrowserWindow } = require('electron');const username = 'test electron ...
复制链接

扫一扫