這篇文章給大家分享的是有關(guān)如何使用JavaScript開發(fā)跨平臺(tái)的桌面應(yīng)用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
任何可以使用JavaScript來編寫的應(yīng)用，最終會(huì)由JavaScript編寫。--Atwood定律
Atwood's Law是Jeff Atwood在2007年提出的：“any application thatcanbe written in JavaScript,willeventually be written in JavaScript.”。據(jù)說，這只是當(dāng)時(shí)開的一個(gè)玩笑。不過，這個(gè)玩笑似乎漸漸變成了現(xiàn)實(shí)。從各種華麗的網(wǎng)頁框架，到功能強(qiáng)大的庫，到了現(xiàn)在的機(jī)器學(xué)習(xí)，服務(wù)器開發(fā)，都有JavaScript的身影。從JavaScript也衍生出了一些語言，例如TypeScript。而使用JavaScript制作游戲也變得方便起來，可以使用CocosCreator。Html5的橫空出世，也將之前JavaScript在網(wǎng)頁的輔助地位提升到了主力地位，nodejs的出現(xiàn)更是讓其實(shí)現(xiàn)了所謂的“全?！遍_發(fā)，現(xiàn)在JavaScript甚至可以做手機(jī)應(yīng)用。但是，在移動(dòng)端、瀏覽器、服務(wù)器端有需求，在桌面應(yīng)用上也會(huì)有需求。能不能使用JavaScript來開發(fā)可以跨平臺(tái)的應(yīng)用程序呢？答案是：可以。使用Electron即可方便的使用JavaScript進(jìn)行桌面應(yīng)用開發(fā)?？梢钥吹?，很多大名鼎鼎的程序都是由它直接或間接開發(fā)而成，例如Atom，VSCode等。
需要注意的是，目前使用Electron開發(fā)桌面應(yīng)用程序有一些限制條件。首先，我們無法調(diào)用復(fù)雜的系統(tǒng)API（或者說不能直接做到），這就導(dǎo)致我們無法開發(fā)更加復(fù)雜的企業(yè)級(jí)應(yīng)用。其次，它的性能目前仍然不能與原生應(yīng)用相提并論。我們可以認(rèn)為，Electron就是一個(gè)套著瀏覽器外殼的包裝盒，這個(gè)包裝盒給我們讀寫文件的能力，我們開發(fā)好web應(yīng)用程序，調(diào)試完成后使用它來進(jìn)行封裝，給我們的web應(yīng)用程序加一個(gè)瀏覽器內(nèi)核。這樣，我們的js代碼就可以脫離傳統(tǒng)瀏覽器模式，獨(dú)立運(yùn)行了。然而它和傳統(tǒng)的瀏覽器模式道理是一樣的，所以有極高性能需求時(shí)，還是需要使用C++、Java等開發(fā)。但大多數(shù)的應(yīng)用程序根本不需要那么高的性能要求，所以使用Electron開發(fā)是沒有問題的。接下來，我們嘗試著從零開始，一步一步的使用Electron來開發(fā)Windows桌面應(yīng)用，當(dāng)然Mac和Linux也適用此方法。
首先，我們進(jìn)入Electron的官網(wǎng)：https://electron.atom.io/。進(jìn)入后，發(fā)現(xiàn)全英文，不要緊，實(shí)際上大多數(shù)都可以不看。我們直接來到首頁的這里：
如圖所示，官方給出的安裝方法是使用git和npm，但我們可以不使用git。然而，npm是必要的。npm是nodejs的包管理工具，新版本的nodejs已經(jīng)集成了npm，安裝nodejs后直接附帶npm。然而，一些舊版本的nodejs，或者從一些非官方處下載的不可靠的nodejs，可能不帶npm，所以我們?cè)谑褂盟氨仨毾劝惭bnodejs和npm。網(wǎng)上有很多教程，這里不再演示。需要注意的是，第三個(gè)命令npm install && npm start中，我們可以只輸入npm install,因?yàn)楹竺娓綆У闹噶詈芸赡軐?dǎo)致控制臺(tái)“死機(jī)”的情況，一直卡住且無法成功安裝Electron。所以，我們只要進(jìn)入我們指定的目錄，然后執(zhí)行以下命令即可（這些命令各個(gè)系統(tǒng)通用）：
如此一來，我們就安裝好了Electron。文件夾中：
打開來看，文件的目錄結(jié)構(gòu)是這樣的：
目錄看似復(fù)雜，其實(shí)，我們甚至可以不管這些文件！main.js可以相當(dāng)于我們的配置文件，里面有一些配置信息，默認(rèn)情況下，我們的應(yīng)用程序會(huì)直接打開這個(gè)目錄下的index.html。我們可以通過修改main.js中的參數(shù)來更改入口文件。當(dāng)然，package.json也有用，之后都會(huì)講到。
首先，我們可以使用electron.exe直接運(yùn)行應(yīng)用。在我的目錄中，electron.exe在E:\electron-quick-start\node_modules\electron\dist目錄下。我們可以使用electron.exe
我們?cè)诳刂婆_(tái)中輸入指令：
效果：
確實(shí)是以桌面應(yīng)用程序的形式運(yùn)行了。但是，我們希望我們的應(yīng)用程序直接打包成.exe，.app的形式，而不是讓我們的用戶手動(dòng)輸入命令啟動(dòng)應(yīng)用程序。而看看官方文檔，你就會(huì)發(fā)現(xiàn)，官方給出的打包方法還是有一些坑的，如果處理不好，就要中招。所以，我們使用更加方便的electron-packager。github鏈接在此：https://github.com/electron-userland/electron-packager。首先，我們還是按教程輸入指令來安裝它。同樣，這個(gè)指令在Linux，Mac，Windows上通用。
安裝方法和Electron一樣，從git上下載下來，進(jìn)行安裝。需要注意的是，上圖的兩個(gè)指令我們執(zhí)行其中一個(gè)就可以了。推薦執(zhí)行第二個(gè)，因?yàn)榈诙€(gè)是全局安裝，安裝之后我們就可以在控制臺(tái)直接執(zhí)行electron-packager命令，大大方便了我們的效率。
安裝好后，我們開始打包。首先，把我們的項(xiàng)目目錄拷貝到我們之前安裝的electron目錄下：
由于我們的應(yīng)用程序入口文件是app下的CG1.html，所以我們還需要打開main.js配置一下入口文件：
然后，打開package.json文件，配置一下參數(shù)。
這里只配置了name參數(shù)，因?yàn)閚ame參數(shù)和我們打包之后生成的應(yīng)用程序名稱有關(guān)。接下來，通過控制臺(tái)進(jìn)入我們的electron目錄（就是有main.js有package.json的那個(gè)目錄），
在控制臺(tái)執(zhí)行如下命令：
不要漏看了還有個(gè)"."，這個(gè)指當(dāng)前目錄的意思。其實(shí)，如果全局安裝了electron-packager，那我們呀可以把.換成任意的路徑。由于這個(gè)命令可以自動(dòng)的檢測(cè)當(dāng)前計(jì)算機(jī)的操作系統(tǒng)，還能檢測(cè)出是32位還是64位，所以我們大可省略一些參數(shù)。但如果要生成可定制平臺(tái)的軟件，需要帶上一些參數(shù)，詳細(xì)的在其項(xiàng)目的github中都已給出。相信大家如果有這個(gè)需求，那搞定這些參數(shù)應(yīng)該不在話下。靜待一會(huì)兒，打包完畢。我們可以在文件夾下看到多了一個(gè)名為CG1-win32-x64的文件夾。打開之后，點(diǎn)擊CG1.exe，即可打開應(yīng)用程序，此程序已經(jīng)可以作為發(fā)布版本提供給用戶！
感謝各位的閱讀！關(guān)于“如何使用JavaScript開發(fā)跨平臺(tái)的桌面應(yīng)用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
