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

HTML窗口彈出代碼？

lt/titlegtltscriptgtfunctionwelcom

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

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

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

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

3.接下來(lái)我們打開(kāi)這個(gè)軟件，在菜單欄點(diǎn)擊文件-gt新建-gt項(xiàng)目，選擇5 APP(A)作為項(xiàng)目類(lèi)型，Hello H5作為模板，如下:

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

瀏覽器打開(kāi)后，效果如下，簡(jiǎn)單明了:

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

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

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

最后，單擊 "打包 "按鈕開(kāi)始云打包。打包完成后，會(huì)自動(dòng)生成一個(gè)下載鏈接。在這里，我們可以直接點(diǎn)擊下載本地打包的apk，如下:

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

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

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

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

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

package.json文件簡(jiǎn)單配置如下，主要說(shuō)明應(yīng)用名稱(chēng)、版本號(hào)和打包配置文件。，很簡(jiǎn)單:

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

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

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

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