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

  • 华为手环7支持无线充电吗(华为手环7支持语音助手吗)

    华为手环7支持无线充电吗(华为手环7支持语音助手吗)

  • 小红书怎么发图片作品(小红书怎么发图文)

    小红书怎么发图片作品(小红书怎么发图文)

  • vivo x6s A怎么录屏幕视频(vivox6s录屏怎么录内部声音)

    vivo x6s A怎么录屏幕视频(vivox6s录屏怎么录内部声音)

  • beatsx保修多久

    beatsx保修多久

  • 苹果6s plus怎么分屏应用(苹果6s plus怎么强制重启)

    苹果6s plus怎么分屏应用(苹果6s plus怎么强制重启)

  • iphone解锁的时候会停顿1秒(iphone解锁的时候屏幕上下跳)

    iphone解锁的时候会停顿1秒(iphone解锁的时候屏幕上下跳)

  • 未安装任何音频输出设备什么意思(未安装任何音频输出设备怎么安装)

    未安装任何音频输出设备什么意思(未安装任何音频输出设备怎么安装)

  • oppor15处理器相当于骁龙多少(oppor15处理器相当于麒麟)

    oppor15处理器相当于骁龙多少(oppor15处理器相当于麒麟)

  • 打对方手机没有声音怎么回事(打对方手机没有任何声音是怎么回事)

    打对方手机没有声音怎么回事(打对方手机没有任何声音是怎么回事)

  • 聊天记录可以免费恢复吗(聊天记录免费版)

    聊天记录可以免费恢复吗(聊天记录免费版)

  • 电脑出现error1962怎么解决(电脑出现error1962:nooperating)

    电脑出现error1962怎么解决(电脑出现error1962:nooperating)

  • 微控制器由哪三部分组成(微控制器的主要性能包括哪几个方面)

    微控制器由哪三部分组成(微控制器的主要性能包括哪几个方面)

  • 酷我音乐id在哪里(酷我id是什么)

    酷我音乐id在哪里(酷我id是什么)

  • 知乎怎么激活用户(知乎怎样激活)

    知乎怎么激活用户(知乎怎样激活)

  • 微信资料电话怎么隐藏(微信资料电话怎么删除)

    微信资料电话怎么隐藏(微信资料电话怎么删除)

  • 联通自带wo27s是千兆吗(联通自带的wifi怎么连接无线路由器)

    联通自带wo27s是千兆吗(联通自带的wifi怎么连接无线路由器)

  • 拼多多上有扫一扫功能吗(拼多多有没有扫一扫)

    拼多多上有扫一扫功能吗(拼多多有没有扫一扫)

  • 滔搏小程序怎么添加店铺(滔搏小程序怎么取消退款)

    滔搏小程序怎么添加店铺(滔搏小程序怎么取消退款)

  • 交易猫发货要多久(交易猫发货多久可以退款)

    交易猫发货要多久(交易猫发货多久可以退款)

  • airpods轻敲两下哪里(airpods轻敲两下怎么不灵)

    airpods轻敲两下哪里(airpods轻敲两下怎么不灵)

  • 苹果xsmax双卡怎么插(苹果Xsmax双卡怎么关另一张的数据)

    苹果xsmax双卡怎么插(苹果Xsmax双卡怎么关另一张的数据)

  • 服务器数据怎么恢复(服务器数据怎么删)

    服务器数据怎么恢复(服务器数据怎么删)

  •  手机计时器在哪(手机计时器在那里面)

    手机计时器在哪(手机计时器在那里面)

  • 苹果自定义运营商名字(苹果自定义运营商名称个性)

    苹果自定义运营商名字(苹果自定义运营商名称个性)

  • 进项税额转出时点
  • 应付账款不需要函证
  • 对公跨行转账汇款(非柜面)手续费单笔 9折
  • 业务收入和营业收入关系
  • 调整应付账款折扣到营业外收入吗
  • 银行小额代款怎么办理
  • 按年征收的基金有哪些
  • 个人开利息发票的税率与会计分录
  • 按月预提短期借款利息
  • 国债利润收入属于收入吗
  • 完成税务登记之后多久开始报个税?
  • 私车公用税务政策性文件
  • 企业开发票的人员要经过培训吗?
  • 住宿费发票开错了可以重新开吗
  • 凭票报销交通费补贴
  • 拿到省级奖有什么用
  • 购入二手设备,无发票怎么记账
  • 小规模纳税人购车好处
  • 土地出让金产生的利息交契税吗
  • 贴现凭证的贴现银行是谁
  • 旅游门票报销怎么算
  • 小规模核定销售额是什么意思
  • mac怎么打出@符号
  • macbookpro finder
  • win1020h2更新0x800f081f
  • wim文件用什么软件打开
  • 收到棚户区改造资金
  • 刚毕业的学生可以买学生票吗
  • laravel5 使用try catch的实例详解
  • u启动u盘怎么装系统
  • 计提安全费用含税还是不含税
  • 提取的坏账准备怎么算
  • 进口商品增值税可以抵扣吗
  • 错账缴回的银行会计分录
  • 借支单还款后借支单要还么
  • vue项目中使用opencv
  • 应付账款讲解
  • 增值税发票开错了可以退吗
  • 北极野生动物
  • 支付产品运输费怎么入账
  • tensorflow2安装
  • php制作微信小程序
  • uniapp零基础小白到项目实战
  • 社会保险费的征收机构由什么规定
  • stat 命令
  • 独立核算的分公司可以享受小微企业吗
  • 园林绿化工程公司排名
  • 农民工工资专用账户
  • 去年的进项发票可以抵今年的吗
  • 循环语句例题及解析
  • 在哪里验证增值税票
  • 企业应纳税所得额的计算应遵循权责发生制原则
  • 购买汽车抵扣增值税
  • 计提固定资产折旧是什么意思
  • mysql 5.7.1
  • 以摊余成本计量的债权投资与以公允价值计量且其变动
  • 空白发票作废怎么处理
  • 弃置费用预计负债的会计处理
  • 公司代扣代缴社保什么意思
  • 销售佣金的三大特点是什么?
  • 进项增值税发票抵扣期限
  • 建筑行业跨期收益怎么算
  • 文化事业费的费率是多少?
  • 专票三流合一
  • 新准则房地产企业收入确认时间
  • 在sql server
  • solaris 磁盘管理
  • 默认终端地址
  • u 盘装wⅰn10系统
  • vrvedp_m.exe是什么
  • windowsxp怎么卸载
  • starting windows
  • 查找linux
  • cocos2dx schedule
  • js绑定函数
  • jquery升级
  • 一个绿色
  • JavaScript中iframe实现局部刷新的几种方法汇总
  • 区地税局会不会分到乡镇
  • 地税逾期了怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设