欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Electron打包React生成桌面應用方法詳解

 更新時間:2022年12月21日 12:22:17   作者:Leonban  
這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧

一、Electron簡介

Electron是一個能讓你使用JavaScript,HTML和CSS來創(chuàng)建桌面應用程序的框架。這些應用程序可以打包后在 macOS、Windows 和 Linux 上直接運行。

在目前瀏覽器和移動端盛行的互聯(lián)網(wǎng)環(huán)境下,跨平臺的桌面應用開發(fā),也為前端提供了一個新分支方向。

二、搭建準備

1、檢查git和node是否安裝完成

git --version
node -v
npm -v

2、搭建React

安裝create-react-app

npm install -g create-react-app

創(chuàng)建my-electron-app項目

create-react-app my-electron-app

啟動項目

cd my-electron-app && npm start

3、安裝electron包

npm i --save-dev electron

三、創(chuàng)建基本應用程序

首先需要了解下Electron,用Electron開發(fā)應用程序就像構建一個帶有網(wǎng)頁界面的Node.js應用程序。同樣使用package.json文件作為主入口,主腳本指定了運行主進程的 Electron應用程序的入口,這里是main.js 文件。

1、創(chuàng)建main.js文件

// 導入app、BrowserWindow模塊
// app 控制應用程序的事件生命周期。事件調(diào)用app.on('eventName', callback),方法調(diào)用app.functionName(arg)
// BrowserWindow 創(chuàng)建和控制瀏覽器窗口。new BrowserWindow([options]) 事件和方法調(diào)用同app
// Electron參考文檔 https://www.electronjs.org/docs
const { app, BrowserWindow, nativeImage } = require('electron');
   const url = require('url');
   const path = require('path');
function createWindow () {
  let mainWindow = new BrowserWindow({
    width: 800, // 窗口寬度
    height: 600, // 窗口高度
    title: "Electron", // 窗口標題,如果由loadURL()加載的HTML文件中含有標簽<title>,該屬性可忽略
    icon: nativeImage.createFromPath('src/public/favicon.ico'), // "string" || nativeImage.createFromPath('src/image/icons/256x256.ico')從位于 path 的文件創(chuàng)建新的 NativeImage 實例
    webPreferences: { // 網(wǎng)頁功能設置
      nodeIntegration: true, // 是否啟用node集成 渲染進程的內(nèi)容有訪問node的能力
      webviewTag: true, // 是否使用<webview>標簽 在一個獨立的 frame 和進程里顯示外部 web 內(nèi)容
      webSecurity: false, // 禁用同源策略
      nodeIntegrationInSubFrames: true // 是否允許在子頁面(iframe)或子窗口(child window)中集成Node.js
    }
  });
  // 加載應用 --打包react應用后,__dirname為當前文件路徑
  // mainWindow.loadURL(url.format({
  //   pathname: path.join(__dirname, './build/index.html'),
  //   protocol: 'file:',
  //   slashes: true
  // }));
  // 加載應用 --開發(fā)階段  需要運行 npm run start
  mainWindow.loadURL('http://localhost:3000/');
  // 解決應用啟動白屏問題
  mainWindow.on('ready-to-show', () => {
    mainWindow.show();
    mainWindow.focus();
  });
  // 當窗口關閉時發(fā)出。在你收到這個事件后,你應該刪除對窗口的引用,并避免再使用它。
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
});

2、修改package.json文件

主進程文件創(chuàng)建好了,修改package.json文件。

(1)配置啟動文件,添加main字段,我們這里也就是main.js文件。如果沒有添加,Electron 將嘗試加載包含在package.json文件目錄中的index.js文件。

(2)配置運行命令,使用"electron-start": "electron ." 。

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",  // 配置啟動文件
  "homepage":".", // 設置應用打包的根路徑 更多了解參考:https://segmentfault.com/a/1190000021875558
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",  // react 啟動命令
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "electron ."  // electron 啟動命令
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^11.1.1"
  }
}

3、啟動Electron

準備工作就完成了,進行啟動

main.js文件中如果設置的mainWindow.loadURL('http://localhost:3000/'); 則需要啟動react項目

啟動react項目

npm start

啟動electron

npm run electron-start

四、打包項目

1、打包react項目

npm run build

將main文件中注釋的mainWindow.loadURL適用于react打包的方法釋放開。

2、打包 electron使用electron-packager依賴

npm install electron-packager --save-dev

3、package.json配置打包命令

"package": "electron-packager . my-electron-app --platform=win32 --arch=x64 --overwrite --electron-version=11.1.1"

4、 配置解釋

electron-packager <應用目錄> <應用名稱> <打包平臺> <架構x86 還是 x64> <架構> <electron版本> overwrite 如果輸出目錄已經(jīng)存在,替換它

5、 運行打包命令

npm run package

到此這篇關于Electron打包React生成桌面應用方法詳解的文章就介紹到這了,更多相關Electron React桌面應用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • React 封裝自定義組件的操作方法

    React 封裝自定義組件的操作方法

    React中自定義組件的重要性在于它們提供了代碼重用、降低耦合性、提升可維護性、更好的團隊協(xié)作、靈活性和易于測試和調(diào)試等好處,從而提高了開發(fā)效率和質量,這篇文章主要介紹了React 封裝自定義組件,需要的朋友可以參考下
    2023-12-12
  • React中useState的使用方法及注意事項

    React中useState的使用方法及注意事項

    useState通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部state,下面這篇文章主要給大家介紹了關于React中useState的使用方法及注意事項的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • 詳解React服務端渲染從入門到精通

    詳解React服務端渲染從入門到精通

    這篇文章主要介紹了詳解React服務端渲染從入門到精通,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • React?跨端動態(tài)化核心技術實例分析

    React?跨端動態(tài)化核心技術實例分析

    這篇文章主要為大家介紹了React?跨端動態(tài)化核心技術實例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • React中的路由嵌套和手動實現(xiàn)路由跳轉的方式詳解

    React中的路由嵌套和手動實現(xiàn)路由跳轉的方式詳解

    這篇文章主要介紹了React中的路由嵌套和手動實現(xiàn)路由跳轉的方式,手動路由的跳轉,主要是通過Link或者NavLink進行跳轉的,實際上我們也可以通JavaScript代碼進行跳轉,需要的朋友可以參考下
    2022-11-11
  • react?hooks?計數(shù)器實現(xiàn)代碼

    react?hooks?計數(shù)器實現(xiàn)代碼

    這篇文章主要介紹了react?hooks計數(shù)器實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-08-08
  • React實現(xiàn)二級聯(lián)動效果(樓梯效果)

    React實現(xiàn)二級聯(lián)動效果(樓梯效果)

    這篇文章主要為大家詳細介紹了React實現(xiàn)二級聯(lián)動效果,樓梯效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • React自定義Hook的實現(xiàn)

    React自定義Hook的實現(xiàn)

    自定義Hook是一種自定義函數(shù),它封裝了React Hook的邏輯,并通過命名約定來使其可重用,本文主要介紹了React自定義Hook的實現(xiàn),感興趣的可以了解一下
    2023-11-11
  • React?Context用法小結(附完整代碼)

    React?Context用法小結(附完整代碼)

    這篇文章主要介紹了React?Context用法小結(附完整代碼),Context提供了一種新的組件之間共享數(shù)據(jù)的方式,允許數(shù)據(jù)隔代傳遞,而不必顯式的通過組件樹逐層傳遞props,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-04-04
  • React?Native?中處理?Android?手機吞字的解決方案

    React?Native?中處理?Android?手機吞字的解決方案

    這篇文章主要介紹了React?Native?中處理?Android?手機吞字的解決方案,作者在 React Native 0.67.4 環(huán)境下,編寫了一個小 demo 來復現(xiàn)這個問題,需要的朋友可以參考下
    2022-08-08

最新評論