Nativefier把网页打包成exe

news2025/4/19 15:29:14

在这里插入图片描述

前要: 今天遇到一个需求,之前的应用都是用的h5挂载在企业微信的小应用,但是现在需要电脑运行的exe安装包!

所以需要用到nativefier导报工具:nativefier是一个使用electron将网页转换为app的插件,写这篇博客仅仅是因为怕自己忘记了怎么快速调用,下面将介绍一些常用的语法。并且主要需要 nodejs 环境支持!

npm install nativefier -g

nativefier配置

nativefier –name “blog” “https://www.xxx.cn/”
nativefier –icon <path>:设置图标 icon参数 
Windows环境下为.ico文件
Linux下为.png
Mac下 icon参数可以是a .icns或.png文件

--app-copyright :应用的版权信息

-p, --platform <value>:指定输出不同系统的应用,可选参数linux、windows、osx。

-m, –show-menu-bar:指定是否应该显示菜单栏。

--disable-context-menu:禁用上下文菜单

--disable-dev-tools:停用Chrome开发者工具

--clear-cache:防止应用程序在两次启动之间保留缓存。

--tray:托盘,防止用户点击右上角关闭按钮后直接关闭程序,而是缩小到右下角的托盘中。

--always-on-top:总是在最前面显示。

--maximize:开始的时候最大化。

--full-screen:使打包的应用全屏启动。

--app-version <value>:应用程序的发行版本。

–width <value>:打包应用程序的宽度,默认为1280px。

–height <value>:打包应用程序的高度,默认为800px。

–min-width <value>:打包应用程序的最小宽度,默认为0。

–min-height <value>:打包应用程序的最小高度,默认为0。

–max-width <value>:打包应用程序的最大宽度,默认为无限制。

–max-height <value>:打包应用程序的最大高度,默认为无限制。

–x <value>:打包的应用程序窗口的X位置。

–y <value>:打包的应用程序窗口的Y位置。

-a, --arch <value> 处理器架构

//示例
nativefier --name "软件名称" "http://xx.xx.xx.xx:8080" --min-width 1920 --min-height 1080 --full-screen -x 0 -y 0  --icon "F:\icon.ico"

这里打包的是托盘,防止用户点击右上角关闭按钮后直接关闭程序,而是缩小到右下角的托盘中的exe.

nativefier "https://px.xxxx.com/static/admin/#/login" --name "软件名称" --tray --icon D:\Users\012472\Desktop\8ffdba72d5991781c47e2bf42025551.ico --file-download-options "{\"saveAs\": true}"

在程序打包完之后,DOS命令窗口会告诉你路径,你在那个路径下打开,可以把那个路径下所有的文件都打包到其他盘。
在这里插入图片描述
但是还有一些另外的细节主要注意的:

1. 图标和命名
图标和名字会自动抓图网站的名字和 logo.

如果网站名字是中文的话, 抓名字就翻车了, 变成了–

而且, 抓的好像不是网页的 title , 比如 Github 的名字就是很中二的 ‘The worlds leading software development platform GitHub-win32-x64’ , 应该是 Github 某句SEO用的代码吧

我的app的名字就翻车了 ‘—win32-x64’

2. 自定义图标和名字
名字可以生成完以后直接F2重命名, 如果想XX以下就直接创建时加上 --name 参数, 图标同理, 可以一起用:

 nativefier --name "app名字" "https://www.zhihu.com"  // 自定义名字
 nativefier --name "app图标路径" "https://www.zhihu.com"  // 自定义图标

注意: 图标要用ico格式(网上有工具可以转), 其他格式没试, 哪位大佬没事儿可以试试

改图标还可以直接去 app名字\resources\app 里替换 icon.ico 文件

还有的就是打包执行替换图标命令后如果.exe文件的logo没有改变的话,但是文件的ico图标已经生成,记得重启一下电脑!!!我也不知道怎么回事!!!

最终效果:
在这里插入图片描述
一句实在话,其实就是一个网页,套了一个盒子,穿了一个外皮,穿着羊皮的狼!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/396680.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

二、SpringMVC注解式开发

1. RequestMapping注解 此注解就是来映射服务器访问的路径 可加在方法上,是为此方法注册一个可以访问的名称(路径) 可以加在类上,相当于是包名(虚拟路径),区分不同类中相同的action的名称 可区分get请求和post请求 package com.powernode.controller;import org.springframe…

liunx下安装node exporter

1 建立文件夹 cd /opt mkdir software 下载最新的包&#xff0c;并解压 https://prometheus.io/download/ 下载 curl -LO https://github.com/prometheus/node_exporter/releases/download/v0.18.1/node_exporter-0.18.1.linux-amd64.tar.gz 3.解压 tar -xvf node_exporter-0.…

Gorm根据关系模型中的属性查询原模型数据

type ExamResult struct {gorm.ModelExamManagementID uintExamManagement ExamManagement json:"examManagement" // 一场考试&#xff0c;其中有试卷&#xff0c;有试题&#xff0c;有试题答案//MarkExamPaperRecord MarkExamPaperRecord //每一场考试对应的结…

测试经理:“你做了三年测试,连服务端的接口测试都不会?”

服务端的接口测试我们一般从功能开始进行测试&#xff0c;比如请求参数和响应参数的校验&#xff0c;业务逻辑或业务规则的校验&#xff0c;数据库操作的校验。 功能正常后会根据需要进行安全相关的检查、性能测试以及系列扩展测试&#xff0c;比如与历史版本的兼容性测试、接…

【微信小程序】-- WXS 脚本(二十九)

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…

【Java基础】Linux系统

CONTENT一、常用命令时间日期关机&重启登录&注销运行级别找回root用户密码&#xff08;CentOS 7&#xff09;二、文件管理显示当前工作路径显示文件和目录切换目录创建文件&目录删除文件&目录拷贝文件&目录移动文件&目录 / 重命名查找文件&目录查看…

java启动命令中-D和--的区别

目录一、java -D 添加参数二、java -- 添加参数在 SpringBoot 项目中&#xff0c;启动时&#xff0c;通过 -D 或 -- 添加参数&#xff0c;都可以直接覆盖 yml 或 properties 配置文件中的同名配置&#xff0c;如果不存在则相当于添加了一个配置。 一、java -D 添加参数 java -D…

【面试题】三道面试题让你掌握JavaScript中的执行上下文与作用域以及闭包

前言大厂面试题分享 面试题库前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★地址&#xff1a;前端面试题库大家好&#xff0c;笔者呢最近再回顾JavaScript知识时&#xff0c;又看到了JavaScript的一些较为常见的内容&#xff0c;仔细看了之后发现…

1-1 微服务架构概述

文章目录微服务架构概述1-1. 系统进化理论概述集中式系统&#xff1a;分布式系统1-2. 系统进化理论背景1-3. 什么是微服务架构1-4. 微服务架构的优缺点1-5. 为什么选择 Spring Cloud 构建微服务认识 Spring Cloud2-1. Spring Cloud 是什么2-2. Spring Cloud 的版本2-3 Spring C…

2.2操作系统-进程管理:前趋图、前趋图与PV操作

2.1操作系统-进程管理&#xff1a;前趋图\前趋图与PV操作前趋图前趋图与PV操作练习前趋图与PV操作&#xff0c;一般出现了&#xff0c;分值在2~3分左右&#xff0c;技巧性很强。 前趋图 前趋图是为了描述一个程序的各部分间的依赖关系&#xff0c;或者是一个大的计算的各个子…

【c++类与对象 】

目录&#xff1a;前言一、基础引入1.类的定义2.类的权限3.类的封装4.类的实例化5.计算类对象的大小结构体内存对齐规则空类的大小二、this指针this引入this指针的特性经典例题三、类的六个默认成员函数1、构造 && 析构构造函数析构函数2、拷贝 && 赋值拷贝构造…

display:inline-flex使用

凡是使用了display:inline-flex布局的容器&#xff08;不管是行内元素还是块级元素&#xff09;&#xff0c;将会变为弹性容器&#xff0c;它的宽高都将可以被设置&#xff0c;并且该容器整体对外表现为一个行内块元素。 span也可以设置宽高&#xff0c;并且div和span它们都没有…

【C++】缺省参数函数重载

&#x1f3d6;️作者&#xff1a;malloc不出对象 ⛺专栏&#xff1a;C的学习之路 &#x1f466;个人简介&#xff1a;一名双非本科院校大二在读的科班编程菜鸟&#xff0c;努力编程只为赶上各位大佬的步伐&#x1f648;&#x1f648; 目录前言一、缺省参数1.1 缺省参数的概念1…

关于new和delete的一些思考,为什么不能在析构函数中调用delete释放对象的内存空间,new和delete的原理

最近在写代码的时候&#xff0c;觉得每次new出来的对象都需要去delete好麻烦&#xff0c;于是直接把delete写到了析构函数中&#xff0c;在析构函数里面写了句delete this&#xff0c;结果调用析构函数的时候死循环了&#xff0c;不是很理解原因&#xff0c;于是去研究了一下。…

盘点全球10大女性技术先驱

盘点全球10大女性技术先驱 人们普遍认为技术是男性主导的领域&#xff0c;但事实&#xff0c;技术或编程与性别无关&#xff0c;几乎任何人都可以成为技术大神。已经有很多案例证明女性同样可以在技术领域施展才能。在女神节来临之际&#xff0c;我为大家盘点一下为编程做出卓越…

AB测试——流程介绍(定义问题和指标选取)

前言&#xff1a; 作为AB测试的学习记录&#xff0c;本文主要介绍了AB测试的基本流程&#xff0c;以及指标类型和如何选取合适指标。 相关文章&#xff1a;AB测试——原理介绍 AB测试的基本流程是什么&#xff1f; AB测试&#xff08;也称为分流测试&#xff09;是一种常用的实…

visual studio的team使用问题小结

visual studio的team使用问题小结一、visual studio&#xff08;2017&#xff09;默认浏览器打开team任务和bug二、visual studio&#xff08;2017&#xff09;上传team时&#xff0c;文件超过一万个会上传失败。三、visual studio&#xff08;2017&#xff09;拉取team代码时&…

C++面向对象编程之二:构造函数、拷贝构造函数、析构函数

构造函数和析构函数C利用构造函数和析构函数&#xff0c;完成对象的初始化和清理工作。对象的初始化和清理工作&#xff0c;是编译器强制我们要做的事情&#xff0c;如果我们不提供构造函数和析构函数&#xff0c;编译器会提供3个函数&#xff1a;默认无参构造函数默认拷贝构造…

004+limou+HTML——(4)HTML表格

000、前言 表格在实际开发中的应用还是比较多的&#xff0c;表格可以更加清晰地排列数据 001、基本结构 &#xff08;1&#xff09;构成 表格&#xff1a;<table>行&#xff1a;<tr>&#xff08;table row&#xff0c;表格行&#xff09;&#xff0c;由多少组t…

【每日随笔】中国当前社会阶层 ( 技术无关 | 随便写写 )

文章目录一、阶层划分根据收入划分的阶层根据分工逻辑划分根据权利划分二、根据社会地位和掌握的资源划分的阶层三、赚钱的方式四、如何进入高阶层看了一个有意思的视频 , 讲的是中国当前的社会阶层 , 感觉好有道理 , 搜索了一些资料 ; 参考资料 : 关于中国的社会阶层社会在分…