@icenet/electron-window/README.md

主要针对使用 electron-vite 初始化的项目做的插件，点击[这里](https://cn-evite.netlify.app/)，必在 electron-vite 的基础上使用，针对 electron-vite 中打开新的无边框窗口缓慢、传参困难等问题做的优化，安装方式简单、使用简单

## 功能介绍

主要针对使用 electron-vite 初始化的项目做的插件，点击[这里](https://cn-evite.netlify.app/)，必在 electron-vite 的基础上使用，针对 electron-vite 中打开新的无边框窗口缓慢、传参困难等问题做的优化，安装方式简单、使用简单

## 安装步骤

因为 renderer 中窗口的管理是基于@electron/remote 的，所以需要先安装@electron/remote 模块

首先安装@electron/remote

```shell
npm i @electron/remote -S
```

然后安装@icenet/electron-window

```shell
npm i @icenet/electron-window -S
```

在 main/index.js 里初始化第一个窗口时需要加入以下代码，没有如下代码引入，窗口初始化无法再 renderer 中使用 remote 模块

```
import remote from "@electron/remote/main";

// 初始化
remote.initialize();
```

## 使用插件

index.vue

```
let win = await createBWin({
  // browserwindow原生属性
  width: 700, // 窗口宽
  height: 600, // 窗口高

  // @icenet/electron-window自定义的属性
  id: "index", // 窗口名字，如果该id窗口存在会直接显示，不会重新创建，不指定则每次调用会创建新窗口
  animation: "", // 动画属性 fromRight，fromLeft，fromTop，fromBottom
  customAnimation: {
      fromPosition: {}, // 窗口动画起点
      time: 1000, // 动画时间
      graphs: "", // 动画过度曲线
  }, // 选填 自定义动画，如果有此属性animation属性会失效
  titleBarClick: true, // 窗口标题栏右键是否禁用，默认禁用
  webview: false, // 是否启用webview
  open: false, // webview是否加载外部网页
  webPreferences: {
    devTools: false, // 是否开启调试控制台
  }
}, __dirname)
console.log(win) // 新窗口返回的窗口对象
```

-   关闭当前窗口

```
closeWin() // 关闭当前窗口
closeWin(id) // 关闭指定id的窗口
```

## 注意事项

-   本插件主要适用于无边框窗口的优化，致力于用 electron 制作

## API 介绍

在子进程中请通过进程通信ipcMain实现窗口创建

## 例如createWin(option)

-   作用： 创建一个窗口
-   参数： `option: {object}`
-   返回： `BrowserWindow`实例

```
option = {
  // 以下为暂时支持的原生属性
  width: '',
  height: '',
  minimizable: '',
  maximizable: '',
  resizable: '',
  x: '',
  y: '',
  alwaysOnTop: '',
  skipTaskbar: '',

  // @icenet/electron-window自定义的属性
  id: "index", // 窗口名字，如果该id窗口存在会直接显示，不会重新创建，不指定则每次调用会创建新窗口
  animation: "", // 动画属性 fromRight，fromLeft，fromTop，fromBottom
  customAnimation: {
      fromPosition: {}, // 窗口动画起点
      time: 1000, // 动画时间
      graphs: "", // 动画过度曲线
  }, // 选填 自定义动画，如果有此属性animation属性会失效
  titleBarClick: true, // 窗口标题栏右键是否禁用，默认禁用
  webview: false, // 是否启用webview
  open: false, // webview是否加载外部网页
  webPreferences: {
    devTools: false, // 是否开启调试控制台
  }
}
```

-   用法：
    创建一个普通窗口

```
// 创建窗口
index.vue
let win = createWin({
  width: 800,
  height: 600,
}); // 此处不用传__dirname，因为主进程中会传
win.on('closed', () => {
  win = null
})
win.show()
// 关闭窗口（注：最好调用@icenet/electron-window的关闭api）
closeWin()
win.close() // 不推荐
// 创建子窗口
utils.js
export const createWindow = opts => {
    // 通过ipc协议调用main主进程窗口的方法，进行窗口创建
    return ipcRenderer.invoke("exchange", { type: "createWindow", opts });
};
// 主进程idex.js中
ipcMain.handle("exchange", (_, { type, opts }) => {
    switch (type) {
      // 使用IPC通信创建新的窗口
        case "createWindow":
            return new Promise((resolve, reject) => {
                createWindows(opts)
                    .then(newWindow => {
                        resolve(newWindow.id);
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        default:
            return;
    }
});
```

创建窗口从左侧划入并发送数据

```
 let win = createWin({
  id: "index", // 窗口名字，如果该id窗口存在会直接显示，不会重新创建，不指定则每次调用会创建新窗口
  animation: 'fromLeft',
  width: 800,
  height: 600,
}, __dirname)
win.show()
```

自定义动画--创建一个窗口从左上角滑到中间

```
let win = createWin({
  id: "index", // 窗口名字，如果该id窗口存在会直接显示，不会重新创建，不指定则每次调用会创建新窗口
  width: 800,
  height: 600,
  customAnimation: {
    fromPosition: {x: 0, y: 0}, // 窗口动画起点
    time: 1000, // 动画时间
    graphs: 'Quartic.InOut' // 动画过度曲线
  },
}, __dirname)
win.show()
```

动画曲线`graphs`参考： http://tweenjs.github.io/tween.js/examples/03_graphs.html

-   说明： 为什么不支持 browserwindow 的其他参数，因为 createWin 函数调用的窗口是已经初始化了的窗口，所以只能动态的改变窗口的属性，如果 browserwindow 没有提供动态改变的接口，或者有些属性需要重载窗口的是不能使用的，这里增加的自定义的属性就是原 browserwindow 没有的，但也没有单独放到一个对象里面便于区分，事实上大部分的功能都是依赖于这个对象的属性

## closeWin()

-   作用： 关闭一个窗口
-   用法：
    关闭当前窗口

```
closeWin()
```

关闭 id 为'index'窗口

```
closeWin(id)
```

## 拖动窗口
index.vue
```js
import { dragWindow } from "./utils.js"
// 鼠标进入判断，只有鼠标进入到范围内，才能进行鼠标按压拖拽
let enterFlag = false;
// 鼠标按压判断，只有鼠标进入范围内，并且按压状态，此时释放鼠标才会关闭窗口移动
let mousedownFlag = false;
let timer: NodeJS.Timeout | null;

// 鼠标按压
const mousedown = () => {
  if (enterFlag) {
    const size = [...client.value];
    dragWindow({ isMove: true, size });
    mousedownFlag = true;
  }
};

// 鼠标释放
const mouseup = () => {
  if (enterFlag && mousedownFlag) {
    const size = [...client.value];
    dragWindow({ isMove: false, size });
    mousedownFlag = false;
  }
};

// 鼠标移入
const mouseenter = () => {
  enterFlag = true;
};

// 鼠标移出
const mouseleave = () => {
  enterFlag = false;
  const size = [...client.value];
  // 避免卡顿的情况下，鼠标滑出移动范围，但窗口仍跟随鼠标移动
  if (timer !== null) {
    timer = setTimeout(() => {
      mousedownFlag = false;
      dragWindow({ isMove: false, size });
      timer = null;
    }, 1000);
  }
};
```

utils.js
```js
// 拖动窗口
export const dragWindow = opts => {
    // 通过ipc协议调用main主进程窗口的方法，进行窗口创建
    return ipcRenderer.invoke("dragWindow", { type: "dragWindow", opts });
};
```

main/index.js(主进程中)不用做任何操作，因为窗口实例已经注册了dragWindow的监听

后续功能正在维护中...
比如创建窗口发送数据，窗口关闭返回数据，窗口复用，更多动画支持等功能，有兴趣的小伙伴，可以提出宝贵建议。