Although B/S is the mainstream of current development, C/S still has a large market demand. Limited by the sandbox of the browser, Web applications cannot meet the requirements in some scenarios, while desktop applications can read and write local files and invoke more system resources. In addition, with the advantages of low cost and high efficiency of Web development, this cross-platform approach is increasingly favored by developers.

Electron is a cross-platform development framework for building cross-platform applications using HTML, CSS, and JavaScript based on Chromium and Node.js, compatible with Mac, Windows, and Linux. Electron has created a number of applications including VScode and Atom.

Environment set up

Before creating the Electron cross-platform application, you need to install some common tools, such as Node, Vue, and Electron.

Install the Node

Into the Node’s official website to download page, http://nodejs.cn/download/, and then download the corresponding version, the download is recommended to download stable version. If Homebrew is used to install Node, it is recommended to change the NPM repository image to Taobao image during installation, as shown below.

npm config setRegistry http://registry.npm.taobao.org/ or NPM install - g CNPM - registry=https://registry.npm.taobao.orgCopy the code

Install/upgrade VUE – CLI

Run the following command to check the vue-CLI version.

vue -V
Copy the code

If it is not installed or not the latest version, you can run the following command to install/upgrade.

npm install @vue/cli -g
Copy the code

Install the Electron

Run the following command to install the Electron plug-in.

NPM install -g electron or CNPM install -g electronCopy the code

To verify the installation, run the following command.

electron --version
Copy the code

Create a running project

Electron has a simple project that can be cloned locally by executing the following command.

git clone https://github.com/electron/electron-quick-start

Copy the code

Then run the following command in the project to start the project.

cd electron-quick-start
npm install 
npm start
Copy the code

The effect of the project after startup is shown below.

vue init simulatedgreg/electron-vue
Copy the code

Then follow the instructions below to create the project by selecting the options step by step, as shown below.

Electron source directory

Electron’s source code has been split into many parts according to Chromium’s split convention. To better understand the source code, you might want to take a look at Chromium’s multi-process architecture. The structure and meaning of the Electron source directory are as follows:

Electron ├ ─ ─ the atom - Electron source | ├ ─ ─ app - system entry code | ├ ─ ─ browser - contains the main window, UI, and all the other things related to the main process, It tells how to manage the rendering process page | | ├ ─ ─ lib - the main process part of initialization code in the JavaScript code | | ├ ─ ─ the UI - the implementation of different platform UI part | | | ├ ─ ─ the cocoa, cocoa part of source code | | | ├ ─ ─ GTK - part of GTK + source code | | | └ ─ ─ win - Windows GUI part of source code | | ├ ─ ─ default_app - in the absence of specified app Electron starts the default page | | ├ ─ ─ API - the realization of the main process API | | | └ ─ ─ lib - API implementation part of Javascript code | | ├ ─ ─ net - network related code | | ├ ─ ─ MAC - related to MAC Objective - C Code | | └ ─ ─ resources - icon, Platform related file | ├ ─ ─ the renderer - running in the process of rendering code | | ├ ─ ─ lib - rendering process part of initialization code in the JavaScript code | | └ ─ ─ API - the realization of the rendering process API | | └ ─ ─ lib - API implementation part of Javascript code | └ ─ ─ common - it is the main process and rendering process using the code, Includes some to the event loop node | | integrated into the event loop of the Chromium used tools | function and code ├ ─ ─ lib - was the main process and rendering process at the same time use the Javascript code to initialize | └ ─ ─ API - At the same time is the main process and the realization of the rendering process using the API and Electron built-in module infrastructure | └ ─ ─ lib - API implementation part of Javascript code ├ ─ ─ chromium_src - from Chromium ├─ Code ├─ Docs - English Version of The Document ├─ Docs - Translations of various language versions Of the Document ├─ Spec - Automated Test ├─ Atom. Gyp-electron build Rules ├─ Common. gypi - Compilation Settings and build rules for other components such as' node 'and' breakpad 'Copy the code

The SRC, package.json, and Appveyor.yml directories are the most important things to focus on during normal development. 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, scripts in this directory should not be called directly by the user
  • Vendor-source code for third-party dependencies. To prevent people from confusing it with the directory of the same name in the Chromium source, we don’t use third_party as the directory name here
  • Node_modules – A third-party node module used in the build
  • Out – Ninja’s temporary output directory
  • Dist – Temporary distribution directory created by the script script/create-dist. Py
  • External_binaries – Downloaded precompiled third-party frameworks that do not support gyP builds

Application Engineering Catalogue

The electron engineering structure created using the electron-vue template is shown below.

  • Electronic-vue: indicates the electron template configuration.
  • Build: folder, which houses the project build scripts.
  • Config: stores some basic configuration information of the project. The most common one is port forwarding.
  • Node_modules: This directory holds all dependencies of the project, that is, the files downloaded by the NPM install command.
  • SRC: This directory holds the source code for the project, i.e. the code written by the developer.
  • Static: Stores static resources.
  • Index.html: is the home page and entrance page of the project, as well as the only HTML page of the whole project.
  • Package. json: defines all of the project’s dependencies, including development-time and release-time dependencies.

For developers, 90% of the work is done in SRC, where the files are in the following directories.

【 Main process 】

The Electron process running the package.json main script (background.js) is called the main process. The script running in the main process presents the user interface by creating a Web page. A Electron application always has one and only one main process.

[Rendering process]

Since Electron uses Chromium to present Web pages, Chromium’s multi-process architecture is also used. Each Web page in Electron runs in its own rendering process. In normal browsers, Web pages usually run in a sandbox environment and are not allowed to touch native resources. However, Electron allows users to do some low-level interaction with the operating system on the page with node.js API support.

【 Main process communicates with renderer process 】

The main process creates the page using the BrowserWindow instance. Each BrowserWindow instance runs the page in its own rendering process. When an instance of BrowserWindow is destroyed, the rendering process is terminated. The main process manages all the Web pages and their corresponding renderers. Each renderer process is independent and only cares about the Web page it is running on.

SRC directory structure

In the Electron directory, the SRC package contains the main and renderer directories.

The main directory

The main directory will contain both index.js and index.dev.js files.

  • Index.js: The main file for the application, electron is also launched from here, which is also used as the entry file for webPack product builds, where all main work should start.
  • Index.dev.js: This file is used specifically for the development phase, because it installs electron-debug and vue-devTools. You generally don’t need to modify this file, but it can extend your development requirements.

Rendering process

Renderer is a directory for storing project source code, including assets, Components, Router, Store, app. vue, and main.js.

  • Assets: The files under assets such as JS and CSS are merged into a single file under the project folder dist.
  • Components: This file is used to store application development components, which can be custom components.
  • Router: If you know vue-Router, the Electron project route is used in a similar way to vue-Router.
  • Modules: electron – vue using vuex module structure to create multiple data storage, and stored in the SRC/renderer/store/modules.

Composite sample

1. Netease Cloud Music

Electron – Vue-Cloud-Music is a cross-platform desktop application developed using Electron+Vue+Ant Design Vue technology. Download link: github.com/xiaozhu188/… . It has the following characteristics:

  • Drag the playback
  • Desktop lyrics
  • The mini model
  • Custom tray right click menu
  • Taskbar thumbnail, song manipulation
  • Audio visualization
  • Automatic/manual check for updates
  • Nedb database persistence
  • Customize the installation path to beautify the installation interface
  • Start the client in the browser
  • Travis CL, AppVeyor builds automatically
  • Skin change, download, local song matching, network change desktop notification, share song/playlist /MV/ video and so on QQ space
  • Login, private Fm, Playlist, Album, Singer, Chart, MV, video, comment, Search, User, Dynamic, fans, attention, cloud disk, Favorites…
  • Heartbeat mode, fine tuning lyrics, next play, add play, single cycle, random play, list cycle
  • Routing, local refresh, home column adjustment and persistence…

Here are some of the results:

2. Qq Music player

Qq Music player Based on the development of electronic-vue music player, the interface mimics QQ music, using the technology stack electronic-vue +vue+vuex+ vue-Router + element-UI. You can run the project as follows.

git clone https://github.com/SmallRuralDog/electron-vue-music.git

cd electron-vue-music

npm install

Run development mode
npm run dev

Package the installation file
npm run build
Copy the code

Part of the operation effect is shown below.

Reference: Use vuE-CLI-plugin-electron – Builder to develop vuE-CLI3.0 + electron desktop development application Electron cross-platform desktop application package