網站首頁 編程語言 正文
一、Electron簡介
Electron是一個能讓你使用JavaScript,HTML和CSS來創建桌面應用程序的框架。這些應用程序可以打包后在 macOS、Windows 和 Linux 上直接運行。
在目前瀏覽器和移動端盛行的互聯網環境下,跨平臺的桌面應用開發,也為前端提供了一個新分支方向。
二、搭建準備
1、檢查git和node是否安裝完成
git --version
node -v
npm -v
2、搭建React
安裝create-react-app
npm install -g create-react-app
創建my-electron-app項目
create-react-app my-electron-app
啟動項目
cd my-electron-app && npm start
3、安裝electron包
npm i --save-dev electron
三、創建基本應用程序
首先需要了解下Electron,用Electron開發應用程序就像構建一個帶有網頁界面的Node.js應用程序。同樣使用package.json文件作為主入口,主腳本指定了運行主進程的 Electron應用程序的入口,這里是main.js 文件。
1、創建main.js文件
// 導入app、BrowserWindow模塊
// app 控制應用程序的事件生命周期。事件調用app.on('eventName', callback),方法調用app.functionName(arg)
// BrowserWindow 創建和控制瀏覽器窗口。new BrowserWindow([options]) 事件和方法調用同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 的文件創建新的 NativeImage 實例
webPreferences: { // 網頁功能設置
nodeIntegration: true, // 是否啟用node集成 渲染進程的內容有訪問node的能力
webviewTag: true, // 是否使用<webview>標簽 在一個獨立的 frame 和進程里顯示外部 web 內容
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
// }));
// 加載應用 --開發階段 需要運行 npm run start
mainWindow.loadURL('http://localhost:3000/');
// 解決應用啟動白屏問題
mainWindow.on('ready-to-show', () => {
mainWindow.show();
mainWindow.focus();
});
// 當窗口關閉時發出。在你收到這個事件后,你應該刪除對窗口的引用,并避免再使用它。
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文件
主進程文件創建好了,修改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 如果輸出目錄已經存在,替換它
5、 運行打包命令
npm run package
原文鏈接:https://blog.csdn.net/Hearbeat/article/details/128304941
相關推薦
- 2021-11-28 C#?通過同步和異步實現優化做早餐的時間_C#教程
- 2022-05-12 Kotlin 集合也可以進行+= -= 還可以根據條件進行刪除(removeIf)
- 2022-08-26 Input標簽自動校驗功能去除實現_React
- 2022-09-26 Mybatis的一級緩存和二級緩存及其區別
- 2023-07-02 解密Python中的作用域與名字空間_python
- 2023-02-27 C語言中互斥鎖與自旋鎖及原子操作使用淺析_C 語言
- 2022-09-25 Windows 10主機上的VMware Workstation出現“VMware Workstat
- 2022-06-26 Qt中QtWebEngine加載本地網頁跨域問題的總結_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支