基于electron+vue+element构建项目模板之自定义标题栏&右键菜单项篇李拜天呀|项目概述项目概述模板_宠物寄养

本篇章将介绍自定义标题栏和右键菜单项，基于electron现有版本安全性的建议，此次的改造中主进程和渲染进程彼此语境隔离，通过预加载(preload.js)和进程间通信(ipc)的方式来完成。

2、窗口最大化

一些应用在实际情况中，希望启动的时候就以窗口最大化的方式呈现，BrowserWindow对象提供了窗口最大化的方法：win.maximize()，具体如下所示：

constwin=newBrowserWindow({//窗体宽度(像素)，默认800像素width:800,//窗体高度(像素)，默认600像素height:600,//窗口标题，如果在加载的HTML文件中定义了HTML标签``，则该属性将被忽略。title:`${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`,webPreferences:{//UsepluginOptions.nodeIntegration,leavethisalone//Seenklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integrationformoreinfonodeIntegration:process.env.ELECTRON_NODE_INTEGRATION,contextIsolation:!process.env.ELECTRON_NODE_INTEGRATION,},});//窗体最大化win.maximize();点击查看代码通过设置后，启动应用就会发现，最大化的过程中会出现黑底闪屏，这样会给用户造成困扰。</p><p>造成这个现象的原因是实例化窗体的时候，默认显示了窗口，然后再最大化，从默认窗口大小到最大化窗口大小的这个过程中窗体还没绘制好，就会出现黑色背景直至最大化完成后，现在稍加改造就可以解决这个问题：实例化的时候不显示窗体，最大化后再显示窗体。</p><p>constwin=newBrowserWindow({//窗体宽度(像素)，默认800像素width:800,//窗体高度(像素)，默认600像素height:600,//窗口标题，如果在加载的HTML文件中定义了HTML标签`<title>`，则该属性将被忽略。title:`${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`,//不显示窗体show:false,webPreferences:{//UsepluginOptions.nodeIntegration,leavethisalone//Seenklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integrationformoreinfonodeIntegration:process.env.ELECTRON_NODE_INTEGRATION,contextIsolation:!process.env.ELECTRON_NODE_INTEGRATION,},});//窗体最大化win.maximize();//显示窗体win.show();点击查看代码3、自定义标题栏</p><p>为什么要自定义标题栏？electron应用自带的标题栏不能满足日益复杂的功能需求时，就只能自定义了。自定义标题除了实现基本的窗口功能外，它还能方便的快速的扩展其他功能需求。</p><p>自定义标题栏使用的是css3-flex+scss来实现布局和样式的编写，其主体划分为两个区域：标题栏区域和功能区域，如下图所示：</p><p>为了使用scss语言来编写样式，我们需要安装sass-loader插件，在终端输入命令：npminstallsass-loader@^10sass--save-dev指定版本尤为重要，高版本对于webpack版本也有要求</p><p>3.1、iconfront图标添加</p><p>功能区域处的功能按钮需要图标，此块是在iconfront官网上找了合适的图标加入购物车后以下载代码的方式下载资源，然后通过下载的demo中第二种方式集成在项目中。</p><p>3.2、编写标题栏页面</p><p>在src/renderer/App.vue修改其内容以完成标题栏的改造，主要是通过css3-flex来完成的布局，包含了标题栏原有的基本功能，改造后效果(gif有失真效果)以及改造的代码如下所示：</p><p>3.3、标题栏页面添加交互</p><p>从electron机制上来说，BrowserWindow是属于主进程模块，要想实现在页面中(渲染进程)调用主进程窗口的功能，这涉及到渲染进程与主进程的通信和安全性，在这通过预加载(preload.js)和ipc来实现该需求。</p><p>解决办法：根目录下vue.config.js文件pluginOptions.electronBuilder节点添加内容preload:"src/main/preload.js"，具体内容如下所示：</p><p>4、自定义右键菜单项</p><p>当前在开发模式下启动应用后也会自启动调试工具（devtools）便于技术人员分析并定位问题，如果关闭调试工具后就没有渠道再次启用调试工具了。还有场景就是在非开发模式下默认是不启用调试工具的，应用出现问题后也需要启用调试工具来分析定位问题。这个时候呢，参考浏览器鼠标右键功能，给应用添加右键菜单项功能包含有：重新加载、调试工具等。右键菜单项在主进程中src/main/index.js管理，通过给BrowserWindow对象webContents属性绑定鼠标右键处理监听处理，具体内容如下所示：</p> <script src="https://www.cwdbkk.com/wp-content/themes/zibll/ggjs/2.js"></script> </div> <div class="text-center theme-box muted-3-color box-body separator em09">THE END</div> </div> </article> <div class="widget_text zib-widget widget_custom_html"> <div class="textwidget custom-html-widget"> <div class="theme-box" style="height:99px"> <nav class="article-nav"> <div class="main-bg box-body radius8 main-shadow"> <a href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/3.html"> <p class="muted-2-color"><i class="fa fa-angle-left em12"></i><i class="fa fa-angle-left em12 mr6"></i>上一篇</p> <div class="text-ellipsis-2">项目计划书模板范文</div> </a> </div> <div class="main-bg box-body radius8 main-shadow"> <a href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/5.html"> <p class="muted-2-color">下一篇<i class="fa fa-angle-right em12 ml6"></i><i class="fa fa-angle-right em12"></i></p> <div class="text-ellipsis-2">房地产项目调研模板(10篇)</div> </a> </div> </nav> </div> </div> </div> <div class="widget_text zib-widget widget_custom_html"> <div class="textwidget custom-html-widget"> <div class="theme-box"> <div class="box-body posts-mini-lists zib-widget"> <ul class="list-inline scroll-x mini-scrollbar tab-nav-theme"> <li class="active"><a class="post-tab-toggle" data-toggle="tab" href="javascript:;" tab-id="post_mini_0">相关文章</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade active in" tab-id="post_mini_0"> <div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/1.html" rel="noopener">项目总结：项目概况报告撰写与概述全览<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/2.html" rel="noopener">项目概述模板<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/3.html" rel="noopener">项目计划书模板范文<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/4.html" rel="noopener">基于electron+vue+element构建项目模板之自定义标题栏&右键菜单项篇李拜天呀<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/5.html" rel="noopener">房地产项目调研模板(10篇)<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/6.html" rel="noopener">国家税务总局江苏省税务局网站政府采购国家税务总局苏州市税务局全市税务稽查部门第三期“四室”建设项目采购需求公开征求意见<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/7.html" rel="noopener">建筑项目工程概况范例6篇<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/8.html" rel="noopener">项目建议书模板（25篇）<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/9.html" rel="noopener">医学科研计划书范文(医学科研项目目标计划书模板)广西水牛所<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/10.html" rel="noopener">考点总结！一造管理：工程项目管理概述组织计划与控制一级造价工程师<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.cwdbkk.com/html_2/chongwujiyang/19123/list/11.html" rel="noopener">最新项目简介怎么写(8篇)<span class="focus-color"></span></a></h2></div></div> </div> </div> </div> </div> </div> </div> <div class="theme-box"> <div class="swiper-bulletin c-green radius8"> <div class="new-swiper" data-interval="5000" data-direction="vertical" data-loop="true" data-autoplay="1"> <div class="swiper-wrapper"> <div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>1.项目概述模板5篇.docx项目概述模板5篇.docx,PAGE 1 - / NUMPAGES 1 项目概述模板5篇项目概述模板第1篇职责: 1、负责项目总体技术审核与指导; 2、施工技术管理,负责工程相关图表、施工文件的内、外审核签发工作; 3、处理施工过程中的重大设计、施工质量问题、参加工程质量验收工作; 4、负责项https://m.book118.com/html/2023/0101/8006040067005025.shtm</div> </div> </div> </div> </div> <div class="theme-box"> <div class="swiper-bulletin c-yellow radius8"> <div class="new-swiper" data-interval="5000" data-direction="vertical" data-loop="true" data-autoplay="1"> <div class="swiper-wrapper"> <div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>1.项目介绍作文(通用19篇)项目介绍作文(通用19篇) 在平凡的学习、工作、生活中,大家总免不了要接触或使用作文吧,作文根据写作时限的不同可以分为限时作文和非限时作文。为了让您在写作文时更加简单方便,下面是小编精心整理的项目介绍作文,欢迎大家借鉴与参考,希望对大家有所帮助。 https://www.oh100.com/w/217590.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>2.项目概述(精选十篇)项目概述(精选十篇) 在探讨项目评价时, 人们往往更多地谈论“评价”而很少关注“项目”。事实上, 要做好项目评价, 首先必须对项目有比较全面、深刻的了解。而国内项目评价理论研究文献[1,2,3,4,5]鲜见关于项目和项目评价类型的系统论述。本文将围绕项目的定义与分类, 项..https://www.360wenmi.com/f/cnkey5z5pyi0.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>3.项目简介模板项目简介模板范文模板为您推荐: 项目简介模板项目简介模板是指对某个项目的基本情况进行综合性地简要介绍的一种书面文本。项目简介模板包括项目建设内容、建设规模、投资总额、市场前景、经济效益等方面内容。项目简介模板免费版由华军软件园为您提供下载,源文件为docx格式,方便用户自行编辑内容。项目简介模板主要内容 1、项目的主要内容...https://m.onlinedown.net/soft/10011522.htm</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>4.信息化项目建设方案模板(一项目概述)信息系统项目建设方案文档文章浏览阅读1.1k次。本文档详述了国土空间规划信息化建设方案,包括项目背景、目标、任务和建设原则。旨在解决多规冲突,依托云计算、大数据、GIS、人工智能技术,构建国土空间基础信息平台和实施监督信息系统,实现规划编制、审批、监管全过程信息化,提高管理决策水平。https://blog.csdn.net/qq_28605843/article/details/136277644</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>5.大学生创业项目计划书模板(精选8篇)在现在社会,需要使用创业计划书的情况越来越多,创业计划书对于创业者吸引所需要的人力资源,凝聚人心,具有重要作用。到底应如何拟定创业计划书呢?下面是小编帮大家整理的大学生创业项目计划书模板,欢迎阅读与收藏。大学生创业项目计划书篇1 摘要随着国内经济的发展,广告业在不断发展壮大。我们成立广告公司的重点是业...https://www.yjbys.com/chuangye/ziliao/chuangyejihuashu/628885.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>6.精选项目建议书模板八篇精选项目建议书模板八篇在生活中,很多地方都会使用到建议书,建议书的写作格式一般由标题、称呼、正文、署名、日期等几部分组成。相信写建议书是一个让许多人都头痛的问题,以下是小编为大家整理的项目建议书8篇,仅供参考,希望能够帮助到大家。项目建议书篇1 ...https://www.jy135.com/jianyishu/582088.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>7.项目申请书模板(精选8篇)项目申请书模板(精选8篇) 在经济飞速发展、人们往来越来越密切的今天,申请书使用的次数愈发增长,利用申请书我们可以表达自己的愿望和诉求。那么大家知道正规的申请书怎么写吗?下面是小编收集整理的项目申请书,欢迎大家借鉴与参考,希望对大家有所帮助。项目申请书 1 ...https://www.fwsir.com/fanwen/html/fanwen_20220504192046_1778849.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>8.如何使用Gitee的Scrum项目模板提高团队敏捷能力–Gitee官方博客Gitee 企业版于不久前推出了 Scrum 项目模板,Scrum 项目模板针对 Scrum 流程进行了针对性的组件设置和新特性的开发,确保研发团队在进行 Scrum 实践时的流畅顺滑。本篇文章将着重介绍如何使用 Gitee 的 Scrum 项目模板来提高团队的敏捷研发协作能力。一、敏捷概述 ...https://blog.gitee.com/2022/02/15/scrum-2/</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>9.项目计划模板(通用12篇)项目计划模板(通用12篇) 光阴迅速,一眨眼就过去了,我们的工作又将迎来新的进步,是时候开始制定计划了。计划怎么写才不会流于形式呢?下面是小编整理的项目计划5篇,仅供参考,大家一起来看看吧。项目计划 1 一、项目的简要介绍二、项目的内容 1、立项依据:根据国内外现状、存在的问题以及发展趋势进行阐述。 https://www.unjs.com/fanwenku/471182.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>10.项目总结报告模板(精选20篇)项目总结报告2023-08-04 总结是事后对某一时期、某一项目或某些工作进行回顾和分析,从而做出带有规律性的结论,它能帮我们理顺知识结构,突出重点,突破难点,因此我们要做好归纳,写好总结。那么总结有什么格式呢?下面是小编为大家收集的项目总结报告模板,欢迎大家分享。项目总结报告 1 一、项目立项背景及必要性 ...https://m.ruiwen.com/gongwen/baogao/1266094.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>11.SpringBoot:实现MyBatis动态创建表腾讯云开发者社区3. 点击 Generate the project,生成项目模板,生成之后会将压缩包下载到本地。 4. 使用IDE导入项目,我这里使用Eclipse,通过导入Maven项目的方式导入。创建数据库表这里使用MySQL数据库,版本是8.0.16,在项目根目录下新建db目录,然后在其中编写一个数据库脚本文件。在MySQL数据库新建一个springboot数据库,然后在此...https://cloud.tencent.com/developer/article/1448353</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-gavel"></i></div>12.软件项目需求文档模板7篇3. 项目概述 4. 需求范围 5. 功能需求 6. 性能需求 7. 界面需求 8. 数据库需求 9. 测试计划免责声明软件项目需求文档模板第1篇在软件开发中,软件项目需求文档是非常重要的一环,它是对软件开发过程的详细规划和要求的描述,是整个开发过程中的指导和依据。一个完善的软件项目需求文档能够有效地指导开发人...https://hsy.chanjet.com/wenku/wk84fc0ae85432.html</div> </div> </div> </div> </div> </div> </div> </main> <div class="container fluid-widget"></div> <footer class="footer"> <div class="container-fluid container-footer"> <ul class="list-inline"> <li class="hidden-xs" style="max-width: 300px;"> <p><a class="footer-logo" href="https://www.cwdbkk.com" title=""> <img src="https://www.cwdbkk.com/wp-content/themes/zibll/img/thumbnail-sm.svg" data-src="https://www.cwdbkk.com/wp-content/themes/zibll/img/logo_dark.png" switch-src="https://www.cwdbkk.com/wp-content/themes/zibll/img/logo.png" alt="宠物大百科" class="lazyload" style="height: 40px;"> </a></p> <div class="footer-muted em09">宠物大百科仅供用于学习和交流，欢迎您的体验。</div> </li> </ul> </div> </footer> <script type="text/javascript"> window._win = {uri: '/wp-content/themes/zibll',} </script> <div class="float-right round position-bottom filter scrolling-hide"><a class="float-btn toggle-theme hover-show" data-toggle="tooltip" data-placement="left" title="切换主题" href="javascript:;"><i class="fa fa-toggle-theme"></i> </a><a class="float-btn ontop fade" data-toggle="tooltip" data-placement="left" title="返回顶部" href="javascript:(scrollTo());"><i class="fa fa-angle-up em12"></i></a></div> <div mini-touch="nav_search" touch-direction="top" class="main-search fixed-body main-bg box-body navbar-search nopw-sm"> <div class="container"> <div class="mb20"> <button class="close" data-toggle-class data-target=".navbar-search" > <svg class="ic-close" aria-hidden="true"> <use xlink:href="#icon-close"></use> </svg> </button> </div> </div> </div> <script type="text/javascript" src="https://www.cwdbkk.com/wp-content/themes/zibll/js/libs/bootstrap.min.js" id="bootstrap-js"></script> <script type="text/javascript" src="https://www.cwdbkk.com/wp-content/themes/zibll/js/loader.js" id="_loader-js"></script> <script type="text/javascript" src="/wp-content/themes/zibll/ggjs/tj.js"></script> </body> </html>