详解主流的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能够做出来。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/16039.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea集成jrebel实现热部署

文章目录 idea集成jrebel实现热部署下载jrebel 插件包下载jrebel mybatisplus extensition 插件包基础配置信息情况一其次情况三情况四情况五情况六情况七 验证生效与否 Jrebel热部署不生效的解决办法 idea集成jrebel实现热部署 在平常开发项目中,我们通常是修改完…

ChatGPT结合知识图谱构建医疗问答应用 (二) - 构建问答流程

一、ChatGPT结合知识图谱 上篇文章对医疗数据集进行了整理,并写入了知识图谱中,本篇文章将结合 ChatGPT 构建基于知识图谱的问答应用。 下面是上篇文章的地址: ChatGPT结合知识图谱构建医疗问答应用 (一) - 构建知识图谱 这里实现问答的流程…

小研究 - JVM GC 对 IMS HSS 延迟分析(二)

用户归属服务器(IMS HSS)是下一代通信网(NGN)核心网络 IP 多媒体子系统(IMS)中的主要用户数据库。IMS HSS 中存储用户的配置文件,可执行用户的身份验证和授权,并提供对呼叫控制服务器…

Segment anything(图片分割大模型)

目录 1.Segment anything 2.补充图像分割和目标检测的区别 1.Segment anything 定义:图像分割通用大模型 延深:可以预计视觉检测大模型,也快了。 进一步理解:传统图像分割对于下图处理时,识别房子的是识别房子的模型…

三数之和——力扣15

文章目录 题目描述法一 双指针排序 题目描述 法一 双指针排序 class Solution{ public:vector<vector<int>> threeSum(vector<int>& nums){int nnums.size();vector<vector<int>> ans;sort(nums.begin(), nums.end());for(int first0;first&…

【PHP】简记问题:使用strtotime(‘-1 month‘, time)获取上个月第一天时间戳出错

发生场景 在7月31号是查看统计上个月订单购买总金额&#xff0c;查询结果为0 $preMonthStart strtotime(date(Ym01, strtotime("-1 month"))); $curMonthStart strtotime(date(Ym01)); # 统计上月份实际订单金额 $sql "SELECT count(money) FROM orders WH…

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(17)-Fiddler如何充当第三者再识AutoResponder标签-下

1.简介 上一篇宏哥主要讲解的一些在电脑端的操作和应用&#xff0c;今天宏哥讲解和分享一下&#xff0c;在移动端的操作和应用。其实移动端和PC端都是一样的操作&#xff0c;按照宏哥前边抓取移动端包设置好&#xff0c;就可以开始实战了。 2.界面功能解析 根据下图图标注位…

Vue基本语法

1. 官网&#xff1a; Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org) 一、示例代码 如下代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible&q…

深度学习实战44-Keras框架下实现高中数学题目的智能分类功能应用

大家好,我是微学AI ,今天给大家介绍一下深度学习实战44-Keras框架实现高中数学题目的智能分类功能应用,该功能是基于人工智能技术的创新应用,通过对数学题目进行智能分类,提供个性化的学习辅助和教学支持。该功能的实现可以通过以下步骤:首先,采集大量的高中数学题目数据…

一百三十八、ClickHouse——使用clickhouse-backup备份ClickHouse库表

一、目标 使用clickhouse-backup在本地全库备份ClickHouse的数据库 二、前提 已经安装好clickhouse-backup 注意&#xff1a;由于之前同事已经按照好clickhouse-backup&#xff0c;所以我就没有安装 如有需要请参考其他人的博客安装一下&#xff0c;下面是我认为比较好的一…

基于 STM32+FPGA 的通用工业控制器设计(一)系统方案设计

本章首先介绍了现有 PLC 系统的概况&#xff0c;然后提出了本文设计的通用工业控制器的 整体方案架构&#xff0c;分析了硬件和软件上需要实现的功能&#xff0c;最后对各部分功能进行分析并提 出具体的实现方案。 2.1 PLC 系统简介 可编程逻辑控制器&#xff08; Progra…

【机器学习】机器学习中的“本体”概念

一、说明 在机器学习中&#xff0c;本体越来越多地用于提供基于相似性分析和场景知识的 ML 模型。 在传统的基于标签的定义中&#xff0c;对象往往是孤立的&#xff0c;可扩展性差&#xff0c;存在重复的可能性&#xff0c;对象之间的关系无法体现。在基于本体的定义中&#xf…

【深度学习】以图搜索- 2021sota repVgg来抽取向量 + facebook的faiss的做特征检索, 从环境搭建到运行案例从0到1

文章目录 前言安装小试牛刀用repVgg抽取向量构建Faiss索引进行相似性搜索本项目延伸其它项目拓展总结 前言 Faiss的全称是Facebook AI Similarity Search。 这是一个开源库&#xff0c;针对高维空间中的海量数据&#xff0c;提供了高效且可靠的检索方法。 暴力检索耗时巨大&a…

最全的3D动画软件介绍来了!良心总结9款3D动画制作必备软件

现在&#xff0c;市面上流行着的3D动画软件如此之多&#xff0c;以至于很难敲定到底哪一款更适合自己或自己的团队。本篇文章带来了一些热门的、被视为行业标准的3D动画软件的介绍&#xff0c;帮助您更好地做出选择。 不仅如此&#xff0c;您还能从文章中了解到在数字内容创建…

费舍尔线性分辩分析(Fisher‘s Linear Discriminant Analysis, FLDA)

费舍尔线性分辩分析(Fisher’s Linear Discriminant Analysis, FLDA) 目录 费舍尔线性分辩分析(Fishers Linear Discriminant Analysis, FLDA)1. 问题描述2. 二分类情况3. 多分类情况4. 代码实现4.1 二分类情况4.2 多分类情况 5. 参考资料 1. 问题描述 为解决两个或多个类别的…

PS - Photoshop 抠图与剪贴蒙版功能与 Stable Diffusion 重绘

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/131978632 Photoshop 的剪贴蒙版是一种将上层图层的内容限制在下层图层的形状范围内的方法&#xff0c;也就是说&#xff0c;上层图层只能在下层图…

32.选择器

选择器 html部分 <div class"toggle-container"><input type"checkbox" id"good" class"toggle"><label for"good" class"label"><div class"ball"></div></label&…

uni-app云打包(android)(自有证书、云端证书、公共测试证书)

一、进入云打包入口 发行->原生App-云打包 二、证书选择 1、使用自有证书 ①进入香蕉云编&#xff08;这里采用的证书从香蕉云编进行生成&#xff09; 香蕉云编-app打包上架工具类平台 ②进入页面选择“生成签名证书”->"立即创建证书" ③选择“安卓证书生…

数字人会成为文旅行业的新增量吗?写实数字人定制包含哪些技术?

近年来&#xff0c;各大文旅机构均在围绕数字人展开了文旅营销创作&#xff0c;凭借着写实数字人定制技术&#xff0c;将数字人的人设、功能以及才艺得到创新&#xff0c;并由此在文旅形态上展开了诸多尝试。 比如会唱山歌多才多艺的数字人刘三姐&#xff0c;使用多种语言推介…

windows环境下adb 下载和配置,连接手机。

ADB下载地址&#xff1a; https://adbdownload.com/ 选择下载windows系统的。 下载后解压&#xff0c;查看adb.exe所在的目录&#xff0c;如下 这里将路径复制下来&#xff1a;D:\ADB 配置到系统环境变量中。 然后再打开cmd&#xff0c;输入adb version查看版本。 出现…