动态

详情 返回 返回

詳解主流的Hybrid App 技術框架與研發方案 - 动态 详情

移動操作系統在經歷了諸神混戰之後,BlackBerry OS、Symbian OS、Windows Phone等早期的移動操作系統逐漸因失去競爭力而退出。目前,市場上主要只剩下安卓和iOS兩大陣營,使得iOS和安卓工程師成為搶手資源。然而,由於兩者系統的差異,開發同一個應用需投入兩倍的工作量,不僅增加了人力成本,而且由於不同團隊的開發,細節實現和應用一致性也面臨問題。

因此,迫切需要一種能夠一次開發,可以在兩個平台上運行的技術方案。作為一種既能夠在原生應用程序環境中運行,也能夠在 Web 瀏覽器中運行的應用程序,Hybrid App 應需而生。今天給大家介紹5種主流的hybrid 款架給大家作為參考。

先簡單説説主流的hybrid app框架有以下幾個:

React Native:由Facebook開發,使用JavaScript和React來構建原生移動應用程序。它允許開發人員使用相同的代碼庫來開發iOS和Android應用,同時提供接近原生性能的體驗。

Flutter:由Google開發,使用Dart語言。Flutter使用自己的渲染引擎,可以創建高性能、美觀且具有自然動畫的跨平台應用程序。

FinClip:由國內技術團隊開發,主要提供小程序容器技術以及配套的小程序應用管理平台,APP嵌入該組件可獲得小程序運行和上架管理能力,也是目前為數不多可以商用的小程序容器,用來實現Hybrid+小程序的開發方案。

Ionic:基於Web技術(HTML、CSS和JavaScript),使用Angular框架。Ionic提供了一組UI組件和工具,使開發人員能夠構建跨平台移動應用程序。

Xamarin:由Microsoft推出,使用C#語言。Xamarin允許開發人員使用共享的C#代碼庫來開發iOS和Android應用,並且提供與原生應用相似的性能。

PhoneGap/Cordova:由Adobe贊助的Apache項目,使用HTML、CSS和JavaScript。PhoneGap是Cordova的商業版本,這兩個框架都使用Web技術來構建跨平台應用程序,並通過WebView將Web應用程序封裝為原生應用。

各種框架各有優缺點,適用的方案也是不同的。下面就分別介紹一下5種主流的Hybrid 方案:

原生 + webview 方案

這是最常見的 Hybrid 方案之一。應用的主要框架由原生代碼構建,同時在應用的某些部分內嵌入 WebView 組件,用於顯示 Web 頁面或加載 Web 應用。Web 頁面通過 WebView 運行,並可以與原生代碼進行通信。這樣,開發人員可以使用 Web 技術(如 HTML、CSS、JavaScript)來構建應用的一部分,同時利用原生代碼處理應用的核心功能和性能要求。

但webview也有其缺點,web應用的體驗無法達到原生應用的體驗。但其開發效率高,被很多app所使用,做一些非核心業務的頁面。

純webview方案

在這種方案中,應用幾乎完全由 Web 技術構建,沒有太多的原生代碼。整個應用基本上是一個嵌入在 WebView 中的 Web 應用。這種方案的優勢在於可以使用 Web 技術快速開發跨平台應用,但缺點是可能受限於 WebView 的性能和功能,無法完全發揮原生應用的優勢。

常見的框架比如最早的phonegap,以web開發為主,並通過原生插件來提供原生功能,像攝像頭、通訊錄、地理定位、存儲等功能。現在常用的有ionic框架,支持angular、react、vue框架進行開發。

原生+小程序方案

小程序方案應該是微信最早發佈的,並且大規模使用的。這個方案結合了原生應用和小程序(微信小程序、支付寶小程序等)。小程序是一種基於 Web 技術的輕量級應用,可以在特定的平台上運行。在原生應用中,可以嵌入小程序的界面,並通過通信橋接實現原生和小程序之間的交互。這使得開發人員可以充分利用小程序的開發速度和原生應用的功能和性能。

隨着微信小程序方案的逐漸成熟,目前國內大廠的app也都在應用這個方案:支付寶小程序、百度小程序、頭條小程序等等。但目前大廠的小程序容器都是自研的,並沒有開放給外部去使用,上面説的FinClip 是為數不多可以商用的容器。

web技術 轉換原生組件

在這種方案中,開發人員使用 Web 技術(如 React Native、NativeScript)來構建原生組件,這些組件可以在原生應用中使用。這樣,開發人員可以利用熟悉的 Web 技術構建界面和某些功能,然後將其轉換為原生組件,以實現更好的性能和體驗。

react native可以和原生應用進行混合開發,也可以只採用react native進行開發。現在很多的app也都會採用rn混合這種方案,只有少量的webview頁面。

Flutter 自繪引擎

react native也並不是完美的解決方案,由於其為使用js編寫ui界面,在渲染的時候進行將js轉換為原生的ui,所以進行復雜計算面,大數據量,或者動畫時,就會產生一定的性能問題,增加應用的耗電量或頁面卡頓等問題。

而flutter的出現顛覆了這一切,它並沒有採用js轉原生組件的方式,而是使用google的dart語言和自帶的skia渲染引擎來開發ui界面。這就相當於他開發一個瀏覽器,並且還規定了開發ui組件的語言(dart)和api,全部都是自己的,所以高性能成為了其最大的優勢,完全可以和原生開發體驗相差無幾。

flutter最開始時只支持Android和iOS兩個平台,現在不僅增加了web平台,桌面端Windows、macOS和Linux應用程序,還有智能設備、可穿戴設備和車載設備等嵌入式應用。頗有有一統天下的格局,這種產品恐怕也只有Google能夠做出來。

user avatar cyzf 头像 zaotalk 头像 freeman_tian 头像 jingdongkeji 头像 qingzhan 头像 dirackeeko 头像 aqiongbei 头像 chongdianqishi 头像 leexiaohui1997 头像 xiaoxxuejishu 头像 solvep 头像 dunizb 头像
点赞 165 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.