Electronic package your H5 application into desktop application


What is electron?

The official website explains: useJavaScript, HTML and CSSBuild cross platform desktop applications. As you can see, this is for us to usehtml,javaScript,cssDevelopedwebApplication andh5The application is packaged into a desktop application, such as aexeInstallation package, or amacInstallation package for. So we don’t have to open our app in the browser. And it runs directly like Tencent QQ.
Famous:VS code, facebook managerIt was developed and packaged with this artifact.

Other introductions

Web Technology

Electron is based on chromium and Node.js Allows you to build applications using HTML, CSS and JavaScript.

Open Source

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

Cross platform

Electron is compatible with Mac, windows and Linux, and can build applications on three platforms.

How to install

installelectronIt’s simple, just like any other bag, directnpmperhapsyarnInstallation:

npm i -D [email protected]

Develop and package H5 applications

Let’s first install the official example:

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

#Enter this warehouse
$ cd electron-quick-start

#Install dependencies and run
$ yarn install && yarn start

After startup, it is found that a desktop application has been started:
Electronic package your H5 application into desktop application
Package the application and execute the following command:

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

Command description:

  • Location of project: the path of the project
  • Name of project: the name of the packaged project
  • Platform: determines which platform application you want to build (windows, MAC or Linux, optional values: Darwin, Linux, MAS, Win32)
  • Architecture: decide whether to use x86 or x64 or both
  • Electronic version: the version of electron
  • Optional options: optional options
    We add the following command to thepackage.jsonOfscriptUnder the node:
"packager": "electron-packager ./ fristProject --platform=win32 --arch=ia32 --out ./outApp --electron-version 1.4.0 --overwrite"

The first time the package is slow, because to download the compiled file, it is better to use theyarnTo executeyarn packagerCome and pack. When it’s packaged, we get oneexeThe implementation file of.
Electronic package your H5 application into desktop application
So we get oneh5Developed desktop applications. Let’s introduce how to useelectron-vueTo develop and package our chat room program.



Execute the following commands in turn:

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

Electronic package your H5 application into desktop application
Electronic package your H5 application into desktop application
After the above operation is completed,yarn devWe can start our development environment.
Electronic package your H5 application into desktop application
Due to a slight change in the directory structure, we can change thevue-cliCopy the code in the SRC directory to/src/renderer。 Then merge the NPM that the previous project relied on into the current onepackage.jsonInside,main.jsIt also needs to be consolidated. Just finish onevue-cliProject orientationelectron-vueProject migration work.
Next we package our program:

yarn build

If there is no response or error in the packaging process, please refer to this article:
Electronic Vue packaging, using electronic builder packaging, simple and convenient
After packaging, run:
Electronic package your H5 application into desktop application


  1. electronIt can package your web application into a cross platform desktop program
  2. In terms of development,electronAt the same time, it has the ability of web browser, and also has the ability of web browsernodeJsThe ability to combine web pages andnodeJsCombined, it makes reading and writing files and accessing database easy and powerful.
  3. electron-vueCan easilyvue-cliThe project of scaffold construction shall be relocated.
  4. electronThere are still many holes in the process of use, especially when packing, you need to carefully refer to the official documents.

Personal feeling, learn the front end, will be mobile app (react native, streaming applications, web view hybrid applications), H5 applications, web applications, various small programs, nodejs background services, cross platform desktop applications, and even usecocos createrMost of the top wechat games are developed with this platform, and the technology used isjavaScriptcoordinationcanvasTo achieve. It’s omnipotent.

Related reading:

Understanding websocket
Implementation of a chat room with websocket


Official website
#Electron quick start and packaging
#Error: unresolved node modules: Vue

Learning is like sailing against the current. If you don’t keep up with the rapid development of front-end technology, if you don’t insist on learning every day, you will not be able to keep up with me. I will accompany you to push blog posts every day and make progress with you. I hope you can pay attention to me and receive the latest articles as soon as possible.

Official account No.Electronic package your H5 application into desktop application

Recommended Today

Queue chain storage

Linked list realizes queue Create three files: queuelinked. H, queuelinked. C, queuelinkedtest. C queueLinked.h #ifndef QUEUE_LINKED_H_ #define QUEUE_LINKED_H_ #ifdef __GNUC__ #define DEPRECATED __attribute__( (deprecated) ) #elif defined(_MSC_VER) #define DEPRECATED __declspec( deprecated ) #else #define DEPRECATED #endif #ifndef PTOI #define PTOI( p ) ((int32_t)(int64_t)(p)) #endif #ifndef ITOP #define ITOP( i ) ((void *)(int64_t)(i)) #endif #define ADT […]