Electron筆記

Electron

• Electron筆記
• • What is Electron?
  • 快速上手
  • • 1、環(huán)境準(zhǔn)備
    • 2、編寫(xiě)文件
    • 3、運(yùn)行代碼
  • 打包

官網(wǎng)：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

跨平臺(tái)桌面應(yīng)用開(kāi)發(fā)：基于Electron與NW.js

Node.js全棧徹底貫徹 大前端從web到全平臺(tái) 真正意義的一次編寫(xiě)到處運(yùn)行

傳統(tǒng)桌面應(yīng)用開(kāi)發(fā)要求懂高級(jí)編程語(yǔ)言以及專(zhuān)門(mén)的框架。有了Electron和NW.js，你可以將現(xiàn)有Web開(kāi)發(fā)技術(shù)運(yùn)用到僅僅使用HTML、CSS和JavaScript就能開(kāi)發(fā)的桌面應(yīng)用中。而且，開(kāi)發(fā)出來(lái)的應(yīng)用還能在Windows、Mac和Linux中工作，顯著減少了開(kāi)發(fā)和培訓(xùn)的時(shí)間。

快速上手

1、環(huán)境準(zhǔn)備

electron運(yùn)行需要nodejs環(huán)境，node自帶npm，不用單獨(dú)安裝npm;

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

安裝完之后打開(kāi)win+R打開(kāi)cmd命令行，環(huán)境變量是否配置；

2、編寫(xiě)文件

以下為官網(wǎng)教程推薦創(chuàng)建，官網(wǎng)：https://www.electronjs.org/docs/latest/tutorial/quick-start

新建一個(gè)文件夾，雙擊打開(kāi)，在地址欄輸入cmd打開(kāi)命令提示符；輸入一下代碼，一路回車(chē)。

npm init

需要?jiǎng)?chuàng)建的文件如下；

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

{"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、運(yùn)行代碼

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

即可看到效果；

陸續(xù)更新中·······

打包

需要用到工具electron-packager

命令行執(zhí)行npm install electron-packager 安裝此工具。

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

總結(jié)

以上是生活随笔為你收集整理的Electron笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。