如何用一條命令將網(wǎng)頁轉(zhuǎn)成電腦 App

時(shí)間：2023-07-22 14:27:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-22 14:27:01 來源：網(wǎng)站運(yùn)營

如何用一條命令將網(wǎng)頁轉(zhuǎn)成電腦 App：原文首發(fā)：https://bornforthis.cn/posts/46.html

Introduction

你好，我是悅創(chuàng)。接下來將不定期分享優(yōu)質(zhì)且實(shí)用的 GitHub，并翻譯實(shí)用在博客平臺(tái)、公眾號(hào)平臺(tái)發(fā)布。

大家有沒有一種感覺，很多網(wǎng)站其實(shí)做得非常優(yōu)秀，但是它們就是沒有開發(fā) PC （電腦）版的客戶端，比如本站、GitHub、微信公眾號(hào)、小紅書發(fā)布視頻。

如果我們大多數(shù)時(shí)間都是使用 PC 開發(fā)或者辦公的，每次開始時(shí)我們都需要打開瀏覽器輸入它們的網(wǎng)址，進(jìn)入對(duì)應(yīng)的頁面。另外一個(gè)瀏覽器中我們可能會(huì)開各種各樣的選項(xiàng)卡，少則兩三個(gè)，多則一二十個(gè)，這就導(dǎo)致某些我們常用的甚至重度依賴的網(wǎng)站在切換的時(shí)候就會(huì)不怎么方便。

比如擠在一堆瀏覽器里面的 Bornforthis，選項(xiàng)卡已經(jīng)被擠得看不全了：

這時(shí)候，如果我們能有一個(gè)客戶端，即 Window 上的 exe 程序或 Mac 上的 app 應(yīng)用程序，它們的名字就叫做 Bornforthis、微信公眾平臺(tái)、小紅書等等，打開之后只單獨(dú)負(fù)責(zé)呈現(xiàn) http://bornforthis.cn、微信公眾號(hào)的內(nèi)容，我們就可以免去在瀏覽器中來回尋找站點(diǎn)和切換站點(diǎn)的麻煩。

甚至說，在 Windows 上我們可以直接把這個(gè)應(yīng)用放在桌面或把它 Pin 到任務(wù)欄上， Mac 上我們可以直接將它固定到 Dock 欄上，這樣一鍵就打開了，省時(shí)省力。如果使用了快捷啟動(dòng)軟件，比如 Wox （Windows）或 Alfred（Mac），直接輸入 GitHub 或者微信公眾平臺(tái)，那就更方便喚出了，簡(jiǎn)直不要太方便。

而且，我個(gè)人感覺，用客戶端軟件比用網(wǎng)頁更有一種「踏實(shí)感」，不知道大家會(huì)不會(huì)也有這種感覺。

所以，如果能將這些常用的或者重度依賴的網(wǎng)站轉(zhuǎn)成客戶端軟件，那就再方便不過了。

比如我用的是 Mac，把 Bornforthis 轉(zhuǎn)成客戶端軟件之后，我習(xí)慣性用 Alfred 呼出：

然后就打開了一個(gè) Bornforthis.app：

然后把它固定到 Dock 欄上：

就仿佛擁有了一個(gè) Bornforthis 的客戶端，功能與網(wǎng)頁一模一樣，再也不用在瀏覽器里面切來切去。而且也不用擔(dān)心版本更新的問題，因?yàn)樗褪情_了一個(gè)獨(dú)立的網(wǎng)頁，網(wǎng)頁改版或者更新，內(nèi)容就隨著更新。

是不是很方便呢？

如果你覺得是，那就隨著我來了解一下怎樣實(shí)現(xiàn)吧。

nativefier

這里需要用到的一個(gè)工具，名字叫做 nativefier，是基于 electron 開發(fā)的，它的功能就是把任意的網(wǎng)頁轉(zhuǎn)成一個(gè)電腦客戶端，即 Desktop Application。

有了這個(gè)軟件，把網(wǎng)頁轉(zhuǎn)成電腦客戶端只需要這么一條簡(jiǎn)單的命令：

nativefier <website>比如把 Whatsapp 的網(wǎng)站打包成一個(gè)客戶端就只需要執(zhí)行這樣的命令：

nativefier web.whatsapp.com示意如下：

怎樣，不論是什么網(wǎng)頁，就可以使用它來轉(zhuǎn)換成一個(gè)客戶端軟件。

另外它支持三大操作系統(tǒng)，Windows、Linux、Mac，即用它可以將網(wǎng)頁轉(zhuǎn)成 .exe、.app 等格式。

Installation 安裝

• macOS 10.10+ / Windows / Linux
• Node.js ≥ 12.9 and npm ≥ 6.9

解析：

那么這軟件究竟具體怎么來使用呢，第一步當(dāng)然就是安裝了。

由于 nativefier 是基于 electron 開發(fā)的，而后者又是基于 Node.js 的，所以要使用它必須要安裝 Node.js，建議安裝 6.0 以上版本。

另外在 Linux 和 Mac 平臺(tái)可能需要安裝其他的依賴。

• 在 Linux 上需要安裝 Wine 并配置好環(huán)境變量。https://www.winehq.org/
• Wine 從非 Windows 平臺(tái)構(gòu)建 Windows 應(yīng)用程序。確保 wine 在您的 $PATH。


• 在 Mac 上需要安裝 iconutil、imagemagick，這兩個(gè)依賴是為了幫助程序處理 App 的 icon 的。

具體的安裝說明可以參見：https://github.com/nativefier/nativefier#installation。

以上步驟完成之后，使用 npm 安裝 nativefier 即可：

npm install -g nativefier安裝完畢之后便可以使用 nativefier 命令了。

---

下面給部分國外學(xué)員，無法看懂中文：

To create an app for medium.com, simply nativefier 'medium.com'

Nativefier will try to determine the app name, and well as other options that you can override. For example, to override the name, nativefier --name 'My Medium App' 'medium.com'

Read the API docs or run nativefier --help to learn about command-line flags and configure your app.

Usage 使用

下面我在 Mac 下以 Bornforthis 為例來介紹下怎樣將 Bornforthis 打包成一個(gè)客戶端軟件。

像剛才介紹的一樣，最簡(jiǎn)單直接的，運(yùn)行下面的命令就好了：

nativefier https://bornforthis.cn它會(huì)嘗試用 Bornforthis 主頁的 title 來命名這個(gè)客戶端：

黃家寶 AI悅創(chuàng)所以它會(huì)生成這樣的一個(gè)客戶端軟件：

上面的名稱不是讓我很滿意，所以能不能自定義呢？

答案肯定是可以的，讓我們來看看如何自定義 app 名稱，添加一個(gè) name 參數(shù)即可：

nativefier --name Bornforthis https://bornforthis.cn這樣就會(huì)以我們定義的名稱生成客戶端：

另外我們可以看到客戶端的圖標(biāo)也自動(dòng)生成了，這個(gè)圖標(biāo)怎么來的呢？ 這個(gè)是用的 nativefier 維護(hù)的 icons。

如果你生成 GitHub 客戶端，那恭喜你：恰好 GitHub 在它們的收錄范圍內(nèi)，所以就用上了。這些 icons 也是一個(gè)公開的 Repository，鏈接為：https://github.com/nativefier/nativefier-icons ，大家可以到這里搜集或者貢獻(xiàn)圖標(biāo)。

如果我們覺得 nativefier 官方提供的圖標(biāo)不好看，想要自定義圖標(biāo)的話，也是可以的，只需要添加一個(gè) icon 參數(shù)即可，這樣便可以指定本地圖片作為圖標(biāo)來生成了。

但值得注意的是，不同平臺(tái)上要求的圖標(biāo)格式不一樣。

• Windows 上需要 ico 格式。
• Linux 上需要 png 格式。
• Mac 上需要 icns 格式，如果安裝了上文所需要的依賴，使用 png 格式也是可以的。

具體的參數(shù)用法說明可以看：https://github.com/nativefier/nativefier/blob/master/API.md#icon 。

在上面的生成中，我們發(fā)圖標(biāo)是真的丑，所以接下來我自定義一個(gè)圖標(biāo)吧！

我已經(jīng)在 Mac 上我安裝了依賴，那就直接用 png 格式的圖標(biāo)了。

在這里我自己做了一個(gè)圓形的圖標(biāo)如下，命名為 bornforthis.png：

然后把圖片使用下面的命令就可以自定義圖標(biāo)了：

nativefier --name Bornforthis --icon ./bornforthis.png https://bornforthis.cn/這樣就能生成自定義圖標(biāo)的客戶端軟件了。

Logo 有點(diǎn)草率了，不過沒事。沖！

打開之后，我們就擁有了一個(gè) Bornforthis 客戶端了，界面和網(wǎng)頁一模一樣，但是已經(jīng)擺脫了混雜選項(xiàng)卡的干擾，示意如下：

好了，這就是基本的用法，其實(shí)大部分情況只需要這幾個(gè)參數(shù)就夠了，如果想了解功能大家可以參考官方的 API 文檔：https://github.com/nativefier/nativefier/blob/master/API.md 。

如果想要生成其他的客戶端，如微信公眾平臺(tái)、本站、GitHub 、小紅書等等都是可以的。

如微信公眾平臺(tái)就是這樣的：

注意

在使用過程中我發(fā)現(xiàn) name 參數(shù)對(duì)中文的支持并不好，總會(huì)生成一個(gè) APP 的客戶端，在這里推薦 name 使用英文名稱，比如本站用 Zhihu，微信平臺(tái)用 WXMP 等等。

例如命令：

nativefier --name 本站 --icon ./zhihu.png https://www.zhihu.com可以用下面的命令代替：

nativefier --name Zhihu --icon ./zhihu.png https://www.zhihu.com生成客戶端軟件本站再手動(dòng)修改下圖標(biāo)的名稱即可。

另外生成的客戶端軟件是不支持插件的，如果你的站點(diǎn)對(duì)某些插件的依賴比較強(qiáng)，那就不建議使用 nativefier 轉(zhuǎn)成的客戶端了。

好了，這就是 nativefier 的基本用法，有了它我們就可以隨意地將網(wǎng)頁轉(zhuǎn)成客戶端軟件了，快來試試吧！

補(bǔ)充：關(guān)于圖標(biāo)

如果你發(fā)現(xiàn)一些網(wǎng)站圖標(biāo)不好找，這個(gè)時(shí)候你可以按如下格式拼接并訪問，理論上可以解決大部分網(wǎng)站：

網(wǎng)站主頁鏈接+favicon.ico比如：

• AI悅創(chuàng)：https://bornforthis.cn/ + favicon.ico
  
• https://bornforthis.cn/favicon.ico
  


• 小紅書：https://www.xiaohongshu.com/ + favicon.ico
  
• https://www.xiaohongshu.com/favicon.ico
  

• 本站：https://www.zhihu.com/ + favicon.ico
  
• https://www.zhihu.com/favicon.ico
  


• 微信公眾號(hào)：https://mp.weixin.qq.com/favicon.ico
  

那如果你在轉(zhuǎn)微信公眾號(hào)的時(shí)候，不想要這個(gè) favicon.ico：

想要這個(gè)：

這個(gè)時(shí)候，還是需要用到瀏覽器的開發(fā)者工具，進(jìn)行選擇。

• Windows：Control + S
• MacOS：Command + S

然后將保存的 svg 在線轉(zhuǎn)換 png。

在線 svg 轉(zhuǎn) png：https://svgtopng.com/zh/

ok，就到這里，bye～

歡迎關(guān)注我公眾號(hào)：AI悅創(chuàng)，有更多更好玩的等你發(fā)現(xiàn)！::: details 公眾號(hào)：AI悅創(chuàng)【二維碼】![](/gzh.jpg):::::: info AI悅創(chuàng)·編程一對(duì)一AI悅創(chuàng)·推出輔導(dǎo)班啦，包括「Python 語言輔導(dǎo)班、C++ 輔導(dǎo)班、java 輔導(dǎo)班、算法/數(shù)據(jù)結(jié)構(gòu)輔導(dǎo)班、少兒編程、pygame 游戲開發(fā)」，全部都是一對(duì)一教學(xué)：一對(duì)一輔導(dǎo) + 一對(duì)一答疑 + 布置作業(yè) + 項(xiàng)目實(shí)踐等。當(dāng)然，還有線下線上攝影課程、Photoshop、Premiere 一對(duì)一教學(xué)、QQ、微信在線，隨時(shí)響應(yīng)！微信：JiabcdefhC++ 信息奧賽題解，長期更新！長期招收一對(duì)一中小學(xué)信息奧賽集訓(xùn)，莆田、杭州地區(qū)有機(jī)會(huì)線下上門，其他地區(qū)線上。微信：Jiabcdefh方法一：[QQ](http://wpa.qq.com/msgrd?v=3&uin=1432803776&site=qq&menu=yes)方法二：微信：Jiabcdefh