- electron中的实现方法
在electron中实现窗体背景透明,只需在BrowserWindow时指定参数然后设置网页的body背景色1
2
3
4
5
6
7
8
9
10
11
12mainWindow = new BrowserWindow({
height: 960,
width: 1820,
transparent: true,
resizable: false,
frame: false,
webPreferences: {
devTools: false,
nodeIntegration: true,
enablemotemodule: true
}
})
body{background:#ffffff00}和mainWindow.setIgnoreMouseEvents(true)
并且需要开启aero主题! - aardio中实现
aardio中作者在electron.app的288行中,指定了backgroundColor=’#ffffff’;如果只按照electron中设置窗体背景透明是无效的(这个问题一度让我觉得aardio中的electron无法实现窗体背景透明,后来看了electron.app才发现这个设置),需要同时设置backgroundColor,在electon设置如下参数,就可以在aardio调用electron,而实现窗体背景透明,这样aardio就可以愉快地使用electron!毕竟很多html5的页面只有electron才正常显示!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26theApp.start(
//electron打开的第一个页面,必须指定应用程序目录下的aardio代码文件
indexUrl ="/res/main.html";
browserWindow = {
title="electron程序标题";
transparent=true;//设置背景透明
resizable=false;//禁止改变大小
frame=false;//设置无边框窗口
backgroundColor=0;//设置背景颜色透明
icon="/wbc.ico";//指定图标
webPreferences = {
//devTools = false;//禁止调试窗口
nodeIntegration=true;//允许使用nodejs
enablemotemodule=true;
webviewTag=true
}
}
/*
可选用args字段指定Chrome命令行参数,
必须在main.js中创建窗口以前就导入aardio模块才会生效
*/
args ={
icon="./wbc.ico"
}
);最新版aardio,作者已经改进了,不用设置backgroundColor,直接设置transparent为true就可以设置背景透明了!
同时作者倡导的import electron.runtime;如果运行程序时没有electron,自动下载,但写的程序,使用者根本不想等待下载,所以正常应该在创建electron时事先指定下好的electron,打包后让使用者只下载一次。
如把electron下载好后,放在程序目录,创建electron就这样
1 | var theApp = electron.app(,".\electron\electron.exe"); |
当然你可以把electron.exe改成其他名字,如electron.dll,上面也相应的改动就行!
另一个问题,electron必须使用aardio提供的,应该改动过,不然aardio和electron无法进行交互!
下面是使用aardio中的electron实现的赛博朋克的网页做为主界面的效果