将现有vue项目基于electron打包成桌面应用程序 如何隐藏electron窗体的菜单栏
一、前言
项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便;
二、使用electron集成桌面应用
本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目打包好后打开index.html能显示网页.因为刚接触便直接拿官方demo进行打包了.
1.克隆官方demo:git clone https://github.com/electron/electron-quick-start
2.cd electron-quick-start->npm install->npm start 到这就能运行demo了
3.将自己项目打包好的dist文件中的index.html和static文件放入electron-quick-start(跟目录)文件中,重新start一下,运行结果如图
4.在package.json中增加如下代码
"pack":"electron-packager . 'health-terminal' --platform=win32 --arch=x64 --out=./out --asar --app-version=0.0.1"
安装打包插件
cnpm install electron --save-dev //安装electron
cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好
运行npm run pack 打包成功
npm run pack
文件结构
5.在electron中进行网络请求时需注意,因为本身项目使用了反向代理,打包后请求路径前面会增加本地路径“file:e/”,解决方式:
在config-dev.env.js(测试环境)和pro-env.js(正式环境)添加API_ROOT:'192.168.0.0:8080'(根据自己的需要修改)
新建一个js文件导出process.env.API_ROOT;
最后在main.js中引用
请求路径前加上this.root
至此一个桌面应用已经打包完成
以下是界面配置
在main.js 当中通过配置 BrowserWindow 来改变外观 width Integer - 窗口宽度,单位像素. 默认是 800 . height Integer - 窗口高度,单位像素. 默认是 600 . x Integer - 窗口相对于屏幕的左偏移位置.默认居中. y Integer - 窗口相对于屏幕的顶部偏移位置.默认居中. useContentSize Boolean - width 和 height 使用web网页size, 这意味着实际窗口的size应该包括窗口框架的 size,稍微会大一点,默认为 false . center Boolean - 窗口屏幕居中. minWidth Integer - 窗口最小宽度,默认为 0 . minHeight Integer - 窗口最小高度,默认为 0 . maxWidth Integer - 窗口最大宽度,默认无限制. maxHeight Integer - 窗口最大高度,默认无限制. resizable Boolean - 是否可以改变窗口size,默认为 true . movable Boolean - 窗口是否可以拖动. 在 Linux 上无效. 默认为 true . minimizable Boolean - 窗口是否可以最小化. 在 Linux 上无效. 默认为 true . maximizable Boolean - 窗口是否可以最大化. 在 Linux 上无效. 默认为 true . closable Boolean - 窗口是否可以关闭. 在 Linux上无效. 默认为 true . alwaysOnTop Boolean - 窗口是否总是显示在其他窗口之前. 在 Linux上无效. 默认为 false . fullscreen Boolean - 窗口是否可以全屏幕. 当明确设置值为When false ,全屏化按钮将会隐藏,在 macOS 将禁用. 默认 false . fullscreenable Boolean - 在 macOS 上,全屏化按钮是否可用,默认为 true . skipTaskbar Boolean - 是否在任务栏中显示窗口. 默认是 false . kiosk Boolean - kiosk 方式. 默认为 false . title String - 窗口默认title. 默认 "Electron" . icon NativeImage - 窗口图标, 如果不设置,窗口将使用可用的默认图标. show Boolean - 窗口创建的时候是否显示. 默认为 true . frame Boolean - 指定 false 来创建一个 Frameless Window. 默认为 true . acceptFirstMouse Boolean - 是否允许单击web view来激活窗口 . 默认为 false . disableAutoHideCursor Boolean - 当 typing 时是否隐藏鼠标.默认 false . autoHideMenuBar Boolean - 除非点击 Alt ,否则隐藏菜单栏.默认为 false . enableLargerThanScreen Boolean - 是否允许允许改变窗口大小大于屏幕. 默认是 false . backgroundColor String -窗口的 background color 值为十六进制,如 #66CD00 或 #FFF 或 #80FFFFFF (支持透明 度). 默认为在 Linux和 Windows 上为 #000 (黑色) , Mac上为 #FFF (或透明). hasShadow Boolean - 窗口是否有阴影. 只在 macOS 上有效. 默认为 true . darkTheme Boolean - 为窗口使用 dark 主题, 只在一些拥有 GTK+3 桌面环境上有效. 默认为 false . transparent Boolean - 窗口 透明. 默认为 false . type String - 窗口type, 默认普通窗口. 下面查看更多. titleBarStyle String - 窗口标题栏样式. 下面查看更多. webPreferences Object - 设置界面特性. 下面查看更多.
electron中默认带有顶部菜单栏,有时候我们的应用不需要。
再main.js文件中设置
const electron = require('electron') const path = require('path')
const url = require('url') let mainWindow
const Menu = electron.Menu
function createWindow () {
// 隐藏菜单栏
Menu.setApplicationMenu(null)
// Create the browser window.设置窗口宽高,最小宽高,图标等
mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'})
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login") mainWindow.on('closed', function () {
mainWindow = null
})
}
minWidth: 1280, minHeight: 800, resizable: false,
allowRunningInsecureContent: true, experimentalCanvasFeatures: true,
icon: './favicon.ico'})
electron中默认带有顶部菜单栏,有时候我们的应用不需要。
再main.js文件中设置
const electron = require('electron') const path = require('path')
const url = require('url') let mainWindow
const Menu = electron.Menu
function createWindow () {
// 隐藏菜单栏
Menu.setApplicationMenu(null)
// Create the browser window.设置窗口宽高,最小宽高,图标等
mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'})
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login") mainWindow.on('closed', function () {
mainWindow = null
})
}
minWidth: 1280, minHeight: 800, resizable: false,
allowRunningInsecureContent: true, experimentalCanvasFeatures: true,
icon: './favicon.ico'})
将现有vue项目基于electron打包成桌面应用程序 如何隐藏electron窗体的菜单栏的更多相关文章
- 将现有vue项目基于electron打包成桌面应用程序
一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目 ...
- electron打包成桌面应用程序的详细介绍
1.前提条件 a. 安装了node b.安装了electron c.你知道自己写的东西(js,css,html等等)放在那个文件夹(假设这个文件夹命名为 app,下面会用到)中 2.安装electro ...
- vue项目利用apicloud打包成apk过程
最近公司要求我们用apicloud做一个app,正好利用这个机会学习下app的制作过程~ 页面的开发过程跟我们平时开发一样,利用vue把页面全部完成,最后进行npm run build将项目打包. 接 ...
- electron 打包成桌面运用
最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从 ...
- vue项目再HBuilder打包成app后,有ui模块未添加的弹窗
直接在打包后的mainifst.json的文件夹中加入标注部分,我是这样解决了的
- electron将网站打包成桌面应用
需求同 NW.js将网站打包成桌面应用 1. 从github上克隆electron示例项目 git clone https://github.com/electron/electron-quick-s ...
- Electron把网页打包成桌面应用并进行源码加密
前言 最近想把自己用html+css+js做的网页界面打包成桌面应用,网上一搜,发现Electron是一个不错的选择,试了试,发现效果真的不错.这里记录一下打包过程以作记录,便于自己以后查看学习. 一 ...
- 不用终端运行 Vue项目 基于Pycharm
不用终端运行 Vue项目 基于Pycharm 如下图展示 接下来 然后单击右上角运行 即可完成运行
- nodejs打包成桌面程序(exe)的进阶之路
nodejs打包成桌面程序(exe)的进阶之路 node js bat 前端 计划任务 前言:最近的研究,请大佬们细品 第一篇 - 任务计划程序篇 说真的研究到将nodejs打包成可执行的exe文件是 ...
- 用node-webkit把web应用打包成桌面应用
node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦.很显然比起传统的桌面 ...
随机推荐
- JavaScript:七大基础数据类型:数值number及其表示范围
数值number类型,用来表示任何类型的数字:整数或者浮点数都可以: 实际上,JS中的数值,是一个64位的浮点数,这与Java中的double类型的浮点数是一致的: 但是它有表示的范围,在范围内,JS ...
- 对一个序列双重argsort的含义
学习笔记:由numpy.argsort()引发的思考 一.numpy.argsort() 函数定义 函数的定义 首先函数的定义比较简洁: argsort()函数是将x中的元素从小到大排列,提取其对应的 ...
- Python实验报告(第5章)
实验5:字符串及正则表达式 一.实验目的和要求 学会使用字符串的常用操作方法和正确应用正则表达式 二.实验环境 软件版本:Python 3.10 64_bit 三.实验过程 1.实例01:使用字符串拼 ...
- [常用工具] OpenCV_contrib库在windows下编译使用指南
本文主要讲述opencv及opencv_contrib库在windows下基于vs2017编译安装指南.所用OpenCV版本为OpenCV4.4,编译平台为vs2017. 文章目录 1 下载 2 编译 ...
- linux基础:1、linux简介、虚拟化软件的安装与配置、Xshell的安装与配置
Linux 目录 Linux 一.linux简介 二.linux发展史 三.虚拟化技术 1.简介 2.虚拟化软件下载 3.重要名词解释 4.远程链接工具 一.linux简介 常见岗位 1.自动化运维 ...
- 可持久化杀手——rope学习笔记
概述 std::rope,内部一说是可持久化平衡树,一说是块状链表. 它可以实现很多可持久化数组问题. 基本使用 #include<bits/extc++.h> using namespa ...
- Xversion 在 macOS12.4
很多同学发现在macOS12.4上已经不用使用cornerstone 4的svn了 针对macOS12.4,Xversion照样能使用 但是有些时候我们需要提交.a文件,Xversion中又看不到,针 ...
- 【ASP.NET Core】按用户角色授权
上次老周和大伙伴们分享了有关按用户Level授权的技巧,本文咱们聊聊以用户角色来授权的事. 按用户角色授权其实更好弄,毕竟这个功能是内部集成的,多数场景下我们不需要扩展,不用自己写处理代码.从功能语义 ...
- 1.【窗口组件】小部件-QWidgt
一.前言 QWidget翻译过来是小部件的意思,QWidgt 类是所有用户界面对象的基类. 窗口部件是用户界面的一个基本单元:它从窗 口系统接收鼠标.键盘和其它事件,并且在屏幕上绘制自己.每一个窗口部 ...
- C#动态创建对象过程
创建对象环境 获取当前应用程序集引用的类库详细信息,动态类也将调用此类库 obj类为项目动态编译时用到的模版类,主要提取其using信息用于动态生成的类使用 1 AssemblyName[]r ...