Electron学习笔记

2020-05-05 本文已影响0人陈yc

官网：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工程代码的最小组成

index.html

<html>
  <body>hello world!</body>
</html>

package.json

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

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

安装

安装Node.js
安装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

修改文件：.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
    }),

修改文件：src/index.ejs

<!-- Set `__static` path to static files in production -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
  <script>
    window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
  </script>
<% } %>

在使用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/

Electron学习笔记

Electron是什么？

Electron的组成：

chromium架构：

主进程:

渲染进程：

主进程与渲染进程的API：

内部运行机制：

Electron的能力：

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

Electron工程代码的最小组成

快速搭建

安装

验证安装成功

安装加速

常用功能实现案例

创建窗口：

渲染进程与主进程通信：

主进程与渲染进程通信：

渲染进程之间通信：

系统通知：

上传本地文件：

打开网页：

打开目录：

本地持久化存储：

打包：

Electron-Vue

项目搭建：

常见报错：

其他问题

mac生成签名：

electron下载慢

猜你喜欢

热点阅读