前端開發的網頁如何打包為手機APP和桌面exe文件？

這里簡單介紹一下吧，打包為手機App可以借助于HBuilder，打包為桌面exe可以借助于Electron，下面我具體介紹一下打包過程，主要內容如下：

打包手機APP1.首先，需要下載HBuilder，這個直接在官網上下載就行，如下，選擇適合自己的平臺，這里我們選擇“APP開發版”，功能較全：

2.下載完成后，直接解壓這個文件就行，如下，不需要單獨安裝就可以直接使用：

3.接著，我們打開這個軟件，依次點擊菜單欄的“文件”-gt“新建”-gt“項目”，項目類型選擇“5APP(A)”，模板選擇“HelloH5”，如下：

為了方便演示，這里我新建了一個文件，測試代碼如下，非常簡單，就是一個登陸頁面，輸入用戶名和密碼，提交后打印出歡迎對話框：

瀏覽器打開后的效果如下，也比較簡單清晰：

4.最后就是打包程序了，主要步驟及截圖如下：

首先，雙擊項目的mainfest.json配置文件，在基礎配置頁面，點擊獲取唯一的應用標識，同時設置應用入口頁面，也就是上面測試的：

mainfest.json配置完成后，右鍵項目，在彈出列表中依次選擇“發行”-gt“原生App-云端打包(P)”，在APP云打包頁面選擇你需要打包的手機平臺，確定包名，也就是剛才的應用標識，如下：

最后點擊“打包”按鈕，就會開始云端打包，打包完成后，會自動生成下載鏈接，這里我們可以直接點擊將打包好的apk下載到本地，如下：

手機安裝后的效果如下：

打包桌面exe1.首先，需要下載安裝node環境，這個直接到官網上下載安裝就行，如下，選擇適合自己平臺的版本即可：

2.安裝完成后，需要安裝一下electron和electron-packager這2個打包工具，這個直接在cmd窗口輸入安裝命令“npminstallelectronelectron-packager”即可，如下：

3.最后就是打包程序了，主要步驟及截圖如下：

首先新建一個文件夾，將剛才的文件拖拽進去，同時新建兩個打包配置文件—package.json和main.js，如下：

package.json文件簡單配置如下，主要是指明應用名稱、版本號、以及打包配置文件，非常簡單：

main.js文件簡單配置如下，主要是指明打包的詳細配置信息，這個可以到網上查一下，資料非常多也非常詳細，這里重點需要指明打包的html文件：

最后就是在cmd中打包了，先切換到這個文件夾，然后輸入打包命令“electron-packager.APP--win--outAppDir--archx64--electron-version3.0.10--overwrite”就行，如下，就會自動開始打包過程，非?？欤@里的打包參數主要是指明打包后的應用名稱、位數、版本號等：

接著就可以在剛才的輸出目錄AppDir下找到打包的應用APP.exe，雙擊就能正常運行，效果如下，其實就是嵌套了一個瀏覽器外殼：

至此，我們就完成了將前端網頁打包為手機APP和桌面exe文件。總的來說，整個過程非常不難，就是步驟有些復雜，只要你熟悉一下很快就能掌握的，當然，你也可以使用apicloud進行打包，只不過這些工具打包出來的APP沒有原生開發的好，需要改進優化，至于桌面打包，你也可以使用NW.js進行打包，效果差不多，網上也有相關教程可供參考，希望以上分享的內容能對你有所幫助吧，也歡迎大家評論、留言。

用什么手機軟件開發？

是做網頁的,C#做為網頁程序的服務器后臺.你通過手機能夠訪問網絡自然也能夠通過手機的瀏覽器訪問開發出來的網頁,跟電腦上的開發沒有什么太大的區別.

不過我想你想知道的是這套工具能不能夠開發手機的應用程序.

上面已經說了,是做網頁的,所以不能開發手機應用.

但C#可以,不知道你有沒有聽說過WinPhone.基于C#,WPF和Silverlight平臺開發的手機操作系統,C#可以做相關的開發,很方便.

如果你已經有了一定的C#基礎,那找本Silverlight相關的資料來看看,問題不大.微軟的軟件都是簡單易用,養懶人