解决 electron 安装不了的问题

出现了一些奇奇怪怪的报错

使用了切换淘宝源、取消ssl验证等一些方法都无效

最后参考:解决electron 下载依赖慢打包拉去依赖失败

才成功解决

修改下载地址：

.npmrc 文件

1
2
3
registry=https://registry.npmmirror.com/
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mir

vue页面控制 electron 应用最大化、最小化、关闭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script setup lang="ts">
import { ipcRenderer } from "electron"; // script标签内，引入ipcRenderer

const minimizeWin=()=>{
    ipcRenderer.send('window-min') // 通知主进程我要进行窗口最小化操作
}
const maximizeWin=()=>{
    ipcRenderer.send('window-max') // 通知主进程我要进行最大化 或 还原
}
const closeWin=()=>{
    ipcRenderer.send('window-close') // 通知主进程我要关闭
}
</script>

<template>
<span class="iconfont icon-suoxiao" @click="minimizeWin">最小化</span>
<span class="iconfont icon-fangda" @click="maximizeWin">最大化</span>
<span class="iconfont icon-guanbi" @click="closeWin">关闭</span>
</template>
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
26
27
28
29
30
31
32
33
const { BrowserWindow, ipcMain } = require('electron')

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    //...
    webPreferences: {
      // ...
      nodeIntegration: true,   //允许渲染进程使用node.js
      contextIsolation: false  //允许渲染进程使用node.js
    }
  })

  // ...

  // 1. 窗口 最小化
  ipcMain.on('window-min', function () { // 收到渲染进程的窗口最小化操作的通知，并调用窗口最小化函数，执行该操作
    mainWindow.minimize();
  })
  // 2. 窗口 最大化、恢复
  ipcMain.on('window-max', function () {
    if (mainWindow.isMaximized()) { // 为true表示窗口已最大化
      mainWindow.restore();// 将窗口恢复为之前的状态.
    } else {
      mainWindow.maximize();
    }
  })

  // 3. 关闭窗口
  ipcMain.on('window-close', function () {
    mainWindow.close();
  })
}

electron 无边框窗口如何才能拖拽

1
2
3
4
5
6
7
8
9
10
给需要可以进行拖拽的盒子加上样式 -webkit-app-region: drag; 就可以拖拽窗口了
但会导致其中的子元素不能点击交互
所以还得给里面需要交互的元素加上样式 -webkit-app-region: no-drag;

header{
    -webkit-app-region: drag;
}
header button{
    -webkit-app-region: no-drag;
}

electron-builder打包，针对 nsis-3.0.4.1 下载失败

1
2
3
4
5
6
7
打开地址： https://github.com/electron-userland/electron-builder-binaries/releases 寻找你所需要的版本
下载完成后，打开zip包，但不是所有文件都需要。我们需要其中两个文件：nsis 和 nsis-resources
将这两个文件夹提取出来。重命名：其中 （nsis -> nsis-3.0.4.1 ） （nsis-resources -> nsis-resources-3.4.1）

然后 C:\Users\xxx\AppData\Local\electron-builder\Cache 进入到此目录下，新建一个文件夹，名为： nsis ，再把刚刚解压出来的两个文件夹放到这个文件夹中。

然后打包就可以成功

http://events.jianshu.io/p/35abb68d0331