前端html和js可以做什么?
最基本的就是開發網頁啦,html寫網頁,js實現網頁交互效果,除此之外,也可以開發桌面GUI程序,下面我簡單介紹一下如何使用htmljs開發出一個簡單的桌面程序:
1.這里為了更好的說明問題,我新建了一個html文件,就是一個簡單的登錄頁面,源碼如下,非常簡單,就是兩個輸入框和一個登錄按鈕:
瀏覽器運行的效果如下:
2.接著就可以將這個html網頁打包為桌面應該程序,這里需要用到nodejs的Electron功能,下面我具體介紹一下主要步驟及截圖:
首先,需要安裝本地node環境,這個直接到官網上下載就行,如下,選擇適合自己平臺的版本即可:
安裝完成后,需要下載一下electron和electron-packager這2個包,后面的打包需要借助這2個包,命令“npminstallelectronelectron-packager”,如下:
接著新建一個文件夾,將剛才的html文件拖拽進去,同時新建一個package.json文件和一個main.js文件,如下:
package.json文件配置如下,主要指明應用名稱、版本號及打包配置文件:
main.js文件配置如下,這里需要指明打包程序的入口文件,網上也有詳細配置過程:
最后就是在打包程序了,命令“electron-packager.APP--win--outAppDir--archx64--electron-version3.0.10--overwrite”,打包的過程非常快,這里主要需要指明打包的應用名稱、輸出目錄、版本號、位數等:
接著就可以在輸出目錄AppDir中找到打包好的應用程序APP.exe,直接雙擊就能打開,截圖如下,和瀏覽器效果差不多:
至此,我們就完成了利用htmljs來開發一個簡單的桌面GUI程序。總的來說,整個過程不難,就是步驟有些繁瑣,只要你熟悉一下上面的配置過程,多操作幾遍,很快就能掌握的,當然,你也可以使用htmljs開發移動應用,像HBuilder等,網上也有相關教程和資料,介紹的非常詳細,感興趣的話,可以搜一下,希望以上分享的內容能對你有所幫助吧,也歡迎大家評論、留言。
源碼時代前端的實戰項目有用嗎?
有沒有用,還是要看你自己沒有學到真正的技術吧。我朋友也是在源碼時代學習的前端,聽說課程里有很多實戰項目,他工作之后遇到很多項目都用到了培訓期間的實戰項目。