网站封装成app源码 把网站做成app的软件推荐

因为日常工作需要接触大量外文资料,所以一个有效的翻译工具必不可少。感谢Google在翻译方面的出色表现,把它作为我的主要翻译工具是无可争议的。但在使用中,经常发现网页端页面

本文最后更新时间:  2023-04-17 18:52:07

因为日常工作需要接触大量外文资料,所以一个有效的翻译工具必不可少。感谢Google在翻译方面的出色表现,把它作为我的主要翻译工具是无可争议的。但在使用中,经常发现网页端页面总是不经意间被手动关闭,过了一段时间才发现需要重新打开。

况且,如果想在工作时间更好地“钓鱼”,用电脑肯定比用手机安全。

带着这两个需求,我找了几个可以把Web转换成Mac app的工具,但是体验之后发现会出现一些小问题,有些app甚至无法工作或者产生无法打开的情况。

直到我找到了它——原生费里。

安装nativefier

Nativefier是基于电子的命令行工具,完全开源,没有UI界面,不需要安装任何app。它可以通过简单的一行代码轻松地将任何网页打包成一个可以在桌面上运行的app,它支持在Windows、Mac甚至Linux系统上运行。

P.S .的作者是在谷歌工作的软件工程师,好像是中国人。

目前nativefier在Github上已经收获了21400星。

使用nativefier的过程很简单,但是你需要提前准备一些东西。在这里,我用macOS作为演示。其他平台也差不多。可以参考网上的其他教程。

首先我们需要安装Node.js你可以从Node.js的官网下载安装,但是我这里推荐使用家酿,这样你就可以在一个终端app里搞定一切。

如果您还没有安装Homebrew,您可以通过下面的命令在终端中安装它。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

关于家酿啤酒使用的更多信息,请参考这篇文章。

安装家酿后,可以在终端中安装Node.js Enter:

brew install node

如果由于某些网络原因导致安装缓慢,您可以尝试更换为国内图像源。运行进度后,可以在终端中输入node -v和npm -v来测试版本。当版本号出现时,安装成功。

使用Node.js,我们可以安装nativefier本体。同样在终端上,输入以下命令:

npm install nativefier -g

如果提示权限不够,可以尝试在前面加上sudo:

sudo npm install nativefier -g

完成了。接下来,我们将使用Native Fielder制作一个app。

使用

最简单的使用方法,就是使用nativefier,添加一个需要转换成的网址。例如:

nativefier "https://www.sspai.com"

第一次运行将下载Eletron框架,可能会慢一些。

执行该命令后,将显示一条大小为120 –约150M,名为“—Darwin-x64”文件夹。如果不更改运行地址,默认情况下它会出现在您的个人文件夹中。

点进文件夹,就能看到刚做好的app。将此应用程序拖到应用程序文件夹中,它将出现在Lanchpad中。

一个带有网页打包的少数Mac应用程序已经准备好了。

以上方法会自动抓取网站的名称和Logo作为名称和app图标。不过有时候nativefier会“翻车”(比如上面的app名称显示为“–),这时候我们就需要自定义app的名称了。您可以使用以下命令:

nativefier --name "在这里输入 app 名字" "http://www.sspai.com"

注意,这个app名称不支持中文。如果要更改中文app的名称,可以直接在nativefier制作的app上更改,然后拖拽到app文件夹中。

但是nativefier有一个小缺陷:因为有些网站的图标或logo很丑,或者太丑,分辨率低,有时候生成的app图标不尽如人意。

这个问题其实是有解决办法的。nativefier提供了一个–只要我们准备一张png格式的图片,就可以作为图标应用。

如果不太懂上面说的,也可以手动替换。事先准备一个icns格式的图标,命名为“electron.icns”,然后在生成的app上点击右键“查看包裹内容”,进入“内容–资源”,把我们准备好的图标放进去替换原来的图标。

比如我用Sketch为Tinde和Little Special画了一个类似于macOS Catalina原生风格的高清图标,然后用Image2icon转换成icns格式。更换后没有了那么强烈的“像素风”,违和感降低了很多。

这个页面有4个app,都是nativefier生成的。

除了这些,Native Fielder还提供了很多参数可供选择,比如是否限制app窗口的宽度和高度,是否显示菜单栏,关闭时是否推出,是否开启flash支持等。可以直接在终端输入Native Fielder或Native Fielder-H查看,也可以阅读官方API文档学习。

哦,对了,nativefier做的app甚至支持调用系统的推送。比如微信网页版打包成app后,也可以在新消息来的时候收到新消息通知。

好了,nativefier到此为止。我要用新打包的app钓鱼了。

温馨提示:内容均由网友自行发布提供,仅用于学习交流,如有版权问题,请联系我们。