前端開發(fā)的網(wǎng)頁如何打包為手機APP和桌面exe文件？

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

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

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

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

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

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

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

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

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

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

手機安裝后的效果如下：

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

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

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

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

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

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

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

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

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

用什么手機軟件開發(fā)？

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

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

上面已經(jīng)說了,是做網(wǎng)頁的,所以不能開發(fā)手機應用.

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

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