用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 ：


<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>index</title>
</head>
    <h1>HELLO WORLD</h1>
</body>
</html>

npm start结果 ：


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

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


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


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


<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body{
            height: 100%;
        body{
            margin: 0;
            /* 设置body可拖拽 */
            -webkit-app-region: drag;
    </style>
</head>
    <h1>HELLO WORLD</h1>
</body>
</html>

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


问题：鼠标事件无法触发


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

我们可以试试：


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 ：


<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body{
            height: 100%;
        body{
            margin: 0;
            -webkit-app-region: drag;
    </style>
</head>
    <h1>HELLO WORLD</h1>
    <button type="submit">aa</button>
</body>
<script>
    let btn = document.querySelector("button");
    btn.addEventListener('click',function(){
        console.log("111")
</script>
</html>

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


解决方法：


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


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 ：


<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        body{
            margin: 0;
            -webkit-app-region: drag;
        .circular{
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background-color: #ffc540;
    </style>
</head>
    <!-- <h1>HELLO WORLD</h1> -->
    <div class="circular">
</body>
<script>
</script>
</html>