精华内容
下载资源
问答
  • flutter,reactNative,uniApp分析对比篇

    千次阅读 2021-03-10 15:07:24
    跨平台flutter,reactNative,uniApp 分析对比 先带大家看几张图,看下当下跨平台的实际使用范围 具体使用的范围这里小编只带大家看看京东上面rn的使用部分,请看下图: 这块是京东首页部分->京东超市模块与充值缴费...

    跨平台flutter,reactNative,uniApp 分析对比

    先带大家看几张图,看下当下跨平台的实际使用范围
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    具体使用的范围这里小编只带大家看看京东上面rn的使用部分,请看下图:
    在这里插入图片描述
    在这里插入图片描述
    这块是京东首页部分->京东超市模块与充值缴费模块,里边还有好多reactNative的使用部分,我这里 手机的开发者模式里的布局边界打开了,为了让大家看的清楚.
    android开发应该都知道这个布局边界,他是android的布局查看,粉红色的代表margin部分,蓝色框代表view的边界。

    react-native:

    它是facebook研发的,专注于跨平台App,官方推的是做移动App,不过现在到0.63版本,很多的第三方编写跨平台控件,也勉强可以生成移动网页端,但并不大友好,因为它主要推的是跨平台客户端.

    flutter:

    Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台,Flutter是完全免费、开源的。它也是构建未来的 Google Fuchsia 应用的主要方式。

    uniApp

    uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。

    flutter vs reactNative

    结果:
    flutter win!
    分析:

    flutter根据google推出的flutter sdk进行编写,完全颠覆了android的开发理念,须知道,android
    flutter都是google的, android开发使用的android sdk,flutter却不然,自制了一套自己的sdk,直接使用GPU渲染机制,在用户手机上 非常直接的 canvas draw view,其手段已经非常nx。

    reactNative 的bridge(桥接)技术也是很厉害的!他通过了android 与 js
    之间构成了bridge,中间经过了编译,最终进行了android控件转换,这点有些像javac编译class那一块了,最终绘制在用户手机上的是原生控件。其中性能问题并不算太大,因为得到的是原生页面,所以比较受欢迎。
    相对比下来 rn中间那层转换编译 对于 flutter来说是没有的,相对来说
    flutter是最直接的,但这里我也要指出,对于目前用户手机性能来说,现在android已经到11了,中间那部分转换损耗的性能,用户基本是感知不到的.

    那flutter vs android呢?
    Android win!

    这里不做重点解释,Android结尾给大家说一下。

    uniApp

    当前这个框架采用vue,采用云打包的方式生成apk发布使用.
    这个框架我并不看好,开发者可以打开布局边界查看下布局,其中完全使用网页的形式呈现给用户,基本跟android不怎么挂钩,即便挂钩,官方也已经作出了api供用户使用.
    虽然说完全使用网页的形式制作,但性能方面不至于太差劲,因为官方做出了很多网页的优化,具体性能暂时劣势于flutter,reactNative。

    当然,uniapp更适用
    于没有原生经验的前端开发,也适用小型企业,毕竟,支持了那么多端的,小程序,android,ios,网页,都是一次编写,随处可用,但我这里不认为支持的多,就代表好.

    架构优势劣势
    flutter在终端绘制性能较好,支持跨平台,完美通信原生端,可自由在原生端编写代码需要学习dart,android,ios,热更新默认不支持,使用第三方支持了也会损耗性能,编写过程中书写代码如果不会封装,很容易造成嵌套地狱,社区并不是非常活跃,还是有挺多的issue需要解决,第三方包并不会太多需要持续观察
    reactNative终端绘制采用android绘制,性能偏好,架构设计完全处于还原android原生理念,支持热更新,完美通信原生端,与原生端直接挂钩,息息相关,可自由书写原生代码,比较灵活需要桥接过程中的损耗,需要学习android,ios,react,虽然灵活,但维护成本却并不小
    uniAppvue书写比较简单上手,比起原生,rn,flutter开发速度都是超级快速简单,学习成本较低,支持平台较多,一次编写,处处可运行的理念性能问题存在瓶颈,原生通信受限制,需要根据官方提供间接通信

    Android

    说了这么多,这又是flutter,又是rn,又是uniApp的,这android要凉了?

    我并不如此认为,须知晓 Android>flutter>reactNative>weex>uniApp, 原生开发性能永远是最直接最高效,一个完整的应用,永远android是首选,喜欢玩app的码友们可以打开手机开发者选项,打开布局边界,只要存在布局边界的 都是原生开发,当然rn也有布局边界(所以他也属于原生开发,但有个小小的区别,前面说了android开发的view 的margin是粉红色的边距,因为reactNative底层做跨端的时候,margin边距采用了css的margin,故reactNative开发的应用margin是看不到,不属于原生margin,所以有点区别,能区分出android和rn的).
    你会惊奇的发现,手机上的所有架构全部是android开发的,开头贴图部分提到 好多主流app使用到了flutter,rn,但都是嵌套模块使用,并不会整体架构用fluuter或者Rn ,故 android开发仍然很🐂,市场并不会小。

    HarmonyOS

    这个当下只有手表开发 和 tv开发 暂时没有移动开发, 华为吹的那么牛,也就是吹吹,并不看好。拭目以待!

    跨平台如何抉择:

    1. 特别小的公司,只讲究成本,一套即能用:uniApp
    2. 性能有要求,功能较复杂,可能涉及较多跟原生挂钩的:flutter||reactNative

    结论:

    会原生,会跨端技术,须知,混合开发是王道,你手机上每一个app都是混合开发,纯android架构开发几乎没有,所以android需要学,跨平台跨端技术需要学,鸿蒙虽说不怎么看好,亦需要学!学吧,年轻人

    学无止境!

    展开全文
  • Flutter、ReactNativeuniapp对比

    千次阅读 2020-12-20 14:22:57
    说到跨端开发,那么选择空间就是Flutter、RN、uniapp这几个了。 flutter最近比较热闹,毕竟是谷歌出品。但我们不是炒作热点的媒体,也不是忽悠你交学费的培训机构,我们作为实际的跨平台开发者,冷静的分析下这个...

    *************************************优雅的分割线 **********************************

    分享一波:程序员赚外快-必看的巅峰干货

    如果以上内容对你觉得有用,并想获取更多的赚钱方式和免费的技术教程

    请关注微信公众号:HB荷包
    在这里插入图片描述
    一个能让你学习技术和赚钱方法的公众号,持续更新
    *************************************优雅的分割线 **********************************
    SimpleExecutor
    前言

    最近对App开发比较感兴趣,因原生学习起来成本可能较大,就把目光转向了大前端的跨端开发技术。说到跨端开发,那么选择空间就是Flutter、RN、uniapp这几个了。

    flutter最近比较热闹,毕竟是谷歌出品。但我们不是炒作热点的媒体,也不是忽悠你交学费的培训机构,我们作为实际的跨平台开发者,冷静的分析下这个东东。

    flutter是Google为Fuchsia操作系统设计的应用开发方式。

    Fuchsia OS要兼容廉价物联网设备,要求对硬件的消耗降低,并且为了避免与oracle的java打官司,Fuchsia 使用了dart语言+flutter界面库的方式。

    从设计上来看,这套方案的性能确实够高。dart虽然属于大前端范畴,但dart是和java一样的强类型语言,这让dart虚拟机可以做很多优化,性能方面超出了js。

    dart曾经与typescript竞争,谁才是更好的js?但不幸输给了typescript,chrome也放弃了内置dart虚拟机的计划。

    不过dart团队没有解散,几年后,他们借助flutter,再次出现在公众面前。
    性能分析和写法的对比

    flutter作为界面库(注意它只是界面库,dart语言是另一个项目),它唯一要干的事情就是渲染界面。不像HTML5,flutter界面库连视频、定位等都没有,就是一个纯排版引擎,绘制文字、按钮、图片等常用界面控件。

    这个排版引擎的特点是简单、高性能。

    在3大主流渲染引擎里,webview、react native/weex、flutter,复杂度依次降低,渲染性能依次上升。(uni-app是双渲染引擎,webview和weex都内置了,随便开发者使用切换)

    所以我们要清楚,提升性能是有代价的,你究竟想要灵活丰富的css3,还是想要固定flex模式排版,抑或是最简单但高性能的flutter排版?开发便利性和运行性能不可兼得。

    同时我们要明白,性能的差别,并不是因为Google的chrome团队、Android团队的技术比同公司的flutter团队差。而是flutter提供的布局写法是被限制过的,解析快,所以渲染快。

    但通过这种方式提升性能的代价,就是布局复杂的界面时,flutter的代码嵌套的让人崩溃。

    我们先举个例子,同样的界面,用HTML和flutter如何实现:

    smaple text

    .greybox {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0; /* grey 300 /
    width: 320px;
    height: 240px;
    font: 18px
    }
    .redbox {
    background-color: #ef5350; /
    red 400 */
    padding: 16px;
    color: #ffffff
    }

    var container = new Container( // grey box
    child: new Center(
    child: new Container( // red box
    child: new Text(
    “smaple text”,
    style: new TextStyle(
    color: Colors.white,
    fontSize: 18.0,
    ),
    ),
    decoration: new BoxDecoration(
    color: Colors.red[400],
    ),
    padding: new EdgeInsets.all(16.0),
    ),
    ),
    width: 320.0,
    height: 240.0,
    color: Colors.grey[300],
    );

    可以看出,从代码的写法来说,flutter没有tag和样式的说法,更没有选择器,从头到尾只有dart语言,它的界面控件是用dart代码new出来的,每个控件的样式,是在new的时候设置的json参数。

    如果我们要嵌套布局,就要不停的在dart里写child,同时在dart里给child们设样式参数。上面的代码,只是嵌套了1层,实际开发中,dom要嵌套好多层,想象那样的代码。。。所以大家都诟病dart是“嵌套地狱”。

    或者,你可以这么理解,这是一个只有js,没有html和css的浏览器。你需要用js createElement来创建元素,用js的style方法给每个element设style,反正就是不能写html和css代码。前端都已经发展到各种mvc等视图逻辑分离的架构了,也有了vue组件这种组件化模式方便用各种轮子快速完成界面。你是否能适应dart这种低效的界面开发模式?从开发模式来讲,这确实是一种倒退。

    浏览器的html提供了tag和样式分离的写法,还有各种各样的选择器,但其实这也是有代价的。它导致webview初始化时要同时先启动webkit排版引擎来解析这些编写随性的html、css,同时还要启动一个js引擎比如v8或jscore来解析里面的js。

    而dart就很简单,只启动一个dart引擎,解析严格的dart语法,它不会去操心有些标签未闭合要如何容错,不会判断宽度320后面是px还是rem或者是动态计算百分比。

    对比这2个引擎初始化时要干的事,差别简直太大了。

    所以从解析效率上,flutter肯定比webview要高。但从编码灵活性上,flutter写的代码,嗯,难看而低效!

    flutter使用的也是flex布局思想,这是一个强嵌套布局模型,比web常规排版引擎的嵌套更多。当界面复杂时,flutter的代码要嵌套几十层,每层的元素的json样式都和元素一起混写在dart代码里,让人崩溃。

    有人提出是否可以通过一种预编译的dsl来简化写法,让flutter的开发不这么痛苦。

    但这个难度太大了,从严格转换为松散是简单的,从松散转换为严格几乎是不可能的。

    什么意思呢?比如flutter代码转换web代码,是很简单的,flutter已经自带了这个功能。但是想反过来,那可难了。

    类似的还有,把typescript转为js是容易的,反之,不是绝对不可行,但会复杂到你宁愿去重写一套typescript代码。

    flutter的性能高,除了简单严格,还有一个特点,就是逻辑层与视图层统一,运行在同一套dart虚拟机下。

    我们知道rn和weex,也是原生渲染的,它们的性能高于webview。但同为原生渲染的,怎么会慢于flutter呢?其实不是原生渲染慢,而是js和原生通信慢。

    rn和weex都采用了独立的js引擎(iOS是jscore,Android是v8,最新版rn开始在Android上搞自己的js引擎),从js与dart的比较上,性能稍逊一筹。但这不是主要问题,主要问题是,rn、weex的js引擎和原生渲染层是两个运行环境。

    当js引擎联网获取到数据后,通知原生视图层更新界面时,有一个跨环境的通信折损。同样,当用户在屏幕上操作原生视图层时,要给js引擎发送通知,也会产生这个通信折损。

    不过这种性能差别,在大多数场景中,用户是感受不到的。比较影响的场景,是跟手式的js响应操作绘制帧动画。

    这方面,weex有个值得称赞的技术是BindingX,它可以预定义规则,让用户界面在原生层交互时通过预定义规则直接响应,而无需传递给js层。在需要短时间内来回通信的场景时,可以使用BindingX这类解决方案。它的性能和灵活性比rn更强了一些。

    说回来flutter,它只有一个dart引擎,没有来回通信产生的性能问题。不过任何事情都是有利有弊的,flutter在普通的界面绘制上效率虽然高,但一旦涉及原生的界面,反而会遇到更多问题。

    前面已经说过,flutter只是一个基础排版引擎,缺少很多能力,当我们需要在flutter界面上内嵌一个原生的视频播放扩展控件时(flutter没有视频播放能力),或者原生的高德地图sdk,那么在拖动视频进度时、拖动地图时,flutter一样会产生原生和dart之间的通信,造成性能损耗。

    事实上,由于flutter是在一个类canvas环境绘制的,想把一个原生控件嵌入flutter的布局里某些元素之间去排版,还不是一件容易做到的事情,坑很多。

    每个人都想要一个像css3那样灵活写法的布局引擎,他们给react native和weex提需求,给flutter提需求。殊不知,让这些产品团队实现了css3时,他们的性能优势已经不再了,他们相当于又实现了一遍webview。这种无意义的需求,他们是不会受理了。

    性能好,有个度,客观地讲,rn/weex调用原生渲染的性能,和flutter的渲染性能,在用户体验上并没有明显区别,甚至在很多场景下,和webview渲染的小程序也没有明显区别。

    也简单说说webview渲染小程序,为什么性能高,核心是预载。点击一个新页面时,webview是提前创建好的,不会走复杂的webkit、v8的初始化流程,连开发者的js代码,也是预载好的。所以点击新页面时,它的渲染速度和原生应用没什么差别。当然也有个坏处,就是启动慢。微信里启动小程序速度看着还行,其实是微信在启动小程序之前,就已经提前初始化了小程序运行环境。
    即便是排版引擎,ui库好用吗?

    不管是rn还是flutter,有一个设计,很不中国化。它们在iOS和Android平台上,使用2套ui库。

    比如flutter,在iOS上写一个button,要用CupertinoButton,是iOS风格的控件,在Android上则要用RaisedButton,是Material风格的控件。

    rn也是如此,它的官方说法是:learn once,write anywhere。它都不敢说:write once,run anywhere。因为它确实要求开发者写2套代码。

    中国的开发者可没有这种习惯,中国的每个开发者,为了避免用户换手机后不会用自己的app,都会使用中性的设计。

    就连微信Android版,底部的tab也是仿iOS而不是Material风格(Material风格是把底tab放在顶部的,并且左右滑动,微信曾经有这样一个临时版本,因为被用户吐槽,很快就下掉了)。

    这种中外差异怎么造成的?

    国外Android手机,其手机主界面就是强烈的Material风格。用户在Android主界面习惯的风格和使用方式,如果启动一个App后不是这样,会导致用户不会用了。

    Google也一再给Android开发者强调,App必须使用Material风格。这其实也是一个防止用户切换脱离Android的策略设计。

    所以国外开发者的App,Android上都会遵循Material风格,当然,这种Material风格的App是上不了Apple的Appstore的。

    这就导致他们默认就是要写2套ui的,所以rn和flutter都是iOS、Android各自1套ui控件。

    但在中国,我们的国产Android Rom,根本不是Material风格,很多rom以仿iOS体验为卖点。

    所以中国的App,全都是贴近iOS的中性风格,中国的用户换了手机,不管是手机os本身,还是App的使用,都不会造成切换障碍。

    rn和flutter这种“跨平台”排版引擎,其跨平台性,对于中国开发者而言,又打了折扣。

    其实类似小程序那样的ui风格,是能够良好的跨iOS和Android的体验的,不管用什么手机,打开小程序都不会觉得有问题。

    uni-app默认也是这种通用ui风格。uni-app的开发者只需要写一套界面ui,就可以适应不同手机的用户,真正的 write once,run anywhere。
    动态性

    webview、rn/weex,都有一个特点,可以远程动态载入js代码,可以更新本地的js代码。前端开发者认为动态性是天经地义的,但其实flutter并不支持。

    flutter是有编译优化概念的,如果它提供动态性支持,会影响它的性能。

    业内有些开发者,改造了flutter,用一个独立的v8/jscore来加载动态js代码,去操作flutter布局引擎的渲染。好像还有些人在追捧这样的方案,简直是闲得蛋疼。

    flutter本来没有跨环境通信的问题,结果又弄了一个js引擎进来搞出了通信问题,造成性能下降,还把包体积增加了很大,还不如直接用rn/weex。

    除了flutter,rn/weex/uni-app都可以动态热更新。
    跨平台排版引擎和跨平台应用开发引擎的区别

    有些人说他们的App用rn/weex、flutter。但是具体用它们做了什么呢?

    是整个App用了它们,还是某个页面用了它们?

    一个页面跨平台,和一个应用跨平台,是完全不同的2个概念。

    webview、rn/weex、flutter全部是渲染引擎,webview因为HTML5的发展,还算是多了一些能力比如位置服务、多媒体等。而rn/weex、flutter真的只是一个纯粹的排版引擎,没有任何原生能力。

    如果一个原生应用里,某个不涉及原生能力的界面想跨平台,那么这几个引擎都可以,并且flutter的性能最高。所以能看到一些公司尝试把App中的个别原生交互较少页面使用flutter实现。

    但如果一个完整的应用,想用跨平台工具开发,那就不是排版引擎的范畴了,它需要应用开发引擎。

    什么是跨平台应用开发引擎?不但排版部分要跨平台,开发API也要跨平台。

    应用开发离不开os或三方sdk的能力调用,如果是单纯的排版引擎,一旦涉及os能力和sdk调用,就必须iOS、Android的工程师配合,编写不同的原生代码整合在一起。这就不跨平台了。

    Airbnb曾是React Native 框架的倡导者和开发者代表。但他们于2019年正式发公告,弃用了react native。

    原因是什么?

    很简单,react native并不能提升Airbnb的开发效率,反而降低了他们的效率。

    “本来我们可以只维护Android和iOS两套代码,但现在我们要维护三套(指多了一套react native的js代码),这让我们很疲惫” – aribnb

    开发者选用跨平台开发引擎,本来是为了提高效率、降低成本。Airbnb正是在实践了几年后,发现rn根本无法实现他选用跨平台引擎的初衷时,无奈放弃了rn,用原生开发重写。

    要想真的提升开发效率,降低开发成本,那么跨平台开发引擎,需要提供一个完整的应用开发平台,包含所有常用的应用开发能力的跨平台。在不常用的部分,提供插件市场以及免原生介入的插件使用方式。

    在react native、flutter的社区,也有不少三方提供的原生插件,但是连Airbnb这样的国外开发者对此都不满意。更何况对于很多中国开发者常用的场景,其对应的插件的质量、跨端性都难以商用。

    更麻烦的是如果你不会原生开发,就没法把这些插件与你的前端代码集成起来。

    uni-app,它的设计目标不是跨平台排版引擎,而是跨平台应用开发引擎。

    所以uni-app的排版部分,可以选择小程序强化webview引擎和weex引擎,可根据自己的需求切换。而能力层面,uni-app提供了htmlplus API、Native.js、插件市场,解决了原生能力js化的问题。

    uni-app让开发者真的不用懂原生开发就能做出完整的跨平台应用。遇到极个别的需求,开发者也可以去插件市场找人订做一个原生插件,自己仍然使用js来集成,仍然可以云端直接打包。
    技术学习成本和难度

    rn,要求开发者学习react,要求精通flex布局,要求原生开发协作。

    flutter,要求开发者学习dart,了解dart和flutter的API、要求精通flex布局,要求原生开发协作。

    weex已经内嵌到uni-app中,就不单独提了。

    uni-app,要求开发者学习vue,了解小程序。

    很明显uni-app的学习成本太低了,它没有附加专有技术,全部使用公共技术。

    学习成本和难度,直接意味着:开发成本、招聘成本、上线速度、上线风险。

    另外,dart究竟值不值得学,是一个大问题。

    Google的天才工程师也发明了go语言,它确实有很多理论优势,但实际上市场的主流,仍然是c和c++。
    生态

    任何开发引擎,都离不开生态。

    对于国外的开发者,rn、flutter的生态肯定比uni-app好,比如facebook登陆分享、Google地图等。

    但对于国内的开发者,那是反过来的,中国开发者需要的全端推送(UniPush集成了iOS、华为、小米、OPPO等众多原厂推送)、各种国内登陆、支付、分享SDK、各种国内地图、各种ui库、以及Echart图表等,都是在uni-app体系里,这方面生态可比rn、flutter丰富多了。
    其他端的跨端性

    flutter和rn,都是支持web技术的。但都是仅限于普通界面排版,涉及定位、摄像头、相册什么的,是要单独写代码的。

    另外flutter的H5版,嗯,作为中国开发者,你不会想要一个如此浓郁的Material风格的H5版的。。。

    更何况这个Material ui库大的很,编译出来的H5版要十几M的体积。

    uni-app的H5端是包含完善的能力引擎的,丰富能力都可以直接跨端使用,风格也是跨端风格。uni-app的H5引擎体积只有1百K,gzip后只剩下30k(不含vue、vue rooter),比其他工具的引擎体积要小的多。

    另外,中国离不开小程序,rn、flutter官方都不会支持小程序,由于架构差异太大,国内三方也做不到把rn代码良好的编译为小程序代码。uni-app则可以一套代码,同时编译为iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序。
    结论

    每种技术的诞生,有其背后公司的目的。

    但凡没有明确公司战略的技术,除非是特别简单的技术,否则很难商用,因为为了商用要投入公司非常多资源。

    flutter诞生的目的,是为了Fuchsia OS,是为了在下一个互联网大潮,即万物互联的物联网年代,提供一个类似Android在移动互联网位置的垄断性操作系统。

    因为Google已经很明确不会在下一个时代使用Android+java的路线了。

    至于在Android上去java化,那是Kotlin的使命,与flutter无关。

    跨iOS和Android平台开发,这不是Google的战略目标。

    但万物互联何时到来?Fuchsia OS何时流行?这在现实中是一个问号,在Google内部,也只是战略储备项目。

    一个语言的流行,不是一件简单的事情,不是有优点,就会流行,它需要天时地利人和。

    6年前我们就知道dart比js更好,dart不应该消亡,但想成为主流技术,太难太难了。

    同样我们也知道go比c++更好,但go还是起不来。

    想靠flutter驱动dart流行是不现实的,甚至是反过来的。跨iOS、Android开发在国外不是主流市场,这点价值造就不出一个这么难建的生态。

    所以dart能否流行,是要打一个大大的问号的,它可能会像go语言一样,叫好不叫座。

    写了这么多,最后总结下flutter与uni-app的比较:

    flutter的相对优势:
        性能好一丢丢。比rn有优势,但比拥有bindingx的weex/uni-app,在实际开发中没有很明显的差距。
    flutter的相对劣势:
        需要原生协作,维护3套代码,无法有效降低开发成本,提升开发效率
        嵌套地狱,代码难看难维护
        不支持热更新
        目前质量和成熟度很低,github上的issue有5k+,很容易掉坑里
        原生可视控件融合不好,比如webview、video、map
        ui库不适合国情
        学习成本高
        dart未来扑朔迷离
    

    再总结下rn和uni-app的比较

    rn的相对优势:
        rn的坑虽然比weex的少,但uni-app已经填了weex的很多坑。这方面差别不大。
        rn的生态虽然比weex丰富。但uni-app是反过来的,uni-app的国内应用生态丰富度超过了rn。
        rn的app冷启动比uni-app快。这个问题uni-app已经内部改进完毕,下个版本发布就能解决。
        rn是纯单页的,嵌入原生App比较灵活。而uni-app是应用整体的概念,如果要内嵌入其他原生应用的话,要求原生应用内嵌uni-app应用整体进来
    rn的相对劣势:
        需要原生协作,维护3套代码,无法有效降低开发成本,提升开发效率
        不支持小程序,发布到h5也无法直接发
        ui库不适合国情,learn once,write anywhere
        学习成本高,用人成本高,不利于开发商降低开发成本
        rn是纯单页应用,如果一个应用的页面很多,用rn写会很崩溃,变量污染和干扰严重。而weex/uni-app支持多页面,页面之间上下文隔离,写页面较多的大型应用更合适
        另外react在中国的市场占有率远不如vue。这也是中国与国外不同的特色情况。
        ****************************************优雅的分割线*** **********************************
    

    分享一波:程序员赚外快-必看的巅峰干货

    如果以上内容对你觉得有用,并想获取更多的赚钱方式和免费的技术教程

    请关注微信公众号:HB荷包
    在这里插入图片描述
    一个能让你学习技术和赚钱方法的公众号,持续更新
    *************************************优雅的分割线 **********************************
    SimpleExecutor

    展开全文
  • react nativeuniapp、flutter的比较

    千次阅读 2020-07-03 09:13:42
    1.uni-app、react native 的优劣势分别在哪? 跨平台开发app哪个更好些?
    展开全文
  • uni-app,Taro,react native和flutter的区别

    千次阅读 2021-04-06 08:42:27
    现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到...

    最近开发一个新项目,在考虑技术选型,现有uni-app,Taro,RN,flutter,客观比较一下

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
    uni-app功能框架图可看出,uni-app在跨平台的过程中,不牺牲平台特色,可优雅的调用平台专有能力,真正做到海纳百川、各取所长。本人使用uni-app也有2年了。

    Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

    react native将原生开发的最佳部分与 React 相结合, 致力于成为构建用户界面的顶尖 JavaScript 框架。是一套 UI 框架,默认情况下 React Native 会在 Activity 下加载 JS 文件,然后运行在 JavaScriptCore 中解析 Bundle 文件布局,最终堆叠出一系列的原生控件进行渲染。简单来说就是 通过写 JS 代码配置页面布局,然后 React Native 最终会解析渲染成原生控件,如 标签对应 ViewGroup/UIView , 标签对应 ScrollView/UIScrollView , 标签对应 ImageView/UIImageView 等,让页面的性能能得到进一步的提升。在页面布局上的每一次操作都会通过中间桥链接与原生native双向通信,在编写格式上,在界面开发上延续了 React 的开发风格,支持 scss/sass 、样式代码分离,支持 React Hook 函数式编程。

    Flutter是一款移动应用程序SDK,是一个UI框架,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。
    可以帮助我们:提高开发效率,同一份代码开发iOS和Android,减少代码量,减少开发成本,轻松迭代;创建美观,高度定制的用户体验。Flutter包括一个现代的响应式框架、一个2D渲染引擎Skia、现成的widget和开发工具。这些组件可以帮助您快速地设计、构建、测试和调试应用程序。一切皆为组件widget,开发中一般是通过继承 无状态 StatelessWidget 控件或者 有状态 StatefulWidget 控件 来实现页面。
    总结
    uni-app 容易上手,如果应用比较不复杂,可以选用这个。如果只是单纯的做小程序,选用taro比较好,编程风格我比较喜欢,转化成H5 API要处理一些兼容性问题。uni-app转化Android和iOS性能方面不如RN和flutter,使用手机应用时都要通过专门的渠道调原生native,RN的每次操作都要和原生native通信交互,flutter是自绘UI,速度和性能比RN更接近原生,flutter 使用Dart语言。包体积原生比较,Flutter和RN不相上下(iOS系统需要引入Skia库,最终包体积Flutter会明显大于RN),由于Flutter和RN框架中需要一些C++依赖库,导致包体积比原生大了很多。Flutter要比RN更加流畅一些,体验感更好。总之每个框架都有相应的优缺点,要根据实际业务和开发团队去选型。

    展开全文
  • 我们需要考虑如何集成 SDK 到现有项目,原生页面与 React Native/Flutter 页面如何跳转传值,如何封装原生模块供与 React Native/Flutter 调用,如何打包 React Native/Flutter 与 bundle 集成,如何部署发布,如何...
  • RN、Flutter、Uni-app APP框架对比

    千次阅读 2021-02-20 21:20:55
    RN、Flutter、Uni-app APP框架对比 ...React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两
  • RN和Flutter对比

    2021-01-03 22:36:35
    Flutter组件采用现代响应式框架构建,这是从React中获得的灵感,中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变,组件会重构它的描述(description),...
  • 看了这篇技术路线对比的文章,个人倾向选择iOnic,以应对企业APP应用的开发。 第一、实话,公司养不起那么多的ios... 第三、人们最不愿意选择的是处于中间的解决方法,要么最好的,要么换方案,所以没有react native
  • 原文链接: https://learnreact.design/2018/02/14/react-native-vs-cordova-phone-gap-ionic-etc 喜欢理由: 文笔生动 通俗...
  • 开发ios版本的react native需要mac电脑来编译。 windows下,我建议还是放弃使用react native吧,因为编译react native的代码需要mac电脑。 假如你有mac电脑,你可以使用rn来开发app,假如你没有mac电脑,我建议...
  • Flutter 、Vue、React Native 、Weex哪个好

    千次阅读 2020-03-10 23:43:14
    跨平台项目GSYGithubApp系列三大开源版本比较(Flutter 、React Native 、Weex) vue react angularjs这三个是同一类型,是js框架,框架的目的是简化开发,但是这几个框架都是针对传统网页开发,直接用在移动端一个...
  • react-native-unimodules:核心Unimodule基础结构以及通常由其他Unimodule依赖的Unimodule和接口的集合
  • 开发一个android应用 首先我考虑的其实是uni-app,...首先确保已经安装了node环境,npx react-native init appname就可以直接创建一个rn的初始化项目。(其中npx是npm 5.2.0新加入的东西,npx 会帮你执行依赖包里的二
  • windows下,我建议还是放弃使用react native吧,因为编译react native的代码需要mac电脑。 假如你又mac电脑,你可以使用rn来开发app,假如你没有mac电脑,我建议你还是不要用rn了。 建议你使用hbuilderx,使用...
  • 最近在学习Flutter,看到了一篇关于移动开发跨平台技术的总结,感觉写的不错。在此,记录一下,方便之后查看。...3、React Native、Flutter、Weex框架原理介绍和优缺点比较。 4、PC客户端QT原理简介。 链...
  • 目录 问题描述问题分析Android启动白屏解决方案iOS启动白屏解决方案开源库最后 ...用React Native架构的无论是Android APP还是iOS APP,在启动时都出现白屏现象,时间大概1~3s(根据手机或
  • 跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架百花齐放,颇有一股推倒原生开发者的势头。   为什么我们需要跨平台开发? 本质上,跨平台开发是为了增加...
  • react-native-webrtc之采坑之旅

    千次阅读 2019-11-18 08:59:10
    目标 1、实现APP与WEB端安全帽功能通过摄像头的实时通信,再web端可以查看手机摄像头获取的图像,...1、react-native-webrtc 2、mobx 3、react-navigation-stack 4、native-base 5、babel 6、eslint 7、orion项目里N...
  • React Native 官方文档中文版 React Native React Native Github地址 ReactJs官网 示例代码 先来看看最简单的代码 <!DOCTYPE html><html>     charset="UTF-8" />  <title>Hello React!  ...
  • React Native的尝试 前言: 前端跨平台一直是我感兴趣的地方,有三个前端想了解,一个是web前端用vue+elementUI;一个是手机前端用vue+uniapp;一个是小程序;桌面前端暂时不涉及。 目前看看RN触类旁通;以《大前端...
  • 参考资料:React Native使用百度Echarts显示图表 前言: 1.Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表。 2.Echarts组件是兼容IOS和安卓双平台的。 安装: 在React Native项目中安装...
  • 网上已有成熟的第三方插件react-native-wechat(以下简称RNW),本项目是由该插件源码移植过来的,并在原插件基础上实现导入官方SDK和发送小程序消息的功能。 本项目基于android端移植开发,有兴趣的同学可自行探索...
  • 其他框架: ReactNative 、 Cordova 、Ionic、weex 2.1.1.React Native 如果从成熟度来看,react native 是不二选择。但是,需要维护两套代码,即 iOS,Android 各一套。并且开发调试 iOS 只能使用 Mac 设备。 优势...
  • 感谢captcha 团队的开源支持 附送连接,您对滑块验证有后端,html端,weex,reactnative,android,ios等多端的需求请访问 https://mirror.anji-plus.com/captcha-web/#/ 第一步 下载本人提供的压缩包 解压之后放进...
  • 但是我就是因为漏了这一项,直接进行了第3步,导致项目build时候报错:/node_modules/react-native-unimodules/gradle.groovy is not exist npm install 3、打开项目 打开Android studio,将react-native项目导入,...
  • 最近在自学RN,之前用UniApp写过一个App,看各位大神都说,要想App性能好还是学RN,于是又踏上一条不归路。 查阅资料,根据网上大神的学习资料自己搭建环境。不得不说,有些网友写的博客,自己都不检查一下就来误导...
  • ReactNative生成android平台的bundle文件命令 2016年11月03日 23:23:28 阅读数:4869 注:如果assets文件没有正确生成,需要手机创建或授权 网上的其它的很多都不好用,这个是好用的 进行React ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 428
精华内容 171
关键字:

reactnativeuniapp