几种常用到的 Hybrid App 框架方案

news2024/9/24 21:20:40

移动操作系统在经历了诸神混战之后,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能够做出来。

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

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

相关文章

学了python的心得体会200字,学python心得体会1000字

大家好,本文将围绕学了python的心得体会200字展开说明,学python心得体会1000字是一个很多人都想弄明白的事情,想搞清楚学python心得体会800字需要先了解以下几个事情。 一、个人学期总结 本学期在missdu的带领下,进行了python的学…

Jenkins通过OpenSSH发布WinServer2016

上一篇文章> Jenkins集成SonarQube代码质量检测 一、实验环境 jenkins环境 jenkins入门与安装 容器为docker 主机IP系统版本jenkins10.10.10.10rhel7.5 二、OpenSSH安装 1、下载 官网地址:https://learn.microsoft.com/zh-cn/windows-server/administration/op…

Spring Boot的创建和运行

目录 1.Spring Boot的优点 2.Spring Boot项目创建 2.1使用Idea创建 2.2网页版创建 3.项目目录介绍和运行 3.1运行项目 3.2输出 4.注意事项 4.1正确路径 4.2小结:约定大于配置 1.Spring Boot的优点 ●快速集成框架,Spring Boot 提供了启动添…

解决:Uncaught (in promise) SyntaxError: “[object Object]“ is not valid JSON 问题的过程

1、问题描述: 其一、报错为: Uncaught (in promise) SyntaxError: "[object Object]" is not valid JSON 中文为: 未捕获(承诺中)语法错误:“[object Object]”不是有效的 JSON 其二、问题描…

阿丹千问vue页面升级-使用Markdown形式展示回答--markdown-it库

阿丹: 在之前开发的阿丹千问 发现回复的文章格式使用 Markdown的格式。所以想使用Markdown的方式来给页面来个升级。 下面就是升级以及开发的过程。 升级思路 使用vue中的markdown-it库 在Vue页面中使用Markdown文档 安装markdown-it: 在Vue项目中…

《HeadFirst设计模式(第二版)》第一章源码

代码文件目录结构: FlyBehavior.java package Chapter1_StrategyPattern.ch1_3_behavior.behaviors.fly;public interface FlyBehavior {void fly(); } FlyNoWay.java package Chapter1_StrategyPattern.ch1_3_behavior.behaviors.fly;public class FlyNoWay imp…

使用Jetpack Compose构建时间轴组件的逐步指南

使用Jetpack Compose构建时间轴组件的逐步指南 最近,我们开发一个时间轴组件,显示用户与客户之间的对话。每个对话节点应具有自己的颜色,取决于消息的状态,并且连接消息的线条形成颜色之间的渐变过渡。 我们慷慨地估计了未来的工…

C++学习day--18 空指针和函数指针、引用

1、void 类型指针 void > 空类型 void* > 空类型指针, 只存储地址的值,丢失类型,无法访问,要访问其值,我们必须对这个指 针做出正确的类型转换,然后再间接引用指针 。 所有其它类型的指针都可以隐…

基于C语言 --- 自己写一个扫雷小游戏

C语言程序设计笔记---020 初阶扫雷小游戏(开源)1、arr_main2.c程序大纲2、arr_game2.h3、arr_game2.c3.1、 自定义初化函数 InitBoard( ) 和 自定义显示函数 DisPlayBoard( )3.2、 自定义布置雷函数 SetMine( )3.4、 自定义排查雷函数 FindMine( ) 4、结束语 初阶扫雷小游戏(开…

Redis安装部署(基于windows平台)

redis简介 键值对存储数据库是NoSQL数据库的一种类型,也是最简单的NoSQL数据库。顾名思义,键值对存储数据库中的数据是以键值对的形式来存储的。常见的键值对存储数据库有Redis、Tokyo Cabinet/Tyrant、Voldemort以及Oracle BDB数据库。 Remote Diction…

1.4 信息安全管理

数据参考:CISP官方 目录 信息安全管理基础信息安全管理体系信息安全管理实践 一、信息安全管理基础 1、信息 信息是一种资产,与其他重要的业务资产一样,对组织业务必不可少,因此需要得到适当的保护。 2、信息的价值 企业…

数据结构和算法入门(时间/空间复杂度介绍--java版)

数据结构和算法入门(时间/空间复杂度介绍–java版) write in front 作者: 向大佬学习 专栏: 数据结构(java版) 作者简介:大二学生 希望能学习其同学和大佬的经验! 本篇博客简介&…

定时任务调度 xxl-job

框架地址 https://gitee.com/jiaruiguo/xxl-job.git项目说明 调度管理系统 xxl-job-admin 定时任务实现系统 普通系统: xxl-job-executor-sample-frameless 微服务系统:xxl-job-executor-sample-springboot 配置说明 工程名:xxl-job-execut…

中国农村程序员学习此【JavaScript教程】购买大平层,开上帕拉梅拉,迎娶白富美出任CEO走上人生巅峰

注:最后有面试挑战,看看自己掌握了吗 文章目录 在 Switch 语句添加多个相同选项从函数返回布尔值--聪明方法undefined创建 JavaScript 对象通过点号表示法访问对象属性使用方括号表示法访问对象属性通过变量访问对象属性给 JavaScript 对象添加新属性删除…

AD21 PCB设计的高级应用(八)Draftsman的应用

(八)Draftsman的应用 1.创建Draftsman文档2.Draftsman页面选项设置3.放置绘图数据3.1 装配图3.2 板制造图3.3 钻孔图和钻孔列表3.4 图层堆栈图例3.5 BOM3.6 标注、注释、测量尺寸 4.文档输出4.1 打印或者导出为PDF4.2 添加到Output job Draftsman 是为电…

windows基础命令

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一.目录和文件的操作 1.cd 命令 切换到d盘 2.目录分为相对路径和绝对路径 3. dir命令 用于显示目录和文件列表 4. md 或 mkdir 创建目录 5. rd 用于删…

【编程语言 · C语言 · 共用体】

【编程语言 C语言 共用体】https://mp.weixin.qq.com/s?__bizMzg4NTE5MDAzOA&mid2247491502&idx1&snd531f724641b18619225de4bbcd02998&chksmcfade357f8da6a41f514ba72d817cc029f8f2a89d3753bfe5c547801abb3d2e080554e67d677&payreadticketHJqAIlk_6GWs…

Uncaught SyntaxError: ‘‘ string literal contains an unescaped line break

今天在修改前端页面的时候,页面报错了,提示了这个信息 Uncaught SyntaxError: string literal contains an unescaped line break 问题指向这行代码,这就是通过JS渲染一个easyui的搜索框,仔细确认之后,发现没有任何问…

Go学习第一天

闲聊两句 从事java后端开发8年多,期间也曾零星看过Go语言、Python、Erlang等等,但都未曾认真学习过,恰好公司最近项目需要,之前用Go开发的项目因为同事离职,暂未人来接手,所以老大就找到我和另外一个同事&…

算法自学__背包动态规划

例1 P5020 [NOIP2018 提高组] 货币系统 题目描述 在网友的国度中共有 n n n 种不同面额的货币,第 i i i 种货币的面额为 a [ i ] a[i] a[i],你可以假设每一种货币都有无穷多张。为了方便,我们把货币种数为 n n n、面额数组为 a [ 1.. …