Electron 桌面应用程序的框架,快速入门搭建一个桌面程序

Electron是什么?

Electron 快捷传送门,点击走你。。。

快速让你的web项目成为桌面应用

js 复制代码
// 初始化一个 package.json
npm init
js 复制代码
// 添加 Electron 依赖,安装过可忽略
npm install --save-dev electron
js 复制代码
{
"name": "my-electron-app",
 "version": "1.0.0",
// 在package.json 内添加 桌面程序的入口文件属性
"main": "main.js",
...
}
js 复制代码
{
...
"main": "main.js",
// 在package.json 内添加执行命令
"scripts": {
    "electron": "electron ."
  }
...
}
js 复制代码
// 入口文件 main.js 内添加主进程代码
const { app, BrowserWindow } = require('electron')
// app 模块,它控制应用程序的事件生命周期。
// BrowserWindow 模块,它创建和管理应用程序 窗口。

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')//主程序渲染进程的加载文件
  win.loadURL('主程序渲染进程的加载地址')
}
//在 Electron 中,只有在 app 模块的 ready 事件被激发后才能创建窗口
app.whenReady().then(() => {
  createWindow()
})
相关推荐
Martin -Tang13 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发14 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html