使用JavaScript開發跨平臺的桌面應用

来源:http://www.cnblogs.com/zhnblog/archive/2017/07/26/7241038.html
-Advertisement-
Play Games

Atwood’s Law是Jeff Atwood在2007年提出的:“any application that can be written in JavaScript, will eventually be written in JavaScript.”。據說,這隻是當時開的一個玩笑。不過,這個玩 ...


任何可以使用JavaScript來編寫的應用,最終會由JavaScript編寫。--Atwood定律

  Atwood’s Law是Jeff Atwood在2007年提出的:“any application that can be written in JavaScript, will eventually be written in JavaScript.”。據說,這隻是當時開的一個玩笑。不過,這個玩笑似乎漸漸變成了現實。從各種華麗的網頁框架,到功能強大的庫,到了現在的機器學習,伺服器開發,都有JavaScript的身影。從JavaScript也衍生出了一些語言,例如TypeScript。而使用JavaScript製作游戲也變得方便起來,可以使用CocosCreator。Html5的橫空出世,也將之前JavaScript在網頁的輔助地位提升到了主力地位,nodejs的出現更是讓其實現了所謂的“全棧”開發,現在JavaScript甚至可以做手機應用。但是,在移動端、瀏覽器、伺服器端有需求,在桌面應用上也會有需求。能不能使用JavaScript來開發可以跨平臺的應用程式呢?答案是:可以。使用Electron即可方便的使用JavaScript進行桌面應用開發。可以看到,很多大名鼎鼎的程式都是由它直接或間接開發而成,例如Atom,VSCode等。

  需要註意的是,目前使用Electron開發桌面應用程式有一些限制條件。首先,我們無法調用複雜的系統API(或者說不能直接做到),這就導致我們無法開發更加複雜的企業級應用。其次,它的性能目前仍然不能與原生應用相提並論。我們可以認為,Electron就是一個套著瀏覽器外殼的包裝盒,這個包裝盒給我們讀寫文件的能力,我們開發好web應用程式,調試完成後使用它來進行封裝,給我們的web應用程式加一個瀏覽器內核。這樣,我們的js代碼就可以脫離傳統瀏覽器模式,獨立運行了。然而它和傳統的瀏覽器模式道理是一樣的,所以有極高性能需求時,還是需要使用C++、Java等開發。但大多數的應用程式根本不需要那麼高的性能要求,所以使用Electron開發是沒有問題的。接下來,我們嘗試著從零開始,一步一步的使用Electron來開發Windows桌面應用,當然Mac和Linux也適用此方法。

  首先,我們進入Electron的官網:https://electron.atom.io/。進入後,發現全英文,不要緊,實際上大多數都可以不看。我們直接來到首頁的這裡:

  如圖所示,官方給出的安裝方法是使用git和npm,但我們可以不使用git。然而,npm是必要的。npm是nodejs的包管理工具,新版本的nodejs已經集成了npm,安裝nodejs後直接附帶npm。然而,一些舊版本的nodejs,或者從一些非官方處下載的不可靠的nodejs,可能不帶npm,所以我們在使用它之前必須先安裝nodejs和npm。網上有很多教程,這裡不再演示。需要註意的是,第三個命令npm install && npm start中,我們可以只輸入npm install,因為後面附帶的指令很可能導致控制台“死機”的情況,一直卡住且無法成功安裝Electron。所以,我們只要進入我們指定的目錄,然後執行以下命令即可(這些命令各個系統通用):

  如此一來,我們就安裝好了Electron。文件夾中:

  打開來看,文件的目錄結構是這樣的:

  目錄看似複雜,其實,我們甚至可以不管這些文件!main.js可以相當於我們的配置文件,裡面有一些配置信息,預設情況下,我們的應用程式會直接打開這個目錄下的index.html。我們可以通過修改main.js中的參數來更改入口文件。當然,package.json也有用,之後都會講到。

  首先,我們可以使用electron.exe直接運行應用。在我的目錄中,electron.exe在E:\electron-quick-start\node_modules\electron\dist目錄下。我們可以使用electron.exe <rootpath> 這種命令格式直接運行我們的應用,rootpath代表你要運行的項目目錄。例如,我之前用three.js編寫的應用,目錄是:E:\app。

  我們在控制臺中輸入指令:

  效果:

  

  確實是以桌面應用程式的形式運行了。但是,我們希望我們的應用程式直接打包成.exe,.app的形式,而不是讓我們的用戶手動輸入命令啟動應用程式。而看看官方文檔,你就會發現,官方給出的打包方法還是有一些坑的,如果處理不好,就要中招。所以,我們使用更加方便的electron-packager。github鏈接在此:https://github.com/electron-userland/electron-packager。首先,我們還是按教程輸入指令來安裝它。同樣,這個指令在Linux,Mac,Windows上通用。

  安裝方法和Electron一樣,從git上下載下來,進行安裝。需要註意的是,上圖的兩個指令我們執行其中一個就可以了。推薦執行第二個,因為第二個是全局安裝,安裝之後我們就可以在控制台直接執行electron-packager命令,大大方便了我們的效率。

  安裝好後,我們開始打包。首先,把我們的項目目錄拷貝到我們之前安裝的electron目錄下:

  

  由於我們的應用程式入口文件是app下的CG1.html,所以我們還需要打開main.js配置一下入口文件:

  

 

  然後,打開package.json文件,配置一下參數。

  這裡只配置了name參數,因為name參數和我們打包之後生成的應用程式名稱有關。接下來,通過控制台進入我們的electron目錄(就是有main.js有package.json的那個目錄),

在控制台執行如下命令:

  

  不要漏看了還有個".",這個指當前目錄的意思。其實,如果全局安裝了electron-packager,那我們呀可以把.換成任意的路徑。由於這個命令可以自動的檢測當前電腦的操作系統,還能檢測出是32位還是64位,所以我們大可省略一些參數。但如果要生成可定製平臺的軟體,需要帶上一些參數,詳細的在其項目的github中都已給出。相信大家如果有這個需求,那搞定這些參數應該不在話下。靜待一會兒,打包完畢。我們可以在文件夾下看到多了一個名為CG1-win32-x64的文件夾。打開之後,點擊CG1.exe,即可打開應用程式,此程式已經可以作為發佈版本提供給用戶!

  

 

  最後,推薦一下Electron的中文教程:https://www.w3cschool.cn/electronmanual/p9al1qkx.html

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 實現頂部與底部固定的效果十分容易,且很多人都會選擇用這個方式,就是頂部position:fixed,底部也position:fixed。實現的效果就像下麵兩張圖,container區域是佈滿整個屏幕的,且滾動條也是滾動在整個屏幕中,調內容區時只能調節高度。 其實還有一種方式可以實現較好的效果,就是內 ...
  • 準備前提:已經搭建好angular-cli環境,還未搭建好的請參見三少的博客(開發基礎分類) 1 新建一個文件夾 該文件夾用來存放所有利用angular-cli搭建的web前端項目 2 啟動命令視窗,併進入該文件夾 3 創建新項目 ng new 項目名稱 註意:項目名稱最好全部用字母 3.1 到文件 ...
  • 1、獲取滑鼠位置 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:// ...
  • 今天要給大家說的是兩個不同頁面之間的通信,通過一個拖拽demo來模擬; 首先,寫好基礎的拖拽代碼: 這是將div拖動變化的值存入到本地儲存localstorage,用JSON.stringify將其轉為字元串形式: 然後新建一個新建一個demo,獲取本地的數據: 通過onstorage這個方法實現兩 ...
  • HTML 超文本標記語言 html5 建立一個HTML文件:文件名 . 尾碼(html) 解析:就是去識別 註釋:就是給開發人員開的批註 瀏覽器不去解析(不去輸出) HTML的整體框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
  • 數組去重+快速排序 //老數組var arr1 = [1,2,2,3,8,6,6,4,5,5];//定義新數組var arr2 = [ ];內部可運用布爾型進行判斷數組的唯一性 for(i=0;i<arr1.length;i++){ var status = 0;(true) for(j=0;j<a ...
  • 今早,上IT修真園裡,看到師兄大娃很負責任的將我任務里的項目的排版,3,6,7的列了出來。 謝謝師兄,那麼負責任的照看師弟。 言歸正傳,我一開始,直接按照師兄的指示,選擇性的優先修改底部。效果也達到了預期的效果。後來我為了查看我的項目跟psd圖的差別。就直接上我們的IT修真園的首頁,查看它的代碼了。 ...
  • 1. 如何創建嵌套的過濾器 //允許你減少集合中的匹配元素的過濾器, //只剩下那些與給定的選擇器匹配的部分。在這種情況下, //查詢刪除了任何沒(:not)有(:has) //包含class為“selected”(.selected)的子節點。 .filter(":not(:has(.select ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...