Webapp打包就是在一臺(tái)機(jī)器上打包一個(gè)文件包或者程序包。在服務(wù)器端，應(yīng)用軟件與服務(wù)器端程序是分開的。在前端，應(yīng)用軟件通過瀏覽器安裝到移動(dòng)設(shè)備上。因此，移動(dòng)應(yīng)用程序應(yīng)該與網(wǎng)站組件分開。我們常說：網(wǎng)站封裝app、應(yīng)用APP、手機(jī)網(wǎng)站、微信公眾號(hào)等。但是如果想讓所有的網(wǎng)頁在同一臺(tái)機(jī)器上運(yùn)行，就需要用到網(wǎng)站封裝的技術(shù)，這里就介紹一下。

1.包的定義

網(wǎng)站包裝是對網(wǎng)頁進(jìn)行包裝的一種。但是在移動(dòng)設(shè)備上，由于瀏覽器的限制，需要將各種站點(diǎn)整合起來，讓用戶方便的訪問。為了讓各個(gè)站點(diǎn)的用戶使用同一個(gè)APP進(jìn)行購物、消費(fèi)、娛樂等活動(dòng)，需要對各個(gè)站點(diǎn)的程序進(jìn)行封裝。將部分網(wǎng)站內(nèi)容與應(yīng)用程序分離，可以大大降低網(wǎng)站建設(shè)成本和維護(hù)成本。

2.具體工作流程

從圖中可以看出，封裝程序是按照業(yè)務(wù)需求劃分的。用戶需要的功能模塊對應(yīng)網(wǎng)頁中的內(nèi)容，如果沒有這些模塊，則封裝程序中不會(huì)提供。對于不同類型的產(chǎn)品，在打包的時(shí)候也需要注意不同業(yè)務(wù)需求之間的關(guān)聯(lián)性，比如頁面與用戶需求之間的關(guān)聯(lián)性。

一般來說，在封裝客戶端應(yīng)用功能模塊時(shí)，不需要關(guān)注這些關(guān)聯(lián)。對于頁面服務(wù)或者產(chǎn)品功能模塊，需要注意。例如，在封裝前端應(yīng)用時(shí)，需要注意用戶界面與頁面服務(wù)的關(guān)聯(lián)，保證交互體驗(yàn)的流暢性，降低用戶訪問成本。

三、常見的封裝方式及應(yīng)用場景

應(yīng)用場景：在網(wǎng)站中，我們可以看到很多不同的模塊，比如：首頁、主界面等，這是因?yàn)檫@些模塊之間存在耦合關(guān)系，所以需要通過封裝來實(shí)現(xiàn)。比如在瀏覽器中搜索某個(gè)網(wǎng)站時(shí)，會(huì)自動(dòng)跳出這個(gè)頁面。但是這個(gè)頁面在瀏覽器上會(huì)被限制，無法通過移動(dòng)設(shè)備訪問。因此需要對其進(jìn)行封裝，將這些模塊與其他組件關(guān)聯(lián)起來，實(shí)現(xiàn)交互功能。

封裝效果圖

特征

1、無需配置Android開發(fā)環(huán)境和下載Android SDK、JAVA環(huán)境等。

2.打包的本地靜態(tài)HTML項(xiàng)目可以脫離服務(wù)器運(yùn)行

3.支持自定義圖標(biāo)、自定義APP名稱、自定義包名、全屏、橫屏、退出提示、常亮等選項(xiàng)

4.支持的瀏覽器特性，支持KRPano全景工程、WebGL工程、游戲工程等。

5.支持打包網(wǎng)站

軟件截圖

包裝過程

1.填寫要打包的網(wǎng)址或選擇本地文件

1）打包網(wǎng)站

在“網(wǎng)址或本地HTML路徑”文本框中輸入以http開頭的網(wǎng)址，例如輸入

2）打包本地HTML項(xiàng)目

點(diǎn)擊右側(cè)打開文件按鈕，選擇打開HTML文件

2.可以修改APP名稱和APP包名（可選）

圖4

暗示：

APP名稱為應(yīng)用安裝時(shí)在手機(jī)桌面顯示的名稱

APP包名對應(yīng)APK的ID，用于區(qū)分不同的APP。具有相同 ID 的 APK 文件將在安裝過程中被覆蓋

3.點(diǎn)擊修改圖標(biāo)修改APK在手機(jī)上顯示的圖標(biāo)。

圖5

4.可以設(shè)置開機(jī)密碼。設(shè)置開啟密碼后，手機(jī)端打開APP時(shí)，必須輸入密碼才能正常進(jìn)入APP。

圖6

5.所有設(shè)置完成后，點(diǎn)擊Pack APK生成APK。打包完成后，安裝到手機(jī)即可瀏覽

APK解決誤報(bào)病毒問題（1.5.9版本新增）

由于打包后的APK未在國內(nèi)APP市場上市，1.5.9版本之前使用的是共享簽名證書。因此，在部分手機(jī)系統(tǒng)上，1.5.9版本之前打包的APK偶爾會(huì)出現(xiàn)誤報(bào)。

為了解決這個(gè)問題，打包軟件1.5.9版本后，提供了內(nèi)置獨(dú)立簽名證書的功能，支持用戶隨時(shí)重置簽名證書。

如果內(nèi)置獨(dú)立簽名證書被誤報(bào)為有毒，可以使用以下方法重置內(nèi)置獨(dú)立簽名證書：

打開軟件等待加載完成，點(diǎn)擊重置證書按鈕，會(huì)提示重置成功：

圖7

配置說明

圖8

1.“顯示標(biāo)題欄”配置

勾選“Show title”后，即可配置APK的標(biāo)題欄，顯示標(biāo)題欄的應(yīng)用如下圖所示

圖9

2.“調(diào)試信息”選項(xiàng)

打開“調(diào)試信息”選項(xiàng)后，APP運(yùn)行過程中會(huì)顯示一些調(diào)試信息，在一些支持的網(wǎng)頁中會(huì)顯示一個(gè)調(diào)試面板，打開可以查看網(wǎng)站的調(diào)試信息，可以用于解決網(wǎng)頁中的問題

3.全屏選項(xiàng)

勾選全屏選項(xiàng)后，狀態(tài)欄不會(huì)出現(xiàn)，全屏顯示當(dāng)前網(wǎng)頁

4.橫向選項(xiàng)

勾選后打開APP，默認(rèn)是橫屏

5.退出提示選項(xiàng)

勾選后，當(dāng)用戶按回車鍵退出程序時(shí)，會(huì)出現(xiàn)提示對話框，如下圖

圖10

6.進(jìn)度條選項(xiàng)

勾選進(jìn)度條選項(xiàng)后，當(dāng)用戶打開網(wǎng)頁時(shí)，頂部會(huì)顯示加載進(jìn)度條

7.瀏覽按鈕

勾選后APP底部會(huì)增加一列導(dǎo)航按鈕，支持前進(jìn)、后退、刷新、返回首頁

圖11

8.啟動(dòng)圖像

勾選后，可以選擇一張本地圖片作為啟動(dòng)圖片，推薦尺寸為720*1280。

開機(jī)畫面會(huì)根據(jù)系統(tǒng)分辨率進(jìn)行裁剪，所以建議將開機(jī)畫面的內(nèi)容放在畫面中央，以免被裁剪。

9.禁用緩存

經(jīng)檢查，APK將不再使用緩存，每次打開都會(huì)加載的網(wǎng)頁。如果打包的網(wǎng)站經(jīng)常更新，建議勾選這個(gè)選項(xiàng)

10.瀏覽器打開外部鏈接

勾選后，外部鏈接會(huì)調(diào)用安卓瀏覽器打開。

11.API支持

勾選后，可以通過js調(diào)用以下的API

退出APP: HTMLAPKPackerHelper.quitApp()

刷新當(dāng)前頁面: HTMLAPKPackerHelper.refreshPage()

12. 支持左右滑動(dòng)

勾選后，可以通過左右滑動(dòng)返回上一頁，或者前進(jìn)到下一頁。（如果你的網(wǎng)頁里有手寫等功能，不建議開啟此功能，否則會(huì)導(dǎo)致手寫過程中網(wǎng)頁返回或者前進(jìn)到下一頁）

13. 定位權(quán)限

開啟后，可以在網(wǎng)頁中通過js獲取定位信息，如果網(wǎng)頁里沒有該功能，可以不開啟

14.相機(jī)權(quán)限

開啟后，可以在網(wǎng)頁中使用相機(jī)拍照上傳，如果網(wǎng)頁里沒有該功能，可以不開啟

15.存儲(chǔ)權(quán)限

開啟后，可以在網(wǎng)頁里下載文件，如果網(wǎng)頁里沒有該功能，可以不開啟

16.使用新內(nèi)核

開啟后，將使用新的打包內(nèi)核進(jìn)行打包，支持的系統(tǒng)和更多的功能，推薦使用該選擇，后續(xù)版本老內(nèi)核將會(huì)不再使用

17.下拉刷新

勾選后，