Electron packs your H5 application into a desktop application

What is electron?

Build cross-platform desktop applications using JavaScript, HTML, and CSS. As you can see, this thing is designed to allow web applications and H5 applications developed in HTML,javaScript, CSS to be packaged into a desktop application, such as an exe installation package, or a MAC installation package. So we don’t have to open our app in the browser. And like Tencent QQ run directly. The big one: VS Code, facebook Manager is packaged with this artifact.

The other is introduced

Web technology

Electron is based on Chromium and Node.js and lets you build applications using HTML, CSS and JavaScript.

Open source

Electron is an open source project maintained by GitHub and an active community of contributors.

cross-platform

Electron is compatible with Mac, Windows, and Linux and can build applications for all three platforms.

How to install

Installing electron is easy, just like any other package, directly NPM or YARN:

npm i -D electron@latest
Copy the code

Develop and package H5 applications

Let’s start by installing the official example:

Clone sample project repository
$ git clone https://github.com/electron/electron-quick-start

# Enter this warehouse
$ cd electron-quick-start

Install dependencies and run
$ yarn install && yarn start
Copy the code

A desktop application has been started:

npm install electron-packager --save-dev
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
Copy the code

Command description:

Location of Project: Indicates the path of the project
Name of Project: indicates the name of the packaged project
Platform: Determines which platform you want to build the application for (Windows, Mac, or Linux, with options of: Darwin, Linux, MAS, Win32)
Architecture: Determines whether to use x86 or X64 or both
Electron version: indicates the version of the electron
We add the following optional options to the script node of package.json based on our project environment:

"packager": "Electron -packager./ fristProject --platform=win32 --arch=ia32 --out./outApp --electron-version 1.4.0 --overwrite"
Copy the code

The first packaging is slow because to download the compiled file, it is best to use YARN to execute yarn Packager for packaging. After the packaging is complete, we have an exe execution file.

h5
electron-vue

electron-vue

The installation

Run the following commands in sequence:

npm install -g vue-cli
vue init simulatedgreg/electron-vue ws-chat
Copy the code

yarn dev

vue-cli
/src/renderer
package.json
main.js
vue-cli
electron-vue

yarn build
Copy the code

If there is no reaction or error during the packaging process, you can refer to this article: electron-vue packaging, using electron- Builder packaging, simple and convenient after packaging, run:

conclusion

electronThe ability to package your web application into a cross-platform desktop application
On the development,electronIt also has the capabilities of a web browser, as wellnodeJsThe ability, so to speak, to link web pages andnodeJsCombined, make read and write files, access to the database can be easily realized, powerful.
electron-vueCan be easily tovue-cliScaffolding projects for relocation.
electronThere are still many pits in the use process, especially when packaging, you need to carefully refer to the official documentation.

In my personal opinion, after learning the front-end, I can master mobile app(React-Native, streaming application, Web View hybrid application), H5 application, Web application, various small programs, nodeJs background service, cross-platform desktop application and even usecocos createrDevelopment of games, most of the top micro channel games are developed with this platform, using the technology isjavaScriptCooperate withcanvasTo achieve. The so-called omnipotent.