簡單一句就是，用開發 Web 的技術完成原生移動應用的開發。

雖然 5+App 與移動 Web 開發，采用的相關技術大體一致，但是兩者的區別還是很明顯的。

5+App 是 C/S 的，Web 是 B/S 的。

5+App 是獨立的客戶端，應用資源通常只能是靜態的文件。PHP、JSP 這些服務器模板，沒有解析器去處理。

5+App 打包后是 apk 及 ipa 后綴的包，也就是原生的移動應用。

window.plus 擴展的 API，依賴 5+Runtime 引擎。普通瀏覽器沒有集成這個引擎，Web 開發通常用不了這些 API。

HBuilder 內置了 5+App 的開發環境，因此需要先下載此 IDE。

下載并解壓 HBuilder 后，啟動 IDE。首次使用需要注冊一個賬號，方便之后管理應用以及在社區活動。

一臺電腦，一部手機。手機最好是 Android 4.4 及以上的，不推薦用模擬器。USB 線也是必須的，當然 HBuilder 同樣支持 WiFi 調試。

啟動 HBuilder，并且登錄。

菜單 - 文件 - 新建 - 移動 App

模板暫時不需要調整，輸入應用名“HelloWorld”，點擊完成即可。

應用的入口頁面，概念和 Web 的入口頁類似。默認是應用根目錄下的 index.html，這個可以調整。

5+App 的配置文件，用于配置應用的信息。HBuilder 對此文件做了特殊處理，并提供了可視化的編輯界面。

應用信息

應用名稱：就是你的應用在手機桌面上顯示的名字。

appid：這個是 5+App 創建時分配的，不要修改。更不要和 iOS 的 AppID 或者其它第三方平臺上的 appid 混淆。

版本號：應用版本號

頁面入口：就是首頁是哪個頁面，可修改。

應用描述：簡單說明一下應用的信息

圖標配置

就是應用的 logo，按照提示做一張符合規格的圖，然后一鍵生成替換。

啟動圖片

splash 圖就是應用啟動的時候那張占位的圖片，QQ 是個企鵝，微信是那個月球。

啟動選項：通常用默認的就行，根據需要調整。

圖片設置：按照需要，制作相應尺寸的 png 圖，選擇配置即可。

SDK 配置

如果用到了一些第三方的 SDK 的功能，就需要配置相應的信息。

SDK 啟用需填寫的信息，去相應的第三方開放平臺注冊即可。

模塊權限配置

某些模塊的啟用需要配置下權限

頁面引用關系

不是特別懂，看說明書吧。

代碼視圖

配置的源代碼部分，不是所有配置都提供了可視化編輯視圖。

將手機連上電腦，HBuilder 會自動檢測到連接到電腦上的設備。菜單 - 運行 - 真機運行，選擇你的設備即可。首次使用會安裝一個調試基座 HBuilder，如果 HBuilder IDE 版本變化的話，真機運行會覆蓋舊版本的 HBuilder 基座。

頁面的樣式，推薦使用電腦的 Chrome 瀏覽器手機模式進行調試。

Android 真機運行時，每次修改完文件并保存，手機端的基座會同步代碼。

Android 還是可以使用 Chrome RemoteDebugging 進行調試，但是需要是 Android 4.4 以上的設備并且首次需要翻墻。

簡單封裝一下擴展 API 加載完成的事件回調

var plusReady = function(callback) { if(window.plus) { callback(); } else { document.addEventListener( plusready , callback);};

然后，讀取下當前設備連接的網絡類型并輸出到頁面上。

plusReady(function() { var netType = plus.networkinfo.getCurrentType(); document.write( 當前網絡類型為： + netType);});

真機運行，可以看到頁面上的內容“當前網絡類型為：3”，也就是 WiFi 網絡環境。

確認 manifest.json 中的信息無誤

logo 及 splash 圖不配置的話，會用默認的 HBuilder 相關圖片。

菜單 - 發行 - 云打包-打原生安裝包

勾選 Android，Android 的證書相對隨意一些，用 DCloud 提供的現成的或者自己生成的都一樣。

包名要嚴格遵循 Android 包名的格式規范，不要亂寫。這里調整一下，改為 com.helo.html5plus。

如果配置信息有錯誤，會有提示，必須修改正確才能繼續。

一切無誤之后，點擊“打包”，等待即可。

打包完成后，會自動下載到相應的目錄下。

將云打包下載下來的 apk 安裝到手機上，啟動應用就可以查看當前網絡狀態信息。那么，我們的第一個 5+App 就順利制作完成了。

相關推薦：

HTML5Plus移動開發入門學習

HTML5plus移動應用的開發實例分享

HTML5仿微信聊天界面和朋友圈代碼

以上就是分享一個HTML5Plus移動應用的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。