精华内容
下载资源
问答
  • Weex React Native的比较

    万次阅读 2017-02-07 16:56:02
    Weex 和 React Native的比较基本概念weex 阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的UI框架 基于JS开发框架 weex基于Vue.js React Native Facebook在2015年3月在...Vue和React的比较Weex和Reac

    Weex 和 React Native的比较


    基本概念

    weex

    • 阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的UI框架
    • 基于JS开发框架
    • weex基于Vue.js

    React Native

    • Facebook在2015年3月在F8开发者大会上开源的跨平台UI框架
    • 基于JS开发框架
    • 基于React.js

    Vue和React的比较


    Weex和React Native的异同

    相同点:

    • CSS属性通用
    • 都使用JS开发
    • 都可以直接在Chrome中调试JS代码
    • 需要Node.js基础环境

    不同点:

    • JS框架
      Weex基于Vue.js , 以下是HelloWorld程序

      <template>
        <div class="container">
          <div class="cell">
            <image class="thumb" src="http://t.cn/RGE3AJt"></image>
            <text class="title">JavaScript</text>
          </div>
        </div>
      </template>
      <style>
        .cell { margin-top: 10; margin-left: 10; flex-direction: row; }
        .thumb { width: 200; height: 200; }
        .title { text-align: center; flex: 1; color: grey; font-size: 50; }
      </style>

      React Native基于React.js,以下是HelloWorld程序

      import React, { Component } from 'react';
      import { AppRegistry, Text } from 'react-native';
      
      class HelloWorldApp extends Component {
        render() {
          return (
            <Text>Hello world!</Text>
          );
        }
      }
      
      AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
    • 社区支持
      Weex开源较晚,网上相关资料还比较少,社区规模较小,网站资源还在建设中;
      React Native社区则比较活跃,可以参考的项目和资料也比较丰富;

    • 开发效率
      Weex工程开发套件weexpack
      Weex在线编码Weex Playground
      ReactNative开发工具Nuclide
      sublime text
      webstorm
      ReactNative在线编码 ReactNative Playground,对于国内用户来说,可能访问很困难。

    Weex简单程序入门

    环境搭建

    1. 安装Node.js,建议下载msi格式,它会自动配置环境变量,而exe需要手动配置
    2. 安装weex-toolkit,命令行输入npm install -g weex-toolkit
    3. 检查weex是否安装成功,命令行输入weex --version

    第一个HelloWorld程序

    在任意目录下新建一个.we文件,例如我的是E:\weex_workspace\tech_list.we
    文件内容为官方示例:

    <template>
      <div class="container" >
        <div class="cell">
           <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
           <text class="title">JavaScript</text>
        </div>
      </div>
    </template>
    
    <style>
      .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb {width: 200; height: 200; }
      .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
    </style>
    

    编辑后保存,在命令窗口下执行weex E:\weex_workspace\tech_list.we
    weex会启动浏览器并且展示出网页,如图所示:

    注意图中红色标注部分,不难看出,weex启动了一个服务,我的目录是C:\Users\wangning\weex_tmp\h5_render,顺着这个目录打开,我们可以看到这样一组文件

    没错,第二个红色标注部分的tech_list.js就是它,打开之后我们可以看到

    红色圈圈的地方就是判断module对象是否有缓存,如果有,则退出当前function,起到了缓存页面的作用。
    重点是最后两个function


    可以看到1是我们之前tech_list.we中的这段代码

    <template>
      <div class="container" >
        <div class="cell">
           <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
           <text class="title">JavaScript</text>
        </div>
      </div>
    </template>

    <template>标签之间的布局元素进行的的解析,按照一定规则,转换成了json数据并赋值给module.exports

    以此类推,2中对应的是tech_list.we中的

    <style>
      .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb {width: 200; height: 200; }
      .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
    </style>

    <style>标签之间将样式按照一定规则转换成了json数据并赋值给module.exports
    只要修改了tech_list.we,与之对应的tech_list.js就会发生相应的变化,
    例如,我们向tech_list.we中多添加几个div元素

    <template>
      <div class="container">
        <div class="cell">
            <image class="thumb" src="http://t.cn/RGE3AJt"></image>
            <text class="title">JavaScript</text>
        </div>
        <div class="cell">
            <image class="thumb" src="http://t.cn/RGE3uo9"></image>
            <text class="title">Java</text>
        </div>
        <div class="cell">
            <image class="thumb" src="http://t.cn/RGE31hq"></image>
            <text class="title">Objective C</text>
        </div>
      </div>
    </template>
    
    <style>
      .cell{ margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb { width: 200; height: 200; }
      .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
    </style>
    

    刷新网页,tech_list.js发生了变化,用文件比较器查看,变为内容如下:

    可以看到,只要<template>标签之间有布局元素变化,weex就会自动修改与之对应的js文件,并将当前布局元素以json数据的形式呈现在与.we对应的.js文件中.
    以此类推,<style><script>标签同理,不再敖述。

    在手机上运行

    接下来,我们将这段代码集成到安卓开发环境
    将已经生成的js文件复制到AndroidStudio的assets目录下

    在模拟器上运行,我们看到

    发现没有显示图片,因为我们没有实现IWXImgLoaderAdaptersetImage方法
    我们使用imageloader加载网络图片,代码如下:

    public class ImageAdapter implements IWXImgLoaderAdapter {
        private static final String TAG = "ImageAdapter";
        @Override
        public void setImage(final String url, final ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
            //实现你自己的图片下载,否则图片无法显示。
            Log.d(TAG, "setImage: url"+url);
            ImageLoader.getInstance().displayImage(url, view, new DisplayImageOptions.Builder()
                    .cacheInMemory(Boolean.TRUE)
                    .imageScaleType(ImageScaleType.EXACTLY)
                    .bitmapConfig(Bitmap.Config.RGB_565).build());
        }
    }

    再次运行,图片就出来了

    Weex中的变量定义和方法定义

    以这段代码为例

    <template>
      <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div>
    </template>
    <script>
      module.exports = {
        data: function () {
          return {w: 750, h: 200}
        },
        methods: {
          update: function (e) {
            this.h += 200
          }
        }
      }
    </script>
    

    data中定义数据,类似于成员变量,methods定义方法,可以把module.exports看做一个类, update方法对成员变量h进行了自增200的运算,{{h}}是Vue.js的数据绑定语法,只要对h的值进行了变更,则会立即生效。

    我们将这段代码在Playground中运行,如下图

    手机顶部有一块红色区域,就是我们<template>标签中的<div>,这个<div>有一个点击事件,onclick="update"点击后会执行update方法,将变量h自增200,由于变量h是在<div>的height的值,因此点击后高度会自增200,若是之前安装了Playground手机程序,可以打开Playound App扫面右侧二维码,在手机上查看实际效果


    ReactNative简单程序入门

    环境搭建

    1. 安装Node.js,建议下载msi格式,它会自动配置环境变量,而exe需要手动配置
    2. 安装Python2
    3. 安装 Yarn、React Native的命令行工具(react-native-cli)
      npm install -g yarn react-native-cli
    4. 安装Android Studio2.0及以上版本

    第一个HelloWorld程序

    命令窗口下执行:

    react-native init AwesomeProject
    cd AwesomeProject
    react-native run-android

    Windows用户请注意,请不要在命令行默认的System32目录中init项目!会有各种权限限制导致不能运行!

    手动运行Packager

    有个常见的问题是在你运行react-native run-android命令后,Packager可能不会自动运行。此时你可以手动启动它:

    cd AwesomeProject
    react-native start

    如果你碰到了ERROR Watcher took too long to load的报错,请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目录下)。

    打开AwesomeProject工程下的index.android.js文件,我们可以看到如下内容:

    我们可以看到<View>标签中包含了三个<Text>标签,分别展示了三条文本内容,需要注意的是,每一个工程必须要有一个render() {}方法,他负责渲染页面,只返回一个直接子节点

    • 正确写法:

      render() {
          return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
            </View>
          );
        }
    • 错误写法:

      render() {
          return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
            </View>
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
            </View>
          );
        }

    在手机上运行

    首先,我们需要用AndroidStudio打开AwesomeProject工程下的android工程
    E:\reactnative_workspace\AwesomeProject\android
    建议先将E:\reactnative_workspace\AwesomeProject\android\gradle\wrapper\gradle-wrapper.properties替换成已有的gradle版本,避免不必要的下载。
    项目构建成功后,请确保packager服务已经打开,若未打开,请cd到工程目录下,执行react-native start,

    如下图所示

    表示packager服务已经启动成功。

    我们运行AwesomeProject,如下图所示

    index.android.js代码中的三个<Text>文本内容就展示出来了

    现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

    • 使用你喜欢的文本编辑器打开index.android.js并随便改上几行
    • 按两下R键,或是用Menu键(通常是F2,在Genymotion模拟器中是⌘+M)打开开发者菜单,然后选择 Reload JS 就可以看到你的最新修改。
    • 在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。

    React Native内置了对ES2015标准的支持,你可以放心使用而无需担心兼容性问题。上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话,可以看看阮一峰老师的书,还有论坛的这篇总结


    总结:作为一个Android程序员到底该选择weex还是ReactNative?

    以上我们分别完成了Weex和ReactNative简单程序的编写,若以现在为时间点,做项目要选择其一,究竟两者该如何选择?

    • 从学习资源上看
      ReactNative更丰富

      Weex相对而言则资料太少

    • 从成功案例上看
      ReactNative有很多成功案例

      而Weex没有

    • 从UI组件上看
      ReactNative更丰富

      Weex相对较少

    • 从学习成本上看
      ReactNative的学习路线:javascript,React.js,ES6,ReactNative
      Weex的学习路线:javascript,Vue.js,ES6,Weex

    最终对比图如下

    对比项 Weex ReactNative
    学习资源
    从成功案例
    UI组件 相对较少 较多
    学习成本 一般 一般
    在线编码 支持 支持
    展开全文
  • Flutter,Weex,React Native Android Native的对比区别

    Flutter,Weex,React Native 和 Android Native的对比区别

    在这里插入图片描述

    展开全文
  • 工作原理 大致基本类同,JS-Native前端渲染框架,只是使用框架技术不一样; Weex 阿里内部早期研发的一个通过JSON数据描述native渲染的项目WeApp以及Vue.js这款优秀的前端开源...React Native: http://w...

    工作原理

    大致基本类同,JS-Native桥和前端渲染框架,只是使用框架技术不一样;

    Weex

    阿里内部早期研发的一个通过 JSON 数据描述 native 渲染的项目WeApp以及Vue.js这款优秀的前端开源MVVM框架和深度结合;
    React Native:
     
      Weex React Native:
    JS引擎 V8 JSCore
    JS开发框架 Vue.JS 组件化,数据绑定 Virtual DOM
    模板就是普通的html,数据绑定使用mustache风格,样式直接使用css
    React  组件化,数据绑定 Virtual DOM
    JSX模板学习使用有一定的成本
    布局 Flexbox的子集 Flexbox的子集
    异步 只支持callback 提供了Promise的支持
    调试 Chrome中调试JS代码,支持预览页面dom节点 Chrome中调试JS代码
    即时预览 都有提供hot reload功能,可以边更改代码,边在手机上看到效果 都有提供hot reload功能,可以边更改代码,边在手机上看到效果
    打包 默认打的js bundle只包含业务js代码,体积小很多,基础js库包含在Weex sdk中 只能将ReactNative基础js库和业务js一起打成一个js bundle,没有提供分包的功能,需要制作分包打包工具
    跨平台 Weex可以支持Android iOS web三个平台 支持Android iOS两个平台,需要自己扩展去支持web,windows和node-webkit的支持正在开发中
     

    综上所述

    由于Weex学习门槛较低,易用性和性能等方面考虑,我们暂时选择Weex为蓝本进行研究学习改造前端页面,框架出来时间还很短,当中可能会遇到各种问题,我们唯有摸着石头过河。

    Weex地址:
    http://alibaba.github.io/weex/index.html

    转载于:https://www.cnblogs.com/valenhua/p/7346682.html

    展开全文
  • 摘要: # 前言 weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。 weex的目标在于抹平各个平台的... 进一步浏览weex和react-native的代码之后,可

    摘要: # 前言 weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。 weex的目标在于抹平各个平台的差异性,从而简化应用开发。而react-native承认了各个平台之间的差异,退而求其次,在语言和框架层面对平台进行抽象,从方法论的角度去解决多平台开发的问题。 进一步浏览weex和react-native的代码之后,可

    前言

    weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。
    weex的目标在于抹平各个平台的差异性,从而简化应用开发。而react-native承认了各个平台之间的差异,退而求其次,在语言和框架层面对平台进行抽象,从方法论的角度去解决多平台开发的问题。

    进一步浏览weex和react-native的代码之后,可以得出如下的公式。

    weex = Vue.js + H5/Native
    react-native = React + Native
    

    总的来说,其差异性如下表格所示。

    dimension weex react-native
    js framework Vue.js React
    principle write once, run anywhere learn once, write anywhere

    个人观点,weex和react-native最核心的区别就是这两个。然而就只这两个维度的同步,导致了weex和react-native完全不一样的发展方向。

    Vue.js vs React

    维度 Vue.js React
    定位 UI框架 UI框架
    目标平台 Web 多平台
    架构 MVVM React
    数据流 数据绑定 单向数据流动
    组件系统
    响应式
    开发语言 html/css/js all in js
    flexbox 支持 支持
    外围框架 能和其他js框架整合使用 能和其他js框架整合使用
    渲染机制 real DOM Virtual DOM
    动画 支持 支持
    级别 轻量级 重量级

    weex vs react-native

    维度 weex react-native
    思想 write once, run anywhere learn once, write anywhere
    试用场景 简单明了 难易双修
    扩展 为了保证各平台的一致性,一次扩展得在各个平台都实现 不同平台可自由扩展
    社区 内测开源 15年3月开源,社区非常活跃
    支持 alibaba支持 facebook支持
    组件丰富程度 基本只有自带的10余种 除了自带的,还有js.coach上社区贡献的,还是比较丰富的
    上手难度 容易 困难
    调式 暂时log调试 有专门的调试工具,chrome调试,较为完善
    IDE 文本编辑器 Nuclide/文本编辑器

    Vue.js

    Vue.js虽然是Evan You个人开发的开源项目,其社区活跃度以及代码质量还是值得一提的。在写此文章之际,Vue.js在Github上的Star达到了21099,Fork达到了2186。虽然相比于react的Star数44108,Fork数7610还有一定距离,但考虑到作为个人开发者能有如此多的人关注参与,该框架的优秀程度恐怕不会低于React。

    Vue.js的文档资料非常齐全,而且其本身的设计非常简洁,因此绝大部分开发者只要花费少量的时间就能快速上手Vue.js。其中VUE.JS: A (RE)INTRODUCTION是 Vue.js的作者Evan You对Vue.js的介绍,非常值得一看。我想这可能也是weex团队选择Vue.js入手的原因之一吧。对Vue.js有兴趣的同学可以移步Vue.js Guide自行学习。

    Vue.js用来构建交互式web界面的,其主要的关注点和React是一样的,都是立足于View层。
    Vue.js最核心的部分是两个Reactive Data Binding以及Composable View Components。还值得特别关注的是,其保留了html、css、js分离的写法,使得现有的前端开发者在开发的时候能保持原有的习惯。

    响应式数据绑定

    Vue.js将界面开发分成了三个部分,分别是View、ViewModel和Model,这种划分在客户端开发看来是非常合理的,也经过了实际的检验。以HelloWorld为例来说明,示例来源Vue.js Guide

    <!-- this is our View -->
    <div id="example-1">
      Hello {{ name }}!
    </div>
    
    <!-- this is our Model -->
    var exampleData = {
      name: 'Vue.js'
    }
    
    <!-- this is our ViewModel -->
    var exampleVM = new Vue({
      el: '#example-1',
      data: exampleData
    })
    

    这就是经典的MVVM模式,Vue.js通过极简的API,将数据和视图绑定在一起,也就是所谓的Data-Binding。
    这样,当数据变化的时候,界面就能变化,实现了数据驱动的响应式变成。

    组件化

    当我们在写网页的时候,本质上就是构造DOM树,DOM树则是由div、span等元素组成的。div、span这样的元素是构建大型应用的基础。其实Vue.js或者其他的UI框架基本也是一样的,他们都会提供自己的组件系统。这些组件就类似div元素,一般具有一下特征:

    • 小巧精致
    • 能重用
    • 自包含,高内聚

    当我们使用Vue.js开发应用的时候,就是搭建特定的组件树。这些组件可以是Vue.js定义的,也可以是开发者自己定义的,这非常重要。

    看个组件化的例子。

    // example组件定义
    var Example = Vue.extend({
      template: '<div>{{ message }}</div>',
      data: function () {
        return {
          message: 'Hello Vue.js!'
        }
      }
    })
    
    // register it with the tag <example>
    Vue.component('example', Example)
    
    // example组件使用
    <example></example>
    

    组件间数据传递

    Vue.js的组件都是有自己独立的scope的,因此子组件是不能直接访问到父组件的数据的。数据一般都是通过props来传递的,示例说明。

    // define component
    Vue.component('child', {
      // declare the props
      props: ['msg'],
      // the prop can be used inside templates, and will also
      // be set as `this.msg`
      template: '<span>{{ msg }}</span>'
    })
    
    // usage
    <child msg="hello!"></child>
    

    上述方式只能实现组件树从上往下传递数据,在Vue.js中,会有大量的场景需要子组件向父组件传输数据,甚至兄弟组件之间传递数据,一般这种时候就需要使用以下几种能力。

    • 子组件获取父组件的能力(this.$parent
    • 自定义事件的能力 ($on, $emit, $dispatch, $broadcast)

    想要了解详情,请移步Parent-Child Communication

    样式、逻辑和界面的分离

    前端开发经过这么多年的发展,html、css和js的分开编写应当是顺理成章的,Vue.js没有打破这个规则,通过 style 、 template 、 script 将样式、视图和数据逻辑进行了分离。详见下面示例,来源于VUE.JS: A (RE)INTRODUCTION

    <!-- css -->
    <style>
    .message {
      color: red;
    }
    </style>
    
    <!-- template -->
    <template>
      <div class="message">{{ message }}</div>
    </template>
    
    <!-- js -->
    <script>
    export default {
      props: ['message'],
      created() {
        console.log('MyComponent created!')
      }
    }
    </script>
    

    React

    React可能是现在前端开发中最炙手可热的UI框架了。在React的首页最明显的位置上展示者关于React的最核心的三个思想,它们分别是:

    • Declarative(声明式)
    • Component-Based(组件化)
    • Learn Once, Write AnyWhere(一学多写)

    声明式

    React和Vue.js的组件的使用都是声明式的,声明式的编写方式会比命令式的编写更加的直观。关于声明式和命令式的区别,可以参考Declarative programmingImperative programming,这里就不加详述了。

    组件化

    诚然React和Vue.js在编写大型程序的时候都是构建一颗组件树,但React和Vue.js的组件却有着不小的差异。先来看一个React组件的示例(来源React官网)。

    var HelloMessage = React.createClass({
      render: function() {
        return <div style={divStyle}>Hello {this.props.name}</div>;
      }
    
      // style
      var divStyle = {
        color: 'white',
        backgroundImage: 'url(' + imgUrl + ')',
        WebkitTransition: 'all', // note the capital 'W' here
        msTransition: 'all' // 'ms' is the only lowercase vendor prefix
      };
    });
    
    ReactDOM.render(<HelloMessage name="John" />, mountNode);
    

    在React中,一切都是js,视图、逻辑和样式都是通过js来写的。通过js来统一颠覆了html、css和js分离的原则,当然是褒贬不一了。在Vue.js中,分离带来了清晰度,逻辑、视图、样式和数据可以分别处理,但在React中,一切都需要重新组织,甚至需要新的配套框架和设计模式,比如新的语言JSX就是用来简化js带来的麻烦的。但all in js让很多事情变得简单,js的快速发展也让React脱离了css和html发展限制,可以实现更多的可能性,优化、扩展以及其他很多事情,就只要单纯考虑js就可以了,而不必收到css和html的限制。

    当然,这样带来的后果就是学习曲线的陡然增加,React甚至带来了新的JSX语法,同时考虑到React全新的React思想,开发者想要开发生产环境的app,尤其是在将现有app用React重写的时候,成本是要比Vue.js高出不止一个数量级的。

    组件间数据传递

    React推崇的是单向数据流动,也就是说,数据最好是从组件树的顶端往叶子节点流动,尽量少的出现反向流动的情况。
    用另外一种方式来说,React希望实现的immutable data,数据的不变性。只读的数据能给我们带来非常多的好处,并发、简化逻辑、数据统一管理等等。

    React提供了props和state两种数据类型,props是实现数据从父组件往子组件传递的机制,而state则是提供了一种机制来实现组件的自更新,facebook是建议尽量少用该特性,因为其违反了immutable data和单向数据流动的设定。

    因为React的数据设定让其数据管理成为一个问题,业界出现了一些解决方案,其中最为著名的应该就是redux/flux了,有兴趣的同学可以上github搜搜,都是开源的。

    一学多写

    React背后是强大的facebook在开发维护,其目的不是要简单的创建一种新的js的UI框架,相反,其想要让React成为平台无感知的UI开发思想。什么意思呢?就是本节要说的learn once,write anywhere。facebook认为每个平台不可能完全一样,Web、Android、iOS、Windows Phone甚至Xbox,以及未来会出现的各种平台,他们都会有自己的发展理念和发展路劲,不可能做到完全一样,但不管平台如何变化,基于平台之上,创建Virtual DOM,React通过控制Virtual DOM来实现界面变化。
    也就是说Virtual DOM相当于是一个中间层,隔离平台的差异,从而实现统一的开发方式。

    不敢说这样的想法一定能成功,但就现在的发展势头来看,机会还是非常大的。尤其对于开发者来说极具吸引力,如果这一想法成为现实,以后React就可能像DOM一样成为业界统一的标准。那对于iOS开发者来说,在Android上面开发会跟在iOS上开发一样,不需要学习全新的Java语言,Android系统,更不要说各种Java特有的艰深复杂的工具了。

    Native

    个人感觉weex和react-native最大的不同是在Vue.js和React层面。这一点在react-native的命名上就非常容易看出来。在react-native刚出来的时候,其和React的关系是react-native依赖React。

    "dependencies": {
      "react": "~14.0.0"
    }
    

    而现在react-native和react则是同级别的。

    "peerDependencies": {
      "react": "~15.1.0"
    }
    

    react-native中最重要的文件名字也是Library,主要提供了一系列Native的能力。

    查看weex的源码,native部分的作用几乎是一样的,主要就是提供了一些列Native的组件,以及其他的一些能力。

    这也就是为什么本文将两者的Native合为一谈的原因,他们的本质是差不多的。

    • 提供了js和native交互的桥梁Bridge
    • 提供了一系列组件
    • 提供了flexbox布局支持
    • 提供了事件支持
    • ……

    当然,因为weex和react-native的设计思想的差异,在native部分也存在差异,但我觉得这是因为js需要导致的,仅就native而言,两者并没有特别大的不一样。

    也许在不远的将来,native部分会出来一个比较核心的框架,抽象出在构建App时js和native交互所需要的基本能力,同时提供扩展方式,让各种类似react-native\weex这样的框架可以专注于js层的设计。也许react-native就走在这条路上,谁知道呢?

    展望

    动态化的世界越来越精彩,对于weex和react-native的了解才刚刚入门,需要更多实操经验来深刻体会到两者的博大精深。weex和react-native各有千秋,开源的魅力也正是在此。

    展开全文
  • 目前主流的应用大体分成三类:Native App, Web App, Hybrid App. Native App 特点: 性能好 完美的用户体验 开发成本高,无法跨平台 升级困难 (审核), 维护成本高 Web App 特点: 开发成本低, ...
  • weex vs react-native

    2016-07-25 15:30:40
    前言 weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。weex的目标在于抹平各个平台的差异性,从而简化应用开发。...进一步浏览weex和react...
  • 最近在给项目做技术选型,引进weex还是reactnative。...weex和reactnative的优缺点,原理等,这里也不提。预研到了一定阶段,会需要对两个使用不同技术的demo进行优化,因为要内部进行技术评审。这时就...
  • 传统的原生Android、iOS开发面临着诸多难以解决的问题,例如开发周期长、迭代...从早期的PhoneGap、Inoic等Hybrid混合技术,到现在耳熟能详的React NativeWEEX和Flutter等跨平台技术,借助这些优秀的跨平台开发框...
  • 目前主流的应用大体分成三类:Native App, Web App, Hybrid App. 三大主流的应用 Native App特点: 性能好完美的用户体验开发成本高,无法跨平台升级困难(审核),维护成本高 Web App特点: 开发成本低,更新快,...
  • React Native和Weex

    千次阅读 2018-03-09 10:59:51
    跨平台:RN支持androidIOS,Weex支持android/IOSweb三个平台。 Weex支持的平台比RN多一种,但是当真正开始写demo的时候却发现,移动端(android/ios)web端(PC browser)的界面布局有很大...
  • https://blog.csdn.net/johnWcheung/article/details/82872323
  • 工作原理: 大致基本类同,JS-Native前端渲染框架,只是使用框架技术不一样; Weex 阿里内部早期研发的一个通过JSON数据描述native渲染的项目WeApp以及Vue.js这款优秀的前端开源...React Native: http:/...

空空如也

空空如也

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

nativeweex和react