當然是前端頁面啦，除此之外，也可以做桌面應用和手機app，下面我簡單介紹一下具體實現過程，主要內容如下：

桌面應用

這里需要先安裝node環境，然后借助electron打包前端網頁為桌面應用，主要步驟如下，很簡單：

1.首先，安裝node，這個直接到官網上下載就行，如下，選擇適合自己平臺的版本即可：

2.安裝完成后，這里需要安裝一下electron和electron-packager這2個工具包，后面前端網頁的打包中需要用到這2個包，安裝的話，直接在cmd窗口輸入命令“npminstallelectronelectron-packager”就行，如下：

3.這里為了方便演示，我新建了一個html網頁，測試代碼如下，非常簡單，就是一個靜態的登陸界面：

用瀏覽器打開這個html網頁，效果如下：

4.最后就是具體的打包過程，主要步驟及截圖如下：

• 首先，新建一個文件夾，將上面的html網頁復制進去，同時新建2個文件，分別是package.json和main.js，目錄如下：

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

• main.js文件主要指明具體打包過程，基本配置如下（網上參考資料非常多，可以搜一下），這里重點需要指明打包的html文件名稱：

• 最后就是打包，打開cmd窗口，切換到新建的目錄，運行命令“electron-packager.APP--win--outAppDir--arch=x64--electron-version=3.0.10--overwrite”就會開始自動打包過程，這里的參數主要是指明打包的應用名稱、輸出目錄、位數、版本號等：

• 打包完成后，就會在輸出目錄AppDir下找到打包的應用APP.exe，雙擊就可正常運行，效果如下，和瀏覽器的效果差不多：

手機app

這里主要用到HBuilder這個工具，可以直接將前端網頁打包為手機app（云端打包功能），下面我具體介紹一下實現過程：

1.首先，下載安裝HBuilder，這個直接到官網上下載就行，如下，這里選擇功能比較全面的“APP開發版”：

2.下載完成后，一個zip壓縮包，直接解壓到本地即可，如下：

3.接著，雙擊打開這個軟件，新建項目，這里的項目類型選擇“5+APP(A)”，模板選擇“HelloH5+”，如下，將剛才的html文件拖到這個項目中來：

4.最后就是打包過程，具體步驟如下：

• 首先，雙擊項目中的mainfest.json配置文件，在基礎配置頁面獲取唯一AppID，后面打包時要用到，同時選擇程序的入口文件，也就是剛才的html文件：

• mainfest.json文件配置完成后，右鍵項目，在彈出的菜單列表中依次選擇“發行”->“原生App-云端打包(P)”，這里以打包android為例，在android包名出輸入剛才獲取的AppID就行，如下：

• 最后點擊打包按鈕，就會自動開始云端打包過程，打包完成后，會自動生成下載鏈接，可以直接下載打包好的apk安裝文件到本地，官方只提供5次機會下載機會：

• 手機安裝后的效果如下，還不錯：

至此，我們就完成了將前端開發的網頁打包為桌面應用和手機app。總的來說，整個過程不難，就是步驟有些繁瑣，只要你熟悉一下流程，多操作幾遍，很快就能掌握的，不過，有時打包出來的效果沒有原生語言開發的好，需要優化改進才行，網上也有相關資料和教程，介紹的非常詳細，感興趣的話，可以搜一下，希望以上分享的內容能對你有所幫助吧，也歡迎大家評論、留言進行補充。