用electron写应用

从一个简单的应用开始：

main.js ：

const { app,BrowserWindow } = require('electron');
app.on('ready',function(){
  // 创建窗口
  let win = new BrowserWindow ();
  // 窗口内加载本地html文件，也可以通过win.loadURL('https://github.com')加载远程url
  win.loadFile('index.html');
})

index.html ：

    
    


    
HELLO WORLD

npm start结果 ：

如何创建一个无边框的窗口：

main.js ：

const { app,BrowserWindow } = require('electron');
app.on('ready',function(){
  let win = new BrowserWindow ({
      //这里设置,
      frame : false
  });
  win.loadFile('index.html');
})

有边框窗口，我们可以鼠标按住标题栏进行拖拽。无边框窗口因为没有标题栏，我们无法进行拖拽。

无边框窗体可拖拽及一些问题

可拖拽设置是在渲染窗口上进行设置，也就是在index.html这个文件中进行设置。

    
    
    


    
HELLO WORLD

这样设置后，无边框窗口就可以拖拽了。

问题：鼠标事件无法触发

这样设置后，我们是可以拖拽了。但是，当我们创建个按钮时，就会发现，按钮事件无法触发。
我们可以试试：

main.js ：

const { app,BrowserWindow } = require('electron');
app.on('ready',function(){
  let win = new BrowserWindow ({
    frame : false,
  });
  win.loadFile('index.html');
  //开启调试
  win.webContents.openDevTools();
})

index.html ：

    
    
    


    
HELLO WORLD
    aa

运行后，发现按钮无法被触发。

解决方法：

我们可以将需要触发事件的地方取消可拖拽。

button{
     -webkit-app-region: none;
}

这样，按钮就可以触发事件了。

圆形无边框窗体

主进程窗体控制中，并没有设置窗体圆角的选项。但是有个特别的设置项transparent透明。
所以，我们的思路就是将窗体设为透明，然后在渲染页面添加一个有背景颜色的div，最后将这个div设置成圆角就实现了。

main.js ：

const { app,BrowserWindow } = require('electron');
app.on('ready',function(){
  let win = new BrowserWindow ({
    frame : false,
    //设置一个宽、高为500px的窗体
    width : 500,
    height : 500,
    //透明窗体
    // transparent : true,
    //取消最大化
    //maximizable : false,
    webPreferences : {
      nodeIntegration : true,
    }
  });
  win.loadFile('index.html');
})

index.html ：

未设置透明的窗体

设置透明后窗体

细心的会发现，说圆形窗体是不准确的。它仍是矩形窗体，只是四个边透明了而已。当用鼠标拖拽透明部分，仍然可以拖动。

取消鼠标双击放大

我们完成这个以后，鼠标双击窗体，窗体变成最大化。这个圆形的div就原形毕露了，圆形跑到屏幕的左上角了。所以，我们不想鼠标双击窗体最大化。

解决方法：

在创建窗体的配置中加入maximizable : false就可以禁止窗体放大。注意，这个是禁止窗体最大化，不是取消鼠标双击事件。我们可以在窗体上右键，就会发现最大化选项是灰色（无法选择的）。