HTML5plus行動應用的開發實例分享
什麼是 HTML5plusDCloud 公司提供的,使用傳統 web 技術開發行動應用的解決方案。本文主要和大家分享HTML5plus行動應用程式的開發實例分享,希望能幫助大家。
增強版的手機瀏覽器引擎,讓HTML5達到原生水準!
產品口號,總是會有些誇張的成分,不要在意這些細節。
Tips
HTML5plus 名字太長,因而又稱 HTML5+,或簡稱 5+。
使用該引擎開發的行動應用,又稱為 5+App。
相關的 SDK,稱為 5+SDK。
使用方式
Runtime
即是使用 DCloud 公司的另一款產品 HBuilder,直接進行開發除錯。
SDK
將 5+SDK 整合到自己的原生應用程式中,就可以在應用程式中使用其擴充的 JS API。
區別
Runtime 方式可以直接使用 DCloud 提供的雲端打包,不需要本地建置打包環境。
Runtime 方式無需掌握原生開發的能力,合理使用擴充的 API 即可。
SDK 方式可以滿足更多的需求,但需要掌握原生開發的能力。
簡單地理解下
Runtime 方式,不需要開發者自己開發原生應用程式的基座部分,5+ 這邊幫開發者做好了,只需要提交應用資源雲端打包就行了。
SDK 方式則不同,這種情況是在原有的原生應用基座基礎上,擴展 5+SDK。因而,需要開發者自行建構原生開發的環境,進行部分原生開發的工作。
基本架構
依照官方的文件說明 Android平台第三方外掛程式開發指導,大體分為三層結構。這裡為了更方便理解,擴展成四個部分來說明。
Webview
可以理解為簡單的瀏覽器,HTML、CSS、JavaScript 都在這裡。
plus
這部分在Webview 中,在原有的瀏覽器環境基礎上,擴充可以呼叫原生功能的API,這些API 都在window.plus
這個對象裡面。
JS Bridge
負責連結 JavaScript 層與 Native 層。
接收 JavaScript 層傳過來的請求,通知 Native 層做出對應的回應。
接收 Native 層回應的結果,通知 JavaScript 層接收結果。
Native
即 Android 和 iOS,也是 HTML5plus 的核心關鍵部分。
一次呼叫執行的程序
以取得應用程式版本號為例
plus.runtime.version;
JS 層呼叫
plus.runtime.version
,Webview 向JS Bridge 發起請求。JS Bridge 接收請求,通知 Native 層讀取應用程式版本號資訊。
Native 層執行拿到結果,通知 JS Bridge 層對應結果。
JS Bridge 拿到 Native 層對應的結果,通知對應的 Webview 結果資訊。
JS 層取得到應用的版本資訊。
吐槽一下
個人認為,每個產品每家公司,都有其自身的設計理念以及經營策略。不同的用戶,總會有不同的需求和看法。
因此,做技術選型時一定要搞清楚自己的需求和被研究的產品資訊。在DCloud 的社群中,經常出現“怎麼沒有XXX API”,“為什麼不整合XXX SDK”,“不會原生開發,希望官方能夠擴展XXX API”等等類似的貼文。至於出現這類問題的具體原因,大家都有自己的理解,這裡不做討論。
做技術選型時,最好親自動手做下嘗試。不要期望產品供應方給你最佳答复,因為人家不會傻傻地把用戶往外推。
------華麗麗分割線------
下面,分享一下個人使用的經驗和心得,希望可以幫助其他開發者在技術選型時做個參考。
優點
學習成本低,只要掌握了基本的 web 開發能力,即可上手。
雲端打包,不必本地建置 Android 與 iOS 開發環境,進行打包處理。
一套程式碼,只要做少許的相容處理,即可編譯成 Android 和 iOS 兩個套件。
沒想到,要討論補充吧。
不足
plus.ModuleName.* 提供的API 有限,雖然有Native.js 這一產品,但是需要掌握一定的原生開發能力。
依賴手機本身的 Webview,因此在部分手機上效能並不理想。這一點,對於某些業務產品有一定的影響。
接著第1點,某些功能的實現,需要開發者自行整合 SDK 進行擴充。例如藍牙、應用後台常駐等。這一點,同樣需要開發者俱備原生開發的能力。
部分功能,由於相容性問題實現的並不完善。例如桌面圖示的角標等。當然,Android 的碎片化嚴重,有些不足可以理解。
文件內容,有些地方解釋地不夠清楚。另外,文檔的排版有點奇怪。
目前沒遇到其它坑了,也可能在下還不夠熟悉。
較合適範圍
綜合官方的案例展示,以及個人開發的經驗。總結下來,5+App 開發比較適合以下情況或產品:
新創公司,需要快速上線應用程式。
新聞資訊(36Kr)、電商(HiMall)、內容分享(楓橋居花卉)、外帶等大部分的 O2O 業務產品等等。
核心業務功能不依賴某些原生功能
#一部分企業應用,也可以根據特定需求情況而定。
不推薦情況
有些情況沒辦法一概而論,因而依照具體情況說明。
重度依賴某些原生功能,例如應用程式中需要實作地圖自訂的繪線、需要藍牙模組進行資料的通訊等等。
核心業務涉及即時通訊(IM),並且不希望使用第三方的 JS 版 SDK 的。
需要讀寫文件,例如錄製短影片、編輯圖片、編輯影片等。
某些較為「流氓」的功能,例如應用後台常駐、推送服務常駐等等。
控制應用程式的權限,例如禁止截圖之類的。這只能在原生層處理,而且 Android 的兼容你懂的。
上面許多情況都需要透過原生層的開發來解決,當然同時可以整合 5+SDK,相關的擴充 API 照用不誤。
同類產品
cordova
#apicloud
-
appcan
ionic
weex
#react native
補充:
- HBuilder 是一款 IDE,也是真機除錯時基座的名字。這兩個加起來,就是開發 5+App 的環境及工具。
- HTML5plus 的名字很多,DCloud 官網上寫的是 5+Runtime。負責擴充 JS API,實作 JS 呼叫原生功能。
- MUI 行動開發的 UI 框架,為了方便開發封裝了幾個涉及到 HTML5plus 的方法,經常被誤解。但它真的只是個 UI 框架,原生能力的呼叫和它沒關係。
如何使用微信開發者行動應用程式建立取得APP ID的詳細介紹(圖)#
以上是HTML5plus行動應用的開發實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

H5是指HTML5,是HTML的最新版本,H5是一個功能強大的標記語言,為開發者提供了更多的選擇和創造空間,它的出現推動了Web技術的發展,使得網頁的交互和效果更加出色,隨著H5技術的逐漸成熟和普及,相信它將在互聯網的世界中發揮越來越重要的作用。

在H5中使用position屬性可以透過CSS控制元素的定位方式:1、相對定位relative,語法為「style="position: relative;」;2、絕對定位absolute,語法為「style="position: absolute; 」;3、固定定位fixed,語法為「style="position: fixed;」等等。

效果圖描述基於vue.js,不依賴其他外掛程式或函式庫實作;基礎功能使用保持和element-ui一致,內部實作做了一些行動裝置差異的調整。目前建置平台使用uni-app官方腳手架構建,因為當下行動端大多情況就h6和微信小程式兩種,所以一套程式碼跑多端十分適合技術選型。實作思路核心api:使用provide和inject,對應和。在元件中,內部用一個變數(陣列)去將所有實例儲存起來,同時把要傳遞的資料透過provide暴露出去;元件則在內部用inject去接收父元件提供過來的數據,最後把自身的屬性和方法提交

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

"h5"和"HTML5"在大多數情況下是相同的,但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準,包含新標籤和API。 2."h5"通常是HTML5的簡稱,但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構,提高SEO。 2.ARIA屬性如aria-label增強可訪問性,輔助技術用戶可順利使用網頁。
