今天就跟大家聊聊有關(guān)HTML5Plus移動應用如何使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供婁星網(wǎng)站建設(shè)、婁星做網(wǎng)站、婁星網(wǎng)站設(shè)計、婁星網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、婁星企業(yè)網(wǎng)站模板建站服務(wù)，十年婁星做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

 什么是 HTML5Plus 移動應用HTML5 Plus移動App，簡稱5+App，是一種基于HTML、JS、CSS編寫的運行于手機端的App，這種App可以通過擴展的JS API任意調(diào)用手機的原生能力，實現(xiàn)與原生App同樣強大的功能和性能。

簡單一句就是，用開發(fā) Web 的技術(shù)完成原生移動應用的開發(fā)。

5+App 與 移動 Web

雖然 5+App 與移動 Web 開發(fā)，采用的相關(guān)技術(shù)大體一致，但是兩者的區(qū)別還是很明顯的。

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

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

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

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

準備工作

開發(fā)工具

HBuilder 內(nèi)置了 5+App 的開發(fā)環(huán)境，因此需要先下載此 IDE。

注冊賬號

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

設(shè)備

由于在下沒有 iOS 設(shè)備以及 Mac OS 的機器，因此這個系列的分享都是以 Windows 系統(tǒng)下開發(fā) Android 應用為例。

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

第一個 5+App

新建應用

• 啟動 HBuilder，并且登錄。

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

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

index.html

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

manifest.json

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

• 應用信息

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

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

• 版本號：應用版本號

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

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

• 圖標配置

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

• 啟動圖片

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

• 啟動選項：通常用默認的就行，根據(jù)需要調(diào)整。

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

• SDK 配置

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

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

• 模塊權(quán)限配置

• 某些模塊的啟用需要配置下權(quán)限

• 頁面引用關(guān)系

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

• 代碼視圖

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

真機運行

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

調(diào)試

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

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

• Android 還是可以使用 Chrome RemoteDebugging 進行調(diào)試，但是需要是 Android 4.4 以上的設(shè)備并且首次需要翻墻。

調(diào)用 5+API

簡單封裝一下擴展 API 加載完成的事件回調(diào)

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

然后，讀取下當前設(shè)備連接的網(wǎng)絡(luò)類型并輸出到頁面上。

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

真機運行，可以看到頁面上的內(nèi)容“當前網(wǎng)絡(luò)類型為：3”，也就是 WiFi 網(wǎng)絡(luò)環(huán)境。

打包

• 確認 manifest.json 中的信息無誤

• logo 及 splash 圖不配置的話，會用默認的 HBuilder 相關(guān)圖片。

• 菜單 -> 發(fā)行 -> 云打包-打原生安裝包

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

• 包名要嚴格遵循 Android 包名的格式規(guī)范，不要亂寫。這里調(diào)整一下，改為 com.helo.html5plus。

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

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

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

安裝

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

看完上述內(nèi)容，你們對HTML5Plus移動應用如何使用有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站標題：HTML5Plus移動應用如何使用
新聞來源：http://www.rwnh.cn/article30/igjgpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、移動網(wǎng)站建設(shè)、小程序開發(fā)、虛擬主機、網(wǎng)站改版、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)