手把手光速开发 Electron-六虎

你认为开发Electron需求先会一堆东西才干上手吗？其实你只需求会HTML、CSS、JavaScript就能够了；

废话不多说，直接上手，让咱们一同来开发一个Electron运用吧！

1. 创立项目

首要，咱们需求创立一个项目，这儿咱们直接运用现成的模板，这样能够省去许多装备的麻烦；

这个地址里边有一个项目create-electron-vite，能够看他的README，只需求一行指令就能够创立一个Electron项目：

# NPM
$ npm create electron-vite@latest electron-vite-project
# Yarn
$ yarn create electron-vite electron-vite-project
# PNPM
$ pnpm create electron-vite electron-vite-project

供给了三种方法来创立项目，这儿咱们能够依据自己的喜好来挑选，这儿我运用的是Vue模板；

你刚不是说只需求会HTML、CSS、JavaScript就能够了吗？我不会Vue啊！

没关系，你要是不会Vue就把Vue相关的依靠都是删掉，直接用HTML也是能够的！

2. 装置依靠

项目创立完结之后，咱们就进入了愉快的装置依靠的环节了；

为啥要说愉快呢？由于你大概率是下载不下来依靠，所以该倒水就去倒水，该拉大便就去拉大便！

倒完水拉完屎之后，咱们先将npm的源切换到淘宝源，老墙内的孩子了！

这儿其实全局装置一个nrm也是能够的，就不必每次都自己手动去设置了；

下面的一些操作都是看自己需求可选的

# 官方镜像
npm config set registry https://registry.npmjs.org/

# 淘宝镜像
npm config set registry https://registry.npm.taobao.org/

# cnpm镜像
npm config set registry https://r.cnpmjs.org/

# nrm 装置
npm i -g nrm

# 检查 nrm 支持切换的源
nrm ls

# 运用 nrm 切换源
nrm use cnpm

当然就算这样有或许仍是会失利，你或许会遇到如下的过错：

这个原因是由于网络的问题，你能够测验ping一下github.com试试看，这个时分就会呈现这个IP地址；

这个时分咱们或许直接运用浏览器是能够访问的，可是装置依靠和ping便是不想，处理计划也很简单，便是去修正host文件；

咱们先能够去这个网站：ping.chinaz.com;

然后它会呈现许多github的独立IP，咱随意找一个ping一下，能够ping通就运用这个IP；

Windows体系的host文件在：C:WindowsSystem32driversetc下面，找到host文件用记事本翻开，在最下面新起一行，加上你能ping的IP，如下：

140.82.112.3 github.com

保存之后重新装置依靠，假如没收效的话能够在控制台输入如下指令，刷新DNS：

ipconfig /flushdns

假如仍是不可的话，那么主张换手机网络试试看。

3. 讲点细节和留意事项

移除 TS

首要提个醒，该项目是用TS进行创立的，假如用不惯或者说不会用TS的同学，现在就给TS先移除去；

其实主要是我用不惯TS，我最开始用这个结构自身是想着给TS延续下去的，可是呈现了几个很严重的问题；

一个是项目文件多了之后十分吃功能，或许是我电脑废物；

第二是开发环境下没有抛出任何反常，打包死活都不可，每个文件都有问题，处理了许多问题之后仍是不可，查阅了大量的材料，离谱的是有一次修正装备之后成功了，然后第二天又不可了；

没有任何觉得TS不好的意思，或许是我技能没到家，我直接从入门到抛弃了；

移除TS首要需求卸载TS相关的依靠：

npm uni typescript vue-tsc

然后翻开package.json，将其间的scripts特点下的build修正成如下：

{
  "scripts": {
    "build": "vite build && electron-builder"
  }
}

接着删去一切的*.d.ts文件和tsconfig.json等相关文件：

然后修正一切后缀为.ts的文件为.js，留意需求删去类型标示，其他他里边的类型标示并没有多少；

接着便是删去*.vue文件中的script标签上的lang="ts"的特点了，仍是相同记得删去类型标示；

最终再将vite.config.js文件中的一切*.ts的入口文件装备修正成*.js即可；

依靠管理相关

在原始的项目中，vue的依靠是放在dependencies中的，这儿我主张是将一切的依靠都放到devDependencies中的；

有人或许会说你这样不标准，开发依靠和出产依靠怎样能够混着放在一同呢？

实际情况是这两个特点自身束缚的是包管理器，不束缚你的代码怎样写，放到哪里都能够被引证到；

这个结构在打包的时分会将dependencies中的依靠打进去，会导致包体积变大，一般来说不运用node-gyp相关的模块的依靠，都是不需求将其放到dependencies，至于运用node-gyp模块相关怎样处理后边会讲到；

4. 打包

咱先不开发，直接打包，这玩意不同于咱们平常开发的Web运用，需求打包成可履行文件才干运行，假如打包不能用那开不开发也没啥含义；

打包很简单，直接履行npm run build即可，当然大概率你是不会成功的，由于你或许会卡在download阶段；

咱们直接点上面截图供给的链接，然后下载对应的包，下载完结之后，直接将这个包放到：C:Users[User]AppDataLocalelectronCache目录下即可；

留意：需求先将打包的进程中止，再将包放到对应的目录下，不然包会被删去；

然后再次履行npm run build，这个时分还会有一个electron-builder包的下载，相同的操作；

不过electron-builder下面的包需求先解压出来，例如winCodeSign就需求解压到C:Users[User]AppDataLocalelectron-builderCachewinCodeSign目录下；

最终的目录应该是：C:Users[User]AppDataLocalelectron-builderCachewinCodeSignwinCodeSign-2.6.0；

后边还会有几个nsis的包，也是相同的操作，解压到对应的目录下即可，如下图便是我的目录最终的样子：

然后指令成功之后，项意图根目录下就会生成一个release的目录，下面的YourAppName-Windows-0.0.0-Setup.exe便是咱们的装置包了，能够装置起来看看作用吧！

4.1 打包装备

打包是经过electron-builder来完结的，详细的装备能够参阅官方文档：www.electron.build/

这儿的项目根目录下有一个electron-builder.json5的装备文件，这个便是运用打包装备，能够依据自己的需求来修正；

详细的一些装备能够参阅这篇文章，写的十分详细：electron-builder通用装备(翻译)

5. 开发

总算来到了愉快的开发阶段了，先来熟悉一下目录结构：

这儿我的目录标黄的都是主动生成的，不必管，看一下前端相关的代码，应该很熟悉的，便是一个Vue项目代码的目录结构；

然后便是electron的代码，就两个文件，一个是main.js，一个是preload.js，十分简练；

由于咱们是光速开发，所以这儿就不过多解说electron的相关知识了，可是中心怎样运用的必定会给咱们理清楚；

5.1 electron 相关

5.1.1 main.js

先看一下main.js文件，这个文件是electron的入口文件，里边的代码换行加注释也就60行，咱中心就看两个当地：

function createWindow() {
    // 创立一个浏览器窗口（咱们看到的运用页面）
    win = new BrowserWindow({
        // 设置图标，便是运用左上角的小图标
        icon: path.join(process.env.VITE_PUBLIC, 'electron-vite.svg'),
        // 装备 web 首选项，会有许多装备，详细看官网介绍
        webPreferences: {
            // 设置预加载脚本，预加载脚本能够理解为在你们的 index.html 中多插入了一个 script 标签，可是它能够运用 nodejs 的 api
            preload: path.join(__dirname, 'preload.js'),
        },
    })
    // 测试烘托进程和主进程通讯
    // Test active push message to Renderer-process.
    win.webContents.on('did-finish-load', () => {
        win?.webContents.send('main-process-message', (new Date).toLocaleString())
    })
    // 区别开发环境和出产环境下加载的不同页面
    if (VITE_DEV_SERVER_URL) {
        win.loadURL(VITE_DEV_SERVER_URL)
    } else {
        // win.loadFile('dist/index.html')
        win.loadFile(path.join(process.env.DIST, 'index.html'))
    }
}
// 运用现已准备就绪，能够运用 whenReady 来进行监听，准备就绪之后就能够创立窗口了
app.whenReady().then(createWindow)

他这个里边还会有其他的一些代码，上面都写好了注释，我就不过多去解说了；

5.1.2 preload.js

接下来便是preload.js相关的，这儿主要看最最初的一些代码：

import { contextBridge, ipcRenderer } from 'electron'
// --------- Expose some API to the Renderer process ---------
contextBridge.exposeInMainWorld('ipcRenderer', withPrototype(ipcRenderer))
// `exposeInMainWorld` can't detect attributes and methods of `prototype`, manually patching it.
function withPrototype(obj) {
  const protos = Object.getPrototypeOf(obj)
  for (const [key, value] of Object.entries(protos)) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) continue
    if (typeof value === 'function') {
      // Some native APIs, like `NodeJS.EventEmitter['on']`, don't work in the Renderer process. Wrapping them into a function.
      obj[key] = function (...args) {
        return value.call(obj, ...args)
      }
    } else {
      obj[key] = value
    }
  }
  return obj
}

这一点代码信息量十分大，我就不在代码里边写注释了，直接讲：

contextBridge: 这个特点的作用主要是用来向烘托进程注入一些相关的API
- exposeInMainWorld: 便是contextBridge中的一个办法，它接收两个参数，一个是key，一个是目标；例如上面的这个contextBridge.exposeInMainWorld('ipcRenderer', withPrototype(ipcRenderer)) 就代表着我在烘托进程能够运用window.ipcRenderer.xxx，这个.xxx便是withPrototype(ipcRenderer)的返回结果；当然咱们前端玩家应该都知道能够省掉window，直接写ipcRenderer.xxx；
  - 这儿这样做的意图是由于默认情况下烘托进程不能直接运用nodejs相关的能力，只有主进程能够运用，假如需求敞开烘托进程运用nodejs的能力，就需求在上面说到的创立浏览器窗口那里添加如下装备：
```
{
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
}
```
    留意：启用nodeIntegration和封闭contextIsolation在出产环境中是不安全的，由于或许会被注入恶意代码；同时这两个装备是需求调配运用的，运用这种装备就不能运用 contextBridge 了；
    
    检查更多：www.electronjs.org/docs/latest…
- 还有一个办法是exposeInIsolatedWorld，就不过多介绍了；
withPrototype：办法便是将一个目标上的一切原型办法复制到自己身上，这样就能够保证这些原型办法在特定的上下文中正常履行，这个计划能够说是十分奇妙的。

他在这儿这样处理了之后，咱们就能够在没有敞开nodeIntegration的情况下，在烘托进程中运用ipcRenderer了；

5.1.3 主线程与烘托线程间的通讯

上面说的ipcRenderer便是一个烘托进程中的管道目标，咱们能够经过ipcRenderer.on来监听主线程发送过来的音讯；

例如这个示例中，在上面的main.js中有这样一段代码：

win.webContents.on('did-finish-load', () => {
    win?.webContents.send('main-process-message', (new Date).toLocaleString())
})

这儿的win?.webContents.send('main-process-message', (new Date).toLocaleString())便是在向烘托进程发送音讯；

在烘托进程中就经过window.ipcRenderer.on来监听音讯，这儿详细能够看src/main.js中有这样一段代码：

window.ipcRenderer.on('main-process-message', (_event, message) => {
    console.log(message)
})

烘托进程假如想向主进程发送音讯也是相同的，能够运用send、invoke、sendSync、postMessage；

而主进程处理不同的音讯会运用不同的函数，如下：

// 烘托进程发送音讯
ipcRenderer.send('message', 'message');
// 主进程监听音讯 send/sendSync/postMessage 都运用 on 来监听
ipcMain.on('message', (e) => {
    console.log(e)
})
// 烘托进程发送音讯
ipcRenderer.invoke('message', 'message').then(res => {
    console.log(res)
})
// 主进程监听音讯 invoke 运用 handle 来监听
ipcMain.handle('message', (e) => {
    console.log(e);
    return 'hello'
})

通讯就简单的介绍到这儿，总得来说这个和前端的事情处理的运用方法十分类似，由于底层承继的也是EventEmitter，更多的能够去看文档：

5.2 前端相关

前端便是一个Vue项目，假如不想用Vue的也能够不必，依照electron的运用方法，本质上便是一个浏览器，只需浏览器上能跑的项目，这儿都能够跑；

现在咱们能够直接控制台输入npm run dev来检查咱们的项目运行作用了；

5.2.1 优化

在履行npm run dev的时分会翻开一个electron的窗口，这个窗口其实便是一个浏览器窗口；

部分电脑（并不是一切的）或许会在窗口翻开的时分长期显现一个白屏，咱们就来优化这个问题；

首要咱们需求在main.js中的创立窗口的时分添加一个装备：

win = new BrowserWindow({
    // ...
    show: false,
})
// 能够经过设置背景色来观察优化作用，经过切换添加优化计划和不添加优化计划，来检查作用
win.setBackgroundColor('hsl(230, 100%, 50%)')
win.once('ready-to-show', () => {
    win.show()
})

可参阅：运用 ready-to-show 事情

这个事情是烘托进程第一次完结绘制的时分会触发，能够简单的理解为window.onload事情，可是window.onload一般要比它更晚一些；

由于window.onload是需求等候资源下载完结才会触发，假如资源在没有下载完结之前，这个页面仍是一个空白；

所以咱们还能够运用线程通讯的方法来优化它，咱们能够在preload.js中添加如下代码：

window.onload = () => {
    ipcRenderer.send('on-ready')
}

然后在main.js中添加如下代码：

import { app, BrowserWindow, ipcMain } from 'electron'
// ...
ipcMain.on('on-ready', () => {
    win.show()
})

依照这个思路，例如咱们在Vue项目中优化白屏，能够在根组件挂载完结之后再去触发窗口的显现；

可是这个项目自身就有一个loading的作用，在src/main.js中能够看到有封闭这个loading的通知，假如你不想要这个loading作用就能够替换成上面说到的优化计划：

createApp(App).mount('#app').$nextTick(() => {
  // Remove Preload scripts loading
  postMessage({ payload: 'removeLoading' }, '*')
  // Use contextBridge
  window.ipcRenderer.on('main-process-message', (_event, message) => {
    console.log(message)
  })
})

5.2.2 布局

能够看到这个头部或许并不是咱们想要的，包括原生供给的菜单也是相同的，可是electron并没有供给相关的装备来修正，假如想要自定义就只能封闭然后自己写一个；

咱们能够在创立窗口的时分，添加如下装备，来封闭原生的菜单：

win = new BrowserWindow({
    // ...
    frame: false,
})

封闭之后咱们就需求自己去写顶部区域了，这个就作为写一般前端项目就行了，主要是顶部栏固定显现就好；

我这儿运用的Vue3，所以就依照Vue3的做法来了，顶部固定那么中间的内容改变，最好的做法必定是运用vue-router了；

首要装置依靠，十分熟悉的环节：

npm install vue-router@4 -D

然后在src目录下新建一个router目录，然后在里边新建一个index.js文件，内容如下：

import {createRouter, createWebHashHistory} from 'vue-router'
const routes = []
const router = createRouter({
    history: createWebHashHistory(),
    routes,
});
export default router

接着在src/main.js中运用这个路由：

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App);
app.use(router);
app.mount('#app')
        .$nextTick(() => {
          // Remove Preload scripts loading
          postMessage({payload: 'removeLoading'}, '*')
          // Use contextBridge
          window.ipcRenderer.on('main-process-message', (_event, message) => {
            console.log(message)
          })
        })

我这儿将链式调用的操作给修正成一般的调用方法了，链式调用有时分会很舒畅，可是有时分代码可读性会变得很差，编码嘛，怎样舒畅怎样来，咱们自己也能够运用自己的方法来写；

接着咱们在src/App.vue中添加一个router-view：

<template>
  <router-view/>
</template>
<script setup>
</script>
<style scoped>
</style>

这儿面原先有一些代码，都全删掉，然后再将src/components/HelloWorld.vue删掉，接着再删掉src/style.css中的一切代码，只需求加上如下代码即可：
html,
body {
  margin: 0;
  padding: 0;
}

接着再在src下新建一个layout目录，下面新建如下文件：

Layout.vue

<template>
  <div class="layout">
    <top-bar/>
    <app-main/>
  </div>
</template>
<script setup>
import TopBar from "./TopBar.vue";
import AppMain from "./AppMain.vue";
defineOptions({
  name: "Layout"
})
</script>
<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
}
</style>

AppMain.vue

<template>
  <div class="app-main">
    <router-view/>
  </div>
</template>
<script setup>
</script>
<style scoped>
.app-main {
  background: aliceblue;
  flex-grow: 1;
}
p {
  word-break-wrap: nowrap;
}
</style>

TopBar.vue

<template>
  <div class="top-bar">
    <label>{{ title }}</label>
    <i class="fa-solid fa-window-minimize" @click="handleMinimize"></i>
    <i v-show="!hasRestore" class="fa-solid fa-window-maximize" @click="handleMaximize"></i>
    <i v-show="hasRestore" class="fa-solid fa-window-restore" @click="handleRestore"></i>
    <i class="fa-solid fa-xmark" @click="handleClose"></i>
  </div>
</template>
<script setup>
import {ref} from "vue"
defineOptions({
  name: "TopBar"
})
const title = ref('标题');
const hasRestore = ref(false);
const handleMinimize = () => {
  window.ipcRenderer.invoke('on-minimize');
}
const handleMaximize = () => {
  window.ipcRenderer.invoke('on-maximize').then(_ => {
    hasRestore.value = true;
  })
}
const handleRestore = () => {
  window.ipcRenderer.invoke('on-restore').then(_ => {
    hasRestore.value = false;
  })
}
const handleClose = () => {
  window.ipcRenderer.invoke('on-close');
}
</script>
<style scoped>
.top-bar {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 28px;
  -webkit-app-region: drag;
}
.fa-solid {
  padding: 10px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.fa-solid:hover {
  background: #eeeeee;
}
</style>

这儿的图标运用的是：fontawesome，V6免费版，现已能覆盖许多场景了，不可也能够运用iconfont；

运用方法也十分简单，将下载下来的资源包中的css/all.min.css放到assets/css下面，然后将资源包中的webfonts下一切的文件放到assetswebfonts下，最终将all.min.css在src/main.js中引证即可；

这儿正好运用到了上面说到的烘托进程和主线程之间通讯的知识，那么咱们还需求在主进程监听监听代码：

ipcMain.handle('on-minimize', () => {
  win.minimize();
  return true;
})
ipcMain.handle('on-maximize', () => {
  win.maximize();
  return true;
})
ipcMain.handle('on-restore', () => {
  win.unmaximize();
  return true;
})
ipcMain.handle('on-close', () => {
  win.close();
  return true;
})

现在只需求将router装备一下就功德圆满：

import {createRouter, createWebHashHistory} from 'vue-router'
import Layout from '../layout/Layout.vue'
const routes = [{
  path: '/',
  component: Layout,
  redirect: '/home',
  children: [
    {
      path: '/home',
      component: () => import('../views/home/index.vue')
    }, {
      path: '/test',
      component: () => import('../views/test/index.vue')
    }
  ]
}]
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
export default router

我这儿新建了两个页面，页面方位在src/views下，这个就不过多介绍了；

5.2.3 优化开发体验（可选）

装备别名

工欲善其事必先利其器，咱们开发环境一定要舒畅，首要装备一个别名，咱们能够在vite.config.js中加上如下装备：

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": 'src',
      "#": 'electron'
    }
  }
  // 省掉其他装备
})

这样咱们在引证资源路径的时分，假如层级过深就不必一向../的写了，例如在views/home/index.vue想要引证views/test/Component.vue就能够直接写@/views/test/Component.vue；

这个咱们应该都用过，就不多介绍了；

装备主动导入

主动导入依靠unplugin-auto-import插件，咱们先装置它：

npm i -D unplugin-auto-import

然后在vite.config.js中加上如下装备：

// https://vitejs.dev/config/
export default defineConfig({
  // 省掉其他装备
  plugins: [
    AutoImport({
      imports: [
        'vue',
        'vue-router'
      ]
    })
  ]
})

这样咱们在运用vue的setup语法时，就不需求写import {ref, computed} from 'vue'这样的代码了，直接运用就行；

其他

这个项目没有eslint、.editorconfig、.env支持，这些都能够依据自己的实际情况进行添加；

至于其他less这种也没有添加，就目前的css的能力来说，假如只运用less的嵌套和变量个人觉得没必要运用；

还有其他库的，例如vuex(pinia)等，依据个人实际情况进行添加即可；

最终还有便是一些在nodejs环境下运用的库，部分或许在开发环境下或许是没问题的，可是到了出产环境就会出问题，有的甚至在开发环境下都无法运用，这些要依据实际情况进行调整；

而这一部分超出了本文光速开发electron的原则了，由于要学习前端之外的知识了，例如SQLite就需求学习数据库相关的知识；

总结

elecrton最大的问题便是编译之后的文件以及文件路径的处理，需求添加一些装备或者修正部分库源码中的路径引证才干正常运用；

当然这些问题在本篇中完全不会呈现，所以想快速体验electron并且不踩坑，我觉得我这篇内容完全够用；

作为一名前端开发者能快速体验桌面运用的开发，的确electron是一个都十分好的挑选，这次共享就到这儿；

手把手光速开发 Electron

1. 创立项目

2. 装置依靠

3. 讲点细节和留意事项

移除 TS

依靠管理相关

4. 打包

4.1 打包装备

5. 开发

5.1 electron 相关

5.1.1 main.js

5.1.2 preload.js

5.1.3 主线程与烘托线程间的通讯

5.2 前端相关

5.2.1 优化

5.2.2 布局

5.2.3 优化开发体验（可选）

装备别名

装备主动导入

其他

总结

作者信息

推广

手把手光速开发 Electron

1. 创立项目

2. 装置依靠

3. 讲点细节和留意事项

移除 TS

依靠管理相关

4. 打包

4.1 打包装备

5. 开发

5.1 electron 相关

5.1.1 main.js

5.1.2 preload.js

5.1.3 主线程与烘托线程间的通讯

5.2 前端相关

5.2.1 优化

5.2.2 布局

5.2.3 优化开发体验（可选）

装备别名

装备主动导入

其他

总结

相关文章

低头做事，抬头看路

RecyclerView嵌套滑动置顶 项目应用篇

JVM说–直接内存的使用

CMake系列：动态/静态库的介绍以及导入

作者信息

推广

RecyclerView嵌套滑动置顶项目应用篇