Preface
Although B/S is the mainstream of current development, C/S still has great market demand. Limited by the browser's sandbox restrictions, web applications cannot meet the requirements of certain scenarios, while desktop applications can read and write local files, call more system resources, and the advantages of low cost and high efficiency of web development , This cross-platform approach is becoming more and more popular among developers.
Electron is a cross-platform development framework based on Chromium and Node.js, using HTML, CSS and JavaScript to build cross-platform applications, compatible with Mac, Windows and Linux. At present, Electron has created a large number of applications including VScode and Atom.
Environment setup
Before creating an Electron cross-platform application, you need to install some commonly used tools, such as Node, vue, and Electron.
Install Node
Go to the download page of Node's official website http://nodejs.cn/download/ and download the corresponding version. It is recommended to download the stable version when downloading. If you install Node using Homebrew, it is recommended to change the npm warehouse mirror to Taobao mirror during installation, as shown below.
npm config set registry http://registry.npm.taobao.org/
或者
npm install -g cnpm --registry=https://registry.npm.taobao.orgInstall/upgrade vue-cli
Execute the following command first to confirm the vue-cli version installed locally.
vue -V
If it is not installed or is not the latest version, you can execute the following command to install/upgrade.
npm install @vue/cli -g
Install Electron
Use the following command to install the Electron plugin.
npm install -g electron
或者
cnpm install -g electron
In order to verify whether the installation is successful, you can use the following command.
electron --version
Create run project
Electron officially provides a simple project, you can execute the following command to clone the project locally.
git clone https://github.com/electron/electron-quick-start
Then execute the following command in the project to start the project.
cd electron-quick-start
npm install
npm start
The effect of the project after startup is shown below.
In addition, we can use the vue-cli scaffolding tool to create projects.
vue init simulatedgreg/electron-vue
Then follow the prompts below to select the option step by step to create the project, as shown below.
Then, use the npm install command to install the dependent packages needed by the project. After the installation is complete, you can use the npm run dev or npm run build command to run the electron-vue template application. The running effect is shown in the figure below.
Electron source directory
Electron's source code is divided into many parts according to Chromium's splitting convention. In order to better understand the source code, you may need to understand Chromium's multi-process architecture.
The structure and meaning of Electron source code directory are as follows:
Electron
├──atom - Electron 的源代码
| ├── app - 系统入口代码
| ├── browser - 包含了主窗口、UI 和其他所有与主进程有关的东西，它会告诉渲染进程如何管理页面
| | ├── lib - 主进程初始化代码中 JavaScript 部分的代码
| | ├── ui - 不同平台上 UI 部分的实现
| | | ├── cocoa - Cocoa 部分的源代码
| | | ├── gtk - GTK+ 部分的源代码
| | | └── win - Windows GUI 部分的源代码
| | ├── default_app - 在没有指定 app 的情况下 Electron 启动时默认显示的页面
| | ├── api - 主进程 API 的实现
| | | └── lib - API 实现中 Javascript 部分的代码
| | ├── net - 网络相关的代码
| | ├── mac - 与 Mac 有关的 Objective-C 代码
| | └── resources - 图标，平台相关的文件等
| ├── renderer - 运行在渲染进程中的代码
| | ├── lib - 渲染进程初始化代码中 JavaScript 部分的代码
| | └── api - 渲染进程 API 的实现
| | └── lib - API 实现中 Javascript 部分的代码
| └── common - 同时被主进程和渲染进程用到的代码，包括了一些用来将 node 的事件循环
| | 整合到 Chromium 的事件循环中时用到的工具函数和代码
| ├── lib - 同时被主进程和渲染进程使用到的 Javascript 初始化代码
| └── api - 同时被主进程和渲染进程使用到的 API 的实现以及 Electron 内置模块的基础设施
| └── lib - API 实现中 Javascript 部分的代码
├── chromium_src - 从 Chromium 项目中拷贝来的代码
├── docs - 英语版本的文档
├── docs-translations - 各种语言版本的文档翻译
├── spec - 自动化测试
├── atom.gyp - Electron 的构建规则
└── common.gypi - 为诸如 `node` 和 `breakpad` 等其他组件准备的编译设置和构建规则
In normal development, the src, package.json and appveyor.yml directories need to be focused on. In addition, other directories that need attention are as follows:
-
script-scripts used for development purposes such as building, packaging, testing, etc.
-
tools-tool scripts used in gyp files, but unlike the script directory, the scripts in this directory should not be called directly by users
-
vendor-the source code of a third-party dependency. In order to prevent people from conflating it with the directory of the same name in the Chromium source code, we do not use third_party as the directory name here
-
node_modules-third-party node modules used in the build
-
out-Temporary output directory for ninja
-
dist-temporary distribution directory created by script/create-dist.py
-
external_binaries-downloaded third-party frameworks that do not support pre-compiled builds with gyp
Application engineering catalog
The structure of the Electron project created using the electron-vue template is shown in the figure below.
Similar to the project structure of front-end engineering, the directory structure of the Electron project is as follows:
-
electron-vue: Electron template configuration.
-
build: folder used to store project build scripts.
-
config: Store some basic configuration information of the project, the most commonly used is port forwarding.
-
node_modules: This directory stores all the dependencies of the project, that is, the files downloaded by the npm install command.
-
src: This directory stores the source code of the project, that is, the code written by the developer is placed here.
-
static: used to store static resources.
-
index.html: It is the home page, entry page of the project, and the only HTML page for the entire project.
-
package.json: defines all the dependencies of the project, including development dependencies and release dependencies.
For developers, 90% of the work is done in src, and the file directories in src are as follows.
Electron application is divided into three basic modules: main process, inter-process communication and rendering process.
1. The main process
The process in which Electron runs the main script (background.js) of package.json is called the main process. The script running in the main process creates a web page to display the user interface. An Electron application always has one and only one main process.
2. Rendering process
Since Electron uses Chromium to display Web pages, Chromium's multi-process architecture is also used. Each Web page in Electron runs in its own rendering process. In ordinary browsers, Web pages usually run in a sandbox environment and are not allowed to access native resources. However, Electron allows users to interact with the operating system in the page under the support of Node.js API.
3. The main process communicates with the rendering process
The main process uses the BrowserWindow instance to create the page. Each BrowserWindow instance runs the page in its own rendering process. When a BrowserWindow instance is destroyed, the corresponding rendering process will also be terminated. The main process manages all web pages and their corresponding rendering processes. Each rendering process is independent, it only cares about the Web page it runs.
src directory structure
In the Electron directory, the src package contains two directories, main and renderer.
main directory
The main directory will contain two files, index.js and index.dev.js.
-
index.js: The main file of the application. Electron is also started from here. It is also used as the entry file for webpack product construction. All main process work should start from here.
-
index.dev.js: This file is specially used in the development phase because it will install electron-debug and vue-devtools. Generally, there is no need to modify this file, but it can expand the development requirements.
Rendering process
The renderer is the rendering process directory, the storage directory of the usual project development source code, including assets, components, router, store, App.vue and main.js.
assets: Files such as (js, css) under assets will be merged into one file in the project directory under the dist folder. components: This file is used to store application development components, which can be custom components. router: If you know vue-router, the use of routing in the Electron project is similar to that of vue-router. modules: electron-vue uses the module structure of vuex to create multiple data stores and save them in src/renderer/store/modules.
Comprehensive example
Before creating an Electron cross-platform application, you need to install some commonly used tools, such as Node, vue, and Electron.
1. NetEase Cloud Music
electron-vue-cloud-music is a cross-platform desktop application that uses Electron+Vue+Ant Design Vue technology. Download link: https://github.com/xiaozhu188/electron-vue-cloud-music. Has the following characteristics:
-
Drag and drop
-
Desktop lyrics
-
mini mode
-
Customize the tray right-click menu
-
Taskbar thumbnail, song operation
-
Audio visualization
-
Automatic/manual check for updates
-
Nedb database persistence
-
Customize the installation path, beautify the installation interface
-
Start the client in the browser
-
Travis CL, AppVeyor automatic construction
-
Skinning, downloading, local song matching, desktop notification of network changes, sharing songs/playlists/MV/videos, etc. to QQ space
-
Login, private Fm, playlist, album, singer, leaderboard, MV, video, comment, search, user, activity, fan, follow, cloud disk, favorite...
-
Heartbeat mode, fine-tuning of lyrics, next play, additional play, single loop, random play, list loop
-
Route-oriented, partial refresh, homepage column adjustment and persistence...
The following are some of the operating effects:
2. QQ music player
QQ music player is based on the music player developed by electron-vue, the interface imitates QQ music, and the technology stack electron-vue+vue+vuex+vue-router+element- UI is used. You can use the following methods to run the project.
git clone https://github.com/SmallRuralDog/electron-vue-music.git
cd electron-vue-music
npm install
# 运行开发模式
npm run dev
# 打包安装文件
npm run buildPart of the running effect is shown below.
Source code: https://github.com/xiaozhu188/electron-vue-cloud-music