HTML窗口彈出代碼？lt/titlegtltscriptgtfunctionwelcom前端開發(fā)的網(wǎng)頁如何打包為手機(jī)APP和桌面exe文件？這里 這是一個簡單的介紹。你可以用HBuilder打包一個

HTML窗口彈出代碼？

lt/titlegtltscriptgtfunctionwelcom

前端開發(fā)的網(wǎng)頁如何打包為手機(jī)APP和桌面exe文件？

這里 這是一個簡單的介紹。你可以用HBuilder打包一個手機(jī)App，用Electron打包一個桌面exe。我來詳細(xì)介紹一下包裝流程。主要內(nèi)容如下:

正在打包移動應(yīng)用程序1。首先你需要下載HBuilder，可以直接從官網(wǎng)下載。如下，選擇適合自己的平臺。這里我們選擇 "應(yīng)用開發(fā)版 "，它有更多的功能:

2.下載后直接解壓這個文件就行了，如下，不用單獨安裝就可以直接使用了:

3.接下來我們打開這個軟件，在菜單欄點擊文件-gt新建-gt項目，選擇5 APP(A)作為項目類型，Hello H5作為模板，如下:

為了便于演示，我在這里創(chuàng)建了一個新文件。測試代碼如下。這很簡單。這是一個登錄頁面。輸入用戶名和密碼，提交后打印出歡迎對話框:

瀏覽器打開后，效果如下，簡單明了:

4.最后，打包程序，主要步驟和截圖如下:

首先雙擊項目的mainfest.json配置文件，在基本配置頁面，點擊獲取唯一應(yīng)用ID，設(shè)置應(yīng)用門戶頁面，就是上面測試的那個:

配置好mainfest.json后，右鍵點擊項目，在彈出列表中選擇Publish-gt Native APP-Cloud Packaging(P)。在App云打包頁面，選擇需要打包的手機(jī)平臺，確認(rèn)包名，也就是剛才的應(yīng)用logo，如下圖:

最后，單擊 "打包 "按鈕開始云打包。打包完成后，會自動生成一個下載鏈接。在這里，我們可以直接點擊下載本地打包的apk，如下:

手機(jī)安裝的效果如下:

打包桌面exe1。首先，你需要下載并安裝節(jié)點環(huán)境。直接在官網(wǎng)下載安裝這個就行了，如下，選擇適合你平臺的版本:

2.安裝完成后，您需要安裝兩個打包工具，電子和電子打包器。只要輸入安裝命令 "NPM安裝電子包裝機(jī) "直接在cmd窗口中，如下:

3.最后，打包程序，主要步驟和截圖如下:

首先，創(chuàng)建一個新文件夾，拖放剛才的文件，創(chuàng)建兩個新的包配置文件——package . JSON和main.js，如下所示:

package.json文件簡單配置如下，主要說明應(yīng)用名稱、版本號和打包配置文件。，很簡單:

main.js文件的簡單配置如下，主要表示包的詳細(xì)配置信息。這個可以在網(wǎng)上查，資料非常豐富詳細(xì)。這里，指明打包的html文件很重要:

最后用cmd封裝。首先切換到這個文件夾，然后輸入打包命令 "app-win-out appdir-arch x64-Electron-version 3 . 0 . 10-overwrite "。如下，打包過程會自動開始，非?？?。這里的打包參數(shù)主要表示打包應(yīng)用的名稱和位數(shù)。

然后你可以在剛才的輸出目錄AppDir中找到打包的應(yīng)用程序APP.exe，雙擊它就可以正常運行了。效果如下，其實是嵌套了一個瀏覽器外殼:

至此，我們已經(jīng)完成了將前端網(wǎng)頁打包成手機(jī)APP和桌面exe文件。總的來說，整個過程并不難，只是步驟有點復(fù)雜，只要熟悉就能很快掌握。當(dāng)然，你也可以用apicloud來打包，但是這些工具打包出來的app還不如原來開發(fā)的好，需要改進(jìn)和優(yōu)化。至于桌面打包，也可以用NW.js打包，效果差不多。網(wǎng)上有相關(guān)教程可供參考。希望上面分享的內(nèi)容能幫到你，不客氣。