桌面應用

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

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

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

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

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

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

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

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

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

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

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

手機app

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

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

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

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

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

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

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

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

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

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