首頁 >web前端 >H5教程 >分享一個HTML5Plus行動應用

分享一個HTML5Plus行動應用

小云云原創: 2018-02-10 14:18:003062瀏覽

什麼是HTML5Plus 行動應用程式HTML5 Plus行動App，簡稱5+App，是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App可以透過擴充的JS API任意呼叫手機的原生能力，實現與原生App同樣強大的功能和效能。

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

5+App 與行動 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。首次使用需要註冊帳號，方便之後管理應用程式以及在社區活動。

裝置

由於下沒有 iOS 裝置以及 Mac OS 的機器，因此這個系列的分享都是以 Windows 系統下開發 Android 應用程式為例。

一台電腦，一部手機。手機最好是 Android 4.4 以上的，不建議用模擬器。 USB 線也是必須的，當然 HBuilder 同樣支援 WiFi 偵錯。

第一個 5+App

新應用程式

#啟動 HBuilder，並且登入。
選單-> 檔案-> 新建-> 行動App
範本暫時不需要調整，輸入應用程式名稱“HelloWorld” ，點擊完成即可。

index.html

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

manifest.json

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 以上的裝置並且第一次需要翻牆。

呼叫5+API

簡單封裝擴充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 就順利製作完成了。