electron踩坑指南

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

下述electron版本为13.1.4。

一、安装

1、vue add electron-builder

​ 注：

①error：vue不是XXXX命令

先执行下命令vue -V，确认下本地安装的 vue-cli 版本

如果没有装一下脚手架  我这里是@vue/cli 4.5.13  npm install @vue/cli -g

还是报错的话看下环境变量是否出错

②node版本需要14.x起

2、全局安装electron

cnpm install -g electron -d

1、用cnpm防止下载失败

2、先把三个需要的压缩包提前下好放入cache文件夹下，以免网络太慢安装失败~

注：下载版本需与electron版本保持一致

缓存目录如下：

• macOS ~/Library/Caches/electron-builder
• linux ~/.cache/electron-builder
• windows %LOCALAPPDATA%\electron-builder\cache

参见：https://www.cnblogs.com/xueyoucd/p/8006610.html

3、运行

运行npm run electron:serve 9ok了

4、打包

二、问题收录

1、关于请求https://变app://

原因：因为electron中设置了win.loadURL访问了本地index.html文件导致

解决方案：

重新封装一下axios

①在main.js设置全局变量（这样本地调试的时候也可以走proxy代理）

Vue.prototype.$api = process.env.NODE_ENV == 'development' ? "/frame-selfserviceterminalsfront/" : "http://3a7y354507.zicp.vip:43257/frame-selfserviceterminalsfront/"

②更改axios访问地址

this.$axios.post((this.$api + 'selfServiceCloudFafang/insert'),this.searchObj).then

注：网上还有uu说在main上做异步访问，然后用ipc和render层传送的方法，还没试验过。

2、嵌入webview问题

由于第三方网站设置了frame-ancestor ‘self’ 安全策略的问题，不能利用iframe跳转，只能改用webview的方式，但是官方并不建议使用webview标签，so尽量用iframe，webview对于小白来时真的超级坑！！

https://cloud.tencent.com/developer/article/1559358

①关于与webview通信

与小程序webview不同，小程序提供sdk通过postMessage的方式就可以通信，electron官方文档上面也是写着提供ipc的方式进行通信的，试过了网上千百种方法，然鹅all failed~~~

官方文档是这样写的↓

安装官方提供的方法：

1、需要在webview添加[nodeintegration]属性，让访客页也具有node集成

2、需要在第三方引入electron，但是会报错↓，到现在仍无解

// 此处使用window.require方法
error1：fs.existsSync is not a function
// 加入window.require判断后也是报错~  
error2:window.require is not a function

猜测官方提供的ipc方法，仅提供主进程Main、渲染进程Renderer使用~~so换种思路

给第三方页面传参，利用url传参的方式

第三方给exe传参，利用webview.getTitle()的方式，虽然有点猥琐，但是也能解燃眉之急~（尝试过直接&&webview.executeJavaScript(code[, userGesture])]获取webview中的dom元素，但是webview元素就是一个空白的iframe~）

注：上述方法并不能同步传参，尝试官网的各种监听事件，发现并无用。

②关于控制webview内嵌页面再跳转新窗口

此处有个新需求，webview内嵌的第三方页面需要以新窗口的方式打开并预览pdf

有两种方式：

1. 新建exe窗口的方式 shell.openExternal(e.url)

2. 新建浏览器窗口的方式 webview.src = e.url;

当访客页面尝试打开新的浏览器窗口时触发。

webview.addEventListener('new-window', (e) => {
          const protocol = require('url').parse(e.url).protocol
            if (protocol === 'http:' || protocol === 'https:') {
              shell.openExternal(e.url) // 新建exe窗口的方式
              // webview.src = e.url;
            }
});

③监听webview鼠标移动、键盘事件

没办法捕获webview的鼠标移动事件，尝试过iohook监听系统鼠标移动事件，不知是版本问题or用法问题，没办法正常使用。

3、自定义关闭exe

渲染进程

var ipcRender = require('electron').ipcRenderer
ipcRender.send('handelClose', "执行关闭")

主进程

// win -- BrowserWindow
ipcMain.on('handelClose', function (res) {
  app.quit()
})

erer
ipcRender.send(‘handelClose’, “执行关闭”)

**主进程**

```js
// win -- BrowserWindow
ipcMain.on('handelClose', function (res) {
  app.quit()
})

4、exe崩溃处理

  // 处理程序崩溃
  win.webContents.on('crashed', () => {
    app.relaunch();
    app.exit(0);
     return  
})