腾讯QQ新版的秘密武器：Electron框架如何实现无缝跨平台体验-USB迷|专注于互联网分享

🎬 鸽芷咕：个人主页
🔥 个人专栏: 《C++干货基地》《粉丝福利》

⛺️生活的理想，就是为了理想的生活!

引言：

新版QQ大家都用过，而腾讯为什么要使用大量人力来构建新版QQ呢？腾讯QQ使用Electron框架就是实现无缝跨平台体验。通过使用Electron，QQ能够在Windows、macOS和Linux上提供一致的用户体验，同时保持高性能和稳定性。Electron框架解决了QQ在不同平台上 native 应用开发难度大、维护成本高的问题。

文章目录

引言：
一、Electron框架介绍
- 1.1 什么是Electron框架？
- 1.2 Electron的由来？
- 1.3 Electron带来了什么？
二、Electron优化了那些部分
- 2.1 Electron框架如何优化QQ的跨平台性能？
- 2.2 QQ使用Electron后，在内存管理上有哪些改进？
三、Electron的环境搭建
- 3.1. 所需的基础文件
- 3.2 安装依赖
- nrm 的使用
- 3.3 运行
四、总结

一、Electron框架介绍

1.1 什么是Electron框架？

🔍 Electron是一个使用Web技术（HTML、CSS和JavaScript）来构建跨平台桌面应用程序的框架。这意味着开发者可以利用现有的Web开发技能来创建可以在不同操作系统上运行的应用程序。

简单来说
electron 其实就是个壳子，一个可以展示网页内容的壳子，相当于一个独立的浏览器，而这个浏览器可以提供给你一些接口，去调用系统的资源。
一般在浏览器中网页是没有权限去调用系统资源的，本地文件都无法自主获取，只能通过用户操作喂给浏览器才行。
有了 electron 就自由了，可以调用 electron 提供的一些系统功能，所有 nodejs 中可以使用的功能都可以。

1.2 Electron的由来？

📜 Electron最初由GitHub团队开发，名为Atom，用于构建Atom编辑器。后来，GitHub将Atom的代码库开源，并将其重命名为Electron，以便其他开发者也能利用这个框架来构建跨平台应用程序。

1.3 Electron带来了什么？

🌟 Electron为开发者带来了编写一次代码，跨平台部署的能力。它结合了Chromium渲染引擎和Node.js的能力，使得开发者可以利用Web技术栈来构建具有丰富用户界面的桌面应用程序。

二、Electron优化了那些部分

2.1 Electron框架如何优化QQ的跨平台性能？

🚀 Electron通过使用Web技术栈和跨平台API，优化了QQ的跨平台性能。下面是一个简单的Electron应用示例，展示了如何创建一个窗口：

const { app, BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
}
app.whenReady().then(createWindow);

2.2 QQ使用Electron后，在内存管理上有哪些改进？

🔄 QQ使用Electron后，在内存管理上的改进主要体现在进程隔离、资源管理、内存释放、内存监控、图形渲染优化、使用原生API和动态加载等方面。对比以前架构，Electron的内存管理更加高效。

三、Electron的环境搭建

3.1. 所需的基础文件

基础的环境搭建只需要三个文件

github: https://github/KyleBing/electron-demo

.
├── app.js
├── index.html
└── package.json

所有使用 npm 的项目都是一个 npm 包，只不过你的包是私密的。这个可以去看 npm 基础。

package.json

package.json 中只需要在 devDependencies 标签中添加 electron 即可
字段 main 指定程序的入口 js 文件，也就是上面的 app.js，
这个名字自己随便定， main.js 也行，对应上就可以。

electron 的版本号不一定非是这个，用最新的就好了。这个是我写教程时的最新版本。

{
  "name": "electron-demo",
  "version": "0.1.0",
  "private": true,
  "author": {
    "name": "KyleBing",
    "email": "kylebing@163"
  },
  "description": "demo-electron",
  "main": "app.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^13.1.7"
  }
}

这是程序的入口文件，electron 的主进程就是这个。里面是关于 electron app 的一些生命周期方法

const {app, BrowserWindow} = require('electron');

const url = require("url");
const path = require("path");


let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, 'index.html'), // 指定好对应的主页文件就好了
            protocol: "file:",
            slashes: true
        })
    )
    mainWindow.on('closed', function () {
        mainWindow = null
    })
 mainWindow.webContents.openDevTools() // 显示这个窗口的调试窗口，如果不想显示，删除该段即可
}

// 程序启动时
app.on('ready', ()=>{
    createWindow()
})

// 所有窗口关闭时
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

// 程序处于激活状态时
app.on('activate', function () {
    if (mainWindow === null) {
        createWindow()
    }
})

目前只是简单的 html 主页文件


```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Eelctron-Demo</title>
</head>
<body>
	<h1>Electron Demo</h1>
	<p>你好呀！</p>
</body>
</html>

3.2 安装依赖

安装依赖会比较麻烦，electron 安装的时候需要从外网下载对应系统的依赖文件，而这个下载是不会经过 npm 的，也就是说使用国内的 npm 源地址是无法正常安装的。

如果你已经使用了国内的 npm 源地址，请将它调整回官方的 npm 源地址，不然将无法正常安装 electron。

nrm 的使用

正常国内网络基本上无法安装 electron, 速度10kb/s 左右吧，最终都会因超时而失败。只能用代理装。
写程序这块，如果没有代理简直跟瞎了一样，建议找个渠道整一个。

http://kylebing/diary/#/share/6592

你安装的时候也可能会遇到一些问题，比如：

macOS Electron 环境安装时的错误 Cannot find module ‘macos-alias‘ 解决

在当前目录下，终端执行 npm 包的安装即可，可以使用 npm

也可以使用 yarn

3.3 运行

现在就可以运行了

npm run start

四、总结

本文从Electron框架的基本概念、优化和环境搭建过程，探讨了QQ选择使用Electron框架来实现无缝跨平台体验的原因。通过Electron，QQ能够在不同平台上提供一致、高效和稳定的用户体验。

🎬 鸽芷咕：个人主页
🔥 个人专栏: 《C++干货基地》《粉丝福利》

⛺️生活的理想，就是为了理想的生活!

引言：

新版QQ大家都用过，而腾讯为什么要使用大量人力来构建新版QQ呢？腾讯QQ使用Electron框架就是实现无缝跨平台体验。通过使用Electron，QQ能够在Windows、macOS和Linux上提供一致的用户体验，同时保持高性能和稳定性。Electron框架解决了QQ在不同平台上 native 应用开发难度大、维护成本高的问题。

文章目录

引言：
一、Electron框架介绍
- 1.1 什么是Electron框架？
- 1.2 Electron的由来？
- 1.3 Electron带来了什么？
二、Electron优化了那些部分
- 2.1 Electron框架如何优化QQ的跨平台性能？
- 2.2 QQ使用Electron后，在内存管理上有哪些改进？
三、Electron的环境搭建
- 3.1. 所需的基础文件
- 3.2 安装依赖
- nrm 的使用
- 3.3 运行
四、总结

一、Electron框架介绍

1.1 什么是Electron框架？

🔍 Electron是一个使用Web技术（HTML、CSS和JavaScript）来构建跨平台桌面应用程序的框架。这意味着开发者可以利用现有的Web开发技能来创建可以在不同操作系统上运行的应用程序。

简单来说
electron 其实就是个壳子，一个可以展示网页内容的壳子，相当于一个独立的浏览器，而这个浏览器可以提供给你一些接口，去调用系统的资源。
一般在浏览器中网页是没有权限去调用系统资源的，本地文件都无法自主获取，只能通过用户操作喂给浏览器才行。
有了 electron 就自由了，可以调用 electron 提供的一些系统功能，所有 nodejs 中可以使用的功能都可以。

1.2 Electron的由来？

1.3 Electron带来了什么？

二、Electron优化了那些部分

2.1 Electron框架如何优化QQ的跨平台性能？

🚀 Electron通过使用Web技术栈和跨平台API，优化了QQ的跨平台性能。下面是一个简单的Electron应用示例，展示了如何创建一个窗口：

const { app, BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
}
app.whenReady().then(createWindow);

2.2 QQ使用Electron后，在内存管理上有哪些改进？

三、Electron的环境搭建

3.1. 所需的基础文件

基础的环境搭建只需要三个文件

github: https://github/KyleBing/electron-demo

.
├── app.js
├── index.html
└── package.json

所有使用 npm 的项目都是一个 npm 包，只不过你的包是私密的。这个可以去看 npm 基础。

package.json

electron 的版本号不一定非是这个，用最新的就好了。这个是我写教程时的最新版本。

{
  "name": "electron-demo",
  "version": "0.1.0",
  "private": true,
  "author": {
    "name": "KyleBing",
    "email": "kylebing@163"
  },
  "description": "demo-electron",
  "main": "app.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^13.1.7"
  }
}

这是程序的入口文件，electron 的主进程就是这个。里面是关于 electron app 的一些生命周期方法

const {app, BrowserWindow} = require('electron');

const url = require("url");
const path = require("path");


let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, 'index.html'), // 指定好对应的主页文件就好了
            protocol: "file:",
            slashes: true
        })
    )
    mainWindow.on('closed', function () {
        mainWindow = null
    })
 mainWindow.webContents.openDevTools() // 显示这个窗口的调试窗口，如果不想显示，删除该段即可
}

// 程序启动时
app.on('ready', ()=>{
    createWindow()
})

// 所有窗口关闭时
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

// 程序处于激活状态时
app.on('activate', function () {
    if (mainWindow === null) {
        createWindow()
    }
})

目前只是简单的 html 主页文件


```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Eelctron-Demo</title>
</head>
<body>
	<h1>Electron Demo</h1>
	<p>你好呀！</p>
</body>
</html>

3.2 安装依赖

安装依赖会比较麻烦，electron 安装的时候需要从外网下载对应系统的依赖文件，而这个下载是不会经过 npm 的，也就是说使用国内的 npm 源地址是无法正常安装的。

如果你已经使用了国内的 npm 源地址，请将它调整回官方的 npm 源地址，不然将无法正常安装 electron。

nrm 的使用

正常国内网络基本上无法安装 electron, 速度10kb/s 左右吧，最终都会因超时而失败。只能用代理装。
写程序这块，如果没有代理简直跟瞎了一样，建议找个渠道整一个。

http://kylebing/diary/#/share/6592

你安装的时候也可能会遇到一些问题，比如：

macOS Electron 环境安装时的错误 Cannot find module ‘macos-alias‘ 解决

在当前目录下，终端执行 npm 包的安装即可，可以使用 npm

也可以使用 yarn

3.3 运行

现在就可以运行了

npm run start

USB迷 | 专注于互联网分享

腾讯QQ新版的秘密武器：Electron框架如何实现无缝跨平台体验

引言：

文章目录

一、Electron框架介绍

1.1 什么是Electron框架？

1.2 Electron的由来？

1.3 Electron带来了什么？

二、Electron优化了那些部分

2.1 Electron框架如何优化QQ的跨平台性能？

2.2 QQ使用Electron后，在内存管理上有哪些改进？

三、Electron的环境搭建

3.1. 所需的基础文件

3.2 安装依赖

nrm 的使用

3.3 运行

四、总结

引言：

文章目录

一、Electron框架介绍

1.1 什么是Electron框架？

1.2 Electron的由来？

1.3 Electron带来了什么？

二、Electron优化了那些部分

2.1 Electron框架如何优化QQ的跨平台性能？

2.2 QQ使用Electron后，在内存管理上有哪些改进？

三、Electron的环境搭建

3.1. 所需的基础文件

3.2 安装依赖

nrm 的使用

3.3 运行

四、总结

与本文相关的文章

评论列表 (0)