应用场景:
最近有个需求,有两个环境,一个主环境一个备用环境,如果每次都是访问主环境不行的再去访问备环境,这样使用方的体验感就不是很强。为了解决这个问题特意钻研了一下,可以通过nativefier解决。
环境下载:
1、首先你需要下载node,这是必备条件,没有的话不要往下看了
版本的话尽量高些,不然还没有这个命令
2、安装一下环境
npm i -g nativefier
3、了解一下常用命令
nativefier –name “blog” “https://www.leixuesong.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
--arch "x64"
--platform "windows"
--icon D:\temp\favicon.ico //一定要有图片,不然会报错
--name "weixin"
"https://mp.weixin.qq.com/" //网站地址
--maximize //开始最大化
--always-on-top //最前端显示
--clear-cache //防止缓存
--app-copyright "在这里填自己的就行了,也没找到在哪里显示"
--app-version 1 //这里好像只能填数字,不过也没啥用,没找到在哪里显示
--show-menu-bar //英文的,感觉没啥用,还挺丑
--disable-dev-tools
--tray //比较有用的
D:\temp\ //最后指定文件的输出目录
cmd不能换行执行一句,会出错...
nativefier --arch "x64" --platform "windows" --icon D:\temp\favicon.ico --name "weixin" "https://mp.weixin.qq.com/" --maximize --app-copyright "微信公众号" --app-version 1 --show-menu-bar --disable-dev-tools --tray D:\temp\
这是我copy过来的,自己也可以直接用nativefier命令查看对应的选项
我就不放出来了,太多了,放个截图吧。
4、基本用法
nativefier --name "你的app名称" "你的网站"
你在那执行的命令,就在那给你生成exe
5、本地网页转exe
先根据第4随意生成一个exe文件,
找到如下文件:
resources\app\nativefier.json
修改路径为同级目录下的本地网页
"targetUrl": "file:///index.html",
之后运行的话,打开的就是你的本地网页了
而我刚开始说的需求,可以把逻辑写在本地的网页上面,之后点击exe文件,运行本地网页,然后去选择能访问的环境