H5教程,給大家分享一個HTML5Plus移動應用
前言:什麼是 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 後綴的包,也就是原生的移動應用。
擴展的 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,按照提示做一張符合規格的圖,然後一鍵生成替換。
啟動圖片
SDK 配置
如果用到了一些第三方的 SDK 的功能,就需要配置相應的信息。
SDK 啟用需填寫的信息,去相應的第三方開放平台註冊即可。
模塊許可權配置
某些模塊的啟用需要配置下許可權
頁面引用關係
不是特別懂,看說明書吧。
代碼視圖
配置的源代碼部分,不是所有配置都提供了可視化編輯視圖。
真機運行
將手機連上電腦,HBuilder 會自動檢測到連接到電腦上的設備。菜單 -> 運行 -> 真機運行,選擇你的設備即可。首次使用會安裝一個調試基座 HBuilder,如果 HBuilder IDE 版本變化的話,真機運行會覆蓋舊版本的 HBuilder 基座。
調試
頁面的樣式,推薦使用電腦的 Chrome 瀏覽器手機模式進行調試。
Android 真機運行時,每次修改完文件並保存,手機端的基座會同步代碼。
Android 還是可以使用 Chrome RemoteDebugging 進行調試,但是需要是 Android 4.4 以上的設備並且首次需要翻牆。
調用 5+API
簡單封裝一下擴展 API 載入完成的事件回調
然後,讀取下當前設備連接的網路類型並輸出到頁面上。
真機運行,可以看到頁面上的內容「當前網路類型為:3」,也就是 WiFi 網路環境。
打包
確認 manifest.json 中的信息無誤
logo 及 splash 圖不配置的話,會用默認的 HBuilder 相關圖片。
菜單 -> 發行 -> 雲打包-打原生安裝包
勾選 Android,Android 的證書相對隨意一些,用 DCloud 提供的現成的或者自己生成的都一樣。
包名要嚴格遵循 Android 包名的格式規範,不要亂寫。這裡調整一下,改為 。
如果配置信息有錯誤,會有提示,必須修改正確才能繼續。
一切無誤之後,點擊「打包」,等待即可。
打包完成後,會自動下載到相應的目錄下。
安裝
將雲打包下載下來的 apk 安裝到手機上,啟動應用就可以查看當前網路狀態信息。那麼,我們的第一個 5+App 就順利製作完成了。
總結
分享一個HTML5Plus移動應用,如果大家有任何疑問請給我留言,小編會及時回復大家的。
TAG:程序猿的日常BUG |