当前位置: 首页 > news >正文

Nativefier把网页打包成exe

在这里插入图片描述

前要: 今天遇到一个需求,之前的应用都是用的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.lryc.cn/news/34544.html

相关文章:

  • STM32U5开发(1)----通过 USART1 发送数据
  • 20230308 Apdl lsdyna两杆撞击案例学习笔记
  • 互相关延时估计 Matlab仿真
  • 谷歌插件Fetch在不同页面之间Cookie携带情况详解
  • Vue学习笔记(8)
  • 知道一个服务器IP应该怎么进入
  • 【计算机基础】Socket IO
  • mingw编译opencv
  • 数据结构(八)排序
  • 函数习题:用函数实现判断一个整数是否能被n整除
  • SAP 创建会计冲销凭证
  • Jetson(Ubuntu18.04)设备无法ping通百度能ping通局域网错误集合,(神奇的是这样的情况下Todesk等远程确没有问题)
  • Spring的@Conditional注解
  • 剑指 Offer 67 把字符串转换成整数
  • 【教学典型案例】18.开门小例子理解面向对象
  • Linux环境ENV的概念
  • AcWing数据结构 - 数据结构在算法比赛中的应用(下)
  • 基于嵌入式libxml2的ARM64平台的移植(aarch64)
  • 8. 字符串转换整数 (atoi)
  • [Tomcat]解决IDEA中的Tomcat中文乱码问题
  • python之dataclasses
  • 【MapGIS精品教程】007:MapGIS投影变换案例教程
  • list数据根据属性字段去重
  • java教程(2023-3-8)
  • node 配置 vue npm配置
  • 特斯拉、小鹏开路,城市NOA距好用还有几年?
  • Vue 3第九章:WatchEffect高级侦听器
  • c++基础——函数
  • DPDK系列之七DPDK中的虚拟化支持
  • 设计模式~桥接模式(bridge)-14