web项目转为桌面应用程序

1. 简介

本教程是利用npm和nativefier实现把任意web项目转换成一个桌面应用软件。

2. 环境及软件

操作系统：Windows10 64位
软件：node.js (node-v8.11.3-x64版本)

下载地址：https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi

3. 安装工具

安装npm

将下载的node.js安装，这里安装路径默认选到C盘，C:\Program Files\nodejs

安装完毕在命令行输入（npm –v）测试是否安装成功，正确安装会出现版本号。

安装nativefier

命令行输入 npm install nativefier –g，即可安装成功。

制作应用

命令行输入 nativefier [options] <targetUrl> [dest]

其中options 是选项，targetUrl是目标链接，dest是生成位置，默认当前位置。更多选项及介绍请参考官方文档：https://github.com/jiahaog/nativefier/blob/HEAD/docs/api.md 。

简单应用

以百度为例，最简单的命令为：

nativefier "https://baidu.com/"

到目前，一个桌面应用已经打造完成。

应用目录：

点击.exe文件，启动应用。

4. 附加内容（选项介绍）

设置名字

nativefier在制作应用的时候，可以自动识别网站的名字，您也可以自己设置名字。

nativefier --name "AppName" <your-website>

设置图标

nativefier --icon <path>，icon参数应该是图标文件的路径，每个系统文件格式不同具体如下：

.ico - For Windows
.icns - For OSX
.png - For Linux

nativefier http://172.18.20.47/index --name "CRDC" --icon logo.ico --file-download-options "{\"saveAs\": true}"

nativefier <your-website> --file-download-options "{\"saveAs\": true}"

指定输出不同系统的应用

默认情况下，会根据当前操作系统，输出对应系统的应用。如果您需要特殊指定转换成不同系统的应用，可以使用一下命令。

nativefier --p <value>

可选参数linux、windows、osx。

替代值win32（用于Windows）或darwin，mac（对于OSX）也可以使用。

显示菜单栏

-m, --show-menu-bar

指定是否应该显示菜单栏

禁用上下文菜单

--disable-context-menu

禁用上下文菜单

单实例

--single-instance

阻止应用程序多次运行。如果发生这种尝试，那么已经运行的实例就会出现在前面。

托盘

--tray

应用程序将保留为系统托盘中的图标。通过点击窗口关闭按钮来防止关闭应用程序。

设置应用版权

nativefier --app-copyright <value>

应用的版权信息会映射到Windows系统的LegalCopyright和OS X系统的NSHumanReadableCopyright的元数据属性。

设置显示

宽度

--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位置。

更多选项请参考第四

web项目转为桌面应用程序相关推荐

10 分钟把你的 Web 应用转为桌面端应用
在桌面端应用上,Electron 也早已做大做强,GitHub桌面端.VSCode.Figma.Notion.飞书.剪映.得物都基于此.但最近后起之秀的 Tauri 也引人注目,它解决了 Electr ...
使用 Go 和 Web 技术构建桌面应用程序
<开源精选>是我们分享Github.Gitee等开源社区中优质项目的栏目,包括技术.学习.实用与各种有趣的内容.本期推荐的是一个使用 Go 和 Web 技术构建桌面应用程序的项目--WAI ...
Java swing 做一个传统Web项目的桌面程序启动器（内嵌浏览器）
背景:公司有个老项目,web项目,但是使用者都想要一个桌面应用程序.实际上,是web程序的启动较为麻烦.这里每次都需要启动Tomcat和浏览器. 想法:重写一个项目太麻烦,想想成本,人间不值得.于是我 ...
如何利用手机预览intellij idea本地web项目运行效果（程序猿小小的乐趣——娱乐篇）
这也许就是传说中,程序猿的快乐吧...请秉着一颗无聊消遣的心阅读... 测试环境:拯救者Y7000P(一台可以开移动热点的笔记本电脑) : Windows10 : 一部可以上网冲浪的智能手机我们在开 ...
web项目创建桌面快捷键
1.将web项目logo的图片格式转换成ico格式,网站http://www.faviconico.org/ 2.方法1: 在桌面点右键--新建--快捷方式. 在弹出来的对话框里,把完整的地址写进去, ...
如何把Iconfont阿里巴巴矢量图标库引入web项目和微信小程序中，拿走不谢
登录Iconfont-阿里巴巴矢量图标库官文地址:https://www.iconfont.cn/ ①必须登录才行,我这边是用新浪微博登录的 ②然后可以搜索自己需要的图标,比如搜索homt,然后鼠标 ...
创建第一个Tauri项目 rust桌面应用程序
给你们看看GitHub - tauri-apps/create-tauri-app: Rapidly scaffold out a new tauri app project. 在项目开始之前,请确保 ...
前端web项目使用electron和electron-builder生成桌面应用
背景需求推进技术探索,技术实现需求设计.刚开始本来是用 vue 做一个 web 项目,随着开发推进,产品要求做成桌面端应用... 想到了用 Electron 框架构建桌面应用程序,查了一下大多都是使 ...
使用 Electron 构建桌面应用程序的介绍
事实上的团队协作软件,Visual Studio Code - 在撰写本文时市场上最受欢迎的代码编辑器之一,以及WhatsApp的桌面版本都有一个共同点:它们都是用Electron构建的.js.随着这 ...

web项目转为桌面应用程序

web项目转为桌面应用程序相关推荐

最新文章

热门文章