前端html和js可以做什么？最基本的就是開發(fā)網(wǎng)頁啦，html寫網(wǎng)頁，js實(shí)現(xiàn)網(wǎng)頁交互效果，除此之外，也可以開發(fā)桌面GUI程序，下面我簡單介紹一下如何使用html js開發(fā)出一個簡單的桌面程序：1.這

前端html和js可以做什么？

最基本的就是開發(fā)網(wǎng)頁啦，html寫網(wǎng)頁，js實(shí)現(xiàn)網(wǎng)頁交互效果，除此之外，也可以開發(fā)桌面GUI程序，下面我簡單介紹一下如何使用html js開發(fā)出一個簡單的桌面程序：

1.這里為了更好的說明問題，我新建了一個html文件，就是一個簡單的登錄頁面，源碼如下，非常簡單，就是兩個輸入框和一個登錄按鈕：

瀏覽器運(yùn)行的效果如下：

2.接著就可以將這個html網(wǎng)頁打包為桌面應(yīng)該程序，這里需要用到nodejs的Electron功能，下面我具體介紹一下主要步驟及截圖：

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

安裝完成后，需要下載一下electron和electron-packager這2個包，后面的打包需要借助這2個包，命令“npm install electron electron-packager”，如下：

接著新建一個文件夾，將剛才的html文件拖拽進(jìn)去，同時新建一個package.json文件和一個main.js文件，如下：

package.json文件配置如下，主要指明應(yīng)用名稱、版本號及打包配置文件：

main.js文件配置如下，這里需要指明打包程序的入口文件，網(wǎng)上也有詳細(xì)配置過程：

最后就是在打包程序了，命令“electron-packager . APP --win --out AppDir --archx64 --electron-version3.0.10 --overwrite”，打包的過程非?？?，這里主要需要指明打包的應(yīng)用名稱、輸出目錄、版本號、位數(shù)等：

接著就可以在輸出目錄AppDir中找到打包好的應(yīng)用程序APP.exe，直接雙擊就能打開，截圖如下，和瀏覽器效果差不多：

至此，我們就完成了利用html js來開發(fā)一個簡單的桌面GUI程序?？偟膩碚f，整個過程不難，就是步驟有些繁瑣，只要你熟悉一下上面的配置過程，多操作幾遍，很快就能掌握的，當(dāng)然，你也可以使用html js開發(fā)移動應(yīng)用，像HBuilder等，網(wǎng)上也有相關(guān)教程和資料，介紹的非常詳細(xì)，感興趣的話，可以搜一下，希望以上分享的內(nèi)容能對你有所幫助吧，也歡迎大家評論、留言。

源碼時代前端的實(shí)戰(zhàn)項(xiàng)目有用嗎？

有沒有用，還是要看你自己沒有學(xué)到真正的技術(shù)吧。我朋友也是在源碼時代學(xué)習(xí)的前端，聽說課程里有很多實(shí)戰(zhàn)項(xiàng)目，他工作之后遇到很多項(xiàng)目都用到了培訓(xùn)期間的實(shí)戰(zhàn)項(xiàng)目。