首页 > 其他分享 >几种常用到的 Hybrid App 技术框架

几种常用到的 Hybrid App 技术框架

时间:2023-08-01 18:13:16浏览次数:41  
标签:原生 Web 方案 程序 App Hybrid 几种 开发 应用

移动操作系统在经历了诸神混战之后,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 使用自己的渲染引擎,可以创建高性能、美观且具有自然动画的跨平台应用程序。

 

 

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 应用程序封装为原生应用。

 

FinClip:最后介绍由国内技术团队开发,主要提供小程序容器技术以及配套的小程序应用管理平台,APP 嵌入该组件可获得小程序运行和上架管理能力,也是目前为数不多可以商用的小程序容器,用来实现 Hybrid+小程序的开发方案。

 

各种框架各有优缺点,适用的方案也是不同的。下面就分别介绍一下 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 也都在应用这个方案:支付宝小程序、百度小程序、头条小程序等等。但目前大厂的小程序容器都是自研的,并没有开放给外部去使用。

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 能够做出来。

标签:原生,Web,方案,程序,App,Hybrid,几种,开发,应用
From: https://www.cnblogs.com/finbird/p/17598678.html

相关文章

  • 如何在Windows上将iOS应用上传到App Store
     ApplicationUploaderiOSApp上架工具是一款非常好用的针对iOS苹果应用程序软件开发的实用编程工具,它的主要作用是帮助用户进行快速的程序应用设计和程序应用调试,节省用户进行软件开发耗费的不必要时间!​编辑切换为居中添加图片注释,不超过140字(可选......
  • windows如何上架ios应用到app store
    windows如何上架ios应用到appstoreApplicationUploaderiOSApp上架工具是一款非常好用的针对iOS苹果应用程序软件开发的实用编程工具,它的主要作用是帮助用户进行快速的程序应用设计和程序应用调试,节省用户进行软件开发耗费的不必要时间!​编辑切换为居中......
  • 拼多多APP商品详情接口获取activity_id值(拼多多activity_id接口)
    拼多多APP商品详情接口获取activity_id值(拼多多activity_id接口)代码对接如下:1.公共参数名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等]cacheString否[......
  • 1688商品详情API接口-(item_get_app-获取1688app上原数据接口),1688APP商品详情接口
    一、1688商品详情API接口-(item_get_app-获取1688app上原数据接口)代码如下:1.公共参数:名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)secretString是调用密钥(点击获取key和secret)api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop......
  • 1688商品详情接口,1688详情API接口,1688APP详情API接口
    一、1688商品详情接口,1688详情API接口,1688APP详情API接口代码分享1.公共参数:名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)secretString是调用密钥(点击获取key和secret)api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等]ca......
  • 1688app商品详情接口(商品详情采集接口,H5商品详情采集接口,复制商品接口,商品采集上传接
    1688app商品详情接口(商品详情采集接口,H5商品详情采集接口,复制商品接口,商品采集上传接口)代码对接教程如下:1.公共参数名称类型必须描述(接口代码教程wx19970108018)keyString是调用key(必须以GET方式拼接在URL中,点击获取请求key和secret)secretString是调用密钥api_nameString是API接口......
  • Tmall商品详情接口(商品列表接口,商品销量接口,app详情接口)代码对接教程
    Tmall商品详情接口(商品列表接口,商品销量接口,app详情接口)代码对接教程如下:1.公共参数名称类型必须描述(接口代码教程wx19970108018)keyString是调用key(必须以GET方式拼接在URL中,点击获取请求key和secret)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_sear......
  • 电商平台APP商品详情源数据接口代码分享
    电商平台APP商品详情源数据接口代码分享如下:1.公共参数名称类型必须描述(接口代码教程wx19970108018)keyString是调用key(必须以GET方式拼接在URL中,点击获取请求key和secret)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_search_sho......
  • 如何开发一款受欢迎的早教软件app?
    现在大多的家长都希望自己的孩子优秀,希望孩子更早的接受教育以及为自己的孩子提供最好的教育资源,并期待能够在孩子的成长过程中起到积极的引导作用。因此,早教app受到家长们的追捧。那么,究竟如何才能开发出一款受欢迎的早教软件app呢?下面,广州名锐讯动带大家一起探讨一些关键要素。首......
  • 不断创新短视频APP源码,未来可期!
    2018年短视频平台的爆火席卷了大江南北,不少商家和互联网都卷入其中,研究发开自己的短视频APP,而短视频源码最早是基于Adobe/FlashMediaServer开发的一款CMS系统,当然目前已经开始逐步通过第三方云服务代替了FMS。首先在源码功能上,包含了录制拍摄、编辑、合成三个部分,其中还涉及到了......