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

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

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

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

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

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

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

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

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

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

手機安裝后的效果如下：

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

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

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

首先新建一個文件夾，將剛才的app.html文件拖拽進去，同時新建兩個打包配置文件—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和桌面exe文件。總的來說，整個過程非常不難，就是步驟有些復雜，只要你熟悉一下很快就能掌握的，當然，你也可以使用apicloud進行打包，只不過這些工具打包出來的APP沒有原生開發的好，需要改進優化，至于桌面打包，你也可以使用NW.js進行打包，效果差不多，網上也有相關教程可供參考，希望以上分享的內容能對你有所幫助吧，也歡迎大家評論、留言。

通俗點來說，前端開發做的是讓用戶看到，感受到的頁面，動畫等等，后端開發做的是用戶的信息數據之類的，打一個很簡單的例子:對于微信app,如果做的是前端開發，就是做微信的頁面，比如聊天的界面，朋友圈的界面等等，如下圖的這個微信布局、實現等等。

如果做后端開發，你剛才看到的頁面，你會發現，你打開微信的內容跟我的內容不一樣，這個內容、數據的不同就是后端開發要解決的。

前端跟后端的區別：

1. 學習的難度不一樣，前端入門容易，深入相對難，前端也很容易實現，只有一個文本，會寫前端代碼就可以實現頁面，成就感滿滿的。后端入門難，深入更能，更注重邏輯，因沒有界面的展示，所以需要去摸索學習，提升，相對會比較枯燥。

2. 學習的內容技術不一樣。前端主要學習html,css,jquery,javascript,Bootstrap,Node.js等技術，提升用戶體驗，還有瀏覽器，手機端的各種兼容問題；后端主要有不同的語言主導的，比如以java為例，除了，要學習java這門語言，還有學習spring mvc、 Hibernate Http協議，數據庫SQL知識， Servlet Tomcat服務器等技術。

雖然前端跟后端是不一樣的，但是前端開發也要熟悉一點后端技術，后端開發也要熟悉前端技術，因為前端跟后端一起合作才能完美的完成項目，沒有后端，前端只能展示靜態的頁面，則沒有太大的價值，而后端如果沒有前端的展示，用戶就無法使用，一樣沒有價值體現。

前端可以開發網站，移動web站，微信公眾號，微信小程序，基于Android和iOS的原生App，車載系統所有能夠呈現在用戶眼前的產品前端都可以做。

另外前端是一輩子都學不完的，學完理論更要用于實踐。關注我可以獲取更多資源哦~