位置: 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)(鲜花售卖系统)

  • 小规模纳税人宾馆房屋租赁税率
  • 子公司注销母公司投资损失企业所得税
  • 非限定性净资产相当于本年利润吗
  • 货运代理开票系统如何开票
  • 银行日记账的登记实例图
  • 个税申报系统中累计减除费用可以手动修改吗
  • 租入固定资产改扩建
  • 甲公司自2018年3月1日开始自行研发一款新兴产品
  • 房地产企业对外投资案例
  • 外出经营许可证办理流程
  • 有限合伙企业jp
  • 工地水电包公包料的细节
  • 房屋预售缴款怎么交
  • 支付保险费发票怎么入账
  • 回购库存股所有者权益会发生变化吗
  • 银行利息收入确认时间会计与税法的差异
  • 2021年2月适合公司开业的日子
  • 学校提供场地开发方案
  • 工程款填入申报表应税服务还是应税劳务一栏?
  • a公司拟吸收合并b公司除一项无形资产吗
  • 公司注销了质保金如何收回来
  • 新个税劳务报酬怎么算
  • 本月开了红字发票可以退税吗
  • 开通电子税务局需要什么资料
  • 预缴增值税的情况四种情形汇总表怎么填
  • mac怎么调整网页大小
  • 电脑搜索功能不准确
  • windows11永久解决蓝屏
  • php curl header参数
  • PHP编程中的__clone()方法使用详解
  • 电脑每次开机都要按f1怎么解决
  • windows11如何关闭病毒和威胁防护
  • 企业若需要给客户交税
  • php oci_connect
  • 3gwifi怎么用
  • thinkphp use命名空间
  • 酒店加盟管理费多少
  • 高新技术产业的税收优惠
  • 最贵的手机苹果
  • 布里奇和瓦内莎
  • php对象
  • paper 1
  • 总结的拼音
  • 深度学习之bottleneck layer
  • 应交税费应交增值税销项税额
  • 收购企业如何看报表
  • python如何在一个文件中运行另一个文件
  • micro start
  • phpcms 用的是什么模板引擎
  • 视同销售的会计处理是指?
  • 管理费用和研发费用的关系
  • 坏账准备的借贷方向代表什么
  • 退税登记怎么办理
  • 补充登记法是全部都用蓝字吗
  • 利润分配科目是所有者权益科目吗
  • 费用报销票据规范要求
  • 行政单位年终奖的相关发放规定
  • 出口确认收入的时间
  • 哪些发票可以提供发票
  • 小规模纳税人月销售额超过10万怎么交税
  • 资产减值后折旧怎么算
  • mysql常用查询
  • 查看mysql执行sql日志内容
  • win2003server远程设置
  • xp系统1
  • 开机停在american megatrends
  • windows 查看补丁
  • 开启win10
  • errorlnk2019怎么解决
  • opengl教程48讲
  • 使用jquery实现的项目
  • linux中的tree
  • nodejs python交互
  • jquery 弹出页面
  • js prototype constructor
  • 纳税信用评级b是多少分
  • 上海网上申报软件怎样下载
  • 税务机关纳税检讨书范文
  • 发票挂失费用
  • 个人有关事项核查情况的报告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设