百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

混合开发到底怎么个混法?(混合开发rn)

ccwgpt 2025-07-09 11:19 3 浏览 0 评论

引言

最近几年混合开发越来越火,从PhoneGap到Cordova到Ionic,再到ReactNative,到Flutter。同时在搜索引擎中诸如

Ionic VS ReactNative

RN和Weex+Vue哪个好

该学RN还是学Flutter

这样的问题也越来越多,那到底这些混合开发技术真正的差异是什么?今天我们从他们是怎么个混合法(技术原理)来说说。

一、混合开发流派

H5加壳派: 以Ionic和Uni-App为代表,基于WebView(Android下是WebView,iOS下是WKWebView)控件加载H5页面,同时通过框架预先实现的一些能力,实现对设备摄像头、文件系统等设备能力的调用。

JS Run原生派:以RN和Weex为代表,使用JS进行编写,在运行时映射成原生控件运行。

自成一派:以Flutter为代表,这货直接自己弄了个引擎和运行时,自带体系(UI组件和渲染器),除了设备能力外UI方面全权Handle。

二、H5加壳

这类混合开发是最早出现的,早在2011年7月PhoneGap就发布了1.0版本,初步实现了一套代码两个平台的目的。

这类App实际上就是H5加了个壳,典型的代表有IonicUni-app开发者通过使用Angular或者Vue等Web前端方式编写后运行在WebView中,由于WebView的许多限制,当这类App需要使用原生能力时就需要通过JsBridge来进行桥接,这个JsBridge就是框架提供的API和插件。

其运行机制简单示意图如下:

Web App运行机制示意

这类App通常性能较差,通常用于那些UI和业务都相对简单,并且对性能没有特别要求的App。虽然它性能较差但是确实快,只要你会前端你就能开发,所以在很多外包公司都有其一席之地,尤其是在2012年-2016年。


需要吐槽的是Ionic,升级是好事,咱能把版本兼容好好做做不?

三、JS Run原生派

这个流派以React Native和Weex为代表,RN是开山祖师。这类App在现在的手机上能应对觉大多数的业务和UI需求,性能也够,称得上是很不错的方案。

这类App使用JS编写代码,在编译和运行时候会直接把对应的UI映射成原生UI,所以最终运行在设备上的还是原生的页面。这要求程序员对对应平台的原生开发有一定基础,尤其是需要自己写自定义控件的时候。

其整个机制较为复杂,不展开讲。

四、自成一派

Flutter自成一派,实现了一个自绘引擎,使用Flutter自己的布局和绘制系统。Flutter在框架设计上借鉴了非常多的RN的思想。某种程度上可以理解为RN的升级版。

Flutter目前已经发布了正式版,且版本更新很快,但是目前github上的Issues还是非常感人


Flutter架构图如下:


最后:其实可以看出,随着时间的推移混合开发的方案越来越多,同时性能也越来越好,这本就是这个行业的趋势。也是你薪水上升的依据。

相关推荐

如何高效实现API接口的自动化测试?

实现API接口的自动化测试是一个多步骤的过程,涉及需求分析、测试用例设计、环境搭建、脚本编写、执行测试、结果分析和持续集成等多个环节。选择合适的工具和框架也是成功的关键。嘿,咱来聊聊实现API接口自动...

总结100+前端优质库,让你成为前端百事通

1年多时间,陆陆续续整理了一些常用且实用的开源项目,方便大家更高效地学习和工作.js相关库js常用工具类「lodash」一个一致性、模块化、高性能的JavaScript实用工具库。「xij...

混合开发到底怎么个混法?(混合开发rn)

引言最近几年混合开发越来越火,从PhoneGap到Cordova到Ionic,再到ReactNative,到Flutter。同时在搜索引擎中诸如IonicVSReactNativeRN和Weex+...

无所不能,将 Vue 渲染到嵌入式液晶屏

该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言之前看了雪碧大佬的将React渲染到嵌入式液晶屏觉得很有意思,R...

【直接收藏】前端 VUE 高阶面试题(一)

说说vue动态权限绑定渲染列表(权限列表渲染)首先请求服务器,获取当前用户的权限数据,比如请求this.$http.get("rights/list");获取到权限数据之后,在列表中...

Vue采用虚拟DOM的目的是什么?(vue2 虚拟dom)

虚拟DOM更新其实效率并不像大家想象中的那么高,而且React官方也从来没说过虚拟DOM效率有多高,相反React虚拟DOM的实现也不是所有虚拟DOM产品中最好的。但是通过虚拟D...

什么是 JavaScript?(什么是党的旗帜)

本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!作者|慕课网精英讲师然冬JavaScript(JS)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。(MDN...

Weex在内涵发现页中的工程实践(weex唯客交易所官网)

React-Native和Weex是目前最为火热的两个客户端跨平台解决方案。从去年2016年9月份开始,IES在抖音产品中应用了ReactNative,中途遇到了很多的问题,尤其是长列表的性能问题一...

新恒汇:公司主要业务包括智能卡业务、蚀刻引线框架业务以及物联网eSIM芯片封测业务

证券日报网讯新恒汇7月3日在互动平台回答投资者提问时表示,公司主要业务包括智能卡业务、蚀刻引线框架业务以及物联网eSIM芯片封测业务。具体请关注公司公告和公开披露信息。(编辑王雪儿)...

“移”科普——什么是物联网?(移动设备物联网物联网应用实例)

物联网(InternetofThings,简称IoT)是指通过互联网将物理世界与数字世界相连接,实现物与物之间的智能互联的网络。它是一种新型的信息通信技术,通过传感器、嵌入式系统、网络技术等手段,...

如何自己搭建一个物联网平台?(自建物联网云平台)

自己搭建一个物联网(IoT)平台需要涉及多个关键步骤,包括硬件设备的选择、软件开发、网络通信、安全性设计以及数据管理。以下是搭建物联网平台的基本流程:1.确定物联网平台架构一个完整的物联网平台通常包...

物联网数据接入篇-应用层 Modbus(5)

前四篇文章讲述的是TCP/IP模型中的网络接口层、网络层、传输层、应用层一,这里到了第四层应用层二。由于协议比较多,就分开篇来介绍。这篇讲Modbus协议,后面再讲MQTT协议、CoAP协议、...

乐鑫ESP32-C5全面量产:行业首款双频Wi-Fi 6的RISC-V SoC

IT之家5月2日消息,乐鑫信息科技4月30日宣布,ESP32-C5现已全面进入量产。ESP32-C5宣称是行业首款2.4&5GHz双频Wi-Fi6的RISC-...

Vue Shop Admin:强大而易用的后台管理系统模板

VueShopAdmin是一个基于Vue.js框架的后台管理系统模板。它具有简洁、易用和美观的特点,非常适合开发人员用于快速构建各种类型的管理系统。这个模板使用了最新的技术,如Vue3、V...

基于Prometheus的自动化巡检(prometheus自动发现详解)

!!大家好,我是乔克,一个爱折腾的运维工程,一个睡觉都被自己丑醒的云原生爱好者。作者:乔克公众号:运维开发故事道路千万条,安全第一条。操作不规范,运维两行泪。前言目前,大部分公司都采用Promet...

取消回复欢迎 发表评论: