位置: IT常识 - 正文
目录
一、基础搭建
通过脚手架搭建
1、Electron官方案例搭建环境
2、查看调试
3、菜单的使用
4、图标配置
5、项目打包
推荐整理分享前端框架 Electron 使用总结(前端框架三大框架),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:前端框架技术,前端框架三大框架,前端框架bootstrap,前端框架bootstrap,前端框架vue,前端框架vue,前端框架三大框架,前端框架三大框架,内容如对您有帮助,希望把文章链接给更多的朋友!
web应用相信每位程序员都不陌生,PC端应用可能会底层开发的就不是太多了,下面的这套技术栈就是为前端程序员快速一键搭建windows、Linux、Mac的PC端应用而生的,只要会React实现Web开发即可。Electron使用很广泛,VScode编辑器就是Electron框架做的。
electron官方文档:
简介 | Electron
一、基础搭建通过脚手架搭建Electron脚手架 - ElectronForge使用文档_wanzheng_96的博客-CSDN博客
1、Electron官方案例搭建环境快速入门 | Electron
这里搭建到这一步后见我的代码:
此时我们的项目结构:
main.js代码如下:
const { app, BrowserWindow } = require('electron')app.on("ready",()=>{ const mainWindow = new BrowserWindow({ width: 500, height: 500 }) mainWindow.loadFile('./src/index.html').then()})运行项目:
npm run start弹出小窗口:
第一个案例运行成功!
但此时是没有热更新的功能的,每次修改完代码,我们都需要重启,所以这里添加一个热更新依赖:
yarn add --dev electron-reloadermain.js修改如下:
const { app, BrowserWindow } = require('electron')//热加载const reLoader=require("electron-reloader")reLoader(module)//监听初始化完成的生命周期app.on("ready",()=>{ const mainWindow = new BrowserWindow({ width: 700, height: 700 }) mainWindow.loadFile('./src/index.html').then()})这样便有热更新功能了。
2、查看调试可以通过ctl+shift+i查看控制台
3、菜单的使用参考文档:Menu | Electron
在main.js同级目录下创建menu.js用于存放menu数据,menu.js代码如下:
const { BrowserWindow, Menu } = require("electron")//定义菜单模板const template = [ { label: "文件", submenu: [ { label: "新建窗口", click () { new BrowserWindow({ width: 500, height: 500 }) } } ] }, { label: "关于我们" }]const menu = Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)再到main.js里引入,引入后代码如下:
const { app, BrowserWindow } = require("electron")//热加载const reLoader = require("electron-reloader")reLoader(module)//监听初始化完成的生命周期app.on("ready", () => { const mainWindow = new BrowserWindow({ width: 700, height: 700 }) mainWindow.loadFile("./src/index.html").then()})require("./menu.js")效果:点击文件->新建后有新窗口弹出
自定义菜单
效果:可以看到此时并无边框
自定义的菜单只需要通过html等写到对应的页面中即可!
4、图标配置5、项目打包方案一:electron forge打包,官方推荐
Electron教程(三)如何打包 electron 程序:electron-forge 的使用教程_十月ooOO的博客-CSDN博客
方案二: windows打包
应用打包
这里我们使用electron-packager来进行打包。全局方式下下载安装:
npm install -g electron-packager在项目根目录执行以下打包命令:
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64这里,我们
上一篇:游戏玩的多,陪玩你了解的多吗?用Python来采集陪玩数据,看看行情和美照(玩很多游戏的人)
下一篇:鲜花商城系统设计与实现(Java+Web+MySQL)(鲜花售卖系统)
友情链接: 武汉网站建设