Weex 和 React Native的比较

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目录下

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

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

环境搭建

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组件	相对较少	较多
学习成本	一般	一般
在线编码	支持	支持