位置: IT常识 - 正文

前端框架 Electron 使用总结(前端框架三大框架)

编辑:rootadmin
前端框架 Electron 使用总结

目录

一、基础搭建

通过脚手架搭建

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-reloader

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()})前端框架 Electron 使用总结(前端框架三大框架)

这样便有热更新功能了。

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

这里,我们

本文链接地址:https://www.jiuchutong.com/zhishi/298964.html 转载请保留说明!

上一篇:游戏玩的多,陪玩你了解的多吗?用Python来采集陪玩数据,看看行情和美照(玩很多游戏的人)

下一篇:鲜花商城系统设计与实现(Java+Web+MySQL)(鲜花售卖系统)

  • 发票没金额能开吗
  • 公司工资0申报
  • 广告发布费属于什么征税项目
  • 明明申报了为什么显示没有申报
  • 现金支出的一般程序
  • 已发货未收款怎么做会计分录
  • 电商平台收取会员费吗
  • 留底的预缴税款怎么处理?
  • 屋面维修按定额预算明细表
  • 农副产品税率及范围
  • 小规模税务30万免税政策
  • 建筑业月末账务处理
  • 企业开业装修费用分录
  • 如何设置win7系统密码
  • win10任务栏不显示最近
  • 施工企业内部往来核算方法包括( )
  • win10 kb5001567
  • win11无法打开开始菜单怎么办
  • 制造费用结转到生产成本
  • win10 热键
  • svchost一直在下载什么
  • 苹果a1530是什么
  • PHP:proc_close()的用法_命令行函数
  • 虚开发票的管理办法是什么?
  • 用php写个简单的编程
  • 非货币资金包括哪些科目
  • php中namespace use用法实例分析
  • 向境外支付技术提成费需要提交什么材料
  • 银行转来委托收款
  • 企业和单位往来怎么做账
  • 自行建造厂房如何缴税
  • vue运行报错
  • 详解Yii2.0 rules验证规则集合
  • 出口退税无纸化备案怎么弄
  • js数组方法大全
  • 前端面试题校招
  • pytorch jit
  • react modal
  • php短信验证
  • php 截取字符
  • php md5 16位
  • 应收账款减值损失计入
  • 利润表三步法
  • 计算机网络面试八股文
  • 承兑汇票贴现利率是怎么算
  • 织梦网站怎么添加关键词
  • 税务新增办税人员
  • 资产负债表怎么看盈利或亏损
  • 如何理解合并报表编制程序中的调整与抵消处理
  • 增值税减免附什么凭证
  • 付款退回怎么做账
  • ce认证所需的模块有哪些
  • 捐赠人赞助属于什么会计科目
  • 货款和发票金额不一致
  • 收购发票使用范围及预警怎么写
  • 发票已到款未付怎么做账
  • 现金日记账的登记日期以什么日期为标准?
  • 跨月发票作废怎么做会计分录
  • mysql数据库5.7.27安装
  • centos7基本环境选哪个
  • macos越狱教程
  • bios界面如何进入
  • centos的特点
  • 无线网络连接不上显示无ip分配
  • win8怎么停止自动更新
  • ubuntu配置vsftpd
  • linux常用命令useradd
  • win7为什么打不开原神
  • unity lightmap uv
  • three.js dispose
  • linux系统tomcat启动
  • css网页布局的基础是什么
  • unity3d最新
  • java颜色代码对照表图片
  • linux 中的atq命令
  • unity3d怎么用
  • 如何设置python
  • 卷票发票丢失怎么办理
  • 河南三门峡税务社保缴费电话
  • 以出让方式取得的土地
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设