快捷導(dǎo)航

Vue和React中快速使用Electron的簡單教程

更新時間：2022年05月17日 07:59:59 作者：玲小叮當(dāng)

Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

提示：

本篇文章只是教你簡單上手，Electron本身功能是非常強大的，這里邊的結(jié)合，只是能讓你簡單實現(xiàn)一個桌面應(yīng)用程序！如需要復(fù)雜的配置electron，建議去參考官網(wǎng)~

前言

對于我們來說Electron相當(dāng)于一個殼子，可以把寫好的網(wǎng)頁程序嵌入到殼子里面，可以運行在桌面上的一個程序，可以把網(wǎng)頁打包成一個在桌面應(yīng)用程序，也類似我們平時做的套殼打包的5+app，簡單來說就是軟件，Electron非常出名的就是Vscode，想要深入了解可以查看官網(wǎng)的詳細(xì)介紹。

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、前提

Electron使用的前提是需要配備nodejs環(huán)境，所以請檢查你的電腦是否安裝了nodejs環(huán)境可以在cmd或者powerShell使用node -v查看

二、在Vue和React中快速使用

提示：需在Vue和React打包成功的文件目錄下！

完整配置的文件，我這邊上傳了gitee，把文件復(fù)制粘貼進(jìn)去直接npm i就可以?。旱刂?XLL/electron打包

1. 安裝Electron

在打包后的根目錄下 npm init 否則下一步安裝的Electron可能會安裝到外層vue項目里
在dist文件夾內(nèi)創(chuàng)建 main.js 文件及 package.json 文件

以下為main.js內(nèi)容，可復(fù)制粘貼進(jìn)去，以下為最簡單的electron配置，如想要復(fù)雜的配置，可以去參考一下官網(wǎng)配置

const {
  app,
  BrowserWindow,
  Menu
} = require('electron'); // 引入electron
let win;
let windowConfig = {
  minWidth: 1600, //最小寬度
  minHeight: 800, //最小高度
  show: false,
  resizable: false
  // frame: false,
  // fullscreen: false,
  // titleBarStyle: 'hiddenInset',
  // titleBarOverlay: true
}; //窗口配置程序運行窗口的大小
function createWindow() {
  win = new BrowserWindow(windowConfig); //創(chuàng)建一個窗口
  win.loadURL(`file://${__dirname}/index.html`); //在窗口內(nèi)要展示的內(nèi)容index.html 就是打包生成的index.html
  // win.webContents.openDevTools(); //開啟調(diào)試工具
  // 隱藏菜單欄
  Menu.setApplicationMenu(null)
  // 默認(rèn)最大化
  win.maximize()
  win.show()
  win.on('close', () => {
    //回收BrowserWindow對象
    win = null;
  });
  win.on('resize', () => {
    // 默認(rèn)刷新

    // win.reload();
  })
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win == null) {
    createWindow();
  }
});

// electron限制只能打開一個應(yīng)用窗口，在有窗口的情況下喚起窗口。
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', (event) => {
    if (win) {
      if (win.isMinimized()) win.restore()
      win.focus()
    }
  })
  app.on('ready', () => {
    // createWindow()
    const {
      Menu
    } = require('electron')
    Menu.setApplicationMenu(null) // 隱藏菜單欄
  })
}

package.json中修改，可以把下邊的直接復(fù)制粘貼進(jìn)去，electron限定了版本號，下邊的復(fù)制粘貼進(jìn)去后，在dist根目錄下cmd執(zhí)行npm i下載，如果你的版本號和我這邊的有出入，可能打包失敗！

{
  "name": "xxx",
  "productName": "XXXXX",
  "author": "小叮當(dāng)",
  "version": "1.0.0",
  "main": "main.js",
  "description": "項目描述",
  "scripts": {
    "pack": "npx electron-builder --dir",
    "dist": "npx electron-builder",
    "postinstall": "npx electron-builder install-app-deps",
    "start": "npx electron .",
    "package": "npx electron-packager . relay --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"
  },
  "build": {
    "electronVersion": "1.8.4",
    "win": {
      "requestedExecutionLevel": "highestAvailable",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "appId": "demo",
    "artifactName": "demo-${version}-${arch}.${ext}",
    "nsis": {
      "artifactName": "demo-${version}-${arch}.${ext}"
    },
    "extraResources": [
      {
        "from": "./static/",
        "to": "app-server",
        "filter": [
          "**/*"
        ]
      }
    ],
    "publish": [
      {
        "provider": "generic"
      }
    ]
  },
  "dependencies": {
    "core-js": "^2.4.1",
    "create-egg": "^2.0.1",
    "electron": "^16.2.6",
    "electron-builder": "^22.14.13",
    "electron-package": "^0.1.0",
    "electron-packager": "^12.1.0",
    "electron-updater": "^2.22.1"
  }
}