Weex 和 React Native的比较

Weex 和 React Native的比较基本概念weex阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的UI框架基于JS开发框架weex基于Vue.jsReact NativeFacebook在2015年3月在F8开发者大会上开源的跨平台UI框架基于JS开发框架基于React.jsVue和React的比较Weex和Reac

王宁billjoy

13807人浏览 · 2017-02-07 16:56:02

王宁billjoy · 2017-02-07 16:56:02 发布

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简单程序入门

环境搭建

安装Node.js,建议下载msi格式，它会自动配置环境变量,而exe需要手动配置
安装weex-toolkit,命令行输入npm install -g weex-toolkit
检查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目录下

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

发现没有显示图片，因为我们没有实现IWXImgLoaderAdapter的setImage方法
我们使用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简单程序入门

环境搭建

安装Node.js,建议下载msi格式，它会自动配置环境变量,而exe需要手动配置
安装Python2
安装 Yarn、React Native的命令行工具（react-native-cli）
npm install -g yarn react-native-cli
安装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组件	相对较少	较多
学习成本	一般	一般
在线编码	支持	支持

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^