Electron筆記

Electron

• Electron筆記
• • What is Electron?
  • 快速上手
  • • 1、環境準備
    • 2、編寫文件
    • 3、運行代碼
  • 打包

官網：https://www.electronjs.org

What is Electron?

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required

跨平臺桌面應用開發：基于Electron與NW.js

Node.js全棧徹底貫徹 大前端從web到全平臺 真正意義的一次編寫到處運行

傳統桌面應用開發要求懂高級編程語言以及專門的框架。有了Electron和NW.js，你可以將現有Web開發技術運用到僅僅使用HTML、CSS和JavaScript就能開發的桌面應用中。而且，開發出來的應用還能在Windows、Mac和Linux中工作，顯著減少了開發和培訓的時間。

快速上手

1、環境準備

electron運行需要nodejs環境，node自帶npm，不用單獨安裝npm;

nodejs官網安裝下載即可，官網：https://nodejs.org/zh-cn/，像qq一樣安裝即可；

安裝完之后打開win+R打開cmd命令行，環境變量是否配置；

2、編寫文件

以下為官網教程推薦創建，官網：https://www.electronjs.org/docs/latest/tutorial/quick-start

新建一個文件夾，雙擊打開，在地址欄輸入cmd打開命令提示符；輸入一下代碼，一路回車。

npm init

需要創建的文件如下；

package.json文件如下，將我這個粘貼到你那個里面即可：

{"name": "my-electron-app","version": "1.0.0","description": "Electron01","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron ."},"author": "","license": "ISC","devDependencies": {"electron": "^17.2.0"} } #main.js const { app, BrowserWindow } = require('electron') const path = require('path')function createWindow () {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})win.loadFile('index.html') }app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}}) })app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()} }) #preload.js window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type])} })

3、運行代碼

在剛才的命令行中輸入：npm start

即可看到效果；

陸續更新中·······

打包

需要用到工具electron-packager

命令行執行npm install electron-packager 安裝此工具。

https://github.com/electron/electron-packager/blob/main/usage.txt

總結

以上是生活随笔為你收集整理的Electron笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。