Electron学习笔记

官网：https://www.electronjs.org/
开发文档：https://www.electronjs.org/docs

Electron是什么？

• Electron是由github开发的开源框架
• 它允许开发者使用Web技术构建跨平台桌面应用

Electron的组成：

chromium架构：

主进程:

• Electron运行package.json的main脚本的进程称为主进程
• 每个应用只有一个主进程
• 管理原生GUI，典型的窗口（BrowserWindow、Tray、Dock、Menu）
• 创建渲染进程
• 控制应用生命周期（app）

渲染进程：

• 展示Web页面的进程称为渲染进程
• 通过Node.js、Electron提供的API可以跟系统底层打交道
• 一个Electron应用可以有多个渲染进程

主进程与渲染进程的API：

内部运行机制：

Node.js时间循环基于libuv，但Chromium基于message bump

Electron的能力：

与其他桌面应用开发技术对比

Electron工程代码的最小组成

1. index.html

  hello world!

2. package.json

{
  "name": "electron-app",
  "version": "1.0.0"
  "main": "main.js"
}

3. main.js

const { app, BrowserWindow } = require('electron')
let win
app.on('ready', () => {
  win = new BrowserWindow()
  win.loadFile('index.html')
}

启动工程

electron .

快速搭建

# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start

安装

1. 安装Node.js
2. 安装Electron

npm install electron --save-dev
npm install --arch=ia32 --plateform=win32 electron(windows 32位)

验证安装成功

npx electron -v
./node_modules/.bin/electron -v

安装加速

ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/ npm install electron --save-dev

---

常用功能实现案例

创建窗口：

import { BrowserWindow } from 'electron'

mainWindow = new BrowserWindow({
    fullscreen: true, 
    height: 650,
    width: 1200,
    useContentSize: true, // width 和 height 使用web网页size, 这意味着实际窗口的size应该包括窗口框架的size，稍微会大一点，默认为 false。
    minWidth: 750,
    webPreferences: {
      nodeIntegration: true // 是否开启Node.js的环境
    }
})
// 加载页面文件
// mainWindow.loadURL(winURL)
mainWindow.loadFile(./index.html);

渲染进程与主进程通信：

1、Promise写法(Electron 7.0之后支持)：
渲染进程：

import { ipcRenderer } from 'electron'

notice();
async function notice() {
  let res = await ipcRenderer.invoke('notice');
}

主进程：

import { ipcMain } from 'electron'

handleIPC();
function handleIPC() {
  ipcMain.handle('notice', () => {
    // do something
  })
}

2、Callback写法：
渲染进程：

import { ipcRenderer } from 'electron'

ipcRenderer.send('notice', '吃饭啦');

主进程：

import { ipcMain } from 'electron'

ipcMain.on('notice', (event, content) => {
  console.log(content);
});

主进程与渲染进程通信：

主进程：

let win = new BrowserWindow({
  // config
});
win.webContents.send('render-do-something');

渲染进程：

ipcRenderer.on('render-do-something', () => { 
  // do somethiing
})

渲染进程之间通信：

• 通知事件
  • 通过主进程转发（5.0之前）
  • ipcRenderer.sendTo（5.0之后）
• 数据共享
  • Web技术（locaStorage / sesstionStorage / indexedDB）
  • 使用remote

主进程：

global.windowIds = {
  win1WebContentId: win1.webContent.id,
  win2WebContentId: win2.webContent.id
}

渲染进程1：

const { ipcRenderer, remote } from 'electron'
let globalObj = remote.getGlobal('windowIds');
let win2WebContentId = globalObj.win2WebContentId;
ipcRenderer.sendTo(win2WebContentId, 'do-something', '参数')

渲染进程2：

ipcRenderer.on('do-something', () => {
  // do something
})

系统通知：

const { Notification } from 'electron'
let notification = new Notification({
  title: '通知标题',
  body: '通知内容',
  actions: [{  text: '确定', type: 'button' }],
  closeButtonText: '忽略'
});
notification.show();
notification.on('action', () => {
  // do something
});
notification.on('close', () => {
  // do something
});

上传本地文件：

import { dialog } from 'electron'

dialog.showOpenDialog({
  properties: ['openFile'],
  filters: [{
    name: 'Images',
    extensions: ['jpg', 'png', 'gif', 'jpeg']
  }]
}).then(result => {
  console.log(result.filePaths);
})

打开网页：

import { shell } from 'electron'
shell.openExternal(url);

打开目录：

import { shell } from 'electron'
shell.showItemInFolder(path);

本地持久化存储：

npm install electron-store -S

const Store = require('electron-store');
const store = new Store();

store.set('websites', websites) // 保存
let websites = store.get('websites') // 查询

打包：

打包工具比对

打包前期准备：

• mac：
  • 开发者证书
  • 软件图标（icns格式，可通过image2icon或iconutil生成）
  • dmg背景图
  • 安装包图标
• windows：
  • 开发者证书（赛门铁克、WoSign）
  • ico图标
  • installerIcon
  • uninstallerIcon

npm i -g --production windows-build-tools （windows必备，用管理员启动cmd安装）
npm i electron-builder -S
npm i cross-env -S

package.json配置：

"build": {
  "productName": "work_desktop", // 应用名
  "appId": "myWorkDesktop", // 应用ID
  "directories": { // 打包目录配置
    "output": "build", // 存放产包的目录
    "app": "dist", // 打包的代码目录
    "buildResources": "resource" // 构建包的资源目录 
  },
  "asar": true, // 是否使用asar加密
  "copyright": "" // 版权
  "files": [
    "dist/electron/**/*"
  ],
  "mac": {
    "target": ["dmg", "zip"], // 包格式
    "icon": "build/icons/icon.icns" // logo地址
  },
  "dmg": {
    "background": "", // 背景图
    "window": { "width": 540, "height": 380 }, // 安装窗口大小
    "iconSize": 128, // logo大小
    "contents": [ // dmg内容坐标
      {
        "x": 410,
        "y": 150,
        "type": "link",
        "path": "/Applications"
      },
      {
        "x": 130,
        "y": 150,
        "type": "file"
      }
    ]
  },
  "win": {
    "icon": "build/icons/icon.ico", // logo地址
    "target": ["nsis", "squirrel"] // 包格式
  },
  "nsis": { // exe安装程序
    "oneClick": false, // 一键安装
    "language": "2502", // 安装语言代码
    "perMachine": true, // 给机器上所有用户安装
    "allowToChangeInstallationDirectory": true // 让用户选择目录
  },
  "squirrelWindows": {
    "loadingGif": "resource/loading.gif", // 安装loading动画
    "iconUrl": "https://xxxxxxx.com/icon.ico" // icon远程地址
  }
}

• 产品发布时版本号需升级，一般遵循semver语法，可以使用npm version patch/minor/major管理
• Windows下需要证书签名，否则可能被杀毒软件误杀
• Mac下如果没有证书签名，无法使用Electron自动更新
• Windows下打包可以写nsis逻辑修改安装包
• 开源软件可以基于Travis、AppVejor持续集成

---

Electron-Vue

项目搭建：

# 如果你没有vue-cli的话需要全局安装
npm install -g vue-cli
# 使用vue-cli安装electron-vue的模板
vue init simulatedgreg/electron-vue projectName
# 安装依赖
cd projectName
npm install

常见报错：

• ReferenceError: process is not defined

1. 修改文件：.electron-vue/webpack.renderer.config.js

    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: path.resolve(__dirname, '../src/index.ejs'),
        minify: {
            collapseWhitespace: true,
            removeAttributeQuotes: true,
            removeComments: true
        },
        isBrowser: false,
        isDevelopment: process.env.NODE_ENV !== 'production',
        nodeModules: process.env.NODE_ENV !== 'production'
            ? path.resolve(__dirname, '../node_modules')
            : false
    }),

2. 修改文件：src/index.ejs

<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
  
<% } %>

3. 在使用new BrowserWindow是加参数：

webPreferences: { //添加这句话
  nodeIntegration: true
}

---

其他问题

mac生成签名：

https://blog.csdn.net/weixin_30527143/article/details/98338130?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-3-98338130.nonecase

https://www.bbsmax.com/A/D854ge7VJE/

https://www.cnblogs.com/mapleChain/p/12350532.html

electron下载慢

下载镜像：https://npm.taobao.org/mirrors/electron/9.3.0/
处理方法：https://blog.csdn.net/weixin_34344677/article/details/92084779
备注：~/Library/Caches/electron/