HTML5Plus移動(dòng)應(yīng)用如何使用

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

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

簡(jiǎn)單一句就是，用開發(fā) Web 的技術(shù)完成原生移動(dòng)應(yīng)用的開發(fā)。

5+App 與 移動(dòng) Web

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

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

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

• 5+App 打包后是 apk 及 ipa 后綴的包，也就是原生的移動(dòng)應(yīng)用。

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

準(zhǔn)備工作

開發(fā)工具

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

注冊(cè)賬號(hào)

下載并解壓 HBuilder 后，啟動(dòng) IDE。首次使用需要注冊(cè)一個(gè)賬號(hào)，方便之后管理應(yīng)用以及在社區(qū)活動(dòng)。

設(shè)備

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

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

第一個(gè) 5+App

新建應(yīng)用

• 啟動(dòng) HBuilder，并且登錄。

• 菜單 -> 文件 -> 新建 -> 移動(dòng) App

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

index.html

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

manifest.json

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

• 應(yīng)用信息

• 應(yīng)用名稱：就是你的應(yīng)用在手機(jī)桌面上顯示的名字。

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

• 版本號(hào)：應(yīng)用版本號(hào)

• 頁(yè)面入口：就是首頁(yè)是哪個(gè)頁(yè)面，可修改。

• 應(yīng)用描述：簡(jiǎn)單說明一下應(yīng)用的信息

• 圖標(biāo)配置

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

• 啟動(dòng)圖片

• splash 圖就是應(yīng)用啟動(dòng)的時(shí)候那張占位的圖片，QQ 是個(gè)企鵝，微信是那個(gè)月球。

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

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

• SDK 配置

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

• SDK 啟用需填寫的信息，去相應(yīng)的第三方開放平臺(tái)注冊(cè)即可。

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

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

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

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

• 代碼視圖

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

真機(jī)運(yùn)行

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

調(diào)試

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

• Android 真機(jī)運(yùn)行時(shí)，每次修改完文件并保存，手機(jī)端的基座會(huì)同步代碼。

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

調(diào)用 5+API

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

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

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

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

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

打包

• 確認(rèn) manifest.json 中的信息無(wú)誤

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

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

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

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

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

• 一切無(wú)誤之后，點(diǎn)擊“打包”，等待即可。

• 打包完成后，會(huì)自動(dòng)下載到相應(yīng)的目錄下。

安裝

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

看完上述內(nèi)容，你們對(duì)HTML5Plus移動(dòng)應(yīng)用如何使用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。