01-準(zhǔn)備好要打包的網(wǎng)頁(yè)文件,一般包含HTML-CSS-JS-靜態(tài)資源文件:
02-下載HBuilderX,注冊(cè)一個(gè)賬號(hào)-必須注冊(cè)賬號(hào)(免費(fèi))
下載地址:https://www.dcloud.io/hbuilderx.html
03-新建一個(gè)H5+項(xiàng)目:
04-然后把以下紅框里面的這些文件都刪掉,只保留一個(gè)manifest.json文件:
05-然后把需要打包的文件全部復(fù)制到(我的應(yīng)用)這個(gè)文件里面:
以上步驟其實(shí)就是把原本H5+的html-css文件替換為自己的
06-點(diǎn)擊manifest.json文件,可以設(shè)置app的一些東西,例如應(yīng)用圖標(biāo),名稱,版本號(hào),描述等:
支持的cpu類型,這里最好都選上,畢竟手機(jī)類型很多:
07-最后點(diǎn)擊發(fā)行--原生App-云打包,選擇如下,點(diǎn)擊打包(默認(rèn)有開(kāi)屏廣告,可以勾掉):
08-等待完成即可返回.apk文件路徑,進(jìn)入此路徑找到apk文件,復(fù)制apk文件,通過(guò)微信發(fā)送到手機(jī),點(diǎn)擊安裝即可:
生成的apk文件如下圖所示:
如果使用例如Vue等框架的項(xiàng)目,由于是框架寫(xiě)的項(xiàng)目,文件很多且很雜,那么我們可以先執(zhí)行npm run build打包為純html+css+js這樣的文件,然后再按照如上的方式打包即可。如下Vue3項(xiàng)目打包后的文件:
將網(wǎng)頁(yè)打包為app后,用戶可以直接在手機(jī)上使用,而不需要打開(kāi)并輸入網(wǎng)址,提高了用戶的便利性和體驗(yàn)。
這種方式打包app,其實(shí)就是依賴于H5+項(xiàng)目的manifest.json這個(gè)配置文件,再加上HBX編輯器配合完成,可打包的對(duì)象就是HTML的網(wǎng)頁(yè)文件。