If you want to package your H5 project as a desktop application, look here

First, run the Github demo

1. Clone official demo: git clone https://github.com/electron/electron-quick-start 2. cd electron-quick-start 3. npm install 4. npm start And now I'm ready to run the demoCopy the code

Two, let’s do the relevant modifications before packaging

  1. If you plan to package dist packaged by vue or React project, you can refer to the figure below. Create a new Resource directory (defined by yourself) in the electron project and copy the contents of the packaged dist to the Resource directory. Modify main.js in the electron project. mainWindow.loadFile(‘resource/index.html’)

NPM start is now ready to run your project

  1. If you want to package your h5 project link (e.g. www.baidu.com) as a desktop application, just change main.js, loadUrl, and NPM start will now be the corresponding page! (As shown below)

Three, the preparatory work is good, let’s do the packaging related configuration

  1. Package. json adds the content boxed in the diagram

  "scripts": {
    "start": "electron ."."pack": "Electron packager. myApp --platform=win32 --arch=x64 --out=./myApp --asar --app-version=0.0.1"."distWin": "electron-builder --win --x64"."distMac": "electron-builder --mac --x64",},"build": {
    "appId": "com.xxx.app"."copyright": "LEON"."productName": "myApp"
    "mac": {
      "target": [
        "dmg"."zip"]},"win": {
      "target": [
        "nsis"."zip"]}},Copy the code
  1. Install related dependencies
NPM install electron --save-dev // install electron NPM install electron -- packager --save-dev // NPM install superelectron builder --save-dev //Copy the code
  1. Execute relevant instructions to package
NPM run pack // Pack Windows applications in the myApp directory NPM run distMac // Pack macOS applications in the dist directory (must be on the MAC to pack successfully)Copy the code

4. Related configuration of Windows

In main.js you can change the appearance by configuring BrowserWindow width Integer - The window width in pixels. The default is 800. height Integer - Window height, in pixels. The default is 600. x Integer - The left offset of the window relative to the screen. Y Integer - The offset position of the window relative to the top of the screen. UseContentSize Boolean - Width and height use the web page size, which means the actual window size should include the window frame size, which is slightly larger, Default: false. Center Boolean - The window screen is centered. MinWidth Integer - The minimum window width, default: 0. MaxWidth Integer - Maximum window width (default: unlimited) maxHeight Integer - Maximum window height (default: unlimited) Default is true. Movable Boolean - Whether Windows can be dragged. Not valid on Linux. Default is true. Minimizable Boolean - Whether Windows can be minimized. Not valid on Linux. Default is true. Maximizable Boolean - Whether a window can be maximized. Not valid on Linux. Default is true. Closable Boolean - Whether Windows can be closed. Not valid on Linux. Default is true. AlwaysOnTop Boolean - Whether a window is always displayed before other Windows. Not valid on Linux. Default: false. Fullscreen Boolean - whether Windows can be fullscreen. When explicitly set to When false, the full-screen button is hidden and disabled on macOS. Default false. Fullscreenable Boolean - On macOS, whether the full-screen button is available, default is true. SkipTaskbar Boolean - Whether to display Windows in the taskbar. The default value is false. Kiosk Boolean - KIOSK mode. Default false. Title String - Window default title. Default "Electron".icon NativeImage - Window icon, if not set, the window will use the available default icon. Show Boolean - Whether the window is displayed when it is created. Default true. Frame Boolean - Specify false to create a Frameless Window. The default is true. AcceptFirstMouse Boolean - Whether clicking on the Web View is allowed to activate the window. Default is false. DisableAutoHideCursor Boolean - Whether to hide the mouse when typing. Default false. AutoHideMenuBar Boolean - Hide menu bar unless Alt is pressed. Default is false. EnableLargerThanScreen Boolean - Whether to allow changing the window size larger than the screen. Default is false. BackgroundColor String - The window's background color value is hexadecimal, such as #66CD00 or #FFF or #80FFFFFF (transparency support). Default is #000 (black) on Linux and Windows, #FFF (or transparent) on Mac. HasShadow Boolean - Whether the window has a shadow. It only works on macOS. Defaults to true. DarkTheme Boolean - Uses dark themes for Windows, only works on some desktop environments with GTK+3. Default: false. Transparent Boolean - Window transparency. Default: false. Type String - Window type, default normal window. See more below. TitleBarStyle String - window titleBarStyle. See more below. WebPreferences Object - Sets interface features. Check out more below.Copy the code

This paper reference: www.cnblogs.com/dfsxh/p/118…