详解主流的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实现热部署 在平常开发项目中,我们通常是修改完…

Mongodb SQL 到聚合映射快速参考

SQL 映射 聚合管道允许MongoDB 提供原生聚合功能,对应于 SQL 中许多常见的数据聚合操作。比如:GROUP BY、COUNT()、UNION ALL 测试数据 For MySQL rootlocalhost 14:40:40 [test]> select * from orders; -------------------------------------…

java基本类型和String类型的相互转化

文章目录 java基本类型和String类型的相互转化String 类型转基本类型byteshortintlongdoublefloat 基本类型转String类型方法1方法2 java基本类型和String类型的相互转化 String 类型转基本类型 byte String s "123"; byte b Byte.parseByte(s);short String s…

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

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

前端后端路径问题详解

加了项目名,访问所有页面都是 在 项目名下 出来的路径 不加项目名,访问所有页面都不用加项目名,然后前后端的加/的效果都一样,都是在根目录下没有项目名的路径!!! 后端 一、MVC 1.不管是转发…

小研究 - 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&…

【Docker】Docker应用部署之Docker容器安装MySQL

目录 一、搜索MySQL镜像 二、拉取MySQL镜像 三、创建容器 四、测试安装 一、搜索MySQL镜像 docker search mysql 二、拉取MySQL镜像 docker pull mysql:5.7 # 冒号后是要部署的版本号 三、创建容器 首先需要在宿主机创建数据卷的目录 mkdir /root/mysql # 创建目录 …

Linux进程管理

进程是操作系统中正在执行的一个命令或程序。在 Linux 系统当中&#xff0c;每当触发任何一个事件时&#xff0c;系统都会将它定义成为一个进程&#xff0c;并且给予这个进程一个ID&#xff0c;称为PID&#xff0c;同时根据触发进程用户的权限给予这个PID一组有效的权限设置。在…

【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…

【Coppeliasim C++】焊接机械臂仿真

项目思维导图 该项目一共三个demo&#xff1a; 机械臂末端走直线 2. 变位机转台转动 3.机械臂末端多点样条运动 笔记&#xff1a; 基于等级的蚁群系统在3D网格地图中搜索路径的方法: 基于等级的蚁群系统(Hierarchical Ant Colony System,HACS)是一种改进的蚁群优化算法。它在传…

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

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

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

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

分解质因子,将一个不小于2的整数分解质因数,例如,输入90,则输出:90=2*3*3*5

假设一个不小于2的整数n&#xff0c;对从2开始的自然数k&#xff0c;这个试探它是否是整数n的一个因子&#xff0c;如果是&#xff0c;则输出该因子&#xff0c;并将n/k的结果赋给n&#xff08;接下来只需要对n除以已经找到的因子之后的结果继续找因子&#xff09;。如果n的值不…

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

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

30天p小白学python-第三天(面向对象编程基础-进阶)

面向对象编程基础 活在当下的程序员应该都听过"面向对象编程"一词,也经常有人问能不能用一句话解释下什么是"面向对象编程",我们先来看看比较正式的说法。 "把一组数据结构和处理它们的方法组成对象(object),把相同行为的对象归纳为类(class)…

eventBus使用遇到的坑

**问题&#xff1a;**通过eventBus传递的参数&#xff0c;在子组件的methods中无法通过this.使用。 **思路&#xff1a;**考虑组件方法的执行顺序&#xff08;vue生命周期执行顺序&#xff09; **解决办法&#xff1a;**在传递参数的组件外 this.$nextTick this.$nextTick(() …