HTML5Plus移動應(yīng)用如何使用-創(chuàng)新互聯(lián)

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

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)善左免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

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

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

5+App 與移動 Web

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

5+App 是 C/S 的，Web 是 B/S 的。
5+App 是獨立的客戶端，應(yīng)用資源通常只能是靜態(tài)的文件。PHP、JSP 這些服務(wù)器模板，沒有解析器去處理。
5+App 打包后是 apk 及 ipa 后綴的包，也就是原生的移動應(yīng)用。
window.plus擴展的 API，依賴 5+Runtime 引擎。普通瀏覽器沒有集成這個引擎，Web 開發(fā)通常用不了這些 API。

準備工作開發(fā)工具

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

注冊賬號

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

設(shè)備

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

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

第一個 5+App新建應(yīng)用

啟動 HBuilder，并且登錄。
菜單 -> 文件 -> 新建 -> 移動 App
模板暫時不需要調(diào)整，輸入應(yīng)用名“HelloWorld”，點擊完成即可。

index.html

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

manifest.json

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

應(yīng)用信息

應(yīng)用名稱：就是你的應(yīng)用在手機桌面上顯示的名字。
appid：這個是 5+App 創(chuàng)建時分配的，不要修改。更不要和 iOS 的 AppID 或者其它第三方平臺上的 appid 混淆。
版本號：應(yīng)用版本號
頁面入口：就是首頁是哪個頁面，可修改。
應(yīng)用描述：簡單說明一下應(yīng)用的信息

圖標配置

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

啟動圖片

splash 圖就是應(yīng)用啟動的時候那張占位的圖片，QQ 是個企鵝，微信是那個月球。
啟動選項：通常用默認的就行，根據(jù)需要調(diào)整。
圖片設(shè)置：按照需要，制作相應(yīng)尺寸的 png 圖，選擇配置即可。

SDK 配置

如果用到了一些第三方的 SDK 的功能，就需要配置相應(yīng)的信息。
SDK 啟用需填寫的信息，去相應(yīng)的第三方開放平臺注冊即可。

模塊權(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ù)。
一切無誤之后，點擊“打包”，等待即可。
打包完成后，會自動下載到相應(yīng)的目錄下。

安裝

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

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

本文名稱：HTML5Plus移動應(yīng)用如何使用-創(chuàng)新互聯(lián)
本文鏈接：http://bm7419.com/article48/dihjhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、Google、定制開發(fā)、用戶體驗、電子商務(wù)

聲明：本網(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)

猜你還喜歡下面的內(nèi)容