03.02 有什麼方法用html開發桌面軟件?

微微晨曦1994


其他人的回答我仔細看了一下,說得都挺好,藉助一些第三方軟件使用html或html5來開發桌面軟件,開發app也是可以做到的。我再補充一點,他們的回答裡都漏了微軟自帶的hta文件,hta就是用html和js、vbs來開發桌面軟件的。

百度百科裡是這樣講的,HTA是HTML Application的縮寫(HTML應用程序),是軟件開發的新概念,直接將HTML保存成HTA的格式,就是一個獨立的應用軟件,與VB、C++等程序語言所設計的軟件界面沒什麼差別。

其實微軟在xp時代,系統裡運用了大量的hta文件,其實換了個後綴格式cpl名,你不自查而已。最顯著的應用都是在控制面板裡。我們在xp命令運行下nusrmgr.cpl,會出現如圖所示的界面。

我們用Restorator分析一下nusrmgr.cpl文件,除了cpl自己的固定格式,裡邊全是htm文件。這也是為什麼微軟一直不肯刪掉ie瀏覽器的一個原因之一。如果刪掉了ie瀏覽器,你讓xp用html寫的這些控制面板系統應用如何自處?

當然,隨時微軟系統的升級換代,cpl文件也發展得與hta不同了。不過用hta文件的確是能寫出大量的有效的桌面軟件。

我本人也用hta寫過一個下載者生成器,當年效果還是非常好的,能繞過所有的主防。

如果有需要的,我可以在評論裡給出下載地址。


海陽頂端


你說的應該是將HTML程序打包為桌面程序吧,這裡介紹一種簡單的方式,利用node.js的electron打包,下面我簡單介紹一下實現過程,主要內容如下:

這裡為了更好的說明問題,我新建了一個index.html文件,主要內容如下,就是一個簡單的按鈕提示功能:

瀏覽器打開後的效果如下:

1.首先,安裝nodejs,這個直接到官網上下載就行,選擇適合自己平臺的版本即可,安裝完成後,需要將node、npm這些常見命令(即node安裝目錄)添加到環境變量中,方便後面使用,如下:

2.接著就是安裝electron和electron-packager這2個包,打包程序的時候要使用到這2個包,至於安裝的話,直接在cmd窗口中輸入命令“npm install electron electron-packager”就行,如下:

3.最後就是打包HTML為桌面程序了,主要步驟如下:

  • 這裡為了方便,我新建了一個package目錄,把剛才的index.html移入到這個目錄下,同時下面新建一個package.json文件和main.js一個文件,如下:

其中package.json用於指明打包的基本信息,main.js用於配置打包的詳細信息,其基本內容如下:

package.json文件:name為應用名稱,version為版本號,main為打包配置文件。

main.js文件:這裡用於配置打包的詳細信息,可以自行設置,網上資料很多,可以搜一下,我這裡簡單配置了一下:

  • 接著就是運行打包命令了,cmd切換到剛才的package目錄,然後運行命令“electron-packager . Hello --win --out HelloApp --arch=x64 --electron-version=3.0.10 --overwrite”就會自動打包,這裡主要需要指明打包的目錄、應用名稱、輸出目錄、應用位數、版本號等,詳細參數可以到網上搜一下,如下:

  • 打包成功後,就能在輸出目錄HelloApp下的Hello-win32-x64目錄中找到剛才打包好的Hello.exe應用程序,雙擊就能打開,如下:

至此,我們就完成了將HTML打包為桌面應用程序,其實就是用HTML開發桌面程序。總的來說,整個過程很簡單,就是配置有些麻煩,只要你熟悉一下相關過程和參數,多練習幾遍,很快就能掌握的,當然,你也可以利用其它方式來打包HTML程序,像nw.js,cef等,都可以,網上也有相關教程和資料,感興趣的話,可以搜一下,希望以上分享的內容能對你有所幫助吧,也歡迎大家評論、留言。


小小猿愛嘻嘻


純 HTML 確實是寫不出 桌面程序的,但是可以通過第三方工具對 HTML 文件進行打包操作,打包完後就是一個可以運行在桌面的應用程序了。


ElectronJs


官網:

https://electronjs.org/


如果你可以建一個網站,你就可以建一個桌面應用程序。 Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術創建原生程序的框架,它負責比較難搞的部分,你只需把精力放在你的應用的核心上即可。


Electron 讓你為你的公司或想法創建桌面端應用變得很簡單。最初為 GitHub 的 Atom 編輯器開發,Electron 已被像微軟、 Facebook、 Slack 和 Docker 這樣的公司用於創建應用程序了。


NW.js


官網:

https://nwjs.io/


NW.js(以前稱為node webkit)允許您直接從dom調用所有node.js模塊,並支持使用所有Web技術編寫應用程序的新方法。


NW.js 是一個使用 Web 技術創建本地應用的框架,如 HTML、JavaScript 和 CSS。簡單地說,當你在使用普通的流程開發一個 Web 應用時,開發完成後,運行一個生成器,將所有東西編譯成一個本地應用,它會像一個瀏覽器一樣運行你的 Web 應用。這種應用就被稱為“Hybrid 應用(一種混合本地編程和 Web 編程技術的應用)”。


並且 NW.js 是國人開發的工具,比 Electron 還要早發佈,不過目前沒有 Electron 流行,如果是寫基礎小應用,二者沒有什麼大區別,可以隨意嘗試,這兩個都是很不錯的框架。


以上就是兩種方便快捷的解決方案,希望能夠幫到你。


關注我

如果我的回答,幫到了你,歡迎點贊轉發喲,讓跟多的人學到新知識。


如果你有什麼疑問,也可以在下方評論喲,我會盡快為你解答。



開發指南


恭喜你遇到行家了,本人IT出生。

HBuilder

這是國內最好的H5開發軟件,如果你是開發手機桌面、電腦桌面完全ok,它本身就是建立在Html5的基礎之上,而且全中文開發環境讓國人很是滿意。

WebStorm

這是目前最流行的Html開發軟件,也是涵蓋了很多東西,js、jquery、ajax等等,而且擁有智能提示,使得開發速度非常快。


DW

這個的話都是初學者用的了,我個人不是很喜歡因為開發速度慢,不過功能還是全,建議初學者用,這樣才能學到東西。

說完前端那麼還有後臺呢?

Eclipse

建議使用java,因為java上手簡單而且很成熟,這個東西你應該知道的。

以上軟件不管你是開發手機桌面還是PC桌面都是沒問題的。


科技答題官


單純的html是寫不出Windows或者Mac的桌面應用程序的,甚至單純的網頁都有一大堆問題,所以樓主提出問題是有問題的!但是作為開發者,大致理解樓主想問的問題,如何使用web開發語言實現桌面應用,在node.js還沒出現之前是很難實現的,但是在node.js出現後,這也不是什麼難題,現在大致實現桌面應用是套個瀏覽器內核然後打包成一個桌面系統可執行的程序,來實現web應用移植到桌面應用,目前流行的技術是eletron,著名的用這種技術實現的桌面程序就是vs code,一款非常好用的代碼編輯器,擴展能力強大


柏舟63677578


曾經我把自己的網站源碼,打成了一個app..

但是,有啥用呢。


CharpeanChu


html寫桌面軟件是多餘的,有這個時間不如多研究點其他技術


葛大磊


直接改個後綴名,就可以直接運行了


IT啟蒙


請了解下HTA文件。xp時代就有了


牽妞花


本人小前端,最近閒翻閱到了一些比較厲害的東西,就看到了一個叫electron的api官網,上面是這樣介紹的:

關於Electron:

Electron是由Github開發,用HTML,CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。 Electron通過將Chromium和Node.js合併到同一個運行時環境中,並將其打包為Mac,Windows和Linux系統下的應用來實現這一目的。

Electron於2013年作為構建Github上可編程的文本編輯器Atom的框架而被開發出來。這兩個項目在2014春季開源。

目前它已成為開源開發者、初創企業和老牌公司常用的開發工具。

然後,我就對著一篇大神的分享神奇的做出了一個簡單的應用,打包後可以直接運行

如圖:

雙擊運行即可。

我簡單的將整個的過程寫了一份小文檔可以分享給你嘗試一下:


什麼是Electron?
Electron是一個基於Chrominum和NodeJS的跨平臺桌面應用框架。
在這個框架中很容易基於html、css和JavaScript技術的跨平臺應用,構建出來的應用會很好的兼容Mac、windows和Linux操作系統。
它還有一些其他的特性:
  • 自動更新--應用支持自動更新
  • 原生菜單和通知--可以創建原生應用菜單和上下文菜單
  • 應用奔潰報告--可以將奔潰提交到遠程服務器
  • 調試和分析--Chrominum的內容模塊可以發生性能瓶頸和緩慢的操作,你可以在應用中使用自己喜歡的chrome開發者工具
  • Windows installer--可以快速便捷地創建安裝包
動手之前需要安裝NodeJS,你還應該申請一個Github賬戶來保存和更新應用。
Ready Go
首先在git工具中將 electron/electron-quick-start庫克隆下來
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install&&npm start
完成上面的步驟之後,你會看到一個像瀏覽器窗口的應用打開。它確實是一個瀏覽器窗口!

這個窗口顯示的樣子在不同的操作系統上會有所不同。我選擇使用 Windows 的經典樣式。非常贊!

新應用的目錄和文件結構
基本的文件結構
electron-quick-start
-index.html是一個html5頁面,它具有一個很重要的作用:提供畫布
-main.js創建窗口並處理系統事件
-package.json是應用的啟動腳本,它包含了應用信息,在主進程中運行
-renderer.js處理應用的渲染進程
打包應用
electron-packager
electron-packager可以將項目打包成各平臺可直接運行的程序,而不是安裝包
先使用npm安裝:npm install electron-packager -S
運行打包命令:
electron-packager . app --win --out tjj --arch=x64 --version 1.0 --overwrite --ignore=node_modules
打包會把項目文件包括 node_modules 也一起打包進去,當然可以通過 –ignore=node_modules 來忽略文件,但是如果項目中有用到第三方庫,忽略的話則找不到文件報錯了。
藍色部分可自行修改:
electron-packager . 可執行文件的文件名 --win --out 打包成的文件夾名 --arch=x64位還是32位 --version版本號 --overwrite --ignore=node_modules
打包完成後的文件包名:app-win32-x64


分享到:


相關文章: